Come abbiamo detto nell’articolo precedente la UI Interface Design ( sottoinsieme della UX) è ciò che si frappone tra una macchina e un utente, consentendo l’interazione tra i due.

Prima di iniziare a progettare la UI bisogna avere ben chiaro lo stile grafico (linguaggio visivo) che si vuole usare (va considerato il fatto che gli stili di design variano di anno in anno). In seguito farò un breve riassunto di alcuni  stili più utilizzati dai maggiori brand (Apple, Google, Microsoft)

Material design

Un linguaggio sviluppato da Google nel 2014. Il concetto chiave del material design è la parola material, cioè il materiale, è una metafora.  Gli elementi grafici sono rappresentabili come un oggetto tridimensionale, reale.

Matìas Duarte, il designer che ha guidato lo sviluppo di questo stile dice: “Proprio come la carta, il nostro materiale digitale si può espandere o restringere riformandosi in modo intelligente. I materiali hanno superfici fisiche e bordi. Cose come ombre e cuciture forniscono il significato di quello che tocchi.”

Approfondimenti: https://material.io/guidelines/#

Flat design

Il material design è un’evoluzione del flat design (stile introdotto da Microsoft). La cosa che hanno in comune è l’utilizzo  di una palette di colori forti e delle forme geometriche  come quadrato e cerchio per rappresentare le interfacce. L’obiettivo del Flat Design è l’essenziale, anche il font deve quindi attenersi a questa filosofia.

IOS Human Interface

Lo stile grafico progettato da Apple per i suoi prodotti. Tre caratteristiche distinguono questo stile dagli altri:

  1. Chiarezza: In tutto il sistema il testo è leggibile a qualsiasi dimensione e le icone sono precise e lucide.
  2. Fluidità: movimenti sempre fluidi.
  3. Profondità:  Livelli ben distinti e movimenti realistici esprimono una gerarchia e facilitano la comprensione. Le transizioni regalano un senso di profondità come se si stesse navigando attraverso il contenuto.

Metro Style (design piatto)

Questo è lo stile introdotto da Microsoft in Windows 8.  L’obiettivo principale è quello di rimuovere ogni decorazione di troppo in modo da far interagire l’utente direttamente con il contenuto. Gli elementi hanno linee nitide e pulite, da al tutto un look minimalista.

4 cose da fare prima di iniziare a progettare la UI

1.  Scegliere la coppia di font e impostare gli stili di carattere

I caratteri tipografici sono la base per una buona leggibilità, è un aspetto fondamentale nel design perché definisce il tono della conversazione.

In seguito riporto alcuni siti per scaricare/scegliere/combinare font

https://fonts.google.com

https://beta.typenugget.com

2. Creare la palette colori

La prima impressione è quella che conta! Scegliere il colore giusto per un’applicazione/sito non significa solo renderla attraente, significa soprattutto renderla memorabile. E’ importantissimo riflettere in questa fase sul tipo di target a cui ci rivolgiamo, esistono infatti colori migliori per uomini e donne, bambini e adulti.

Strumenti per la scelta dei colori:

3. Scegliere un’ordine nella creazione delle tavole di lavoro

Ordinare per:

  • Features
  • Ruolo Utente
  • Flusso di Interazione

4. Impostare le griglie

La griglia non deve limitare la progettazione,  ma semplicemente aiutare ad organizzare in maniera adeguata le informazioni. Il più famoso framework in questo caso è  Bootstrap.