Best practice di web design, consigli e linee guida che dovresti conoscere

8 Min.
Migliori pratiche di web design

Quali sono le migliori pratiche nel web design? Come puoi implementarli con successo nel tuo prossimo progetto di web design? E cosa definiamo come standard di design e best practice nel web design?

Cosa intendiamo in realtà per "migliori pratiche"?

Nello sviluppo web, ci sono regole fisse che hanno a che fare principalmente con la leggibilità e la pulizia del codice e con la sicurezza di un sito web. Nel web design, invece, la terminologia è un po' più confusa e le regole sono più aperte alle proprie interpretazioni.

Migliori pratiche: Il web design è più che estetica

Le migliori pratiche nel web design sono un mix di visual design, user experience design, accessibilità e scrittura dei contenuti - con un focus sul SEO.

Le migliori pratiche nel web design sono un insieme di regole da seguire per soddisfare le aspettative generali degli utenti. Inoltre, sono linee guida per una maggiore chiarezza e una migliore esperienza utente.

In questo articolo, vi presenterò le migliori pratiche per un buon web design. Per ogni area, vi darò consigli su come acquisire maggiori conoscenze e presenterò strumenti ed esempi che vi aiuteranno nel vostro prossimo progetto.

Ho anche trattato brevemente l'argomento delle migliori pratiche nello sviluppo di WordPress . Come probabilmente sapete, la pianificazione e la gestione dei progetti sono una parte importante del web design. In questo post lascio fuori entrambi gli argomenti per ora, perché questo andrebbe oltre lo scopo qui.

Migliori pratiche: Design visivo

Cominciamo ora con gli standard stabiliti per il visual design: quali sono le migliori pratiche nel visual design? E quali sono i fattori che contano?

Riconoscimento e branding

Il sito web deve adattarsi al resto dell'immagine dell'azienda e deve seguire la guida di stile. Pertanto, controlla il sito web per le seguenti domande:

  • Si può dire a prima vista per quale azienda è stato creato il sito web?
  • La guida di stile è stata integrata?
  • Gli operatori del sito sono riconoscibili dagli elementi visivi?
  • Gli elementi visivi sono usati in modo coerente?
  • Il linguaggio usato sul sito web riflette il branding?

Google è molto più avanti quando si tratta di un branding coerente. Così su due piedi, non mi viene in mente nessun'altra marca che abbia così tanti prodotti diversi e che riesca comunque a dare ad ogni prodotto l'impronta dell'azienda. Anche quando guardo un prodotto Google precedentemente sconosciuto, posso associarlo direttamente al marchio.

Come fa Google?

Questo include l'uso coerente dei colori di Google, la tipografia, lo spazio bianco prominente, le call-to-action e la navigazione coerenti. I loghi hanno anche una certa coerenza che funziona attraverso le aziende e le categorie - anche se quest'ultima non significa necessariamente che il design susciterà dei like.

Con la coerenza nel branding, si analizza prima solo se il sito web riflette l'azienda e il suo branding nel miglior modo possibile.

Standard di web design e usabilità

Un'altra "best practice" è definita dall'integrazione degli standard. Questo include, per esempio, il posizionamento del logo nell'angolo superiore sinistro, l'aspetto dei pulsanti, i link e così via. Questi aiutano i visitatori del tuo sito a trovare la loro strada rapidamente e facilmente. Pertanto, questi standard sono indispensabili nella realizzazione di un'usabilità di successo.

Altre risorse sull'usabilità:

Perché dovresti essere interessato all'usabilità e all'esperienza utente come web designer? Puoi trovare approcci più completi al tema dell'usabilità in questo articolo e su https://www.usability.gov/.

Cosa definisce uno standard di web design?

Definiamo gli standard di progettazione ampiamente utilizzati nel web design attraverso i modelli di progettazione UI. Come vengono definiti gli standard, Andy Crestodina lo spiega in modo molto comprensibile nel suo articolo sugli standard di web design.

Secondo questo, un approccio di design deve essere usato su almeno l'80% dei siti web per contare come standard. Tutto il resto è un'abitudine (50-79 per cento) o addirittura porta incoerenza e confusione (0-49 per cento) al vostro sito.

Design armonioso: la regola dei terzi

Ho già parlato dell'argomento del web design armonioso. Questa volta vorrei approfondire la regola dei terzi.

Questo è stato usato per diverse centinaia di anni - principalmente nelle arti visive e più tardi nella fotografia. Qui, come mostrato nel disegno, il disegno è diviso in 9 scatole di uguali dimensioni:

Design dell'interazione
Fonte: interaction-design

Quando si creano siti web, la regola dei terzi aiuta anche a collocare le informazioni più importanti in modo tale che il visitatore possa percepirle direttamente. 

In parole povere, un elemento visivo non dovrebbe occupare più di tre caselle ed essere situato in un terzo del layout. I nodi sono anche particolarmente adatti per collocare messaggi importanti e call-to-action.

In Photoshop, puoi usare lo "Strumento Ritaglia" e l'impostazione "Regola dei terzi" per controllare e regolare rapidamente e facilmente i tuoi layout. Per illustrare la regola dei terzi, ho dato un'occhiata più da vicino al sito di Marqeta:

Migliori pratiche

Il prodotto e il suo messaggio sono ben distribuiti tra i nodi. Qui, il design potrebbe diventare un po' più efficiente spostando un po' il CTA. Tuttavia, l'armonia del design ne soffrirebbe un po':

Migliori pratiche

La versione mobile mostra chiaramente che il messaggio riempie il terzo inferiore del layout, mentre il prodotto viene visualizzato abbastanza al centro. Qui potremmo ripensare il posizionamento del CTA.

Le cosiddette "heatmap" vi aiutano anche a scoprire dove i visitatori del vostro sito guardano e cliccano principalmente. Lo strumento Crazy Egg, per esempio, offre un servizio (a pagamento) qui.

Un altro modo per controllare il tuo design è il cosiddetto test della sfocatura. Qui prendete la nitidezza dal vostro layout (per esempio con l'aiuto di Photoshop e la "sfocatura gaussiana" - 12%). Se gli utenti non possono più leggere il contenuto, diventa rapidamente chiaro dove si concentra l'attenzione quando si visualizza il sito web. Questo test è anche adatto per analizzare il CTA. È ancora riconoscibile come tale?

Best-Practices-in-Web-Design

Per questo ho usato di nuovo il sito web di Marqeta. Particolarmente prominente è la CTA di destra e il prodotto, seguito dal messaggio e infine il logo e la seconda CTA:

Best-Practices-in-Web-Design

La versione mobile l'ho ulteriormente disinnescata per testare ciò che poi rimane. Qui, il prodotto cattura l'occhio per primo, seguito dal CTA e dal logo. Potete fare questo test con l'intera pagina - meglio ancora nella fase di progettazione. Qui puoi analizzare rapidamente e facilmente quali elementi del tuo design sono prominenti e decidere se questo è ciò che vuoi.

Testo e SEO

La creazione di siti web include naturalmente anche il contenuto scritto. Ci sono copywriter professionisti che - con un occhio al SEO, all'usabilità e alla guida di stile - scrivono contenuti significativi per il tuo sito web. Tuttavia, ci sono anche alcune linee guida che puoi seguire da solo. 

Dovresti prestare particolare attenzione alla lunghezza e alla leggibilità dei testi - spesso i testi sono troppo lunghi e troppo contorti. 

Anche se il pubblico di destinazione è abituato a un certo gergo, si dovrebbe sempre essere consapevoli del fatto che il nostro tempo di attenzione su un sito web è molto più breve che, per esempio, quando si leggono articoli tecnici. Piuttosto, quando navighiamo nei siti web, cerchiamo informazioni specifiche. Scannerizziamo il contenuto, per così dire, piuttosto che dedicare il tempo necessario a leggerlo correttamente.

Google ti dà anche meno punti se le frasi della tua pagina sono troppo lunghe e più punti se sono collegate dalle cosiddette"parole di transizione".

Tra i post interessanti sul SEO ci sono anche:

Accessibilità

L'accessibilità del web è purtroppo ancora un argomento marginale - e troppo spesso ignorato. Anche qui, ci sono approcci semplici che potremmo considerare fin dal primo progetto. Per esempio, usate prevalentemente colori per evidenziare le informazioni? 

Puoi facilmente testare questo guardando il tuo sito web in bianco e nero:

Best-Practices-in-Web-Design

Per questo ho analizzato di nuovo lo stesso sito web. Anche senza colori, il messaggio arriva chiaramente. La CTA in alto a destra potrebbe essere problematica in termini di contrasto.

Per verificarlo con certezza, c'è il "Contrast Checker". Il rapporto di contrasto predefinito è almeno 4,5:1 per il testo normale e 3:1 per il testo grande come i titoli:

Best-Practices-in-Web-Design
Best-Practices-in-Web-Design

Se specifico i toni di grigio, il CTA non è abbastanza contrastato, ma nella variante a colori è sufficiente.

http://colorsafe.co/ è un altro strumento per determinare i colori e la loro forza di contrasto. Qui si possono provare direttamente diverse combinazioni di colori. Vi viene dato direttamente il rapporto e avete la possibilità di selezionare i font con e anche secondo quale standard WCAG volete allineare la vostra selezione.

Usare i colori per rappresentare visivamente la gestione degli errori può causare problemi. Prendete gli elementi di forma, per esempio. Gli errori sono spesso rappresentati evidenziando la casella di input in colore. Per qualcuno con un deficit di colore, questo può portare a non riconoscere gli errori e quindi a non risolverli. 

Quando si pianifica, si dovrebbe tenerne conto e quindi assicurarsi sempre che sia disponibile un'altra rappresentazione dell'errore. Qui puoi trovare altri fatti e risorse interessanti sull'accessibilità, oltre a preziosi consigli per creare un sito WP accessibile.

Altre risorse

Risoluzione e design cross-device

Non c'è probabilmente nessuna regola nel web design che è più frequentemente affrontata - e più frequentemente disattesa - di "mobile first”.

Con questo approccio, il contenuto viene creato per i dispositivi mobili e poi adattato di conseguenza per quelli più grandi. L'opposto di questo è allineare il design a desktop e co. e poi adattarlo di conseguenza per i dispositivi più piccoli. 

Mi vengono in mentealtri due approcci:

  • Creare un sito web separato per ogni dispositivo mobile e desktop e poi accedervi di conseguenza.
  • Visualizzare il sito web come versione desktop sul telefono cellulare

Il primo può essere l'approccio giusto - a seconda del progetto - ma non è molto diffuso perché è molto costoso e richiede tempo. Quest'ultimo è purtroppo ancora visto troppo spesso sul web e quindi ha urgente bisogno di essere aggiunto alla lista delle "migliori pratiche". Puoi trovare altri suggerimenti per l'ottimizzazione dei dispositivi mobili qui.

Mobile first non deve necessariamente essere sempre il modo giusto: Una ricerca sul gruppo target e il loro comportamento su internet può mostrarvi rapidamente da quali dispositivi il vostro sito è principalmente accessibile. 

L'idea di fondo non è solo che il contenuto sia preparato visivamente, ma anche che si tenga conto delle mutate condizioni esterne. Potete leggere di più nell'articolo Mobile-First UX Design Is No Longer a Trend.

La seguente tabella illustra chiaramente quali sono le schermate a cui si accede più frequentemente su Internet. Questo può aiutarti a decidere per quali schermi vuoi ottimizzare il tuo sito web. Ma si noti che una tale generalizzazione può essere usata solo come linea guida. Queste statistiche non possono sostituire un'indagine sui vostri gruppi target.

Best-Practices-in-Web-Design
Fonte: https://www.hobo-web.co.uk/best-screen-size/

Migliori pratiche per WordPress

WordPress Codice

WordPress vi offre un numero incredibile di possibilità per presentare i vostri disegni sul web. Ma anche qui ci sono standard e buone pratiche da seguire.

Il WordPress Codex

WordPress fornisce un codex generale, che può aiutare a trattare l'argomento in modo più dettagliato.

WordPress Plugins e Themes

Quando si sceglie il giusto Plugins e Themes , non è importante solo la sua funzionalità attuale. È anche una buona idea leggere le recensioni e familiarizzare con la frequenza degli aggiornamenti offerti e indagare se il Plugin, o Theme, continuerà ad essere sviluppato in futuro. WordPress Gli strumenti che vengono sviluppati regolarmente tendono ad avere un supporto più attivo. È anche più probabile che rimangano compatibili con le versioni future del tuo sito.

WordPress Aggiornamenti e sicurezza

L'aggiornamento regolare di Themes e Plugins riduce la vulnerabilità agli accessi indesiderati. I bug sono risolti e i vostri siti web sono adattati all'ambiente tecnico in continua evoluzione. La sicurezza Plugins come WordFence aiuta anche a tenere traccia del tuo sito e della sua sicurezza e a reagire ai problemi in tempo. Un certificato SSL dovrebbe essere integrato in ogni sito web. 

Le migliori pratiche nel web design: le vostre domande

Che domande hai per Sonja? Quali sono le migliori pratiche che potete raccomandare voi stessi? Sentitevi liberi di usare la funzione di commento. Vuoi altri consigli su web design e sviluppo? Allora seguici su Twitter, Facebook o tramite la nostra newsletter.

Dopo aver studiato Game Design e scrittura creativa, si è specializzata nel web e app designe e nel loro sviluppo. La sua attenzione è rivolta alla gamification e al capire la motivazione e l'esperienza dell'utente, insieme alla passione e alla curiosità per i trend tecnologici.

Articoli correlati

Commenti su questo articolo

Scrivi un commento

Il tuo indirizzo e-mail non sarà pubblicato. I campi obbligatori sono contrassegnati con *.