Un'introduzione super veloce alle guide di stile

Questa settimana il team Tuts + Web Design ti offre una serie di pezzi approfonditi nel vasto mondo di Guide di stile e tutte le parti mobili che le accompagnano.

Il termine "Guida allo stile" è molto ampio e può comprendere diverse aree, potenzialmente coprendo tutto, dal marchio aziendale, alla progettazione dell'interfaccia, alle metodologie di codifica e altro ancora.

Per dare il via alla nostra settimana di Style Guide, semplificeremo un po 'le cose. Iniziamo con la domanda più fondamentale: cos'è una guida di stile?

Cos'è una "Guida allo stile"?

In breve, una guida allo stile è un insieme di standard che si applicano alla creazione di risorse testuali o di progettazione per un'organizzazione, una pubblicazione o un campo.(1)  È un riferimento completo di DO e NON FARE che assicura che il contenuto sia prodotto in modo coerente, in linea con gli obiettivi di tale organizzazione, pubblicazione o campo.

I tipi di risorse Le guide allo stile possono essere molto diverse e al di fuori del web design possono riguardare tutto, dai materiali di stampa all'abbigliamento. Tuttavia, nel mondo del web design, le Guide di stile sono più comunemente costruite per determinare il modo in cui lavoriamo:

  • Layout del sito Web e design dell'interfaccia
  • Formattazione di testo e immagine
  • Visualizza il nome dell'azienda e il logo
  • Tavolozze di colori
  • Creazione del codice

Definizione delle guide di stile?

Ogni Style Guide è unica e vedrai cose diverse definite in ognuna, tuttavia il contenuto generalmente rientra nelle seguenti quattro categorie.

Identità

Chi c'è dietro il contenuto? L'identità costituisce la base del marchio e può includere:

  • Dichiarazione di missione
  • Promessa a clienti / clienti / utenti
  • Personalità, voce e tono
Tone of Voice è molto importante per Macmillan Cancer Support

Branding e design

Trasmettere l'identità al pubblico attraverso elementi quali:

  • Palette dei colori
  • Design del logo
  • Tipografia
  • Stile generale
  • Animazione
La tavolozza dei colori di Kickstarter

Interazione

Come si dovrebbe interfacciare con le persone tramite:

  • Esperienza con l'interfaccia utente
  • Principi che garantiscono la progettazione focalizzata sull'utente
  • Flusso di visitatori attraverso i siti
Parte del Global Experience Language della BBC

formattazione

Buone pratiche riguardanti:

  • Formattazione e metodologie del codice
  • Testo / lingua e formattazione dell'immagine
  • Linee guida sull'uso del logo
Sì, lo facciamo

Come vengono applicate le guide di stile?

Alcuni dei modi più comuni in cui sono implementate le Guide di stile includono:

  • Tessere stile
  • Librerie di modelli
  • wireframes
  • Mockups
  • prototipi

Spesso questi elementi si fanno strada nelle Guide di stile al fine di mantenere le cose in un posto, e talvolta i termini sopra elencati sono usati anche in modo intercambiabile con "Guida allo stile". Tuttavia, mentre un crossover è generalmente considerato accettabile, in senso stretto una guida di stile riguarda la definizione di regole e principi e la loro esecuzione effettiva è una fase secondaria.

C'è più!

Restate sintonizzati questa settimana per imparare come creare ed eseguire le vostre Guide di stile, per aiutarvi a creare una faccia pubblica chiaramente definita e coerente per voi e per i vostri clienti!