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).
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.
It seems that perfection is attained not when there is nothing more to add, but when there is nothing more to remove.
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.
htmlattribute) and a type scale that fits the purpose and tonality. Use http://type-scale.com/ for this.
rems. That is, if your base font-size is
20pxand 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.
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.
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.
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`.
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.
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.
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 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:
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.