Migliori pratiche, consigli e linee guida nel web design che dovreste conoscere

8 Min.
Migliori pratiche di web design

Quali sono le migliori pratiche nel web design? Come li implementate con successo nel vostro prossimo progetto di web design? E cosa definiamo in realtà come standard di progettazione e best practice nel web design?

Cosa intendiamo per "migliori pratiche"?

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

Le migliori pratiche: Il webdesign è più dell'estetica

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

Le migliori pratiche nel web design sono un insieme di regole che devono essere seguite per soddisfare le aspettative generali degli utenti. Sono anche linee guida per una maggiore chiarezza e una migliore esperienza d'uso.

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

Affronterò brevemente anche il tema delle migliori pratiche nell'area di WordPress Sviluppo. Come sicuramente saprete, la pianificazione e la gestione del progetto sono una parte importante del web design. In questo articolo tralascerò entrambi gli argomenti per il momento, perché questo andrebbe oltre lo scopo di questo articolo.

Le migliori pratiche: Progettazione visiva

Partiamo ora dagli standard stabiliti per il visual design: Quali sono le migliori pratiche nel campo del visual design? E quali fattori sono coinvolti?

Caratteristica di riconoscimento e branding

Il sito web deve essere in linea con il resto dell'aspetto dell'azienda e deve essere basato sulla guida di stile. Controlla il sito web per le seguenti domande:

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

Google è all'avanguardia nel settore del branding coerente. Non mi viene in mente nessun altro marchio che abbia così tanti prodotti diversi e che riesca comunque a dare ad ogni prodotto il feeling aziendale. Anche quando guardo un prodotto Google che non ho mai visto prima, posso associarlo direttamente al marchio.

Come fa Google a fare questo?

Tra l'altro attraverso l'uso coerente dei colori di Google, la tipografia, i bianchi distintivi, la coerenza delle azioni di Call To Action e la navigazione. I loghi mostrano anche una certa coerenza che funziona tra le aziende e le categorie - anche se quest'ultima non significa necessariamente che il design genererà anche dei favori.

Con coerenza nel branding, si analizza prima di tutto solo se il sito web riflette al meglio l'azienda e il suo marchio.

Standard di web design e usabilità

Un'altra "best practice" è definita dall'integrazione delle norme. Questo include, ad esempio, il posizionamento del logo nell'angolo in alto a sinistra, l'aspetto dei pulsanti, i link e così via. Questi aiutano i visitatori del vostro sito a orientarsi in modo semplice e veloce. Pertanto questi standard sono indispensabili per l'implementazione di una fruibilità di successo.

Ulteriori risorse sul tema dell'usabilità:

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

Cosa definisce uno standard di web design?

Definiamo standard di progettazione diffusi nel web design attraverso Modelli di design dell'interfaccia utente. Andy Crestodina spiega molto chiaramente come vengono definiti gli standard nel suo articolo su Standard di progettazione web.

In base a ciò, su almeno l'80 per cento dei siti web deve essere utilizzato un approccio di design per essere considerato come standard. Qualsiasi altra cosa è 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

A proposito webdesign armonioso Ho già fatto rapporto in precedenza. Questa volta vorrei entrare più nel dettaglio della regola dei terzi.

Questo è stato utilizzato per diverse centinaia di anni - principalmente nel campo delle belle arti 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

Nella creazione di siti web, la regola dei terzi aiuta soprattutto a collocare le informazioni più importanti in modo che il visitatore possa percepirle direttamente. 

In parole povere, un elemento visivo non dovrebbe occupare più di tre scatole e dovrebbe trovarsi in un terzo del layout. I nodi sono anche particolarmente adatti per l'inserimento di messaggi importanti e per la chiamata alle azioni.

In Photoshop, è possibile rivedere e regolare i layout in modo semplice e veloce utilizzando lo strumento di ritaglio e l'impostazione Regola dei terzi. Per illustrare la Regola dei Terzi ho creato il sito web di Marqeta un po' più vicino:

Migliori pratiche

Il prodotto e il suo messaggio sono ben distribuiti nei nodi. Qui il progetto potrebbe essere reso un po' più efficiente spostando un po' il CTA. Tuttavia, l'armonia del progetto ne risentirebbe in qualche modo:

Migliori pratiche

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

Le cosiddette "mappe di calore" vi aiutano anche a scoprire dove i visitatori del vostro sito guardano e cliccano principalmente. Lo strumento Uovo pazzo offre qui ad esempio un servizio (a pagamento).

Un altro modo per controllare il vostro progetto è il cosiddetto Blur test. Qui si prende la nitidezza del layout (ad esempio, utilizzando Photoshop e la "Sfocatura Gaussiana" - 12%). Se gli utenti non sono più in grado di leggere i contenuti, diventa rapidamente chiaro dove si trova il punto focale durante la visualizzazione del sito web. Questo test è adatto anche per l'analisi del CTA. È ancora riconoscibile come tale?

Le migliori pratiche di Web Design

Per questo ho di nuovo il sito web di Marqeta viene utilizzato. Il CTA di destra e il prodotto sono particolarmente evidenti, seguiti dal messaggio e infine dal logo e dal secondo CTA:

Le migliori pratiche di Web Design

La versione mobile l'ho disarmata ancora di più per testare ciò che resta. Qui il prodotto cattura l'attenzione per primo, seguito dal CTA e dal logo. Potete fare questo test con l'intero sito - meglio in fase di progettazione. Qui potete analizzare rapidamente e facilmente quali elementi del vostro progetto sono prominenti e decidere se questo è ciò che volete.

Testo e SEO

La creazione di siti web comprende naturalmente anche contenuti scritti. Per questo ci sono copywriter professionisti che - con un occhio di riguardo al SEO, all'usabilità e alla guida allo stile - scrivono contenuti significativi per il vostro sito web. Ma ci sono anche alcune linee guida che potete seguire voi stessi. 

Si dovrebbe prestare particolare attenzione alla lunghezza e alla leggibilità dei testi - spesso i testi sono troppo estesi e troppo annidati. 

Anche se il gruppo target è abituato a un certo gergo, dovete sempre essere consapevoli del fatto che la nostra attenzione su un sito web è molto più ridotta rispetto, ad esempio, alla lettura di articoli professionali. Piuttosto, siamo alla ricerca di informazioni specifiche quando navighiamo su siti web. È più probabile che scansioniamo il contenuto piuttosto che prenderci il tempo necessario per leggerlo correttamente.

Anche da Google ci sono punti meno se le frasi sulla vostra pagina sono troppo lunghe e punti più se vengono sostituite dal cosiddetto "parole di transizione"sono interconnessi.

Interessanti sono anche i contributi al tema della SEO:

Accessibilità

L'accessibilità del web è purtroppo ancora un argomento marginale - e troppo spesso viene ignorato. Ci sono anche approcci semplici che potremmo prendere in considerazione fin dal primo progetto. Per esempio, usate principalmente i colori per evidenziare le informazioni? 

Potete provarlo facilmente guardando il vostro sito web in bianco e nero:

Le migliori pratiche di Web Design

Per questo ho analizzato di nuovo lo stesso sito web. Anche senza colori il messaggio è chiaro. Il CTA in alto a destra potrebbe diventare problematico per quanto riguarda il contrasto.

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

Le migliori pratiche di Web Design
Le migliori pratiche di Web Design

Se specifichiamo le tonalità di grigio, il CTA non è abbastanza ricco di contrasto, ma la variante di colore è sufficiente.

http://colorsafe.co/ è un altro strumento per determinare i colori e il loro contrasto. Qui potete provare direttamente diverse combinazioni di colori. Il rapporto è dato direttamente a voi e avete la possibilità di selezionare i font e anche in base a quale WCAG Standard volete fare la vostra scelta.

Possono sorgere problemi con l'uso dei colori per la rappresentazione visiva degli errori. Prendiamo elementi di forma, per esempio. Gli errori sono spesso rappresentati qui evidenziando la casella di input a colori. Questo può far sì che una persona con una debolezza cromatica non sia in grado di riconoscere gli errori e quindi non sia in grado di risolverli. 

È necessario tenerne conto nella pianificazione e quindi assicurarsi sempre che ci sia un'altra rappresentazione dell'errore. Qui potete trovare altre informazioni e risorse interessanti sull'accessibilità, oltre a preziosi consigli per creare una pagina WP accessibile.

Altre risorse

Risoluzione e progettazione di dispositivi incrociati

Probabilmente non c'è una regola nel web design che viene affrontata più spesso - e più spesso ignorata - di "mobile first”.

In questo approccio, i contenuti vengono creati per i dispositivi mobili e poi adattati per quelli più grandi. L'opposto è progettare per i desktop e simili e poi adattarlo per i dispositivi più piccoli. 

Mi vengono in mentealtri due approcci:

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

Il primo può essere l'approccio giusto - a seconda del progetto - ma non è molto diffuso in quanto è molto costoso e richiede molto tempo. Purtroppo, quest'ultimo è ancora troppo spesso visto sul web e quindi deve essere urgentemente aggiunto alla lista delle "migliori pratiche". Altri suggerimenti per l'ottimizzazione mobile qui.

Mobile first non deve necessariamente essere sempre il modo giusto: Le ricerche sul gruppo target e sul loro comportamento in Internet possono mostrare rapidamente quali dispositivi vengono utilizzati principalmente per accedere al vostro sito. 

L'idea alla base di tutto ciò non è solo che i contenuti siano preparati in modo visivamente appropriato, ma anche che si tenga conto delle mutate condizioni esterne. Potete trovare maggiori dettagli nell'articolo Mobile-First UX Design non è più una tendenza Leggi.

La seguente tabella mostra chiaramente quali schermi vengono utilizzati per accedere più frequentemente a Internet. Questo può aiutarvi a decidere per quali schermate volete ottimizzare i vostri siti web. Ma si noti che una tale generalizzazione non può che essere una linea guida. Un'analisi dei vostri gruppi target non può sostituire queste statistiche.

Le migliori pratiche di 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 progetti sul web. Ma anche qui ci sono standard e buone pratiche da seguire.

Il codice WordPress

WordPress mette a disposizione a questo scopo un codice generale che può aiutarvi 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 attuale funzionalità. È anche una buona idea leggere le recensioni e familiarizzare con la frequenza degli aggiornamenti offerti e sapere se Plugin, o Theme, saranno ulteriormente sviluppati in futuro. WordPress Gli strumenti che vengono regolarmente sviluppati ulteriormente hanno di solito un supporto più attivo. È anche più probabile che rimangano compatibili con le versioni future del vostro sito.

WordPress Aggiornamenti e sicurezza

Aggiornando regolarmente i vostri Themes e Plugins ridurrete la vostra vulnerabilità agli accessi indesiderati. I bug saranno risolti e i vostri siti web saranno adattati all'ambiente tecnico in continua evoluzione. Anche la sicurezza Plugins e WordFence aiutano a mantenere il vostro sito e la sua sicurezza a colpo d'occhio e a reagire tempestivamente ai problemi. Un certificato SSL dovrebbe essere integrato in ogni sito web. 

Migliori pratiche nel web design: le vostre domande

Quali domande avete per Sonja? Quali sono le Best Practice che potete consigliare? Si prega di utilizzare la funzione di commento. Volete altri consigli sul web design e lo sviluppo? Poi seguiteci su TwitterFacebook o nella 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 mail non sarà pubblicato. I campi obbligatori sono contrassegnati con * marcato.