PRINCIPI DI VISUAL DESIGN: come dare carattere alla tua app | #DOLABUI LESSON 5

Ieri Nicola Di Cosmo ci ha dato dei consigli preziosi su come valorizzare e personalizzare la nostra App agli occhi del lettore.

Nella lezione precedente abbiamo parlato dei #tool; strumenti fondamentali a supporto della creazione di interfacce in grado di coinvolgere l’utente sotto un punto di vista visual ed emotional.

Il “Know How” acquisito nel corso di queste cinque lezioni ci ha permesso di ottenere una buona base tecnica per iniziare finalmente a giocare con gli elementi base del #Visual Design.


Visual Design Principles

Per catturare l’attenzione dell’utente e per rendere la sua esperienza coinvolgente ed indimenticabile dobbiamo sempre tenere conto di alcuni elementi che andranno a comporre il visual della nostra App.

Ecco qui una semplice lista di “Must Do”:


ATTRARRE: implementare uno splash screen in grado di catturare l’attenzione delle persone

  • Scegliere immagini d’impatto
  • Una foto contestualizzata in base al tempo e al luogo
  • Fare attenzione al valore della temperatura fuori scala


SEMPLIFICARE: rendere l’esperienza dell’utente facile ed inuitiva

  • Curare la chiarezza degli elementi
  • Valorizzare l’efficienza delle azioni
  • Non trascurare mai la leggibilità dei contenuti testuali e visuali


DIVERTIRE: fai in modo di aggiungere interazione e dinamismo alla tua App

  • Implementare icone divertenti
  • Aggiungere animazioni
  • Utilizzare l’immediatezza delle info grafiche


GRUPPI: ti aiutano a suddividere i layout della pagina in elementi in tal modo l’utente riesce a raggruppare le info ed a scansionarle più facilmente.

  • Suddividere le informazioni
  • Facilitare la lettura
  • Gestire le pause


GERARCHIA: i gruppi e le suddivisioni del layout aiutano a creare un ordine gerarchico

  • Dare importanza alla dimensione degli elementi
  • Creare un gioco di dimensioni
  • Fare attenzione alle scale


ALLINEAMENTO: all’interno di un App ci sono organizzazioni orizzontali e verticali

  • Migliorano la leggibilità
  • Aumentano la chiarezza
  • Stabiliscono la gerarchia


IL COLORE: ha un ruolo cruciale per quanto riguarda il design

  • Creare segmenti e navigation bar che possono cambiare colore al passaggio del cursore


ENFASI: infondere suspense

  • Utilizzando i bottoni molto importanti rispetto al background
  • Per evidenziare azioni primarie rispetto a quelle secondarie


CLASSIFICARE: rende l’esperienza utente fruibile ed accessibile

  • Tramite liste e categorie


TYPEFACES: la scelta del carattere tipografico è fondamentale per la User Interface in quanto ci permette di giocare sul contrasto, la leggibilità e la coerenza

  • Helvetica è il font standard per iOS
  • Roboto è il font standard per Android


SIZES: formato del Font associato ad una giusta interlinea

  • 12px (micro)
  • 14px (small)
  • 18px (medium)
  • 22px (large)


ICONA: la scelta di una famiglia di icone infonde coerenza

  • rende riconoscibile il messaggio anche a piccole dimensioni
  • sono nettamente più efficaci del testo


Visual Test

Dopo aver scelto i nostri Visual Design Elements possiamo procedere con un Visual Test molto veloce ed efficace che possiamo svolgere anche su noi stessi.

La procedura è semplicissima e i passaggi molto immediati:

  • La prima cosa che devo fare è vedere se l’immagine è d’IMPATTO per fare ciò basta vedere fino a che punto chiudendo gli occhi quella immagine rimane impressa nei nostri occhi.
  • Verificare il BILANCIAMENTO TRA IMPATTO E DETTAGLI del layout. Quindi possiamo avvicinare la foto il più possibile e verificare l’impatto dell’immagine sulla nostra attenzione.
  • Disegnare tutti gli elementi del visual design pensando a loro come un tutt’uno! Nessun elemento è slegato!
  • Creare icone ad Hoc


#DOMOMENT, layout definitivo delle schermate

Durante uno degli ultimi momenti pratici del nostro corso ci siamo occupati di perfezionare le schermate finali delle nostre idee di App.

Grazie ai consigli di Nicola abbiamo finalmente ottenuto un Hy-def interactive prototype che nell’ultima lezione sarà implementato da elementi interattivi e presentato nello speech finale!


La prossima lezione sarà speciale e potrai partecipare anche tu!

Torna l’evento #DoLabOpen, una lezione totalmente aperta ma soprattutto gratuita dove si parlerà dei trends  insieme a Nicola Di Cosmo e Gaia Zuccaro,  UX e UI designers e docenti DoLab, i top design trends del 2015.

La partecipazione è libera e gratuita, per segnare la tua presenza basta cliccare qui.


Alice Valle