View
111
Download
3
Category
Preview:
DESCRIPTION
also part of the first session - styleguides
Citation preview
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
Recommended