Presentation created at SapientNitro to deliver to partner agencies on web design workflow.

1. 1
CREATING STYLE GUIDES
WITH MODULARITY IN MIND
JUNE 2014 V1.0

2. 2
CONTENTS
INTRODUCTION
WHAT DOES MODULARITY MEAN FOR DESIGN?
WHY DO DESIGNERS NEED TO DEVELOP A STYLE GUIDE EARLY?
HOW DO DESIGNERS CREATE A STYLE GUIDE?
ART DIRECTION
COLOR, TYPEFACES AND FORMATTING
FORM ELEMENTS
BUTTONS
COMPONENT EXAMPLES
THE BENEFITS OF THE APPROACH
REFERENCES
APPENDICES

3. 3
INTRODUCTION
Welcome to the brand agencies to get started on a new
approach to designing websites or campaigns.
To enable speed to market, we have created web templates and modules each meant for specific purpose
with some flexible features. This means that before you start designing, you should understand how to design
within a modular system that consists of reusable building blocks of different complexity.
This document starts with a brief recap of what building blocks of the CMS are, and what changes in the design
process modularity has brought. The document then describes the steps and the benefits of creating a style guide
at the very early stages of the design process.
Please note that this document does not cover all the details and is not a complete instruction to the style
guide creation. The document gives you an overview of the approach to the design process and demonstrates
it through a particular example from our experience.

4. 4
WHAT DOES MODULARITY MEAN FOR DESIGN?
Modularity is the degree to which a system’s
components may be separated and recombined.
CMS building blocks are:
Template — a skeleton which defines the default
structure of a page;
Page — a container in which different modules and
content is created and represented on the site. A new
page is always created over a specific template;
Component — a specific module on a page;
Object — a specific element within a module.
We design within a system of reusable templates,
components and objects.
Header
Code entry tabbed hero
HELLO JOHN,
CTA
MAIN TITLE
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus
sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
CTA
SUB TITLE
CTA SECONDARY CTA
TAB 1 TAB 2 TAB 3
Editorial teaser-single
MAIN TITLE
context title
ARTICLE TITLE
Product carousel
MAIN TITLE
YOU HAVE ENOUGH
POINTS TO REDEEM
THIS PRODUCT
PRODUCT
50 POINTS
YOU HAVE ENOUGH
POINTS TO REDEEM
THIS PRODUCT
PRODUCT
50 POINTS
YOU HAVE ENOUGH
POINTS TO REDEEM
THIS PRODUCT
PRODUCT
50 POINTS
YOU HAVE ENOUGH
POINTS TO REDEEM
THIS PRODUCT
PRODUCT
50 POINTS
HOME
Template
Component
Page
Object
Template
Page
Component
Object

5. 5
WHY DO DESIGNERS NEED TO DEVELOP A STYLE GUIDE EARLY?
Within a modular system designers no longer start designing
each individual page from scratch, but instead are provided
with a library of reusable building blocks.
“Reusable” is a key word. Once we define the styles of our
building blocks we can apply them throughout the site.
For example, if we compare Hero and Login modules we
can see that a number of objects are reused on both modules.
These objects need to be styled identically to maintain
a consistent look from screen to screen.
If we define such objects that need to be styled early in
the process we will:
• Create a shared vocabulary of reusable elements
that will speed up the design process;
• Make it easy for front-end developers to define the
global styles for all pages and launch the development
process even before receiving all the final comps from
the designer;
• Maintain visual consistency and introduce changes
systematically.
Hero module (3 tabs)
MAIN TITLE
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus
sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
SUB TITLE
CTA
Login with a social network
Facebook VKontakte
Login with a social network
Label
CTA
SECONDARY CTA
TAB 1 TAB 2 TAB 3
Login
MAIN TITLE
OR
SECONDARY CTA
Label
Captcha Image
Can’t read this? Try another.
Try an audio captcha.
1
2
1
2
3
3
4
4

6. 6
HOW DO DESIGNERS CREATE A STYLE GUIDE?
Basically, when creating a style guide designers
separate the style from the layout. When we get
the wirefames for all the pages on the site, we can
analyze them and isolate certain elements. The result
of this process will be a list of all the objects that
need to be stylized. Of course, as you move along the
process you may find more objects that need to be
stylized. In this case your style guide will build up
on-the-go.
For one of the campaigns we created a template
document that lists all the objects that need to be
stylized on the left and modules on the right.
Such a document is useful for both designers
and developers to help maintain visual consistency
and see which styles appear within a module.
> > >
Object Cmoopnent Template Page

7. 7
ART DIRECTION
At the beginning of the design process we define
the overall visual direction, the look and feel of
the entire site.
Here, home page is the king. It serves as an anchor to
set the color and type palette and probably a number
of global styles (e. g,, Product Thumbnail, Section Title,
etc,) to extract into your style guide.
However, more often than not home page is pretty
unique while other screens (Registration, Login, etc.)
are mostly composed of reusable objects. To define
other styles you will need to play with various visual
treatments before jumping to design the final comps.

8. 8
COLOR, TYPEFACES AND FORMATTING
Often type and color palette come from a brand style
guide. However, you may realize that certain colors need
to be added or even modified.
For Miller Campaign we introduced a different shade
of golden to go nicely with the imagery received. Some
additional colors were introduced for different types of
messages (error, confirmation.)
For typefaces it is important to check if the fonts exist as
web fonts (note, that you will need Cyrillic web fonts.) If
not available, find similar web fonts or use system fonts.
It will make it easier later on in the design process if you
set the formatting rules upfront. You may need to play
with different variations for page titles, subtitles, body
text, inline links, etc. to see how they look like on the page.

9. 9
FORM ELEMENTS
A lot of subsequently designed pages will
include multiple form elements. Think of various
combinations that you may need, for example an
input field with a label, with or without some prompt
text, an input field returning an error, etc.

10. 10
BUTTONS
When defining the styles for the buttons, make sure
to think about the hierarchy among different types of
buttons and how the buttons will look like at different
states — regular, on hover, when pressed.

11. 11
COMPONENT EXAMPLES
Having a few examples of how the objects will be
used within the modules is something you can share
with the client before all the comps are finalized.

12. 12
THE BENEFITS OF THE APPROACH
• We set the foundation for visual design from the start
through a shared vocabulary of reusable objects and
creating a design system rather than a collection of
comps;
• Scalable system that can be extended and serves as
a reference for future designers and developers to add
more pages;
• Speed up the conversation between the designers and
developers to apply changes systematically (we think
of separate elements and how they look and work in
relation to the whole site not just a specific page);
• With responsive web design in order to maintain
consistent look and feel across multiple viewports
you need to think what elements will stay the same
and what will change according to the viewport
requirements and constraints;
• Steps in the design process are well-defined and easy
to communicate to the client and the team.

13. 13
REFERENCES
Before you start designing here are some useful references...
TOOLS AND ARTICLES
FOR ART DIRECTORS AND DESIGNERS
Design Systems
http://24ways.org/2012/design-systems/
Element Collages
http://danielmall.com/articles/rif-element-collages/
Front End Style Guides
http://24ways.org/2011/front-end-style-guides/
Modularity and Style Guides
http://dbushell.com/2012/04/23/modularity-and-style-guides/
Style Tiles
http://styletil.es/
What are the new deliverables?
http://daverupert.com/2013/04/responsive-deliverables/
TOOLS AND ARTICLES
FOR FRONT-END DEVELOPERS
CSS Systems
http://lanyrd.com/2008/barcamp-london-5/sg/
KSS — a methodology for documenting CSS and generating
style guides.
https://github.com/kneath/kss
Pattern Lab — a collection of tools to help you create atomic
design systems.
http://patternlab.io/
Style Guides in CSS
http://www.edenspiekermann.com/blog/typesetting-your-css-objects
STYLE GUIDE EXAMPLES
A LIST APART
http://patterns.alistapart.com/
Code for America
http://style.codeforamerica.org/
FontShop
http://next.fontshop.com/styleguide/globals
Paul Robert Lloyd
http://paulrobertlloyd.com/about/styleguide/

14. 14
APPENDICES

15. 15
BRAD FROST “ATOMIC DESIGN”
The approach that has been described in this
document is based on the concept of Atomic Design
that was introduced by an American designer and
front-end developer Brad Frost.
The underlying principle of Atomic Design is to break
the interface into building blocks and starting from the
smallest element build up all the way to the final page
designs.
Brad Frost introduces five levels of building blocks’
complexity:
1. Atoms
2. Molecules
3. Organisms
4. Templates
5. Pages
Link to the original article “Atomic Design”
by Brad Frost:
http://bradfrostweb.com/blog/post/atomic-web-design/
Continued on the next page.

16. 16
BRAD FROST “ATOMIC DESIGN”
Atoms
For example, a form label, an input or a button, color
palettes, fonts, animations. Altogether atoms make up
a library of all the global styles.
Molecules
Relatively simple combinations of atoms bonded
together for reuse.
Organisms
Organisms are groups of molecules joined together
to form a relatively complex, distinct section of an
interface. Organisms can consist of similar and/or
different molecule types.
Templates
Groups of organisms stitched together to form pages.
Pages
Pages are specific instances of templates where
placeholder content is replaced with real
representative content to give an accurate depiction
of what a user will ultimately see.
At the page stage we test the effectiveness of
the design system. Viewing everything in context
allows us to loop back to modify our molecules,
organisms, and templates to better address
the real context of the design.
Atoms Molecule
Organism
Template Page

17. 17
STYLE TILES
Link: http://styletil.es/
Style Tiles is a great tool when you have little time
to explore different visual directions. Style Tiles is
a design deliverable consisting of fonts, colors and
interface elements that communicate the essence
of a visual brand for the web.
Present clients with interface choices without making
the investment in multiple Photoshop mock-ups. You
can also use Style Tiles as a great tool to see if your
styles work together as a system.
Style Tiles, Options 1-3
Style Tiles Template Example
Final Design