Menu

A Style Guide Is Vital In Building Your New App Product

apps, design

A Style Guide Is Vital In Building Your New App Product

A Style Guide Is Vital In Building Your New App Product

When creating your product on whichever platform, whether it be Android, iOS or others, it’s important to acknowledge the initial areas of input which may help create a smoother journey and process for you and your team. Identifying steps such as the UX and it’s required research are vital. However upon personal discovery I found to be the big pivoting point in this perceived generic process was not so much so how the app would flow but more along the lines of which elements were crucial to include, and where.

To break this down, I always use the analogy which pertains to the differences between UX and UI.

Picture a car.  The UX is the experience you get from when you drive it, how the steering turns and what happens when it does. Which button you need to press in order to open the bonnet and where it’s positioned. Is it close to where the driver is seated? If so how far to they need to stretch in order to reach it?

khcreates style guide kurt henderson car bonnet design
MercedesMedic

 

Picture a car, again. The UI is what these elements look like, what material is used for the steering wheel and what does this bonnet button look like and what colour is it? It’s important to choose a colour and shape that symbolises something or doesn’t appear misleading or unclear.

khcreates style guide kurt henderson car bonnet design
Ebay

 

Picture a car once more. The Style Guide is what keeps all and both the previous areas within reason. It sits in between the UX and the UI almost. It helps define how the UX should take place. Why draw a square button if the brand/product only uses circle buttons. This could affect the entire experience although it may sound petty.

khcreates style guide kurt henderson car bonnet design BMW car sports
BMW

 

When BMW invent a new model of car within their range they obviously want to make the design and experience different to their other models, however the underlining areas like brand identity and specific entities must remain in tact. This is a BMW. Even though it’s a car and not an App product, the principles still apply. If it didn’t feel like nor resemble a BMW in anyway there wouldn’t be anything to latch onto when purchasing one.

Creating a new product requires brand identity, apart from its unique features that make the App worthwhile. Some Apps fail or are surpassed by competitors due to their lack of smooth UX or engaging/simple UI. A solid style guide not only underpins the ethos behind the company, but also helps those who’re making the product comprehend it better themselves.

For example when creating the KOMPAS product we had two versions before we introduced a style guide for the App. This changed everything dramatically. It gave a clearer direction to where the product was heading. The colour palette and strip would change the landscape of design. We introduced vision, with not only the product but the brand. What sort of imagery we would use, where, how, fonts, background and a new icon alongside a text logo were all crucial parts in designing the product.

khcreates style guide kurt henderson design marvelapp app
MarvelApp

Address your style guide from earlier on, build on it slowly where you can. It will help you shape your product, the experience, the look. Here’s an example of pre-style guide and post-style guide for KOMPAS.

Pre-Style Guide

khcreates style guide kurt henderson design kompasapp kompas

Post-Style Guide

khcreates style guide kurt henderson design kompasapp kompas

Consistency is vital, it creates trust because it gives the outlook of careful planning and thoughtful decision making. You’ll realise that your concept or product will also become easier to explain to new people because you simply understand why all the elements were included to piece together the vision behind the business.

Tags: , , , , , , , ,
Share

This is a unique website which will require a more modern browser to work!

Please upgrade today!