10 elementi di web design che non dovresti trascurare
Quando si tratta di progettare e costruire siti Web, non sembra mai accadere abbastanza in fretta.
Dato questo ritmo veloce, molti piccoli dettagli che alla fine sono necessari per costruire il sito Web vengono spesso esclusi dal processo di progettazione. Mentre questi dettagli potrebbero essere minori, sono ciò che prende un sito web da bello a veramente impressionante.
Questi dettagli sono spesso facili da perdere perché non guidano l'aspetto generale del sito web. Il problema è che mentre il tuo team di sviluppo lavora attraverso il design, sarà costretto a progettare e creare questi elementi per te comunque.
È possibile adattare il ciclo di produzione in modo che gli sviluppatori abbiano il tempo di restituire queste risorse a te, ma perché non fare in modo che tutto sia fatto in anticipo in modo che il processo sia molto più pulito?
Ancora peggio, il team di sviluppo potrebbe decidere di andare avanti e creare le risorse man mano che vanno.
Mentre molti sviluppatori hanno un occhio attento per il design, la creatività che ha il compito di progettare il sito Web dovrebbe essere in definitiva quella che pianifica questi elementi. Pianificare in anticipo le sfumature più sottili può avere un profondo impatto sulla qualità del prodotto finale.
Ogni elemento trattato in questo articolo nasce da una domanda che uno sviluppatore chiedeva al progettista se mancava un elemento nel disegno.
Scopriamo insieme i 10 elementi chiave da tenere presenti mentre lucidate il vostro sito web.
1. Collegamenti
Mentre lo stile dei vari stati di un collegamento è in effetti piuttosto semplice, potresti essere sorpreso dalla frequenza con cui trascurano tutti i dettagli aggiuntivi. Includere i seguenti stati per tutti i collegamenti nella pagina:
- Normale
Questo è lo stato predefinito di un collegamento; vale a dire uno che non viene sospeso sopra o che viene cliccato o che punta a un URL che l'utente ha già visitato. Questo è il formato di link che la maggior parte dei designer copre sempre. - visitato
Questo è un link che non viene spostato sopra o cliccato ma il cui target è stato visitato dall'utente. - Attivo
Un link attivo è uno che viene attualmente cliccato dall'utente. La maggior parte degli sviluppatori replicherà qui lo stato di passaggio del mouse se non viene loro fornito uno stile. - librarsi
Infine, lo stato di passaggio del mouse è come appare il collegamento quando l'utente lo sostituisce. Questo e gli stati normali sono quelli per cui la maggior parte dei progettisti si preparano.
Un dettaglio che viene spesso trascurato è che questi diversi stati devono essere pianificati per tutte le regioni di un sito web. Ad esempio, molti siti Web hanno una copia del corpo scuro su uno sfondo chiaro, ma il contrasto è invertito nel piè di pagina. È necessario pianificare tutti i vari contesti dei collegamenti trovati in tutta la pagina.
Sopra BBQ Full Moon , ad esempio, vediamo collegamenti rossi di base all'interno della regione del contenuto e collegamenti bianchi di base nel piè di pagina sottostante. Ancora una volta, un piccolo dettaglio ma comunque importante.
2. Forme
Per molti progettisti, la configurazione delle forme è critica e impossibile da trascurare. Eppure, per molti altri, sembra venire in un lontano ripensamento.
Il problema con quest'ultimo atteggiamento è che le forme spesso rappresentano l'unico vero modo per convertire i visitatori in clienti. E senza un'adeguata pianificazione e progettazione, l'usabilità di queste forme potrebbe cadere piatta, paralizzando l'unico punto di conversione del sito web. La preparazione di questi elementi è essenziale, anche se sembrano molto meno urgenti per i clienti rispetto al colore, al branding e alle immagini.
Due delle considerazioni più importanti durante la creazione di un modulo sono:
- Etichetta del modulo
Generalmente i moduli raccolgono dati personali che gli utenti sono riluttanti a cedere. In quanto tale, è opportuno che informi correttamente gli utenti dello scopo esatto del modulo. - Campi di input ed etichette
In secondo luogo, pianificare il modo in cui i campi di input del modulo verranno disposti sulla pagina e in che modo le etichette per quei campi saranno disegnate e orientate in relazione ai campi.
Quando vengono lasciati ai valori predefiniti, le forme possono sembrare imbarazzanti. Ma con una preparazione adeguata, il sito Web apparirà senza soluzione di continuità e sarà molto più efficace. Diamo un'occhiata a un grande esempio che deve essere iniziato con una buona pianificazione:
Questo modulo business-critical su Eccezionale era chiaramente ben pensato. L'intera missione e lo scopo della pagina sono stati attentamente considerati. Dal titolo e dall'introduzione al layout di ogni set di campi, con le loro etichette e stili di controllo, questo modulo è un modello di pianificazione.
La pianificazione delle forme ci porta in realtà a molte altre considerazioni ...
3. Comportamento del pulsante
I pulsanti possono essere utilizzati in vari siti Web per vari scopi, ma anch'essi sembrano spesso trascurati, così come i vari stati di un pulsante. I quattro stati di un pulsante sono:
- Predefinito
Questo è lo stato predefinito di un pulsante, in attesa di essere cliccato. La maggior parte dei designer copre questo ma manca gli altri. - librarsi
Lo stato di passaggio del mouse viene visualizzato quando l'utente passa il mouse sopra il pulsante. Questo stato è utile per indicare all'utente che il pulsante è un elemento utilizzabile. - Clic
Una volta che l'utente fa clic sul pulsante, questo stato indica visivamente che l'utente ha fatto clic su di esso. Fornire questo segnale visivo può aiutare a minimizzare la frustrazione degli utenti. - Disabilitato
Lo stato disabilitato di un pulsante è forse il meno utilizzato ma può essere molto utile per gli sviluppatori. Raramente è pianificato questo stato a meno che il progettista non abbia preparato un processo di convalida per il modulo (vedere la sezione successiva).
Proprio come i vari stati dei collegamenti, assicurati di considerare i vari stati dei pulsanti utilizzati nel tuo sito web. Dai moduli di accesso popup ai campi di ricerca ai moduli di iscrizione alla newsletter, tutti questi pulsanti avranno bisogno di stili corrispondenti.
4. Convalida del modulo
Un importante dettaglio correlato è la convalida della forma. Questo è il punto critico in cui il sito web comunica i requisiti degli utenti e gli errori in un modulo. Ci sono tre cose fondamentali da considerare:
- Campi richiesti
Tutti i campi obbligatori devono essere indicati. Molto spesso, questo viene fatto con un asterisco, come visto su Si prega di iniziare dall'inizio :
- Convalida in tempo reale
Alcune convalida possono essere eseguite in tempo reale mentre l'utente completa il modulo. Questo tipo di convalida informa l'utente il più rapidamente possibile di qualsiasi problema con i dati immessi. Questo può essere realizzato molto bene con questo plug-in di validazione jQuery :
- Convalida post-retro
Questo tipo di convalida avviene dopo che l'utente ha inviato il modulo. Lo stile utilizzato per la convalida in tempo reale viene spesso ripetuto qui, ma un'altra opzione è raggruppare tutti gli errori in un singolo messaggio, come visto su Muggire :
5. Messaggi di stato: errori, avvisi, conferme, ecc.
Di solito gli utenti necessitano di una sorta di feedback dopo aver eseguito un'azione sul tuo sito web. Lo scenario più probabile è dopo aver inviato un modulo, ma potrebbero verificarsi anche molti altri eventi. Considerare attentamente il proprio sito Web e le azioni che gli utenti potrebbero intraprendere e pianificare i messaggi che il sito Web dovrà comunicare.
Sopra La vita oggi , vediamo un messaggio di convalida che potrebbe facilmente servire come stile globale per i messaggi di errore. E con un leggero cambiamento di colori e icone, potrebbe anche essere usato per avvertimenti più sottili o persino messaggi di conferma:
6. Estendere lo sfondo su schermi più grandi
A seconda dello stile del sito web, gli elementi di sfondo potrebbero rappresentare un problema per gli sviluppatori. La maggior parte degli sfondi sono semplici e non richiedono molta preparazione, ma alcuni sono complicati da gradienti, pattern e immagini.
Considerando che i grandi monitor stanno diventando sempre più comuni e che la maggior parte dei progetti è pianificata per una linea di base di 960 pixel, molti spazi pubblicitari vengono lasciati aperti. Se il tuo background include qualcosa di remotamente complicato, ti conviene pianificare come si estenderà per riempire gli schermi più grandi.
Nell'esempio che ho costruito sotto, ho dovuto adattarsi a una trama di legno che si estendeva in tutte le direzioni. Non è il genere di cose che vuoi che uno sviluppatore dalle mani pesanti affronti.
7. Elementi HTML di base
Per i siti Web di copia elevata, il design e lo stile degli elementi HTML di base sono fondamentali e non devono essere trascurati. Ma su molti siti web orientati al marketing che hanno un layout occupato e uno stile visivo distinto, gli elementi di base vengono dimenticati. E, naturalmente, lo sviluppatore non riesce mai a creare un sito Web prima di dover produrre comunque un modello di pagina standard.
Ecco gli elementi base da pianificare sempre per: paragrafi, intestazioni da 1 a 6, elenchi non ordinati e ordinati, dati tabulari, campi modulo, immagini e testo in grassetto e in corsivo.
Su molti siti su cui lavoro, ho messo insieme una guida di stile per aiutare gli sviluppatori, qualcosa del genere:
8. Email del sito Web
Una cosa che non vedo nessun piano di progettazione per le e-mail generate dal sito web. Un tale elemento di base è facile da perdere perché non è in genere il fulcro del sito web. Eppure l'email è un potente strumento in grado di promuovere ed estendere un servizio.
Il mio suggerimento è di rivedere attentamente i contenuti del sito Web in fase di pianificazione per cercare eventuali e-mail che potrebbero essere inviate. Alcuni dei più comuni sono:
- Conferma iscrizione alla mailing list,
- Conferma di registrazione,
- Conferma di completamento del modulo (ad esempio per un modulo di contatto),
- Verifica dell'ordine dopo un acquisto.
Se vuoi davvero far saltare le menti dei tuoi clienti e sviluppatori, prepara anche un modello di email marketing per il sito web. Fornirai agli utenti una transizione senza interruzioni dal sito web alla posta in arrivo e manterrai un controllo accurato sul marchio nelle sue varie forme.
9. Pagina che si estende
Anche la domanda su come un design si estenderà per adattarsi ai cambiamenti di contenuto è raramente affrontata, ma potrebbe essere critica, a seconda dello stile del sito web. Diamo un'occhiata a un esempio in cui questo potrebbe essere incasinato:
BBQ Full Moon ha una pagina iniziale stretta. Questo design non consente molti movimenti o cambiamenti nel contenuto. Tutto ha una dimensione e un posizionamento specifici. Quindi cosa succede se i proprietari decidono di allungare davvero il messaggio di benvenuto o di aggiungere un'immagine? Fortunatamente, hanno pianificato per questo. Come puoi vedere in questo mock-up, ho modificato la pagina per includere il doppio del testo. La pagina si estende perfettamente e si adatta per questo:
Preparare versioni alternative di un layout con molto più contenuto può essere estremamente utile per dimostrare come pianificare un tale scenario.
10. Animazioni: pop-up, tooltip, transizioni, ecc.
Su un sito web HTML e CSS standard (ovvero senza Flash), le animazioni e le transizioni sono così facili da trascurare. E quando vengono trascurati, spesso non sono nemmeno affatto accomodati. Quindi, se le animazioni sono fondamentali, la soluzione migliore è fornire agli sviluppatori un esempio di come dovrebbero funzionare in modo che il prodotto funzioni come dovrebbe.
Alcuni dei luoghi più comuni in cui le animazioni appaiono sono:
- Tooltips
Quei piccoli pop-up quando gli utenti passano il mouse sugli elementi. - Rotatori di immagini
Le diapositive della home page sono di gran moda e una vasta gamma di opzioni è disponibile per transizioni e stili. - ID
Puoi stilare non solo la lightbox stessa, ma anche la transizione ad essa.
Ognuno di questi elementi animati ha uno stile visivo distinto che deve essere sistemato tutto da solo.
Perchè dovrebbe interessarmi?
Molti degli elementi presentati qui sembrano più utili per gli sviluppatori rispetto ai designer. Per essere onesti, questo è parzialmente vero: se prepari tutti questi elementi prima del tempo, gli sviluppatori ti adoreranno. Questi sono i tipi di cose che gli sviluppatori si stancano di chiedere o di dover capire da soli.
Tuttavia, eseguendo tutto questo lavoro in anticipo, si impedisce agli sviluppatori di indovinare e quindi si mantiene il controllo del design. E mantenendo il controllo del design, hai molte più possibilità di essere in grado di aggiungere quel tipo di lucido che trasforma un normale sito web in uno straordinario. Alcuni stilisti si riferiscono a questa salsa segreta che fa cantare i loro disegni.
E se questa non è una motivazione sufficiente, considera questo. I progettisti che pianificano bene e consegnano un pacchetto così completo sono fondamentalmente più preziosi. Non solo creano un prodotto di qualità superiore, ma riducono anche i costi di produzione. Questo significa che c'è più spazio per il profitto, il che rende tutti felici.
Quindi, tieni a mente tutti questi dettagli più fini e divertiti a pianificare il tuo sito web. Francamente, questi dettagli sono la metà del divertimento di progettare per il web, un mezzo in continua evoluzione che consente di interagire con l'utente e di modificare i contenuti.
Patrick McNeil è scrittore, sviluppatore e designer freelance. In particolare, ama scrivere di web design, formare persone nello sviluppo web e costruire siti web. L'ultimo progetto del libro di Patrick è Il manuale Web del designer ; include molti argomenti aggiuntivi sulla falsariga di questo articolo. Puoi saperne di più su di esso TheWebDesignersIdeaBook.com . Segui Patrick su Twitter @designmeltdown .
Cosa disegni per quello che tutti gli altri sembrano dimenticare? Hai mai presentato degli extra come questi ai tuoi clienti? Che tipo di cose trovi gli sviluppatori che ti chiedono sempre di aggiungere a un design?