En super-rask introduksjon til stilveiledninger

Denne uken gir Tuts + Web Design-teamet deg en dybdebit av stykker på den brede verden av Stil guider og alle de bevegelige delene som går sammen med dem.

Begrepet "Style Guide" er svært bredt og kan omfatte flere forskjellige områder, som muligens dekker alt fra firmaets merkevarebygging, til grensesnittdesign, til kodingsmetoder og mer.

For å få ballen til å rulle på vår Style Guide-uke, skal vi forenkle ting litt. La oss starte med det mest grunnleggende spørsmålet: Hva er en stilguide?

Hva er en "Style Guide"?

I et nøtteskall er en stilguide et sett med standarder som gjelder for opprettelse av tekst- eller designbaserte eiendeler for en organisasjon, en publikasjon eller et felt.(1)  Det er en omfattende referanse av Dos og don'ts som sikrer at innholdet produseres på en konsekvent måte, i tråd med målene for den organisasjonen, publikasjonen eller feltet.

Typer eiendeler Style Guides kan forholde seg til, varierer mye, og utenfor webdesign kan dekke alt fra utskriftsmateriale til klær. Men i verden av webdesign er Style Guides mest konstruert for å bestemme hvordan vi jobber med:

  • Nettstedoppsett og grensesnittdesign
  • Tekst og bildeformatering
  • Firmanavn og logo vises
  • Fargepaletter
  • Kodeopprettelse

Hva definerer stilguider?

Hver stilguide er unik, og du får se forskjellige ting som er definert i hver enkelt, men innholdet faller vanligvis inn i følgende fire kategorier.

Identitet

Hvem er bak innholdet? Identitet danner grunnlaget for merkevarebygging og kan omfatte:

  • Mission statement
  • Løfte til kunder / klienter / brukere
  • Personlighet, stemme og tone
Tone of Voice er veldig viktig for Macmillan Cancer Support

Branding & Design

Overføre "identiteten" til publikum gjennom elementer som:

  • Farge palett
  • Logo design
  • typografi
  • Samlet stil
  • animasjon
Kickstarter fargepalett

Interaksjon

Hvordan samspill med mennesker skal skje via:

  • Brukergrensesnittopplevelse
  • Prinsipper som sikrer brukerfokusert design
  • Besøkende flyter gjennom nettsteder
En del av BBCs globale opplevelsesspråk

formatering

Beste praksis med hensyn til:

  • Kodeformatering og metoder
  • Tekst / språk og bildeformatering
  • Retningslinjer for bruk av logoer
Ja, vi gjør det til

Hvordan brukes stilveiledninger?

Noen av de vanligste måtene Style Guides er implementert inkluderer:

  • Stil fliser
  • Mønsterbiblioteker
  • tråd
  • mockups
  • prototyper

Ofte gjør disse elementene vei til stilguider for å holde ting på ett sted, og noen ganger er vilkårene som er nevnt ovenfor, også brukt sammen med "Style Guide". Imidlertid, mens noen crossover er generelt sett akseptabelt, strengt en Style Guide handler om å definere regler og prinsipper, og deres faktiske utførelse er et sekundært stadium.

Det er mer!

Hold deg oppdatert denne uken for å lære å lage og utføre dine egne stilveiledninger, for å hjelpe deg med å definere et klart definert og konsistent offentlig ansikt for både deg selv og dine kunder!