Perché pensare in anticipo è fondamentale nel web design

La differenza tra la creazione di un ottimo sito Web e uno mediocre di solito viene determinata molto presto. Spesso si tratta di un web designer che dipinge il proprio progetto in un "angolo" virtuale. È qui che un design diventa rigido e incapace di adattarsi a vari casi d'uso.

Questo tende ad accadere nella fase di prototipazione. Dedichiamo molto tempo ed energia creativa a un'idea che sembra fantastica. I nostri clienti potrebbero amarlo tanto quanto noi. Ma solo quando iniziamo effettivamente a costruirlo, iniziamo a comprenderne appieno le conseguenze.

Un modello di design funge da bussola per i nostri progetti di siti Web. Se non riusciamo a pensare in anticipo a ciò che richiedono determinati elementi, potrebbe significare essere bloccati in una brutta situazione. Il risultato finale è un sito che deve fare dei seri compromessi per poter funzionare su diversi dispositivi e browser. Ciò può influire negativamente sull'accessibilità, sulle prestazioni e sull'aderenza alle migliori pratiche.

Per fortuna, un po' di pianificazione ti aiuterà a evitare un processo di compilazione disordinato. Diamo un'occhiata ad alcuni elementi chiave da considerare prima di condividere le tue idee con un cliente.

Come gli elementi si adattano a schermi diversi

C'è una ragione per cui si parla così tanto di un approccio "mobile first" al web design. In sostanza, questo ci consente di iniziare con l'essenziale di un sito web. Da lì, possiamo aggiungere e migliorare man mano che il viewport diventa più grande.

Tuttavia, ognuno di noi ha le proprie preferenze per la costruzione di prototipi. Per coloro che utilizzano ancora un approccio basato sul desktop, è importante pensare a come funzioneranno tutti questi elementi di design fantasiosi su un telefono.

Se prevedi di implementare CSS Grid o Flexbox, ti aiuteranno molto in termini di utilizzo ottimale dello spazio disponibile sullo schermo. Ma altri elementi potrebbero richiedere uno sforzo maggiore per funzionare.

Gli slider di grandi dimensioni, ad esempio, possono diventare molto difficili da utilizzare su schermi piccoli. Le immagini complesse potrebbero non essere così d'impatto e il testo potrebbe superare i limiti. Anche le prestazioni potrebbero ritardare.

In questo caso, potresti dover decidere se vale la pena mostrare il dispositivo di scorrimento sui dispositivi mobili. O forse potrebbe essere rifattorizzato per adattarsi meglio al lavoro in tutte le situazioni.

Impatti sull'accessibilità

Il design inizia con la scelta dei caratteri e dei colori appropriati. Entrambi sono profondamente legati al branding e all'accessibilità.

I caratteri dovrebbero essere nitidi e dimensionati per la leggibilità. Sebbene la scrittura di fantasia e il tipo decorativo possano sembrare belli, devono essere abbastanza grandi da poter essere letti e limitati all'uso nelle intestazioni. Se tali requisiti non possono essere ragionevolmente soddisfatti, potrebbe essere meglio eliminarli del tutto dal progetto.

Inoltre, anche il contrasto dei colori dovrebbe essere una delle principali preoccupazioni. I colori di sfondo e primo piano devono raggiungere un rapporto di contrasto accettabile per essere considerati accessibili. Inoltre, è solo una buona pratica.

Se non sei sicuro della tua tavolozza, usa uno strumento online per determinarne l'idoneità. A volte, anche un leggero aggiustamento è tutto ciò che serve per superare gli standard WCAG AA.

Oltre a questi due elementi, è anche utile avere un piano su come visualizzare elementi come le icone. Sono intuitivi? Saranno accompagnati da testo?

Compatibilità con le versioni precedenti

Non tutti i siti Web devono essere completamente compatibili, ad esempio, con Internet Explorer 9. E i browser legacy non dovrebbero necessariamente dissuaderci dall'usare gli ultimi CSS o JavaScript. Ma qualche pensiero dovrebbe essere messo in compatibilità con le versioni precedenti.

Di particolare interesse sono gli elementi di design che renderanno un sito Web completamente inutilizzabile nei vecchi software. Anche se un determinato browser costituisce una piccola percentuale dei visitatori del tuo sito, ciò lascia comunque alcune potenziali conversioni sul tavolo.

Vale la pena considerare quale effetto avranno le decisioni di progettazione su questi utenti. I fallback disponibili per una determinata tecnologia potrebbero essere sufficienti per mantenere le cose decenti e utilizzabili. Ancora meglio è che possono essere abbastanza semplici da implementare.

In passato ci si aspettava che i progettisti assicurassero che gli elementi apparissero e funzionassero esattamente allo stesso modo su tutti i browser. Potrebbe essere una domanda eccessiva in questi giorni. Finché un utente può navigare e consumare contenuti su alcuni dei software più antichi, potrebbe essere sufficiente.

Scenari che non sono ancora accaduti

Anche i siti Web più piccoli avranno bisogno di evolversi nel tempo. Man mano che vengono aggiunti nuovi tipi di contenuto, sarà necessario tenerne conto nella progettazione. Se non sei preparato, l'implementazione di questi elementi potrebbe entrare in conflitto con ciò che è già presente.

Pensa ad esempio ad aggiungere una serie di video. Anche se il processo di aggiunta di quel contenuto può essere abbastanza semplice, come si adatterà all'aspetto che hai già stabilito? Utilizzerai un'interfaccia utente predefinita del browser o realizzerai qualcosa che corrisponda al tuo marchio?

Anche se non puoi sempre prevedere il futuro, puoi pianificare ogni tipo di possibilità. Questo fa parte di ciò che un sistema di progettazione ti consente di realizzare. Impostando alcune linee guida predefinite fin dall'inizio, ti sarà più facile gestire le aggiunte future.

La realtà è che ciò che progettiamo oggi probabilmente cambierà in futuro. Pertanto, vale la pena essere pronti per tale eventualità.

Costruiscilo bene la prima volta

La creazione di quel primo mockup è molto più che rendere le cose belle. Va anche oltre l'impressionare i tuoi clienti. In effetti, è un esercizio che ci costringe a guardare al nostro progetto nel suo insieme.

L'estetica deve essere gradevole alla vista. Ma il design deve anche essere accessibile e in grado di adattarsi a vari schermi. Inoltre, potrebbe dover ospitare diversi tipi di contenuti man mano che le cose si evolvono.

Se sembra travolgente, fai un respiro profondo. È qui che la tua esperienza e competenza possono venire in soccorso. Anche gli strumenti giusti possono intervenire.

Pensa a cosa ha funzionato (e cosa no) nei tuoi progetti passati. Cerca modi per implementare funzionalità resilienti. Fallo e sarai sulla buona strada per un progetto di successo!