This month’s Double Click brings you sites structured by ranks and files

Using vertical or horizontal blocks to organise information certainly isn’t new in web design. It’s surely one of the most straightforward ways to divide up a page and direct a reader’s attention. But sometimes it’s worth challenging classical structures to see what else they can offer! We went ahead and found sites that take a deeper look at the humble division.

From a reflection on the structure of CSS to sites that mimic file cabinets, we’re focusing on sites that use ranks and files in inventive ways for this month’s rendition of Double Click. Enjoy!

Tiger Dingsun: tdingsun.github.io/reading-machines

Tiger Dingsun, a designer and front-end developer who recently graduated from the Brown-RISD dual degree programme, created Reading Machines as a reflection on the web as a publishing medium. Tiger takes a meta-approach to building Reading Machines, dubbed “a publishing platform for non-teleological reading.” The text in each article does not live independently from its code, becoming an important interactive element itself. Using the design concept of affordances, the idea of allowable actions and gestures that are expressed through the properties of objects, Tiger uses this format as a way to encourage readers to interpret the text in a non-linear fashion.

“Because this project engages more directly with the idea of using the web as a medium for publishing, I really wanted the websites to have certain characteristics that felt suggested by the structure and language of CSS itself,” Tiger tells It’s Nice That. “For example, I really like using only named CSS colours, like cornflower blue, cornsilk, thistle, dark slate grey or khaki. And I also really liked the way that div elements naturally flow from top to bottom, left to right and the actual formal qualities that arise from using things like float-left and float-right CSS properties.”

Tiger’s design alludes to the agency of machines, especially in the generative functions that affect how the page eventually presents itself to the user. “Much of the websites have a generative aspect to them, so I tend to think of it as me setting parameters and behaviours, so part of the process is definitely leaving some decisions to the browser itself,” Tiger says.

Tiger reflects on the effect of a text on the reader and its relation to the aesthetic qualities of the website. “My advice to myself would be to restrain myself from immediately jumping into the code, and to spend more time reading or looking at poetry and experimental fiction for inspiration. And really try to think through: What effect is this text having on me? If this text was a website, how would I want it to look and behave?” Tiger asks. “The effect that reading poetry has on the reader is somewhat inarticulable; somehow the whole is more than the sum of its parts. I’d love to recreate that effect with websites with a bit more intentionality so that the aesthetic quality and the functionality of the site combine to produce effects that go beyond code and linguistics. But working based on instincts is also useful sometimes and definitely should not be discounted.”

Tiger’s top tips:

1. “Spend more time structuring your data and content so that it’s easier to reference in the code.”
2. “When developing, always look at your website from many different screen sizes.”
3. “Be playful! Take inspiration from the analogue world.”

Laura Piccolo: piccolora.fr

On her portfolio site, Berlin-based web designer and programmer Laura Piccolo segments her past work using vertical dividers that expand when clicked. Hovering over each block will turn an interpunct green. “I always try to make my websites as minimalistic as possible in terms of interaction and navigation. In this case, it was quite easy because I was working with some homogeneous material,” Laura tells It’s Nice That. Since her work covers a range of aesthetic styles, varying greatly in colour between different projects, Laura chose light and simple tones for the site itself in order to keep the focus on the content.

“I wanted to give the user access to all the content from the first page, without having to scroll too much or open new pages and I thought of archive systems aesthetics, with the idea of digging into what you find interesting,” she says on how information on the site is organised. “This is more specific to designing your own portfolio, but don’t underestimate the amount of work it is going to be to gather your material. It is always a bit disappointing to have the website ready but still have a whole other step to go through. It can be discouraging.”

Laura’s top tips:

1. “Take advantage of different mediums. Think of them as opportunities to have different features and don’t just try to make the desktop version fit into the mobile version. It can be irritating to start the process again once you come up with a nice desktop version, but a little extra time spent on it will definitely make the user experience smoother.”
2. “Less is more. Keep the navigation and interactions simple. The more thinking you do on the side to try to figure out the structure, the less the users will have to do it themselves.”
3. “Seize every chance you have to make your website unusual. I know it’s not always easy to combine that with the client’s needs. I think, as a designer and even more as a programmer, you can sometimes get stuck in your comfort zone and repeat ideas you’ve already explored. However, if you make something you are excited about, users will most likely get excited about it too.”

Massimiliano Audretsch: audretsch.it

Bern-based designer Massimiliano Audretsch’s site stretches rounded trapeziums across the page, each block containing a previous project of his. The blocks come in a range of colours and the font for each project title changes when your mouse hovers over them. “When starting out on this website I made it a point of keeping the mechanics as simple as possible. As it’s my portfolio site I wanted it to be instinctively navigable,” Massimiliano says. Part of ensuring that his website was easy to use meant running what effectively was usability testing with people close to him. “I was imagining different use case situations, like for instance being asked to show someone a specific project on my phone. I went on testing a variety of functions and displaying methods when meeting friends and colleagues, asking people to navigate my site and observing their interaction.”

The site was designed to mimic the function of a flat file cabinet, each trapezium representing a drawer whose colour was taken from the project that it contains. “It should feel like visiting my professional archive,” he says. “While reviewing my work for the website, I noticed that it has become a personal habit to draw a typeface or lettering for every project. The very individual bespoke types became a common denominator connecting my projects, differing enough from one another to function as a preview into the scope of my visual output.”

He designed the mobile site before moving on to the desktop version, composing each version slightly differently. “While mobile offers a quick and easy insight, the desktop version addresses a more patient user who is more willing to read. Both versions share the same colourful dropdown and are preceded by the splash screen quickly introducing the very basic information,” he says. “The web version features extensive information while the mobile adaption holds a reduced, more to the point approach by offering a pragmatic ‘contact’ button next to the projects.”

Massimiliano’s top tips:

1. “Be dramaturgic. Create a narrative and think of the sequence of how the information you want to convey is accessed. Always put yourself into the position of a ‘first user.’ How will they feel, navigate and interpret your website?”
2. “Consider movement. Be true to the medium and try to avoid static moments if possible. It is good if things are happening and moving around.”
3. “Think of interaction. How will it feel when you click this button? How will the transition from one state to another look?”

White Russian Studio: slavakirilenko.com

Type designer Slava Kirilenko’s website is purely text-based, showcasing how his typefaces work together in harmony. The home page describes Slava’s work and background, each clause set in the various typefaces that Slava has designed. Hovering over each phrase turns the mouse into an I-beam pointer and highlights the segment blue. Though this interaction looks innocent at first, this feature actually serves a different and specific function. The mouse change prompts the site’s visitors to enter their own text in each section. In short, the entire homepage was designed to be a page-long font tester.

Ruslan Morozov, one of the site’s designers, gives us an insight into the thinking behind the site: “Slava Kirilenko is a famous Russian type designer, and he has commissioned us to make him a website. There were not supposed to be any pictures or any visual context provided — just the text,” Ruslan says. “So we have decided to combine the ‘About’ page with Slava’s portfolio. Our principles are very simple — the maximum utility with brutal, even bizarre elements. The control panel is fixed and everything important fits the viewport to simplify the navigation as a whole.”

Ruslan’s top tips:

1. “Take more time for the details.”
2. “80 per cent thinking, 20 per cent designing.”
3. “When designing a website in Cyrillic, try to listen to Russian horror-punk music.” (Ruslan suggests Зловещие мертвецы by Sektor Gaza)

N-E: omotesando.eu

For directing duo Omotesando, the Madrid-based studio N-E designed a flickering and hyperactive website that captures the duo’s work. Typefaces flash upon opening the site and clips of their work pop up across your screen as your mouse hovers over one of the columns, each one taking up the entire page.

“At the compositional level, verticality is the axis and the main resource,” says N-E’s Anna Ponsa. “This verticality helps us, among other things, to divide the web into sections with individual scrolling where the work process is explained, from the references to the final result.” The immediate visual impact that the website gives the reader was particularly important for the studio. They wanted to give a strong first impression, reflected in the attention-grabbing interactions that animate without the user’s prompt.

Upon reflecting on this project, Anna says that using moving typefaces requires a little more work than they expected. “We would not give up anything from this identity but you always learn things for future projects. On a practical level, it is important to bear in mind that proposing a moving typeface requires a longer and more detailed work process, both in design and development. However, it is worth the effort,” she says.

N-E’s top tip:

“What we really value are ideas. It is essential that behind each project there is a concept that justifies the graphic decisions we make. No matter the assignment, the important thing is to have a solid foundation on which to build a website, an identity, a publication. It is part of our work philosophy.”

Wix Playground supports young creatives by offering education and networking opportunities, inspirational content, and curated events. Our mission is to share our extensive web design knowledge and experience with the next generation of designers, giving them the tools and skills they need to start building their careers.