Cynny Redesign
Matteo Forni - 6-10-2014 - m.forni@boba.land
#C
Cynny Redesign - Brief
#1
Cynny Redesign Usability and short ways, are most important rules for a application social oriented: these are the only methods which can manage a complex network of interactions and content, belonging to the user. Inside of the intuitiveness and of the synthesis, lies the access for a most deeper place. I used keywords like: visibility, relevance, accessibility and i develop essential concept for Cynny, but i have included colored signs for a young target's attention.
Matteo Forni - 6-10-2014 - m.forni@boba.land
Cynny Redesign - Screens Set
#2
#design #ux #ui
1° Main View Matteo Forni - 6-10-2014 - m.forni@boba.land
2° Scrolling in column
3° LiveTAG’s Switch Selected
Cynny Redesign - Screens Set
#3
#design #ux #ui
4째 LiveTAG moves in column Matteo Forni - 6-10-2014 - m.forni@boba.land
5째 Name for new LiveTAG
6째 Options
Cynny Redesign - Main View #design #ux #ui
#4
Header (1° Main View) The header block it’s built with the profile image, name, and the line for refresh. These elements are positioned on the application's background.
LiveTAG The "Live TAG" appears as a colored cell positioned in chronological order. The column is scrollable. Within the cell appear in sequence: title of LiveTAG, the number of subtags for the LiveTAG, and an icon. At the bottom of the the cell, there is a darker tone, as shaded.
Shared or Private Inside the “LiveTAG” block there is an clickable icon that indicates the behavior of the button.
1° Main View Matteo Forni - 6-10-2014 - m.forni@boba.land
Cynny Redesign - Scrolling Action
#5
#design #ux #ui Header (2° View) The header block turns for a better scrolling, when we scroll from bottom to the top or the reverse. A blur effect prepends between the header and LiveTAG’s contents.
Scroll Column The LiveTAG column scroll in two direction. 1 - FROM BOTTOM TO THE TOP: the button for create a new LiveTAG is not visible; 2 - FROM TOP TO THE BOTTOM: the button for LiveTAG create is activated. When the stage is without inputs, the button of "LiveTAG" remains active for a defined time.
LiveTAG The “LiveTAG” button is a red slide positioned in bottom of the screen. A blur effect you puts between the button and LiveTAG’s contents.
2° Scrolling Action Matteo Forni - 6-10-2014 - m.forni@boba.land
Cynny Redesign - LiveTAG’s Switch Selected
#6
#design #ux #ui
LiveTAG unselected When the LiveTAG is not selected, it is fixed in the background. A blur filter reduces its contrast for better isolation of selected LiveTAG.
Switch LiveTAG A content’s column scroll in the two directions.
Switch
1 - Open Lock: the LiveTAG is shared;
2 - Close Lock: the LiveTAG is private;
3° LiveTAG’s Switch Selected Matteo Forni - 6-10-2014 - m.forni@boba.land
Cynny Redesign - LiveTAG moves on the column
#7
#design #ux #ui
Re-Position Automatically When the LiveTAG inside the column is moved, the other LiveTAGs they can reposition automatically on the screen. For deselct LiveTAG we can click in other side of screen.
10 - Move LiveTAG You can drag the LiveTAG pressing the button with a disc symbol.
Switch
When the disc button will be clicked, the background contents can move slightly to the right. The LiveTAG selected will be displaced to left.
4째 LiveTAG moves 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 This icon indicates how many users are interacting with that selected LiveTAG.
2째Step
Switch
12 - Positioning in Column 3째Step
Matteo Forni - 6-10-2014 - m.forni@boba.land
This icon indicates the chronological number of the LiveTAG order in column. When you move the LiveTAG, that icon can change.
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 - Realistic images Set #design #ux #ui
Matteo Forni - 6-10-2014 - m.forni@boba.land
#1
Cynny Redesign - Realistic images Set #design #ux #ui
Matteo Forni - 6-10-2014 - m.forni@boba.land
#1