Designing in the browser is the best way for designers to design for the web.

1. Dara Pressley, Lead Architect @ CustomInk
twitter: @uxdiva
Sketching in HTML

2. These were our teams design tools

3. Design could only be - Notional

4. But design tool is not a browser

5. So now we use this.
Github

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

9. Living Style Guide
The secret weapon

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.

16. Responsive Typography
src: http://typecast.com/blog/a-more-modern-scale-for-web-typography
Text needed to resize based on screen size. Large screen h1s look enormous on small screens.

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.

18. Thanks! Dara Pressley
@uxdiva