What would appear on the surface to be a simple change like updating the look of a button or changing the color of a link can turn out to be a huge effort. When everyone understands what can be reused and what needs to be newly created, the team can focus discussion on how to attain the best designs.
25. All this re-creation and re-invention isn't just
inefficient, it leaves the team open to problems.
Because it's not the sexy part of their project, it's
likely to get less attention, resulting in an
unusable and frustrating experience.
Jared Spool
26. Challenge
Need to be able to
constantly and consistently
evolve the look and feel.
27. A style guide is a set of standards for
the writing and design of documents,
either for general use or for a specific
publication, organization or field.
Wikipedia
28. Style guide
• Colors • Buttons
• Typography • Containers
• Iconography • Layouts
• Form elements • Navigation elements
• Alerts, messages • Spacing, alignment
31. Disconnect
There is a disconnect
between designers and
developers
32. Disconnect
Style guides are
always out of sync
40. /*
Styleguide: List
Common unordered lists.
.standard - Bulleted list
.pipedList - Linear list
<ul class="$modifier">
<li>Tickets are non-refundable.</li>
<li>Tickets are non-transferable.</li>
</ul>
*/