ACA Blog

ACA Blog


February 2019
M T W T F S S
« Jan    
 123
45678910
11121314151617
18192021222324
25262728  

Categories


Monthly Design Review #3 – Creating a component style guide

Gert BangelsGert Bangels

In this third monthly design review, we highlight the importance and benefits of creating a component style guide for your IT project(s). We supply a thorough explanation and use examples of our own implementations.

What is a component style guide?

In a component style guide, we define the design language of all sorts of components, such as buttons, inputs, alert boxes, tooltips, and more.A style guide is a form of documentation that conveys the visual language of a brand or a specific product of that brand. Most often it defines rules on how to use and not to use certain design elements.

The traditional form, also known as a brand identity guide, is mostly found in deliverables from graphic agencies and comes as a static file which defines these rules. This document declares the brand’s fonts, logo usage, photo and stock guidelines, …

Another form, which we will be talking about today, is the component style guide. As an IT company, we obviously need to translate our designs into code to be used in our applications. In a component style guide, we define the design language of all sorts of components, such as buttons, inputs, alert boxes, tooltips, and more.

Why use a component style guide?

Everybody who either owns, develops or uses a product benefits from a (component) style guide.Everybody who either owns, develops or uses a product benefits from a (component) style guide. Style guides ensure that a coherent styling throughout the product life cycle is applied by using or adapting on well-defined design principles that fit the project seamlessly.

By utilizing a collection of repeatable components and a set of standards guiding the use of those components, you can accelerate the pace of creation and innovation within project teams. In order to quickly iterate with confidence, teams need access to a single source of truth that allows for a scalable UI language and streamlined UX guidelines. With brand touchpoints reaching over multiple channels and platforms, a central design language assist with consistent user experience.

Our implementation of component style guides

Each ACA project that goes through the design phase eventually gets a (component) style guide. Initially, our designers derive the desirable design direction from the brand identity guidelines (if available). This derivation comes in the form of a static PNG, created in a design tool like Sketch or Adobe Photoshop. Once the stakeholders approve the general design direction, we (usually a front-end designer) translate the design into its code variant. This initial version holds the most common elements and helps our designers and developers chunk through the project’s first storyflow.

This screenshot showcases part of a larger library of assets of a component style guide made available for one of our latest projects.

The screenshot above showcases part of a larger library of assets made available for one of our latest projects. To date, we’re still working on creating new screens which will eventually grow or alter this style guide. It’s a process that, instead of creating new components or alterations for a specific situation, polishes the current available elements. This either influences previous work and / or makes us question if a new component or an alteration is necessary. This is why we call it a ‘living style guide’.

Of course, these style guides require some maintenance, yet in retrospect: the effort is worth it in the long run. It enables teams to quickly iterate on introducing new screens and mockups for applications, which we can then test and validate with the end users, way before a client needs to spend bank on final development.

This screenshot showcases one of our earlier component style guides.

The screenshot above showcases one of our earlier style guides. We have since stepped away from displaying the code examples. The reason for this is that our teams are comfortable enough with inspecting these details through the browser. It also gave the code too much screen estate and we found it to be limiting in our judgement of seeing the coherence of the components all together.

 

This is a matured component style guide that promotes consistency and scalability while simultaneously showing things in their final context to project stakeholders.

This is a matured component style guide that promotes consistency and scalability while simultaneously showing things in their final context to project stakeholders.

🙌

Do you feel like your project can greatly improve by creating a style guide? We’re more than happy to be on your side in this journey. Whether it’s through the comments below or through a business opportunity, our designers got you covered!

Gert is a UX/UI Designer and Front-end Developer for the ACA Creative Team. He has a strong interest and opinion on UX. Being the teams technical lead, he likes to explore new technologies in the fast-paced front-end environment.

Leave a Reply

avatar
  Subscribe  
Notify of