Cynny Redesign
Matteo Forni - 6-10-2014 - m.forni@boba.land
#C
Cynny Redesign - Brief
#1
Cynny Redesign L’usabilità ed il raggiungimento degli scopi attraverso percorsi semplici, sono per una applicazione orientata al sociale, l’unica metodica in grado di gestire con facilità per l’utente, la mole di contenuti e di interazioni. Nella sintesi e nella previsione dei gesti, si cela l’accesso ad un luogo ben più profondo. Basandomi su keywords come: evidenza, rilevanza ed accessibilità, ho sviluppato per Cynny un concept essenziale nell’utilizzo, ma con un accento cromatico che rivolge l’uso di questa applicazione, ad un target giovane.
Matteo Forni - 6-10-2014 - m.forni@boba.land
Cynny Redesign - Screens Set
#2
#design #ux #ui
1° Prima View Matteo Forni - 6-10-2014 - m.forni@boba.land
2° Scrolling nella Colonna
3° LiveTAG’s Switch Selected
Cynny Redesign - Screens Set
#3
#design #ux #ui
4째 LiveTAG spostamento in colonna Matteo Forni - 6-10-2014 - m.forni@boba.land
5째 Name for new LiveTAG
6째 Options
Cynny Redesign - Prima View #design #ux #ui
#4
Header (1° Main View) Il block di header è costruito con un immagine profilo, il nome e la linea di refresh. Questi elementi sono collocati sullo sfondo.
Il LiveTAG Il “LiveTAG” compare come una cella colorata incolonnata nello stage, per ordine cronologico. La colonnaè scrollabile. All’interno della cella compaiono nell’ordine: il testo del LiveTAG, il numero di SubTAG per quel determinato LiveTAG ed un icona. In basso lo stesso colore della cella, prende un tono più scuro, come ombreggiato.
Condiviso o Privato Nel blocco del “LiveTAG” è segnalata un icona la quale indica se il LiveTAG è condiviso o privato. L’icona è cliccabile.
1° Prima View Matteo Forni - 6-10-2014 - m.forni@boba.land
Cynny Redesign - Scroll Action
#5
#design #ux #ui Header (2° View) Il blocco di header si modella a favore dello scorrimento, che sia verso l’alto o verso il basso. Come un filtro fotografico, un effetto blur si antepone tra la colonna di LiveTAG e e i contenuti dell’header;
Scroll Column La colonna di “LiveTAG” scorre nelle due direnzioni. 1 - Dal basso verso l’alto: non si vede nessun bottone a tendina; 2 - Dall’alto verso il basso: si attiva alla base il bottone “LiveTAG”. Quando sulla stage non c’è nessun input, la tendina staziona alla base per un tempo definito.
LiveTAG
2° Azione di Scroll Matteo Forni - 6-10-2014 - m.forni@boba.land
Si tratta di una tendina colore rosso che compare in opacità. Si comporta come il blocco di header: un filtro fotografico, un effetto blur si antepone tra la colonna dei contenuti e il bottone testuale;
Cynny Redesign - LiveTAG’s Switch Selected
#6
#design #ux #ui
LiveTAG unselected Il “LiveTAG” che non è selezionato, resta sul background e subisce un filtro blur che ne limita il contrasto cromatico con il LiveTAG selezionato.
Switch LiveTAG La colonna di “LiveTAG” scorre nelle due direnzioni.
Switch
1 - Il lucchetto apero indica che il LiveTAG è condivisibile ed accessibile; 2 - Il lucchetto chiuso indica che il LiveTAG è privato;
3° LiveTAG’s Switch Selected Matteo Forni - 6-10-2014 - m.forni@boba.land
Cynny Redesign - LiveTAG move on the column
#7
#design #ux #ui
Re-Position Automatically Quando un LiveTAG nella colonna viene spostato o mosso, i tag sottostanti si riposizionano automaticamente. Per deselezionare basta clickare fuori dal LiveTAG.
10 - Move LiveTAG E’ possibile riposizionare il “LiveTAG” tenendo premuto il disco a destra del titolo del LiveTAG, e trascinandolo lungo la colonna centrale. Switch
Una volta che il disco sarà premuto i LiveTAG in background si sposteranno leggermente sulla destra. Il LiveTAG selezionato sarà invece dislocato a sinistra.
4° LiveTAG move on the column Matteo Forni - 6-10-2014 - m.forni@boba.land
Cynny Redesign - Appearance of the switch
#8
#design #ux #ui
1°Step
11 - Users tagged Questo simbolo indica la quantità di utenti che hanno accesso a questo “LiveTAG”.
2°Step
Switch
12 - Positioning in Column 3°Step
Matteo Forni - 6-10-2014 - m.forni@boba.land
Questo simbolo indica la posizione in colonna. Quasta cambia quando si sposta l’elemento, verso una numerazione diversa.
Cynny Redesign - Mockup Cynny
#9
Cynny Color Palette
4799C6
LiveTAG Random Color 1
2BD8D8
LiveTAG Random Color 2
9ADD26
LiveTAG Random Color 3
EAD228
LiveTAG Random Color 4
4799C6
LiveTAG Random Color 5
D33986
LiveTAG button C3E5E5
34718C
Background
Text and Edge
Cynny Font’s set Montserrat Raleway
Matteo Forni - 6-10-2014 - m.forni@boba.land
Cynny Redesign - Screens Set #design #ux #ui
Matteo Forni - 6-10-2014 - m.forni@boba.land
#1
Cynny Redesign - Screens Set #design #ux #ui
Matteo Forni - 6-10-2014 - m.forni@boba.land
#1