Welcome to the Internetmy name is style and i am your guide

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

styleguidesEin 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

what are the 3 most important things in web-designguess what?

#1

Consistency

#2

Consistency

#3

Consistency

whenever you designthink about ...

Sir Patrick StewartCaptain Jean-Luc Picard, Prof. Charles Francis Xavier

but howdo we get consistency on the web?

styleguidesto the rescue!

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

stephen hay

brad frost - atomic design

back to styleguides

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

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...

Consistency

some styleguides● code for america

● starbucks

● BBC

template tablesto get an overview

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

template tablesin action

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