Published on | Prototyping: From UX to Front End — Medium UX Boot Camp

#30dayUXchallenge [Day 23]

It’s day 23 of the #30dayUXchallenge and I don’t know you, but I am loving the days we jump into action and talk about design theories that help us designing for web ❤.

We talked about how different levels of fidelity help us to achieve different outcomes. We also talked about how patterns, Gestalt and interaction design can help us designing for web. So today we will cover how to move from middle to high-fidelity — and what we need to watch out while doing so.

Get a comfy chair because today’s post will get nerdy! 🤓

First things first:

1. What do we need to cover?

Let’s assume that at this stage we got our flow tested, our navigation is smooth and the copy was finally approved. Which colours should be applied? How do we make the typography on the screens actually pleasant to read? How to use spacing in our favour?

So a little bit of theory never hurts:

Colour theory

Each colour we apply to our designs will provoke a different feeling. Warm colors, such as red, orange and yellow tend to make users more alert — while cooler ones, such as green, blue and purple, tend to be more calming and relaxing.

A few examples of key elements in web design that are highly impacted by our choice of colours are: hyperlinks, graphics, navigation, buttons, accessibility, readability, etc. It’s big and we should give it the importance it deserves ❤️.

Satyendra Singh determined that it takes a mere 90 seconds for a customer to form an opinion about a product. And, 62–90% of that interaction is determined by the color of the product alone.

Other studies revealed that women and men have difference preferences regarding their favourite and not-so-favourite colours. You can see it on the graph below:

Image from: https://blog.kissmetrics.com/how-colors-affect-conversions/

The Color Tool from Google Material design helps us create and apply color palettes to our UI, as well as measure their accessibility. Here goes their guideline to colour picking:

We should start by defining which colour will be our primary colour, and which one will be the secondary colour. A primary color is the color displayed most frequently across your app’s screens and components. A secondary color can be complementary or analogous to your primary color, but it should not simply be a light or dark variation of your primary color. It should contrast with elements that surround it and be applied sparingly as an accent.

Secondary colors are best used for:

Buttons, floating action buttons, and button text
Text fields, cursors, and text selection
Progress bars
Selection controls, buttons, and sliders
Links
Headlines

Using a secondary color is optional. It’s not necessary if you use variations of your primary color to accent elements.

White is peace. We all know that — but beyond it, white space is key in web design. We cover it in more detail below! But it’s important to also highlight that white stands out on the screen — which is probably why so many “cards” are white boxes applied over grey backgrounds:

Credits to Tomas Gajar

Some basic techniques to to mix and match colour are:

Complementary Colours. Source: Tigercolor

Complementary
Complementary colours are the opposite colours on the colour wheel.
It is usually very vibrant and works when we need to make elements stand out. However, needs to be well managed as it can easily get jarring.

Analogous Colours. Source: Tigercolor

Analogous
Analogous colours the siblings on the colour wheel 🙂

They are usually a safer-choice, as it tends to be very harmonious.
We usually pick one to be the primary (dominant) colour, a secondary one and a tertiary colour to work as an accent.

Triad colours. Source: Tigercolor

Triad
Triad colours, are you can see on the image, are evenly spaced around the wheel. It is usually super vibrant, so we tend to pick one as the primary and two as secondaries colour to avoid making it jarring as well.

You can find more techniques here. However, on this article for Smashing Magazine, Laura Elizabeth also talks about how to choose a starting colour without sticking to the “theories”. The choice for primary colours should also be a well balanced analysis of our products’ branding and our target audience. She also mentions we should avoid stereotyping our users: at the end of the day, everyone is tired of cliches, right? So pink for teenagers may not be the best choice. Here goes my favourite tip from her article:

“If you’re struggling, write down any words that you associate with the client’s business. This list should give you some ideas for colours. If you’re really struggling, hop on any website about colour meanings and see which fits best.”

Typography

Microsoft’s research showed that typography doesn’t improve comprehension, but it does increase engagement. Basically, quoting Richard Rutter — who I was lucky enough to see in the Web Directions Summit in Sydney this year, good typography induces a good mood!

In 2006 Oliver Reichenstein wrote that 90% of web design is typography. Why don’t we have better reading experiences? Why does the web have such a same-ness to its typography?

Ever wondered why Medium is so easy to read (and to write) while other websites can just feel tiring and disengaging? Aspects such as font-families, font-sizes, line spacing and layout are definitely part of the success. Well, the words count too, but when designing for the web, legibility and readability could be compromised fairly easily.

The length of our lines play a big role in the game! A shorter line, for example, tends to be easier to read than a longer one. 50–80 characters per line should be a good balance. Unless you want your reader to move their head to read every line of your text? 😬.

Leading, kerning and tracking can affect how type performs on the page:

Source: Bbranded.com

The leading (line distance) should help our eyes to easily flow into the second line. If the line spacing is too narrow or too big, it might get hard to read. One good reference to use is the font-height itself. Look at the example with this own chunk of text on Medium:

One of the most important considerations is also the text alignment: for Western products, for examples, it’s proven that left alignment works best as the starting points of lines of text helps guiding the eyes. Right and centring alignment should be avoided for reasons of readability. Justified text could also prejudice readability as the space between words could get too wide and distracting (and looks ugly anyway :P). Also forced justification unless you have 100% control of your text, which we shouldn’t, if our designs are responsive.

We should also be careful with windows, orphans and rags: A widow is a short word or line at the end of a paragraph which appears by itself at the end of a page or column, separated from the rest of the text. An orphan, on the other hand, is a short word or line that is left dangling at the beginning of the following page or column, separated from the rest of the text. Rags are the “holes” on the right side of the text. We don’t always have control over these three aspects when designing for web, but it’s good to keep them in mind:

Source: Bbranded.com

We should also watch out for accessibility and readability while defining the font colours. Such as a beautiful, but light green applied on a small font-size will not only be really hard to read, but also not accessible.

Layout-wise, typography can help us setting the visual hierarchy and flow of our screens. Columns of text, for example, help defining a structured layout. Play around with how your body-size flows on two, three of four-column grids for example.

The density of the text also matters. The text colour, the font weight and line spacing also help defining the “tone” of our copy. A bolder text, for example, can be harder to read than a lighter one — but usually works quite well as a title.

The appearance of our font sizes will change depending on the screen resolution of our user. A good practice is to adjust type size according to reading distance. Desktops are read from further away than phones. The further the user is from the device, the larger the text needs to be.

Uppercase requires much more attention and conscious from readers than lower-case letters — but it also changes the tone of voice. If I accidentally use capital letters, YOU WILL PROBABLY WONDERING WHY I AM SHOUTING. But I am in a really good mood today, so I will just stop 😂.

I was almost finishing this post when I realised I didn’t cover the choice of the typeface itself. As different fonts evoke different emotions, it’s important to pick based on our product’s branding and needs. For large chunks of text, for example, a serif typeface should be easier to read. If you need some inspiration to get started, check out this article.

Quoting Beatrice Ward:

Typography is the ‘clothes that words wear’. So what will your copy feel like?

If you want to check out even more details about how to nail typography for web, check out this cheat sheet prepared by Typewolf.com

Spacing

Source: Leapleap.com

Negative space is a hot topic in the art industry, but if you are not familiar with the concept, it is the empty area, or white space, that helps driving attention to an specific point — the accent.

White space is an important consideration for our designs. It not only draws attention, but also provides breathing space, clarify relationships by separating areas and groups of information and can also give our screens a touch of sophistication if well applied ❤.

On the other hand, a lack of white space can be overwhelming, stressful, confusing and give the impression of low quality/poverty.

Keep in mind that “white spaces” don’t necessarily need to be white. Empty spaces in any other colour are also called white spaces.

White spaces can be related to:

Text: Spacing between lines and letters.
Visual: the space surrounding graphics
Layout: margins, paddings, gutters.
Content: the space separating columns of text.

Ok. We got the idea right?

2. What’s the best way to deliver all these outcomes to our development team?

We talked about working with our development teams and not working for them before, right? That means that “delivering” screens are no longer the best way to go. It’s important to pair with our development team to make sure nothing gets lost in translation.

We also mentioned the high-fidelity screens should never be the first time our teams see our concepts. As a product-team we should ideate together, we should review together and we should deliver together. Therefore, our “hi-fi’s” will only consolidate all the knowledge the team should already have and make sure we are covering everything.

Overall, our “deliverables” then should include:

Different states
What happens when there are error messages? What are the errors? Are there different types of users? Do they see the same thing?
Overview of the entire user flow / sitemap
Where exactly each link should send the user to? How will the navigation work?
Specs
Margins, Paddings, #colours & font-sizes can be easily generated by Invision or plugins for Sketch App nowadays. There is no need waste hours of work to generate huge guides anymore. The key is to ensure our developers do have access to it and don’t need to ask us “what is the font size?” all the time.
Interaction Notes
Summarise all the “different states” and observations and attach them to each one of these screens — it’s always a way to ensure details won’t get lost. That can be done by simply adding a white space for notes beside the screen itself, or in a Trello Card that screen is being worked on, for example. It’s really up to whatever works better for you

<a href="https://medium.com/media/8d5e2c740a04faf463af9accfa7e3c31/href">https://medium.com/media/8d5e2c740a04faf463af9accfa7e3c31/href</a>Gabi Braga — UX Designer at Envato Elements, freelancer at Toptal & beer enthusiast in her spare time

This post is part of the #30dayUXchallenge: you can read more about why we started it here, and don’t forget to follow us on Twitter and Instagram!

From wireframe to high-fidelity. Colours, Typography, Spacing & deliverables. was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

From wireframe to high-fidelity. Colours, Typography, Spacing & deliverables.

Cool stuff, every week

More Articles