Blog

Preferiti · Maggio ’19: colore, prototipazione e design system per i vostri progetti web

Guglielmo Cok

2 Maggio 2019


Preferiti è la rubrica di Noiza che raccoglie articoli, post, podcast, video e quant’altro che più ci hanno colpito nel campo del web design. Una rubrica pensata anche per chi non ha tempo di leggere o semplicemente vuole staccare un po’, senza per forza concentrarsi su un testo. Detto questo, partiamo:


Colore

Nei lavori di UI Design mi ritrovo spesso a lavorare con colori già definiti da un brandbook o più semplicemente da un logo. Quando devo costruire una palette colori per un sito quindi non mi serve inventarne di nuovi. Quello che mi serve è creare un ampio range di tonalità dei colori già esistenti. E per farlo Palettte è il tool perfetto.

Steve Schoger realizza questa palette partendo dal colore del brand (l’azzurro al centro). A sinistra arriviamo a un blu scuro (quasi nero) ottimo per le parti testuali. A destra invece otteniamo un azzurro molto chiaro (quasi un grigio) che ben si presta per gli sfondi.

A prima vista Palettte può risultare un po’ complicato, ma con questa breve guida risolvete la cosa in pochi minuti.

L'interfaccia di Palettte: la web app per creare palette

Potrebbe esservi utile però un ripasso sul metodo di composizione dei colori HSB. Con l’HSB possiamo definire un colore attraverso tre valori: tonalità (Hue), saturazione (Saturation) e luminosità (Brightness).

Se invece vi trovate nella situazione di dover partire da zero, senza nessun colore di riferimento, allora Adobe Color mi sembra essere la scelta più saggia. Qui potete costruire la vostra palette, ma non solo. Potete perdervi tra le innumerevoli palette di tendenza già pronte.

Adobe Color CC: l'applicazione di Adobe per costruire delle palette colore

Per ispirarci ricordiamoci anche di Dribbble e della possibilità di filtrare i design per colore.

Dribbble colors: per filtrare i design in base al colore

Design system

Ho da poco finito questo libro che è una pratica guida per creare e progettare un Design System.

La copertina del libro "Design Systems - A practical guide to creating design languages for digital products

L’autrice, Alla Kholmatova, ne sa davvero un sacco: questo è il design System progettato da lei per Future Learn.

L'uso del colore nel design system di Futurelearn

Ma anche quello realizzato dal team di IBM è pazzesco.

Una schermata del design system di Ibm

Mockup e Prototipazione

Se siete a corto di immagini e dovete realizzare la pagina del team di un’azienda, utilizzate gli Joe Schmoes: una collezione di avatar illustrati da Jon&Jess da usare come placeholder per le immagini di profilo.

Joe Schome: la gallery di avatar

Scegliamo uno sfondo, un modello o un oggetto e creiamo una stock photo con la composizione che preferiamo grazie a Moose.

Moose e il suo editor fotografico per creare immagini stock personalizzate

Humaaans invece vi permette di mixare corpi, teste, pose e vestiti per creare le illustrazioni di personaggi perfette per il vostro design.

Humaaans

Quelli di App Design Tips, in questo video, vi suggeriscono i migliori plugin per Adobe Xd. Il mio preferito? Content generator!

Non siate brutte personas
(aka: Varie ed eventuali)

Una collezione di pattern in formato svg: ripetibili, customizzabili e pronti per l’uso.

Hero patterns

Le Personas sono delle persone immaginarie che rappresentano un utente ideale. Il concetto di personas nel web design è fondamentale, e “ci mette in condizione di dare subito delle risposte alle domande o di facilitare i percorsi cognitivi, risolvendo con semplicità e immediatezza le richieste degli utenti”.
Xtension vi fornisce un template molto accurato per creare le vostre Personas.

Un esempio di template per creare le vostre personas

Se volete aggiungere qualche extra tool alla vostra barra del browser, in questo articolo trovate le migliori estensioni di Chrome per i web designer.

WeLoveWebDesign è un account Instagram che giornalmente pubblica ottimi esempi di UI e UX design. E se volete mettervi in gioco, potete provare a inviare i vostri lavori.

La pagina Instagram di WeLoveWebDesign

Tutte le aziende amano Slack, e Noiza non fa eccezione. Il motivo? La possibilità di caricare un numero infinito di emoji custom con cui accompagnare ogni momento della vita lavorativa (anche qui: Noiza non fa eccezione!). Se non avete il tempo di farle in casa, qui trovate una gallery molto ricercata.

Personalizzate le vostre emoji di Slack

Potrebbero interessarti

Si è beneficiato del sostegno finanziario del Programma Operativo del Fondo Sociale Europeo della Regione Autonoma Friuli Venezia Giulia in relazione al programma PS 101/2020 – "Sostenere l’adozione di modelli innovativi di organizzazione del lavoro attraverso lo sviluppo di piani aziendali e l’adozione di adeguata strumentazione informatica per adottare strumenti di lavoro agile ovvero di smart working. Emergenza da COVID-19"