Come progettare una UI minimalista: qualche consiglio

11-01_minimalism_web_design_ld_img

Il minimalismo è il concetto di design in cui si costruiscono interfacce utilizzando solo gli elementi più importanti. Questi siti hanno un look spesso molto pulito e facilitano la navigazione all'utente. Lo stile è stato adottato in molti modi diversi e oggi influenza gran parte del web. Sketching iOS iPhone interface design App - immagine optional

Voglio condividere un paio di suggerimenti per la progettazione di interfacce utente minimaliste. Un sito molto carico di informazioni rischia di confondere l'utente e portarlo a lasciare subito il sito aumentando la frequenza di rimbalzo già dalla home page. Ma con il giusto equilibrio si possono progettare interfacce utente eccezionali che sono facili da costruire e ancora più facile da usare.

Pianifica pensando alle necessità

Quando progettate un mockup di un layout web assicuratevi di pianificare ogni elemento in anticipo. Assicuratevi che il vostro sito web stia utilizzando ogni bit di spazio con dettagli importanti. Un'interfaccia pulita sarà "felice" di lasciare più spazio bianco se questo è vantaggioso per l'esperienza complessiva.

Suggerisco di fare una prima bozza di tutti i componenti che il vostro sito web dovrà contenere. Chiedetevi se ogni zona è davvero vitale per il design complessivo. Avete bisogno di una spalla sulla home page? Conterrà link importanti a cui ogni visitatore avrà bisogno di accedere? Naturalmente non c'è una risposta giusta o sbagliata ma varierà a seconda del progetto.

a href link html css dreamweaver

Ma si dovrebbe avere un'idea di ciò che riteniamo sia giusto e sbagliato. Capire quali elementi della pagina sono necessari facilita naturalmente il lavoro.

Dipingi con i colori di base

Questa non è una regola ferrea da seguire ma aiuta durante le fasi iniziali di progettazione. Se date un'occhiata ad altri siti web (http://www.minimalsites.com/) che utilizzando un layout pulito e minimalista noterete che molti di loro utilizzano una combinazione di colori specifica. Nero, bianco, grigio sono i più utilizzatiassieme ad altri 1 o 2 colori primari. Un'ottima risorsa online per lavorare con le palette è Kuler di Adobe (https://kuler.adobe.com).

Quando si inizia a progettare o anche a fare un wireframing (nel prossimo post elencherò un po' di tool per la prototipizzazione e il wireframing) utilizzando un semplice schema di colori questo ci lascia più spazio per concentrarci sul contenuto. C'è sempre la possibilità in seguito di cambiare i colori e aggiungere nuovi stili. Concentrarsi principalmente sulla pulizia dell'interfaccia ci porterà sempre al miglior risultato.

Rendi la navigazione semplice

Semplicità è un'altra parola che mi piace associare con un design pulito. Il nostro sito web deve essere a prova di bambino e pensato per non-informatici. Tutto il testo pagina dovrebbe essere abbastanza grande e facile da leggere da una grande distanza. (http://www.smashingmagazine.com/2009/03/18/10-principles-for-readable-web-typography/)

lavagna sticky note icone del design

Anche i link di navigazione devono essere molto semplici e facili da vedere all'interno della pagina. Propenderei per l'utilizzo di stili aggiuntivi, quali tabs, barre degli strumenti, menu di scorrimento e altri metodi di progettazione. Questo può diventare un punto focale nella pagina e funziona brillantemente associato ad uno schema di navigazione ben progettato.

In alternativa possiamo utilizzare anche idee minimaliste per la navigazione all'interno del sito. Link presenti nella parte superiore o inferiore della pagina naturalmente attirano l'attenzione anche dei navigatori più "distratti". Solitamente gli utenti si aspettano un menu di navigazione nella parte superiore/inferiore del sito. l'aggiunta di colori o texture all'interno di questi menù è spesso solo un vezzo stilistico e grafico più che una necessità (sempre parlando di layout minimalisti, se la pagina in questione è molto "ricca" dovremmo necessariamente far ricorso a questi strumenti per far risaltare le parti della pagina che vogliamo escano fuori)

Cancellare le aree ridondanti

Potresti trovarti ad osservare un design tentando di individuare contenuti duplicati. In alcune situazioni, come una barra laterale o un footer questa ridondanza è utile. Gli utenti non sempre voglia di scorrere verso l'alto solo per accedere al menù di navigazione.

Spesso però lo spazio all'interno della pagina è poco e non abbiamo spazio per tutto quello che dobbiamo comunicare. Quasi tutto ciò che si sta visualizzando dovrebbe essere unico e contenere spesso link ad altre pagine del sito (blog, comunicati stampa, video ...). Filtra le idee ridondanti e cambiale con contenuti più recenti e utili. I visitatori del sito godranno di una esperienza di navigazione sicuramente migliore.

Combina gli elementi in pagina

Utilizzando le nuove proprietà CSS3 è facile creare effetti "complicati" ma efficaci. Box con ombre e angoli arrotondati sono due esempi classici - ma ce ne sono tanti altri da elencare. Quando si utilizzano stili per elementi HTML come form e bottoni dobbiamo fare molta attenzione alla coerenza.

Rosa CSS amo il web design

Mi piacciono le interfacce pulite che mantengono gli stili predefiniti intatti. Questo non vuol dire che non apprezzi un layout personalizzato. Tuttavia trovo che tra Windows / OSX / Linux ci siano molte differenze nei browser e sopratutto nei motori di rendering. A meno che non si può testare il sito in tutte le varie combinazioni, la maggior parte del vostro pubblico apprezzerà una esperienza lineare.

Conclusione

Speriamo che questi suggerimenti possono aiutarvi nella progettazione di una interfaccia minimalista. Progettare una interfaccia utente pulita è in realtà un lavoro molto più difficile di quello che sembra essere. Bisogna mettersi nei panni dell'utente e vedere il proprio sito web attraverso i loro occhi. Può richiedere mesi di pratica, ma il risultato sarà poi fenomenale.

 

[Via College GFX]