Design Consistency is Key

When designing, it’s ideal to have an established style guide that outlines specifics such as font family, size, colors, etc. If the style guide is detailed and complete, a web project build is much easier to plan out. The developer can start building the CSS based on the style guid, creating assumed blocks of content, images, colors and fonts before any front-end HTML is written.

The Style Guide

The style guide sets the rules the design will follow, and details the specifics for each element such as font, color, size, etc. A detailed style guide should include HEX and RGB colors as well as alternate colors or treatments for any interactive elements such as buttons or links.  For print media PMS and CMYK colors are important too. Find some great Style Guide Examples here.

A website design may have variations of common elements, such as a featured post that happens to be blue instead of gray. However, the element “post” would and should share much of the same style. These variations, when outlined in the style guide, makes it quick and easy to plan out in the CSS and HTML.

The style guide can be made before or after the actual design comps are created, though having a thorough guide is useful for both designers and developers.

Use Symbols in Your Design App

Most design applications have tools in place that help keep your multi-page layouts consistent between pages. Apps like Sketch, Adobe XD,  Illustrator, and Photoshop all have objects that can be reused and modified for each instance, and color pallets that help ensure you’re using the same specific color on each instance.  Using these tools, you can create one element that defines the base look, and change the content, color, image, etc. when used elsewhere. Cool thing about symbols is if you decide to change the base, those changes would auto update all instances of the symbol.

References

Sketch – Creating and Using Symbols
Adobe XD – Work with linked symbols
Work with Smart Objects in Photoshop

Writing Clean CSS/SCSS

So we have a style guide and some comps from Sketch or Adobe Illustrator and start building the website. First thing to do is look at all the common elements in the designs and write CSS classes for each of those blocks.

.block {
    background: white;
    border-radius: 6px;

    h1 {
        font-family: Georgia, serif;
        font-size: 24px; color: #666;
    }

    p {
        font-family: Arial, sans-serif;
        font-size: 14px;
        color: #999;
    }
}

Now that we’ve defined the default style for a .block element, we can create variations of that element with subclasses, perhaps in this case we want a dark background with light text while retaining the font and font size. We do that right within the .block CSS before the closing bracket.

&.dark {
    background: #444;

    h1 {
        color: #fff;
    }

    p {
        color: #ccc;
    }
}

In our HTML, we can create a .block element or a .block.dark  element that will look identical other than the background and text color. The block design remains consistent with a variant option set to match the designer’s comp.

Design consistency makes styling HTML markup quick and easy.

If the site designs adhere to the style guide with consistent block margins, padding, fonts and colors, it makes it easier to reuse those blocks elsewhere simply by changing the contents. The design language is cleaner if there aren’t too many variations to common elements. For example, if we have a quote on one page that’s within a gray box with 20px padding around the text, it shouldn’t have 8px padding on another page. The style guide defines what an element looks like wherever its used. Unless absolutely necessary, you shouldn’t need 20 dramatically different variations of a basic element.