Remember 2010? It was the year Apple released the iPhone 4, Leonardo DiCaprio starred in the Inception movie and Facebook looked...
Monthly Design Review #3 – Creating a component style guideDorien Jorissen
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?
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. 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.
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.