A ‘classic’ desktop screen has a very powerful metaphor we all know and use: a sheet of paper. If you grab a sheet and look at it at landscape orientation (that is: holding the long side of the paper horizontally), you can probably easily imagine the paper being an empty computer screen.

So it’s no surprise that designers have long been using paper (or its digital counterpart with a little more artistic name – canvas) to create graphical user interfaces which can be copied to the screen in a pixel-perfect fashion. These ‘A4-based’ designs are usually fixed in every way: on a small screen the design is too small to use comfortably or it doesn’t fit the browser’s viewport very well. On a big screen there is a lot of useless space surrounding the design; white space that could otherwise have been used to inspire, inform or to convince the user.

But the end of A4-based, fixed designs is near and responsive design will take over. Responsive design delivers web pages which (more or less intelligently) respond to the possibilities and constraints any arbitrary screen size offers. This means that the available screen ‘real estate’ will be used as optimally as possible. On a small screen it will show information in clear, relatively focused blocks and on big screens information will be presented in a more interconnected way with more room for visual communication. Every screen size and screen height/width ratio will display the user interface in a somewhat different way.

With responsive design the sheet of paper is no longer a suitable metaphor for a screen because there is no (single) screen any more: there is a multitude of dissimilar screens.

Now what? With designs on a fixed, digital canvas or on physical, contemporary papyrus it’s hard to foresee how a page design will look on mobile phones, on tablets or TVs, or anything else that has a screen and an internet connection.

This disqualifies the sheet of paper as a starting point of the user interface design process. Content should be the starting point. Content in a broad sense: not just copy, but also information architecture, content formats, message and media.

Before user interface designs are made there should be some serious thinking about what kind of content (e.g. factual, inspiring, persuasive, reassuring, motivational content) should be offered, in which structure, formats, narrative and via which media mix (e.g. text, info-graphics, video, graphs, tables, images).

In short: content first and please: don’t start designing the user interface until the content is clear. Content first, then the representation of the content, not the other way around.

But how should content be turned into a user interface design, you might ask. The answer is not so obvious since there won’t be a single, fixed interface as we used to design for the desktop.

In my opinion the best approach is to start sketching (paper still comes in handy) the components you are planning to use. These components can either be content components (e.g. a hero image, a USP block, user reviews, a video, inspiring text) or interactive components (e.g. a form, a slider, a sub-process (lightbox), an interactive graph).

A component can be thought of as the smallest indivisible piece of content or interaction possible. For example: a login functionality that asks the user for his/her username and password and also offers contextual help and a link to retrieve a forgotten password can be seen as a component, since the functionality of that component cannot be divided into smaller parts without sacrificing usability. Placing the link to retrieve a lost password into another component detaches the link from its meaningful context and thus makes it harder for the user to find it and to understand its function.

When the content components and interactive components have been identified and sketched in coherence and logical order on paper (without being hampered by screen sizes or viewport sizes, these are not important at this stage), then the components should also get a relative importance rating. Some components can be rated as ‘core functionality’, some as ‘additional functionality’ and some may even get the rating ‘optional’.

Now that we have defined our content components and interactive components, placed them in a sensible order and attached relative importance to them, we now can start sketching a user interface by placing the components in a (representation of a) browser screen. In other words, we now start prototyping. This can either be done with pencil and (there it is again) paper, with software like Axure, or in HTML. As a rule of thumb: the less sure about the final form of the solution, the less effort should go into the creation of the designs. Rather use the team’s effort to do research, and to engage in creative thinking. That yields more than putting precious time and effort in creating ‘realistic’ designs.

When starting to design the user interface, it’s best to start designing for small screens (phone) because the restrictions a small touch screen imposes, forces the design team to make very deliberate choices and to focus on the essence. Scaling up to bigger screens is easier than starting to design for a big (desktop) screen and then trying to fit it all on a phone screen. 

Let me finish with two phrases I made up about ‘content first’ and ‘mobile first’:

Mobile first: “Building on a solid foundation is easier than reducing a carefully crafted design”.

Content first: “You need a story to start a dialogue”.(read: content design comes before interaction design)

Do you have (better) suggestions for the phrases above or do you have remarks or questions about the article? Please let me know via a comment or via Twitter @richardvk.