…
Ideation
Your goal at this stage is to come up with as many ideas as you can by staying focused on the people needs defined in the strategy research phase.
It’s the time when you are diverging — you’re exploring as many options as possible which will eventually evolve into the right solution. It’s the time when you’re having most of the fun!
An excellent way to get started is to think loose and not becoming attached to any of your first ideas. It's important not to fall into the trap of polishing those first concepts — you've got to let it simmer. Take a break and come back to it a few times — if you still really like it after a day or so, it might be something that you want to explore further.
Deliverables: Moodboards
Concept
Now you should narrow down from a handful of ideas by converging them into a fully-fledged prototype, one that you’ll refine and push forward through the rest of the process.
It’s the moment when you’re thinking to adhere to a style guide — to a set of fonts that pair well or to a set of different use cases for the layout.
The deliverables could be anything from a full page, a set of elements or something definitory for your design. Those will be the fundamental pieces for your overall Style Guide.
Deliverables: Styleboards
Test
Use a prototyping tool to put together a minimal interactive prototype and test on a few users to see how it’s working, especially in terms of UX.
Tools: Invision, Principle, Framer
Style Guide Foundation
Before going into more pages or elements or modules, you need to map out the current mockup elements that you will refer to throughout the whole process. Even it might be slightly changed until the end, it’s important to always keep it synchronized with all the mockups.
The current version of the Style Guide should start with the following elements:
- Typography: sizes and spacing for headings, paragraphs, meta
- Layout: spacing scale between elements
Tools: Invision, Zeplin