Working with Digital Style Guides

What they are and how they help with CX

As our design team at Switch grows and new business opportunities emerge, the need for integrating design tools, like a style guide, into our current and future projects to provide a seamless experience across all departments have become increasingly important.

You're probably wondering how does a style guide help with CX? And how does that help deliver a consistent, award winning design experience?

Let's walk you through that...

A style guide for the web is generally quite similar to the traditional brand style guide. While a brand style guide covers the use of brand elements across various media, including print, a digital style guide is designed specifically for website elements. Its purpose is to ensure consistency in designs and make the development process smoother by defining how brand elements should or shouldn't be used.

In the case of a website, the style guide also allows the break down a complex website into bite-sized, more manageable elements. This provides a collective overview of website colours, UI elements, and other components used throughout the website. Once the styleguide is established, it essentially serves as a guideline for all parties involved, from designers and developers to content editors creating new pages and assets for the website. A style guide helps ensure coherence across different projects and consistency in future additions to the website. And as we know, consistency is key to a better user experience.

A style guide is a collaborative tool that helps our customers and team throughout the entire project development process.

Benefits of a style guide

For the Customer

Style guides not only make the internal more more efficient; they are also a great resource for our customers on many levels. By providing customers with style guides early on in the project, they can prepare their teams to write and/or migrate content into their new website. The style guide serves as a point of reference for customers as they continue to develop their brand, ensuring consistency across all touchpoints.

During our work with our customers, we often come across an underutilisation of their CMS in design. A style guide serves as an opportunity to use their digital platform to its full potential by displaying a full range of styles available that can be used to produce fresh conforming layouts that improve the customer experience.

A style guide also acts as a great communication tool for our Project Management team. When in the early or development stages of the website, it can be difficult to explain how parts of the website will work without getting the designer to create an array of mockups. Providing a style guide along with mockups keeps the work on-brand, helps them visualise how the CMS works and how content can be pieced together.

These examples are just a few of the many advantages that a style guide can provide. Major issues such as HTML and search engine optimised markup come to mind, and don't forget WCAG compliance.

For the Team

If you break down a website it is made up of many smaller modules - which is what a style guide is composed of. If we look at a website this way, it makes sense to design and code our modules so they're isolated pieces of code. This approach provides us with much more flexibility when creating different website pages, as the components outlined in our style guides can be utilised almost anywhere on the website. Also, by having a set of established design principles, we can avoid duplicating efforts and reduce the chances of errors creeping in.

If you want to learn more check out Brad Frost's book, Atomic Design.

After integrating a style guide, it would be the first port of call when the team creates new content pages or designs new features. Having this resource alongside the website will let us see the new feature in context, making it much easier to match its style with existing elements.

Most importantly, the use of the style guide allows us to create a solid foundation. Rather than reinventing the wheel for each new project, the style guide saves us time and energy. We can create common coding patterns that we can reuse plus generate common naming conventions that our team can become familiar with.

How we work with style guides

By using a style guide and creating an internal pattern and UI library that we can build upon, we can increase productivity and help new members of our team to onboard more quickly and get up to speed with our processes and design system.

With every new project, we add more elements to our style guides, which can then be re-used as the foundations for the next project, and so on. This approach means we can focus our time and energy on the most critical issues, delivering top-quality work to our customers.

Our preferred tools

After evaluating the various options available in the market, we chose to use Figma for creating and managing our style guides. We define the essential design tokens, including typography, colours, layout grids and spacing, iconography and animation effects. We then also build basic UI elements like buttons and forms as well as more complex components and templates.

This approach has proven effective for all stakeholders, from our design team to front-end teams and to our customers. Check out the benefits we've seen:

  • Using Figma as a collaborative tool allows our team to interact with customers in real-time, keeping everyone informed and involved throughout every stage of the process.
  • A digital style guide is easily customisable and accessible to everyone. Whether you're a designer, front-end developer, or marketer, you can easily access and use the style guide without any technical know-how. This has significantly improved communication between designers and developers, streamlining our development process.
  • One key benefit of our style guides is that they are easily updated and scalable. Updating master components in the style guide saves a significant amount of time and effort, as we don't need to manually update every instance of the component. It also ensures that any changes are applied consistently throughout the entire design, making it easier to manage and scale over time.

Future Updates

At Switch, we are committed to staying on top of the latest trends and tools when it comes to creating style guides. As we continue to grow and take on new projects, we're constantly evaluating our processes and looking for ways to improve efficiency and consistency in our work.

Our focus now is on building complete design systems that incorporate a code repository, extensive documentation, and clear guidelines on how to use our components and GUI Kit and stay on brand.

We're excited to share our progress with you as we continue to refine our style guide process. If you want to learn more about our UX Design processes, get in touch today, we'd love to have a chat.

— Nadia Buzalski

Further Reading

If you're interested in seeing some style guides out in the wild, provides a whole repository of links such as the comprehensive Lightning Design System from Salesforce to the style guide for the US HealthCare system.

Want more?

Back to the Blog

NEW Switch have been awarded a Good Design Award in Digital Design.
Read More

Switch acknowledges the Traditional Custodians of the lands where we live, learn, and work and we pay our respects to their Elders past and present and emerging.

Level 5
100 Market Street
Sydney NSW 2000
Level 22
120 Spencer St
Melbourne VIC 3000
New Zealand
11-19 Customs Street West
Auckland 1010

8 Cross Street
Singapore, 048424

ABN 15 120 572 750   ·   © 2024 Switch

Subscribe Now

Sign up to our newsletter to gain access to this page.

No thanks