Avete un regolamento per quanto riguarda la progettazione di siti Web? Ci sono alcune regole che si applicano a quasi tutti i progetti di web design, chiamiamoli i "comandi del web design".
Non importa quanto grande o piccolo sia il sito web, queste regole sono la base per un buon design. Se segui queste linee guida di base e fai in modo che faccia parte del tuo pensiero per ogni progetto che inizi, eviterai molte delle insidie che i designer possono inciampare in!
1. Tu sarai coerente
Rendi il design il più semplice possibile per gli utenti con cui interagire Il design coerente è facile da usare e comprende il design. Gli impegni e le azioni degli utenti, così come le immagini, dovrebbero essere simili nell'aspetto e nell'uso attraverso un singolo progetto.
Ciò significa che i pulsanti sono dello stesso colore e utilizzano gli stessi stati di passaggio del mouse per aiutare gli utenti a sapere come interagire, i titoli hanno le stesse dimensioni e usano lo stesso carattere tipografico in tutto il disegno e elementi come i colori seguono una tavolozza identificabile e associata a la marca.
Altri elementi visivi dovrebbero anche seguire uno stile coerente con uno stile e un piano di utilizzo per elementi come icone o fotografie, video o illustrazioni. Il design dovrebbe avere una voce che viene utilizzata per i blocchi di copia che corrisponde all'estetica complessiva.
Tutti questi elementi di coerenza contribuiscono all'usabilità generale, rendendo il design il più semplice possibile per gli utenti con cui interagire.
2. Userai spazio bianco
Spazio aggiuntivo attorno agli elementi può aiutare a creare separazione e renderli più facili da leggere. Non c'è bisogno di stipare ogni singolo elemento nello spazio sopra la pergamena. Usa gli spazi bianchi per stabilire il ritmo e il flusso, creare una gerarchia visiva e aiutare gli utenti a muoversi attraverso il design.
Se il contenuto è buono, scorreranno.
E lo spazio bianco può effettivamente aiutare a incoraggiare l'azione dell'utente spostando l'occhio sullo schermo.
Gli spazi bianchi sono ancora più importanti man mano che le dimensioni dello schermo si riducono. Spazio aggiuntivo attorno agli elementi può aiutare a creare separazione e renderli più facili da leggere. (Pensa a quanto può essere utile un piccolo spazio in più quando si tratta di toccare i pulsanti con facilità.)
Non sai dove includere gli spazi bianchi nel design? Comincià qui:
- Attorno a pulsanti o altri elementi interattivi
- Come interlinea tra le righe di testo per facilitare la lettura
- Tra gli elementi in modo tale che est sia distinto da distinguere, come ad esempio il wrapping di foto incorporate in blocchi di testo
- Nei campi modulo, sono facili da toccare sugli schermi mobili
- Intorno a qualsiasi elemento su cui vuoi che gli utenti si concentrino
3. Userai una griglia
Una griglia è la base dell'esperienza utente. Quando si progetta con una griglia, il sito Web finale è più preciso, coerente e gli elementi sono disposti in un ordine che ha senso visivo.
Le griglie sono sia orizzontali che verticali, anche se la griglia di web design più nota potrebbe essere la griglia verticale di colonne a 12 colonne per allineare gli elementi.
La griglia è qualcosa che vedi solo nel processo di progettazione e se hai difficoltà a trovare posizionamenti per elementi o creare un contorno organizzato, una griglia può essere un salvagente totale.
4. Non dimenticare modelli utente
Gli utenti fanno le cose in un certo modo e si aspettano cose specifiche dal tuo design. Per avere il maggior successo possibile, il design dovrebbe utilizzare modelli utente comunemente accettati (soluzioni ricorrenti per progettare i problemi) in modo che le persone sappiano esattamente come funziona il progetto.
I pattern utente comuni includono:
- Ordine delle informazioni nei moduli, iniziando con un nome o una e-mail e finendo con? Invia?
- Posizionamento dei menu di navigazione
- Posizione e natura cliccabile dell'icona del carrello degli acquisti per l'e-commerce
- Come funzionano le notifiche
- Icone per ricerca e chat, tra le altre cose
UI Design Patterns ha una lunga lista di pattern utente per tutti i tipi di situazioni progettuali.
5. Userai la somiglianza nelle azioni dell'interfaccia utente
Ogni elemento del design di un sito web dovrebbe funzionare come ogni altro elemento dello stesso tipo. Questi elementi dovrebbero anche avere un'identità visiva in modo che gli utenti sappiano cosa sono e cosa fanno a colpo d'occhio.
Ci sono così tante azioni dell'interfaccia utente che possono essere incorporate in un progetto che deve rispettare il principio di somiglianza della Gestalt. Il raggruppamento di elementi visivi e azioni in modo che siano visivamente identificabili contribuirà a creare una migliore esperienza complessiva per gli utenti.
6. Userai la tipografia bene
Tornare indietro dal disegno e vedere se la scritta è facile da leggere a distanza. Non devi essere un maestro tipografo, ma sicuramente aiuta.
Gran parte di ciò che costituisce un buon design è radicato nella leggibilità e leggibilità. E quei concetti dipendono da come scegliete e usate i caratteri tipografici.
In caso di dubbio, optare per coppie di caratteri semplici come un serif e sans serif. Tornare indietro dal disegno e vedere se la scritta è facile da leggere a distanza. Quindi guarda le scritte su una piccola tela, come lo schermo del telefono per assicurarti che sia facile da leggere anche a colpo d'occhio.
Prova ad usare il tipo in un ambiente ad alto contrasto, come il tipo di luce su uno sfondo scuro o scuro su uno sfondo chiaro, in modo che ogni parola sia facile da leggere.
7. Non dimenticherete gli schermi Retina
Anche gli schermi più piccoli possono rendere elementi e immagini con una perfezione vicino al pixel.
È necessario considerare come gestirai immagini, icone e altri elementi in modo che tutto renda magnificamente indipendentemente dalle dimensioni dello schermo. Quando possibile, l'utilizzo di un formato vettoriale può essere la soluzione ideale, che è uno dei motivi per cui SVG sta crescendo in popolarità in ogni momento.
Se non si dispone di un'immagine con la risoluzione adatta alle dimensioni dello schermo comune, non utilizzarla. Nessuna immagine è migliore di un'immagine cattiva o pixelata.
8. Dovrai essere onesto
Il tuo design dovrebbe essere fedele alla tua piccola impresa, alle informazioni o alla marca e trasparente in quello che fai.Non rubare un disegno o un'immagine, non fare roba con parole chiave false per indirizzare il traffico ed essere fedele a chi e di cosa tratta il tuo contenuto.
Con così tanta confusione sul web, gli utenti vogliono interagire con progetti autentici. Coinvolgere gli utenti nel fare qualcosa o iscriversi a un prodotto o servizio o semplicemente indurre in errore su un argomento o informazioni dovrebbe essere contrario al codice etico personale. Non accettare progetti che si aspettano questo dal design.
9. Non ignorerai l'accessibilità
Il web dovrebbe essere utilizzabile da quante più persone possibile. E anche se potrebbe sembrare difficile garantire che il design sia accessibile, non è così complicato come si potrebbe pensare.
Google ha un'ottima guida all'accessibilità del sito web, che definisce così:
In generale, quando diciamo che un sito è accessibile, intendiamo che il contenuto del sito è disponibile e che la sua funzionalità può essere gestita da chiunque letteralmente. Come sviluppatori, è facile presumere che tutti gli utenti possano vedere e utilizzare una tastiera, un mouse o un touchscreen e possono interagire con il contenuto della pagina nello stesso modo in cui lo si fa. Ciò può portare a un'esperienza che funziona bene per alcune persone, ma crea problemi che vanno dai semplici fastidi agli show-stop per gli altri.
L'accessibilità, quindi, si riferisce all'esperienza di utenti che potrebbero trovarsi al di fuori della ristretta fascia di utenti "tipici", che potrebbero accedere o interagire con le cose in modo diverso da quanto previsto. Specificamente, riguarda gli utenti che stanno vivendo un qualche tipo di menomazione o disabilità - e si ricorda che tale esperienza potrebbe essere non fisica o temporanea.
Molti dei principi del buon design, come dimensioni, contrasto e spazio, contribuiscono all'accessibilità generale.
WebAIM ha una checklist e altri strumenti per aiutarti a determinare se il tuo design è accessibile. La checklist copre quattro aree relative all'accessibilità: il design è percepibile, utilizzabile, comprensibile e robusto?
10. sarai reattivo
Dovrebbe essere abbastanza ovvio nel 2018, ma il tuo sito web deve essere reattivo. Ciò include ogni elemento, dal testo alle immagini, ai pulsanti, al framework generale.
Ogni design deve funzionare su ogni dispositivo. Periodo.
Conclusione
Un solido insieme di regole può aiutarti ad entrare in un progetto di design più velocemente ea lavorare in modo più coerente. Nota che nessuno di questi comandamenti ti dice come dovrebbe apparire un progetto; sono radicati nella teoria di come descrivi e crei ogni sito web.
Avete ulteriori regole di web design da aggiungere a questi comandamenti? Facci sapere cosa sono sui social media. Assicurati di taggare Design Shack!