Sito in manutenzione... puoi continuare a navigare i contenuti mentre noi sistemiamo la registrazione :)

UI e Mockup

7

Checkbox da completare

10

Risorse nella pagina

10

Contributors per questa pagina

7

Checkbox

10

Contributor

Introduzione

L’estetica gioca sempre la sua parte, sia nelle emozioni che provoca agli utenti sia nella percezione che avranno del vostro brand.

Non meno importante, spesso l’estetica ha un ruolo funzionale. Un po’ di teoria potrà aiutarvi a sfruttare l’interfaccia grafica a vostro vantaggio.

Autori

1 m

Cos'è la UI

La User Interface è più nello specifico quello che caratterizza l’esperienza estetica dell’utente come i colori, i materiali, i font e le grafiche utilizzate, e anche in questo caso l’emozione che questi provocano durante l’utilizzo del prodotto. 

Una buona UI quindi valorizza la UX contribuendo a guidare l’utente visivamente con i colori, i contrasti e le grafiche. Anche in questo caso le possibilità sono infinite, quindi per ora è meglio rimanere sul semplice senza distrarsi inutilmente.

Per trovare delle ispirazioni potete usare Pinterest cercando per parole chiave inerenti al vostro settore, al prodotto che state costruendo, e al tipo di interazione.

10 m

Scegliere i Colori

La scelta dei colori contribuisce a comunicare il vostro messaggio. Ecco un semplice riassunto della teoria dei colori.

  • rosa
  • rosso
  • arancione
  • giallo
  • viola
  • blu
  • azzurro
  • verde
  • marrone
  • nero

Scegli uno o due colori che si adattano alla tua azienda.

Nel caso di prodotti fisici questo approccio non si applica perchè i colori hanno una finalità più estetica che comunicativa, ma anche un prodotto fisico avrà bisogno di un sito web e di una presentazione.

20 m

Scegliere la Palette
Il modo più veloce di scegliere una prima palette per l’MVP è cercare su Google “Palette giallo blu” usando ovviamente i colori da te scelti. Prendine una e campiona i colori.

20 m

Scegliere i Font

I font sono un altro elemento importante per comunicare, ma ancora una volta non è il momento di perdere troppo tempo.

Puoi cercarli su Google Fonts, più facili da implementare sul web, oppure usare quelli gratuiti che troverai su Awwwards, tutti di ottima qualità.

Scegline uno o due al massimo.

5 m

Scegliere i pulsanti

Noi abbiamo scelto di farli quasi tutti con icona e senza contorno, ma possono essere squadrati, arrotondati tanto o poco, o con bordi laterali completamente tondi. Ora non è importante, basta sceglierne uno. Potremo cambiarlo più avanti.

20 m

Grafica

Hai bisogno di elementi grafici, puoi trovarli qui.

Cerca immagini royalty free

Cerca grafiche royalty free

Cerca icone royalty free

Rimuovi sfondo

30 m

Interfaccia Utente

Per produrla avrai bisogno di un programma di grafica per inserire questi elementi visivi nella struttura dei Wireframe. Se non sei un professionista ti suggeriamo Canva; se sei un professionista o ne hai uno nel team non hai bisogno di suggerimenti.

Non professionale

20 m

Mockup

I mockup sono delle rappresentazioni realistiche del prodotto in 3D e nel mondo reale. Nel caso di prodotti digitali, significa mostrarli su uno schermo all’interno di uno smartphone o di un computer. 

Utili soprattutto per far percepire il prodotto in modo più concreto prima ancora di averlo realizzato. In tal caso un professionista non avrà problemi a generarli, ma anche in quel caso esistono strumenti non professionali utili a velocizzare il processo.

Cosa vuoi dirci?

Gli amministratori del sito revisioneranno il tuo feedback,  richiesta o altro insieme a quello degli altri utenti per migliorare il prodotto rendendolo più semplice e chiaro. 

Ps. Non rispondiamo sempre, ma ci proviamo.

Come ti definiresti?