Quali sono le migliori pratiche di 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 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.
Le migliori pratiche: Il web design non è solo estetica
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.
Le migliori pratiche: Design visivo
Partiamo subito dagli standard consolidati per il visual design: quali sono le migliori pratiche di visual design? E quali sono i fattori che contano?
Riconoscimento e branding
Il sito web deve essere in linea con il resto dell'immagine dell'azienda e deve seguire la guida di stile. Pertanto, controlla il sito web per le seguenti domande:
- Riesci a capire a prima vista per quale azienda è stato creato il sito?
- La guida di stile è stata integrata?
- Gli elementi visivi sono riconoscibili dall'operatore del sito web?
- Gli elementi visivi sono utilizzati in modo coerente?
- Il linguaggio utilizzato nel 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 tuo 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 sul tema dell'usabilità
Perché dovresti essere interessato all'usabilità e all'esperienza utente come web designer? Troverai approcci più completi al tema dell'usabilità in in questo articolo.
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 tuo 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.
Questa tecnica è stata utilizzata per diverse centinaia di anni, soprattutto nelle arti visive e successivamente nella fotografia. In questo caso, come mostrato nel disegno, il progetto è diviso in 9 caselle di dimensioni uguali:
Nella creazione di siti web, la regola dei terzi ti aiuta anche a posizionare le informazioni più importanti in modo che il visitatore possa percepirle direttamente.
In parole povere, un elemento visivo non deve occupare più di tre caselle e deve essere posizionato in un terzo del layout. I nodi sono anche particolarmente adatti per inserire messaggi importanti e Call To Action.
In Photoshop puoi controllare e regolare i tuoi layout in modo semplice e veloce utilizzando lo "Strumento Ritaglio" e l'impostazione "Regola dei terzi". Per illustrare la Regola dei Terzi, ho dato un'occhiata al sito web di Marqeta:
Il prodotto e il suo messaggio sono ben distribuiti tra i nodi. In questo caso, il design potrebbe diventare un po' più efficiente spostando leggermente la CTA. Tuttavia, l'armonia del design ne risentirebbe un po':
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?
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:
Ho ridotto ulteriormente la versione mobile per testare ciò che rimane. In questo caso, il prodotto cattura l'attenzione per primo, seguito dalla CTA e dal logo. Puoi fare questo test con l'intera pagina, preferibilmente ancora in fase di progettazione. Qui puoi analizzare in modo semplice e veloce quali elementi del tuo design sono in evidenza e decidere se questo è ciò che vuoi.
Ottimizzare i contenuti e la SEO
La creazione di siti web include naturalmente anche contenuti scritti. Esistono copywriter professionisti che, con un occhio di riguardo alla SEO, all'usabilità e alla guida di stile, scrivono contenuti significativi per il tuo sito web. Tuttavia, esistono 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 riferimento è abituato a un certo gergo, devi sempre tenere presente che la nostra soglia di attenzione su un sito web è molto più breve rispetto, ad esempio, alla lettura di articoli tecnici. Piuttosto, quando navighiamo sui siti web, cerchiamo informazioni specifiche. Scannerizziamo il contenuto, per così dire, invece di prenderci il tempo di leggerlo per bene.
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à web e siti web senza barriere
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 verificarlo facilmente guardando il tuo sito web in bianco e nero:
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 è di almeno 4,5:1 per il testo normale e di 3:1 per il testo grande come i titoli:
Se specifico i toni del grigio, la CTA non è abbastanza contrastata, mentre 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 hai la possibilità di selezionare i font con e anche secondo quale standard WCAG volete allineare la vostra selezione.
L'uso dei colori per rappresentare visivamente la gestione degli errori può causare problemi. Prendiamo ad esempio gli elementi di forma. Gli errori sono spesso rappresentati evidenziando a colori l'input Box . Per chi ha un deficit cromatico, questo può portare a non riconoscere gli errori e quindi a non risolverli.
Quando pianifichi, devi tenerne conto e quindi assicurarti sempre che ci sia un'altra rappresentazione dell'errore. Qui puoi trovare altri fatti e risorse interessanti sul tema dell'accessibilità, oltre a preziosi consigli per creare un sito WordPress accessibile.
Ulteriori risorse
"*" indica i campi obbligatori
Risoluzione e design web reattivo
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 mente altri 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 tuoi gruppi target.
Migliori pratiche per WordPress
WordPress Codice
WordPress vi offre un numero incredibile di possibilità per presentare i tuoi disegni sul web. Ma anche qui ci sono standard e buone pratiche da seguire.
Il WordPress Codex
WordPress plugin e Themes
Quando si sceglie il plugin e il tema giusto, non è importante solo la sua funzionalità attuale. È anche una buona idea leggere le recensioni e informarsi sulla frequenza degli aggiornamenti e verificare se il plugin o il tema continueranno a essere sviluppati in futuro. Gli strumenti WordPress che vengono sviluppati regolarmente tendono ad avere un supporto più attivo. Inoltre è più probabile che rimangano compatibili con le versioni future del tuo sito.
WordPress Aggiornamenti e sicurezza
L'aggiornamento regolare di Themes e plugin riduce la vulnerabilità agli accessi indesiderati. I bug sono risolti e i tuoi siti web sono adattati all'ambiente tecnico in continua evoluzione. La sicurezza plugin 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 tue domande
Quali domande hai per Sonja? Quali sono le migliori pratiche che puoi consigliare tu stesso? Sentiti libero di utilizzare la funzione di commento. Vuoi altri consigli sul web design e sullo sviluppo? Allora seguici su Twitter, Facebook o tramite la nostra newsletter.
