Our digital schematic

Our digital schematic

On new digital projects involving multiple web developers, inconsistencies in style can manifest across different areas as the work grows in scale. Section margins may be different, buttons might not have the correct padding ratios, or maybe brand colours aren’t spot on. It’s also sometimes difficult to predict how certain blocks will interact with each other, or even interact with the user. How does the page flow on smaller screen sizes? What are the hover states? Are these elements animated in any way? These are all problems and questions that a digital style guide aims to answer.​

What’s a digital styleguide?

A style guide is your digital toolbox. A collection of design elements and code blocks that become the living, breathing components of your application. Each element is designed, and then molded and crafted on its own by the developers, ready to be used and reused wherever it’s needed in your application. Let’s make an analogy to the process of building a car. You wouldn’t build the engine and the transmission at the same time while sitting inside of the frame. You would put together your engine and transmission separately, and then put them all together within the frame. Apply that same idea to your web components. Build each of them on their own, and then put the puzzle pieces into your layouts.​

A place for all of your stuff

​A digital style guide becomes a hub for everything you need during the build process of your application. It’s your foundational elements, your overall themes and concepts, all organized under one roof. When your components are all laid out in front of you, it’s easy to compare and contrast pieces of design and code. Are the paddings consistent? Are the margins consistent? What about line heights, fonts, weights, or colours? Is the brand I’m trying to represent being portrayed consistently across the entire site? When you have all your elements and components in the same place, it’s very hard to miss irregularities.

Think like your system

When you start building in your style guide, it forces your designers and development teams to think in terms of systems. Instead of thinking of your elements as just pieces on a page and how that page relates to another, you begin to see them on their own and how they interact with the other elements around them. It no longer makes sense to just duplicate a mock up from the top down; construct the foundation, plan the layout, build the frame, insert your containers, and then populate with your components.​

As you start to break the pieces down, you begin to think about the underlying layout. You realize it is completely separate; it’s the layout that responsively changes, while the components simply flow to the size of their container.​

Designing in the browser

Since we’re now building these components first, we can move out of the design phase a lot sooner. Components can be conceptualized in design, and then fully realized in the browser. Your web designers and front-end web developers can work together to achieve full fidelity in the browser, with code. This allows for a finer attention to detail, and allows you to catch problems early on in the development process, because the style guide becomes similar to a testing environment. This also minimizes the documentation needed during a build, as no one needs to sit and explain how a page is put together, how the blocks interact, or how the elements change. This has already been created and manifested into the style guide.​

Free your front-end

By switching to a digital style guide, you can gain a lot of efficiencies and minimize QA and roadblocks throughout the development of a project. Instead of having your web designers create full fidelity components, let them design a prototype and work with your front-end developers to create the final component in the browser. This allows a finer level of control and attention to detail, because you’re only focusing on one component at a time. It allows your concepts to be grouped under one roof, which can help solidify a consistent vision and feel across all of your interactive components. Using a digital style guide also serves as a lightweight test environment to iterate on your components without the extra weight of a full webpage.​

Set your front-end web developers free, and try incorporating a digital style guide into your next project, you’ll quickly see how great it can be!​

Toolkits and examples: