6. Sketching in code helps
to promote
communication between
designer and developer.
Our developers have
been very happy that we
went this direction.
Because it makes their
jobs easier.
Key stakeholders can see
from the beginning the
concepts in HTML and
so have more
confidence in the design.
7. Sketching in code is not
• Production level code
• DRY
• Works across multiple browsers
8. Instead
We work to try to get our code to
render the way we want the design
to look. In 1 browser on 1 OS.
• Even if it’s messy
• Even if we repeat code
• Even if we build the module
twice and hide/show as we go
through breakpoints
fake responsive
module
10. Goals of the Living Guide
• UX / VX lead style guide
• representing the CustomInk design principles
• Responsive
• The coded expression of the style guide
• Ability to easily add to and update styles and components
• Documentation
• Prototyping Support
11. Content First
mobile second
It was very important to design that we be able to build the page according to the needs of the content.
And then, designing for the small screen was the next step to assure that layouts were not to complex or heavy.
12. • We had a notion of breakpoints
• But did not what to be restricted by them
13. The hardest thing to get our minds wrapped around was that there is
no grid.
That we needed to be the grid and wrap its structure around the needs
of the content.
We had a lot of discussion around the header and footer in particular.
Because, regardless of what we did to the content area of the page, the
users experience should be consistent as they move from page to page
on their particular device
14. Elements &
Components
By using the living style
guide, I get the benefit
of all the elements and
components that are
already developed.
17. Title TextDesign Specifications
• Design specifications are
already included in the html/
css
• Vertical Rhythm is inherited by
the style guide first, then can
be altered by the designer if
needed.