also part of the first session - styleguides

1. Welcome to the
Internet
my name is style and i am your guide

2. styleguides
Ein Styleguide (oder deutsch Gestaltungsrichtlinie)
beschreibt, wie bestimmte Elemente eines
Druckerzeugnisses oder einer Website zu gestalten sind.
Diese Richtlinien sollen ein einheitliches Erscheinungsbild
verschiedener Kommunikationsmittel [...], gewährleisten
und so die Bildung einer Corporate Identity ermöglichen.
- wikipedia

3. styleguides
Ein Styleguide (oder deutsch Gestaltungsrichtlinie)
beschreibt, wie bestimmte Elemente eines
Druckerzeugnisses oder einer Website zu gestalten sind.
Diese Richtlinien sollen ein einheitliches
Erscheinungsbild verschiedener Kommunikationsmittel [...],
gewährleisten und so die Bildung einer Corporate Identity
ermöglichen.
- wikipedia

4. what are the 3 most
important things in
web-design
guess what?

5. #1
Consistency

6. #2
Consistency

7. #3
Consistency

8. whenever you
design
think about ...

9. Sir Patrick Stewart
Captain Jean-Luc Picard, Prof. Charles Francis Xavier

11. but how
do we get consistency on the web?

12. styleguides
to the rescue!

13. “we are not designing pages any
more, we are designing systems of
components.”
stephen hay

14. brad frost - atomic design

15. back to
styleguides

16. what to include
●
●
●
●
●
●
logo(s)
headings
colors
fonts
layout and grids
buttons, icons, etc.

17. benefits
●
●
●
●
easy to refer on project handover
no need to change all templates
all components at one place
good overview of all components
BUT the best of all...

18. Consistency

19. some styleguides
● code for america
● starbucks
● BBC

20. template tables
to get an overview

21. the ultimate project cheat sheet
● overview of the project (structure & content types
● name, template, used on, variations, content types
● wireframes only templates not pages they belong
to - relationship
● high level and brief bullet points
● help to speak the same language
● get a feeling what content types are needed

22. template tables
in action

23. where to go on
●
●
●
●
●
brad frost - atomic design (video)
24ways - front end style guides
styleguides for the web
anna debenham - styleguide wrap up
template tables