Where do we go from here?
Implementing design guideline in your workflow
A few weeks ago I posted about creating a design guideline for HappyFresh, a map to be read and understood. So today I am going to explain how to follow those lines in the map in the every day workflow.
Why are design guidelines so important?
Remember the #1 rule of the Eight Golden Rules? Strive for consistency!
“Consistent sequences of actions should be required in similar situations; identical terminology should be used in prompts, menus, and help screens; and consistent color, layout, capitalization, fonts, and so on should be employed throughout. Exceptions, such as required confirmation of the delete command or no echoing of passwords, should be comprehensible and limited in number.”
— Ben Shneiderman in Eight Golden Rules of Interface Design
We humans easily get confused, life’s already so confusing with all it’s colors and shapes. We try our best to make sense of it all, but it gets tiring sometimes. We want something familiar, easy, in other words — not confusing. That’s exactly why we need design guidelines!
Design guidelines are a way to help users feel familiar and at ease when using our application. Not only for the users, design guidelines will help designers. With design guidelines designers can work faster with quicker decision on the colors, shapes, fonts, and overall layout of the design.
Wouldn’t that constrict a designers creativity if everything is guided, there wouldn’t be room for innovations? Bzzz (buzzer sound), wrong! Designers can still design as they want, but the difference is that they can now easily implement their design without being (too) afraid that their design won’t make sense with the rest of the app.
How do we implement our design guideline in our workflow?
My HappyFresh Fleet Tracker guideline had three key components #1 logo, #2 colours, and #3 Typography. Usually after finishing the creating the wireframing here’s where the design guideline gets really handy.
After wireframing we already know what we’re going to put and where we’re going to put it (in terms of text, picture, logo, etc.). So all we need to do is see our design guidelines and follow the lines (haha).
From the wireframe we can see that I want to put the HappyFresh logo on the top bar. From our guideline we simply implement the same rules that both gaps should be 35px from top and left corner.
We also want to follow the design guidelines on colors and typography. Here we see i’m using the typography and colour from my design guideline.
Guidelines are needed to ensure consistency throughout the app. It helps people recognize your brand, it identify your brand as you! So having such consistency will also boost every aspect of your brand, from design wise (obviously) until marketing!
Thank you for reading, i learned a lot in PPL!
Ciao!
