Flash Sale! Save on unlimited courses & creative assets downloads! Flash Sale! Save 40%
Advertisement
  1. Web Design
  2. UX
Webdesign

UX in 60 secondi: utilizzare librerie di componenti

by
Difficulty:BeginnerLength:ShortLanguages:

Italian (Italiano) translation by Fabio Pantano (you can also view the original English article)

Benvenuti in questa brevissima introduzione sull'utilizzo di librerie di componenti: utili per designer, sviluppatori e utenti esperti. Iniziamo subito!

Librerie di componenti in 60 secondi

Ogni interazione che un utente incontra, e che deve apprendere, crea un carico cognitivo. Per un utente è particolarmente difficile se gli elementi dell'interfaccia utente (UI) sono quasi simili, ma essenzialmente diversi. L'utente deve quindi farsi domande del tipo "perché sono diversi?", "succede la stessa cosa se premo questi due pulsanti?"

Inizia identificando gli elementi comuni nei tuoi progetti, definiscili come componenti, poi durante la progettazione delle schermate, inizia a implementarli. In questo modo ti sforzerai a essere più coerente. Inoltre ti sorprenderai di quanta strada è possibile compiere utilizzando gli stessi elementi per risolvere diversi problemi.

Usare Sketch

Dal punto di vista pratico, è possibile creare simboli all'interno di un progetto in Sketch, o utilizzare il plugin InVision Craft. Per valorizzare al meglio la libreria di componenti, lavora a stretto contatto con gli sviluppatori in modo da implementare le stesse cose anche direttamente nel codice.

Comunque non c'è bisogno di concentrarsi sull'impatto visivo; è necessario definire i diversi stati di ogni elemento, oltre a complesse interazioni.

Quando si utilizza una libreria di componenti, designer e sviluppatori possono utilizzare più volte gli stessi elementi per risolvere diversi problemi. Mentre gli utenti, vedendo componenti familiari, perderanno meno tempo nel capire come utilizzare l'applicazione o il sito Web.

Kit UI consigliati

Nel video sono stati consigliati un paio di kit UI. Scaricali abbonandoti a Envato Elements.

Simple

Oltre 100 elementi Photoshop modificabili e ridimensionabili, basati su semplici forme vettoriali. Grazie a livelli raggruppati e ben organizzati, gli elementi sono facili da ridimensionare e regolare, oltre a modificare i colori.

Simple Flat UI Kit

Zoomie

Applicazione mobile per Social Media per Sketch; tutte le varie schermate sono ben organizzati e a più livelli.

Zoomie

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.