What? The Ugly Truth

No beliefs doesn't mean Don't believe

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:
20120421-100653.jpg

Follow Me on Pinterest Follow Me on RSS
Follow Me on 500px Follow Me on twitter
Licenza Creative Commons
[ITA] Questo articolo è opera di Paolo Russo ed è concesso in licenza sotto la Licenza Creative Commons Attribuzione – Condividi allo stesso modo 3.0. Per superare i limiti della Licenza, potrebbe bastare chiedere qui.
[ENG] This post is a work of Paolo Russo and is licensed with the Creative Commons License Attribution – Share it Alike 3.0. Permissions beyond the scope of this license may be available asking it here.
About these ads

Give me Your 2 çents / Dimmi che ne pensi

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Information

This entry was posted on April 21, 2012 by in UI (user interface) and tagged , , , .
Follow

Get every new post delivered to your Inbox.

Join 561 other followers

%d bloggers like this: