Semplici suggerimenti per il web design per buoni risultati

Esistono infiniti modi per progettare un sito web. Con questo in mente, ci sono anche infiniti modi per rovinare tutto. Esistono due metodi principali per evitare di cadere nella seconda categoria: imparare i fondamenti del design e applicarli di conseguenza. Devi anche essere abbastanza esperto per aver imparato cosa funziona bene e cosa no.

Tutti i designer seguono percorsi di apprendimento diversi e spesso si trovano in fasi diverse del loro viaggio. Se stai leggendo questo, si spera, stai anche cercando di migliorare ulteriormente il tuo lavoro e produrre progetti migliori.

Sfortunatamente, non c'è modo di adattare tutte le conoscenze necessarie in 1500 parole. Invece, ci limiteremo ad alcuni suggerimenti per farti ripensare a come puoi affrontare gli elementi UX / UI. Idealmente, questo modo di pensare può essere applicato anche ad altre aree del tuo lavoro di progettazione.

Inizia con una buona comprensione del prodotto / sito

È estremamente difficile progettare quando non si comprende appieno il contenuto / sito Web. Ora, non devi studiare medicina per creare un sito web medico, questo non è l'obiettivo. Tuttavia, dovresti sapere come un utente accederà a qualsiasi informazione che potrebbe richiedere.

Se vuoi progettare un'app per la creazione di musica, prima dovresti prenderne alcune esistenti, giocare con loro per farle un'idea, leggere la teoria dietro di essa e come funzionano determinati elementi.

Idealmente, dovresti lavorare con il tuo cliente, che dovrebbe anche essere molto coinvolto nel progetto e vuole aiutarti a implementare una migliore UX per i suoi utenti.

Tuttavia, se ti manca una comprensione fondamentale di cosa tratta il sito e quale problema risolve, potresti paralizzare l'esperienza dell'utente o costringerti a seguire le soluzioni esistenti e semplicemente re-skin (cosa che a volte funziona).

Per i siti web, dovresti avere la mappa del sito di fronte a te per lavorare sulla corretta navigazione e prendere decisioni su quali elementi sarebbero adatti per determinate pagine di destinazione. Se crei un progetto "fabbrica di cioccolato", potresti presentare visivamente il processo di realizzazione o eseguire un deposito di informazioni. Tutto dipende dagli obiettivi del sito.

Tutte queste informazioni sono qualcosa di cui hai bisogno in anticipo per avere una maggiore percentuale di successo. Considerando quanto sia complicato, potrebbe succedere a te se sei un designer freelance principiante, quindi è meglio fare molte domande fin dall'inizio. Se lavori in un team, non dimenticare di consultare i membri del tuo team su contenuto, UX, scopo e altro.

Suggerimenti e trucchi specifici per il design:

Vediamo ora alcuni suggerimenti specifici per UI / UX che puoi utilizzare nel tuo prossimo progetto:

1 - Contrasto!

È così facile rovinare il contrasto su un sito. Un modo rapido per individuare un designer meno esperto sarebbe controllare il contrasto generale. Guarda questo esempio:

fonte

Vedi quanto è leggero il testo ovunque? I pulsanti verdi con testo bianco, il testo grigio chiaro ?. Confrontiamolo con un'interfaccia utente più contrastante:

fonte

Una grande parte del carattere è nera (o quasi nera) con solo informazioni meno importanti leggermente più grigie. Il verde è più scuro, il che ora consente il testo bianco in alto.

Il suggerimento qui è: quando lavori con il testo, inizia con Nero su bianco o bianco su nero. Man mano che aggiungi più elementi e devi separare con la gerarchia visiva, prova prima a mettere in grassetto o modificare la dimensione del carattere. Solo dopo, se non funziona, segui i cambi di colore, ma idealmente non più del 30-40% di differenza (generalmente l'opacità è impostata al 70%).

2 - Spazio bianco coerente

Un altro errore comune sarebbe quello di avere una spaziatura incoerente attorno agli elementi. In effetti, è così comune che la maggior parte dei designer continui a lottare con questo dopo anni di lavoro ed è abbastanza comprensibile: spostiamo le scatole con il mouse. È facile scivolare un po 'e spostarlo di uno o due pixel di lato. Oppure potresti non aver ancora allenato abbastanza bene i tuoi occhi per individuare direttamente quella differenza.

Nell'esempio seguente, guarda come i diversi componenti hanno diversi spazi bianchi intorno a loro. Alcuni sono ingombri insieme, alcuni sono molto distanziati. Non sembra molto coerente visivamente.

Al contrario, ecco un esempio con una quantità più o meno simile di contenuto / tipo di componenti ma con un aspetto più coerente:

fonte

Ci sono vari modi per ottenere questo risultato, ma la maggior parte delle volte non funziona solo con la misurazione. Spesso è una "sensazione" quando la guardi. Sembra equilibrato? Se hai scatole, puoi sempre misurare qualcosa come 30px dai lati, 30px sotto il titolo, 15px sotto i sottotitoli ecc. Ed è un buon approccio! Ma con elementi visivi più grandi come i titoli o le immagini, potresti volerlo aumentare un po 'per compensare l'elemento più pesante.

3 - Colore

Un'altra componente fondamentale di un buon design. I colori devono funzionare bene insieme. Un modo semplice per accedere ai siti Web è attenersi a un unico colore primario e mantenere il resto monocromatico.

L'esempio seguente segue tutti e tre i suggerimenti fino ad ora: buon contrasto, equilibrio e uso del colore:

fonte

Un modo semplice per iniziare con i colori è seguire alcuni schemi di colori ben accolti da siti come https://colorhunt.co/ o trarre ispirazione da Dribbble per le combinazioni. Lavorare con la ruota dei colori è utile per capire le combinazioni, ma spesso è necessario un piccolo tocco in più da parte dei designer per individuare le combinazioni migliori. Le ruote dei colori spesso non producono i colori perfetti da applicare in un disegno.

Esempio dalla ruota dei colori di Adobe:

fonte

Un bel colore verde nel mezzo ma un po 'difficile da usare i risultati sul lato sinistro / destro.

4 - Attenersi a uno stile in tutto il sito

Costruire l'atmosfera di un sito web è uno dei compiti principali del designer. Anche se l'idea di "carino" è molto difficile da definire, soprattutto perché le persone spesso hanno una visione diversa di ciò che è bello e di ciò che non lo è. . Invece di preoccuparti di questo, concentrati sulla coerenza e mantieni lo stile.

Cosa significa? Bene, progettiamo un pulsante. Impostiamo la dimensione del carattere, il carattere, il colore, lo sfondo, la spaziatura ecc. E otteniamo qualcosa del genere:

Ora, se dobbiamo aggiungere un'immagine e un titolo, possiamo ottenere qualcosa di simile forse:

Guarda gli angoli. Tutti gli angoli perfetti a 90 gradi, nessun arrotondamento. Ciò significa che il nostro design seguirà principalmente angoli acuti. E sembra più coerente se l'immagine ha anche questi angoli perfetti. Proprio come se aggiungessimo input, anche loro avrebbero tutti questi angoli più nitidi. Aggiungiamo un altro elemento:

Abbiamo aggiunto una griglia di caselle negli angoli in alto a destra e in basso a sinistra. Questi avrebbero potuto essere cerchi, ma per mantenere l'aspetto nitido, li abbiamo impostati su quadrati. Lo stesso pensiero dovrebbe essere mantenuto in tutto il sito. Se inizi a cambiare elementi, potresti iniziare a perdere la sensazione di esso, il che a sua volta si tradurrebbe in un design incoerente e indebolire il marchio.

Ecco lo stesso design dall'alto ma con aspetto arrotondato:

È lo stesso, ma ora sembra molto diverso.

5 - Progettazione con componenti

I componenti esistono in tutti i moderni strumenti di progettazione come Figma e Adobe XD. Sono lì per un'ottima ragione: gli sviluppatori implementano i siti in modo che possano essere riutilizzati il ​​più possibile.

Se crei un elemento come quello sopra, vuoi semplicemente "copiarlo e incollarlo" su un'altra pagina e semplicemente funzionerà. Non c'è bisogno di codificarlo di nuovo con lievi differenze. Come designer, idealmente vorresti riutilizzare i tuoi componenti in modo simile.

Se crei una home page con 3 post di fila, forse puoi semplicemente riutilizzare lo stesso post dalla homepage. Questo ti fa risparmiare tempo, fa risparmiare tempo allo sviluppatore e mantiene il design coerente per gli utenti.

fonte

Immagina di fare un'intestazione di sezione. Se hai bisogno di 8 sezioni con un'intestazione, la progetteresti ogni volta o copieresti e incollerai la precedente? Idealmente, vuoi riutilizzarlo. Ma cosa succede se devi cambiarlo da centrato ad allineato a sinistra? Forse cambia un po 'le dimensioni, forse il colore? Il suggerimento da questo è provare e NON farlo. Cerca di mantenerlo come l'originale. Se hai davvero bisogno di viste diverse (a parte l'allineamento a sinistra / al centro / a destra), prova a fare una sola variazione. Non cinque o dieci di loro.

Esempio di DevriX

In sintesi:

Per ottenere buoni risultati è necessaria una profonda comprensione dei fondamenti del design come colore, contrasto, spazio bianco, equilibrio, gerarchia visiva, ordine e altro. Quando progetti con questo in mente e ti concentri su usabilità, coerenza e stile, e anche se non è un "WOW!" design, sarà solido su tutti i fronti e funzionerà bene, il che spesso produce risultati migliori per un marchio a lungo termine.