Come creare una Web Guida alla progettazione di stile

La creazione di siti web è sempre più complessa e  di solito non è un lavoro di una sola persona. E ‘importante assicurarsi che il design è coerente e ottimizzato per soddisfare gli obiettivi  e creare esperienze piacevoli per gli utenti.

Uno dei modi per garantire che la squadra è sulla stessa  strada  nella progettazione di parti separate del sito o il salvataggio di disegni da parte degli sviluppatori è quello di creare documentazione di progetto o di una guida di stile web design.

È utile avere una guida di stile per creare un’esperienza coerente tra pagine diverse. Inoltre aiuta a garantire che lo sviluppo futuro o di produzione di terze parti seguiranno linee guida del marchio e sarà percepito come parte del marchio globale.

Che cosa è una Style Guide?

Una guida di stile è un insieme di elementi pre-progettati, grafica e regole che progettisti o gli sviluppatori devono seguire per garantire che i pezzi separati del sito web saranno coerenti  alla fine.

 Perché è importante?

E ‘estremamente importante quando più progettisti stanno lavorando su un sito web o web app  per assicurarsi che essi non interpretino troppo e non alterino  gli stili in base alle preferenze personali. In fase di sviluppo, con elementi definiti del sito, e’ facile per gli sviluppatori di riutilizzare questi elementi. Inoltre, può rendere più facile il lavoro perché sapranno quali sono gli elementi che hanno da codificare e vedranno esattamente il progetto fin dall’inizio.

 E’ compito del progettista  includere tutte le possibili interazioni, come passaggio del mouse, fare clic su, visitare e altri stati per i pulsanti, titoli, link, etc.

Creazione di una Guida Web Design Stile

1. Studiare la Marca

In primo luogo, è necessario studiare la marca in modo da capire ciò che essa rappresenta. Venite a conoscere la storia dietro il marchio, osservare la squadra e capite la loro la visione, la missione e i valori della società. E ‘importante scavare più a fondo nel marchio in modo che la guida di stile che rispecchi  visivamente ed emotivamente  l’organizzazione.

2. Definire Tipografia

Secondo Oliver Reichenstein ,la  tipografia è il 95 per cento di web design.

È necessario ottenere la tipografia proprio perché è uno degli strumenti di comunicazione più importanti tra i visitatori e il vostro sito web.

Ci sono tipi principali: h1, h2, h3, h4, h5 e h6. Poi copia corpo, grassetto e corsivo e variazioni. Pensate alla copia personalizzata che verrà utilizzato per i collegamenti più piccoli, testo introduttivo e così via. Fornire carattere familiare, peso e colore.

 Iniziare impostando colori primari per il vostro stile di guida che domineranno il vostro sito web, i colori dominanti dovrebbero includere non più di tre colori. In alcuni casi, tuttavia, avrete bisogno di colori secondari e terziari anche per illustrare l’interfaccia utente. Includere anche colori neutri come il bianco, grigio e nero per i colori primari del marchio di distinguersi.

5. Iconografia

Le icone esistono da migliaia di anni e sono più vecchie di testo e parole. Approfitta di usare icone nei vostri progetti perché  darà un’idea immediata ai visitatori su  cosa sta succedendo e cosa succederà dopo. Raccogliere le icone giuste darà più ambito al contenuto  dei colori. Quando si utilizzano le icone, assicuratevi di pensare al target di riferimento, la religione, la storia, in modo da evitare malintesi e incomprensioni. Una cosa da ricordare: pensare al marchio e i suoi valori in modo da non utilizzare le icone disegnate a mano su un grande sitocome un  web banking.

 Le foto parlano piu’ migliaia di parole. Assicurati di includere le immagini che definisce lo stile e la direzione  del sito web . Ancora una volta, pensare ai valori del brand e la sua missione. Ad esempio, un ente di beneficenza che distribusce acqua utilizza immagini con forte emozione, una buona causa quindi, e chiede alle emozioni umane di ricordarsi  di essere fortunati ad avere beni di vita essenziali come l’acqua, il cibo, l’elettricità e l’istruzione.