Best practice e suggerimenti per il web design reattivo

Poiché Google continua a dare la priorità ai siti ottimizzati per i dispositivi mobili, avere un sito Web reattivo per la tua attività sta diventando sempre più importante. Quando il tuo sito web è reattivo, avrà un bell'aspetto su tutti i dispositivi (cellulari, tablet, desktop, ecc.)

Anche se può sembrare scoraggiante rivedere il tuo sito esistente, il design del sito Web reattivo non deve essere difficile. Di seguito sono riportati alcuni suggerimenti utili e le migliori pratiche che ti aiuteranno a produrre un ottimo prodotto per il sito Web utilizzabile facilmente e con poca fatica.

Definisci il tuo stile

Creazione di una tavolozza dei colori

Sia che tu stia lavorando con una tavolozza di colori predefinita del marchio o che ne crei una tua, ricorda di includere abbastanza colori contrastanti da poter stabilire una gerarchia visiva ben definita. L'aggiunta di varie sfumature di colori neutri ti darà molta flessibilità all'interno dei tuoi progetti.

Pensa prima ai dispositivi mobili

Pensa prima a come appariranno i tuoi elementi web su piccoli dispositivi mobili e poi si applicano a dimensioni maggiori del viewport. Ad esempio, i tuoi pulsanti sono abbastanza grandi per una pressione del dito e sono abbastanza distanziati da altri elementi cliccabili?

Crea la tua guida di stile dopo i layout iniziali, non prima

Ad alcune persone piace creare una guida di stile e definire gli stili degli elementi web prima di iniziare un prototipo o un mockup ad alta fedeltà. Tuttavia, una volta che gli elementi sono posizionati sulla pagina e visualizzati l'uno rispetto all'altro, il design generale della pagina potrebbe andare perso. Crea alcuni modelli per iniziare, stabilisci i tuoi stili e poi compila le pagine rimanenti se necessario.

Coerente non deve significare noioso

L'euristica dell'usabilità è importante, ma si distingue anche dai miliardi di altri siti Web sul Web. Non aver paura di provare qualcosa di diverso, di essere più memorabile e di aiutare il marchio del tuo sito web a distinguersi dalla massa. Il tuo sito web può essere creativo e anche molto utilizzabile. Un grande designer dell'interfaccia utente o direttore artistico digitale dovrebbe essere in grado di bilanciare questi due elementi.

Alcuni elementi che potresti voler modellare e standardizzare includono:

• Livelli del titolo: H1, H2, H3...
• Immagini principale o eroe
• Navigazione primaria
• Navigazione secondaria
• Copia del corpo
• Elenchi numerati e puntati
• Richiami o badge
• Trattamento per immagini di contenuto
• Stile virgolette
• Widget (rotatori, incorporamenti sociali, calendari ecc.)
• Grandi pulsanti di invito all'azione
• Pulsanti secondari o collegamenti di testo
• Elementi della forma
• Note a piè di pagina e tipo di topi legali
• Condivisione sociale

Tipo

Copia blocchi

Gioca con l'interlinea (tracciamento), i margini e l'interlinea (interlinea) per ridefinire la tua gerarchia. Più stretta è la spaziatura, più pesante e claustrofobico apparirà il testo.

Tieni presente che lunghi blocchi di testo che corrono dal lato sinistro a quello destro dello schermo del desktop possono essere molto difficili per gli occhi. Utilizzare un blocco di copia più stretto quando possibile. Tuttavia, una spaziatura eccessiva può creare una sensazione arida e dispersa.

Non aver paura di romperlo

Se hai una pagina web molto ricca di contenuti, suddividi un po' il contenuto con virgolette, callout, immagini, elenchi con stili, tabelle, ecc. Puoi anche incorporare fisarmoniche, menu a discesa e caroselli per mantenere la pagina interessante e informativa .

Sì, le persone Scorrono verso il basso

Non cadere nella trappola della vecchia scuola di pensare che tutto sulla tua pagina web debba apparire al di sopra della piega digitale. Mantieni il contenuto più importante o interessante vicino alla parte superiore della pagina per portare un utente più in basso. Potrebbe trattarsi di un titolo creativo ma descrittivo, una frase introduttiva avvincente o un'immagine potente.

IMPARENTATO

Le principali tendenze di design del 2020

Tipo di ridimensionamento

In generale, attenersi a una dimensione del carattere di 14 -18 pixel per un sito Web reattivo. In generale, usa semplici caratteri sans o serif per quei blocchi di copia più grandi e mantienilo su uno sfondo chiaro con un colore del carattere moderatamente contrastante. Il titolo principale può essere più grande, ma tieni presente che potrebbe essere necessario uno stile leggermente più piccolo dopo che viene rilevato un punto di interruzione di dimensioni mobili.

Digita Colore

Il trucco con il colore del testo è che dovrebbe avere abbastanza contrasto dallo sfondo da poterlo vedere facilmente, ma ciò che molti designer non sanno è che a volte il testo può avere troppo contrasto ed è duro per gli occhi, facendolo sembrare vibrare quando visualizzato. Prova a usare il tipo più chiaro su uno sfondo più scuro con parsimonia e solo per blocchi di testo più piccoli.

Digitare Peso

Stili di carattere più pesanti possono essere difficili da leggere in dimensioni più piccole e possono far sembrare la pagina scura e pesante a dimensioni maggiori. Gli stili di carattere sottili e chiari hanno un bell'aspetto sugli schermi di tipo retina e retina, ma possono apparire sbiaditi su molti schermi a risoluzione standard.

Navigazione

Hamburger!

Il Navicon è l'icona che sembra anche un panino o un hamburger con tre linee di impilamento. Se ritieni che i dati demografici dei tuoi utenti in generale non siano così esperti con le tecnologie online, includi sempre la parola "menu" sopra o accanto al Navicon . Gli studi sugli utenti fino ad oggi mostrano che un utente è più propenso a navigare nel tuo sito se includi la parola Menu o Naviga accanto o sopra il Navicon.

Includi un pulsante "Torna all'inizio" nella parte inferiore della lunga pagina a scorrimento

La ricerca ci dice che molti utenti di dispositivi mobili non sanno come passare facilmente all'inizio di una pagina Web all'interno del proprio browser Web mobile. Per risolvere questo problema, fornisci un pulsante "torna all'inizio" nella parte inferiore della tua pagina web. Ciò consentirà all'utente un facile accesso alla navigazione del sito se non è rispecchiato nel piè di pagina.

Un'altra opzione è creare un navigatore appiccicoso. Questa è una barra di navigazione in alto del sito che rimane sempre nella parte superiore dello schermo, non importa quanto in basso scorri la pagina. Se scegli di seguire questa strada, assicurati di rendere il tuo sticky nav alto non più di 100 px o potresti esaurire lo spazio per il contenuto della tua pagina su dimensioni del viewport più piccole.

Glossario del design:

Chiamare
un breve pezzo di testo con un trattamento più forte rispetto al resto della pagina e destinato ad attirare l'attenzione.

Copia blocco
un paragrafo raggruppato o una serie di paragrafi di testo.

La piega (digitale).
utilizzato nella progettazione del sito Web (insieme a " sopra lo scroll") per fare riferimento alla parte della pagina Web che è visibile senza scorrere. Poiché le dimensioni dello schermo variano drasticamente, non esiste una definizione predefinita per il numero di pixel che definiscono la piega .

Serif
una leggera sporgenza che termina un tratto di una lettera in alcuni caratteri tipografici.

Sans Serif
un carattere tipografico sans – serif , sans serif , gothic, san serif o semplicemente sans è uno che non ha le piccole caratteristiche sporgenti chiamate “ serifs ” alla fine dei tratti. Il termine deriva dalla parola francese sans , che significa "senza" e " serif " dalla parola olandese schreef che significa "linea".

Tipo (tipografico) Peso
oscurità relativa dei caratteri di un tipo di carattere risultante dallo spessore relativo dei tratti, espresso come chiaro, grassetto, extra grassetto, ecc.

Utente
una persona che utilizza o gestisce qualcosa, in particolare un computer, un dispositivo o altre macchine.

Vista
un'area incorniciata su uno schermo di visualizzazione per visualizzare le informazioni.

Spazio bianco
nell'impaginazione, nell'illustrazione e nella scultura, lo spazio bianco viene spesso definito spazio negativo. È la porzione di pagina lasciata non contrassegnata: margini, margini e spazi tra colonne, righe di testo, grafici, figure o oggetti disegnati o raffigurati.