Spaceguide

Design • The Whitespace Design Process

Phase 4 – Design

In this phase we establish the design system. Focus lies on creating a solid base that can grow as further development is needed.

Put more energy towards principles and values (a design language) that can carry the design work forward than to try and create pixel perfect views for the specific project you’re working on. Instead, create a styleguide of components, based on a solid base of well thought out tonality, typography, colors and a layout system.

The design you are creating is not a collection of JPEG’s, it’s a system with long term goals and ideas. Document these ideas in an easily accessed manner (preferably in Spacecraft if there’s not already another, dedicated, styleguide).

Sketch Workflow

Check out [Sketch Workflow](/docs/design/sketch-workflow) when you're ready to get started. There we'll get into how you should set up your project. Structure, naming, templates, symbols – all that fun stuff.

Do's and don'ts

  • Set in place a solid and thought-out base of tonality, typography, colors and layout first.
  • Avoid "pixel perfect" and put the least amount of effort on unnecessary details. They will change.
  • If you design a card component, make it work in any context. If you draw or choose an icon, do it according to the established design language.
  • Less is more: It seems that perfection is attained not when there is nothing more to add, but when there is nothing more to remove.
    — Antoine de Saint Exupéry

Design language / Tonality

This is where you take the project goals, design principles and values and refine them into a design language. How should the project/client look and feel? What should they communicate? How do we communicate these things? What values or principles are prioritized over others?

The design language is the base for everything that has to do with “look and feel”. Things like typography, iconography, colors, spacing, etc. All of it will in one way or another help communicate the brand.

Typography

  1. Choose your typeface. If you don’t already have a suitable typeface assigned for you to use, look for one that fits both the tonality and works well on the web, on various devices and screens. Use 1, no more than 2. A good starting point is https://fonts.google.com/
  2. Choose your scale. Choose a base font-size (the one used for paragraphs/body text, set on the html attribute) and a type scale that fits the purpose and tonality. Use http://type-scale.com/ for this.
  3. Move forward from here with the scale as a base:
    • Set line-heights – lower for headings, higher for body text.
    • Set vertical margins. Base this on your base font-size and think in rems. That is, if your base font-size is 16px then 0.5rem is 8px, 1.25rem is 20px and so on. There are tools for establishing a classic baseline grid base on font-size but they can be a bit hit or miss, trial and error is often more useful to find a suitable vertical rythm.
    • Decide on a max-width (measure in typographical terms) for your text body. You’ll want around 50-75 characters per line, including spaces.
    • Consider responsiveness. Should smaller screens have a larger font-size or is it more important that they have a larger measure (max-width, see above)? This is a decision you will have to make through trial and error.
  4. Now you have a solid base to fall back on for everything typographical. You might have to tweak some of the numbers here and there to find a nice visual balance but try not to stray from the math too much. Also, remember to actually read what you are designing ocasionally. Sometimes things will look nice when it’s just Lorem Ipsum but actually be difficult to read in reality.

Layout

Layout on the web can be a tricky beast, especially in modern web development. Classically you could design things in a very static way as you had fewer devices and screen sizes to consider. But these days thinking responsively is a must. The amount of possible devices and screen sizes a website can be viewed on makes us have to adapt the design process. In short, we need to think fluidly and dynamically. Design a ruleset for how elements and components are positioned both in relation to one another and to the page as a whole.

Spacing (8-Point Grid)

You need a system for spacing. Everything from margins, paddings and sizes should depend on it. It helps to keep these things consistent and well balanced. The best way to do this, at the time of writing, is the 8-Point Grid. We won’t go in to detail about how it works (check out the links below instead) but the basic idea is to set an 8px base size for spacing that can be multiplied to create both sizes for elements and spacing between them. This keeps things consistent while also making both design and development easier.

A screenshot of vansterpartiet.se
vansterpartiet.se is based on an 8-Point Grid System
Further reading:

A couple of notes on the 8-Point Grid system...

The 8-Point Grid is often great and easy to work with but it can sometimes clash with the vertical rythm of your typography. There are a couple of different ways to adress this. One way is to make sure your base font-size is divisible by 8, so that you can use the same kind of logic for the grid as for your typograhy. The other alternative is to use the basic principles of the 8-Point Grid but instead of using 8px as the base size, using `rems`.

Classic grids? .column.small-6.medium-9.large-12

There are both benefits and drawbacks to using a classic grid system with rows and columns. It really depends on the project. Having a column grid to conform to can help you keep element sizes consistent and create a more beautiful layout. But if you find that you have to break out of the grid more than you keep to it, you might be better without it.

Generally, it could be said that if you’re designing an interface that will mainly be read (an information website), a grid is useful. But if you’re designing something more dynamic where there’s a lot of interaction, (like a web application) you might want to skip it.

Think fluidly.

Colors

In most projects you will have some kind of brand colors to base your design on. Therefore this section won’t go into exactly how to choose a color palette. There are a bunch of great tools available online for that, for example Coolors and Adobe Color.

Instead, let’s talk about how we use colors in our designs.

  • Primary color. Most of the time you will have some kind of primary brand color. Use this color sparingly to tie your design to the brand you’re designing for. A good idea is to also use it for primary actions that are associated with something positive. For example, a save button or a call to action. Don’t use it for things that have a negative association (a cancel/delete button).
  • Secondary color(s). Used to complement your primary color(s). Their purpose is also to reinforce the brand, but as they are not the main color they can be used more freely. It’s a good idea to have a few different variations in hue/saturation/lightness of these colors.
  • Grayscale colors. Having a defined palette of grayscale colors helps keep things consistent.
  • State colors. If you’re designing a web application or something else that somehow deals with states you will probably need state colors that are different from the brand colors. The point is to be obvious.

Accessibility

Probably the most important point to drive home here: **accesibility > aesthetics**. If your colors make your design unreadable, you need to rethink them. Use this contrast checker to make sure you're WCAG 2.0 compliant

Icons

Icons can be a powerful tool to communicate something to the user without having to rely solely on text. There are a few different things to consider when choosing or creating an icon library for your project:

  1. Make sure their meaning is obvious. If the purpose or significance of an icon is vague then their they are doing the exact opposite of what they’re there for, to increase reading speed. This is especially true if they need to stand by themselves, without any type of text. You will have to weigh the immediacy of an icon against the explicitness of text.
  2. Make sure your icons fit your design language and all have a similar look and feel.
  3. Use consistent sizes for your icons. In the same way you would use a system for your font-sizes you should have a system for your icon sizes.

A few good icon libraries you can use:

Animation / Delight

Animation is a great tool for explaining how your UI is laid out and how to interact with it. It can also be a great tool for user delight. But consider the User’s Hierarchy of Needs. If your design isn’t meeting the previous levels of needs then adding delightful animations and interactions might even become an annoyance. If it is also a hindrance to the proficiency and usability (for example, by being long and slowing down the user) then that annoyance will grow even more. Basically, focus on first meeting the more basic level of needs before you consider the delightfulness of your UI.

A more in depth explanation of the User’s Hierachy of Needs can be found here.

Some pointers:

  • Don’t animate for animation’s sake. Animations should have a purpose.
  • Use animation to explain the user interface and hint at what an interaction with something will accomplish.
  • Animation should never come at the cost of efficiency. If the animation doesn’t help explain the UI, then it needs to be tweaked or removed.
  • Make your animation help communicate the tonality. How does x look and feel?
  • Spacial awareness
    • Maintain spatial consistency throughout movement
    • Hint in the direction of the gesture
    • Read this
  • Work with behaviour rather than animation
  • Much of the above is from this video. It’s a bit specific to iOS for some parts but still a very good watch.