Web Style Guides: The Solution for Developing Flexible Visual Brand
By Deborah Guarneros
Creating websites and applications can be complex, it normally involves more than one person or team in the design process. That’s why when there are multiple contributors to a project it’s important to use style guides, to ensure consistency and to improve the user experience.
Web style guides are not only for the design teams, but also for the development teams. When utilizing a style guide, developers can add the styles for a website in the CSS and replicate them in all the elements, saving time. A style guide also informs developers of design details such as, the buttons’ interactions and inputs’ states.
Elements of a Web Style Guide:
An effective layout has a structure that ensures the final product is completely responsive and consistent across all resolutions. A successful grid must define breakpoints, columns, containers, margins, and gutter. Content distribution over containers is based on column widths, which make the design more organized and have a good hierarchization.
- White Space
The white space is the empty space between the elements that constitutes the design. This space helps the design look cleaner and makes the content easier to digest by the user. We use a baseline grid of 4px. The spacing increases this way: 4px, 8px, 16px, 32px, 64px, 128px.
For example, between a title and a paragraph you can use 16px of white space, and between one section and another section you can use 128px of white space.
- Color Palette
A lot of times our clients already have a defined color palette in their brand guidelines, but sometimes this palette doesn’t work for web because the colors need to have enough color contrast. In the color palette, we also define what unique color will be used for each specific item, such as typography, buttons, shadows, graphics, etc.
- Border Radius and Shadows
With border radius and shadows, we define how flat or rounded the borders are going to be, and how much blur and opacity the shadows are going to have.
With typography it’s important to define font families. We recommend using 2 or a maximum of 3 font families. After we define the font families, we define the sizes, weights and line heights for each of the headings, H1, H2, paragraphs, buttons, links, etc. Some of these sizes will probably need to change for the mobile version. The font size and line height can be measured in pixels or rems.
There are different types of icons. Paragraph icons are usually bigger and have more details. Functionality icons such as buttons or arrows in a slider are simpler because they should be implemented in smaller areas on the screen.
When working with buttons it’s important to understand the use of each button. There must be buttons for main call to action, secondary call to action, text links, and buttons with iconography. It’s important to specify the color, size, outline, border radius, padding and typography of each button. You need to specify the each button’s states as either active, hover, or inactive.
Just like buttons, inputs also need to be defined with each respective state as either placeholder, inactive, active, completed, error, and success. The inputs can be visualized as text fields, checkboxes or radio buttons.
Images should have the same look and feel. You can achieve cohesiveness by defining do’s and don'ts of images. Create rules for composition and color correction for overall images. Search for images that reflect the brand identity. You can invest in a photoshoot to gather images that reflect brand identity or you can use stock photography. Some helpful websites with free stock photography are pexels or unbounce, among many other stock photo sites. If you are afraid using stock photography will lead your brand looking cliche, check out our blog post “Leverage Your Brand Resources With Stock Photography” about how to properly use stock photography and when to use it.
It’s crucial that all the members of a team have access to the style guide and that they are notified every time there’s an update. A style guide is likely to grow throughout time and it’s fundamental to constantly build and adapt your components to improve the workflow and productivity or your visual brand.
For more information on developing adaptable components, check out our blog “Design Components: The Key to Efficient Collaboration”.