Come Creare una Interfaccia 3D con Due Linee
Usate o usavate il servizio Read It Later?
Allora saprete di certo che hanno modificato la loro immagine (quante parole per non usare il brutto rebranding), nel nuovo Pocket, cambiando nome, colori, modello di business e value proposition (o come direbbe mafè de baggis, social object).
E in tutto questo innovarsi, hanno rinnovato finalmente la grafica della loro applicazione, passando dalla terribile bruttina versione precedente a quella attuale.
La prima sensazione è di piacere per la semplicità essenziale della scelta del colore: tante varietà di grigio!
E la cosa più spettacolare è che hanno saputo rendere un senso di 3D e di ombre, solo con delle semplici linee bianche e nere.
Allora ho deciso di sperimentare anche io questa tecnica, e mostrarvi come si può truccare con facilità una interfaccia.
Creazione interfaccia
Partiamo da uno schema di interfaccia con Barra dei Menù (grigio chiaro), Zona per la ricerca/filtro (grigio scuro), e Zona per gli articoli/immagini (grigio chiaro), ognuno con il suo spazio per il testo e immagini (bianco).
Semplici rettangoli, ma piatti. Clicca per ingrandire
L’effetto complessivo è noioso, banale.
Aggiungo allora due righe, una nera e una bianca, sottili sottili. E…l’effetto magico si manifesta: sembra che il grigio dei rettangoli sia stato modificato in una gradazione piacevole che varia dall’alto al basso. Ma è sempre lo stesso grigio uniforme.
Gli stessi rettangoli di prima, ma con due linee bianche e nere: WoW!!! Clicca per ingrandire
Inoltre la riga nera sotto i riquadri bianchi, crea una sensazione di ombra e quindi di tridimensionalità.
Per chi non ci crede, di seguito l’ingrandimento del particolare delle due linee bianche e nere, per verificare con gli occhi che il grigio è ancora uniforme.
Dettaglio delle linee aggiunte. Clicca per ingrandire
Dettaglio del riquadro bianco.
Dettaglio delle linee aggiunte. Clicca per ingrandire
Conclusione
Bastano due righe ad alto contrasto per creare effetti meravigliosi, con il vantaggio secondario di non saturare la banda di smartphone a banda limitata: alla fin fine sono solo dei semplici e regolari pixel neri e bianchi.
E l’effetto finale del nuovo Pocket è questo:
 |
 |
 |
 |
