Embed Size (px)
Citation preview
Design Trends and PatternsValeria Gasik, Ilya Shmorgun
Influences and references
Neue Grafik Magazine published 1958-1965
Swiss-Design/ International Typography Style
graphicmania.netsmashing magazine
Grid
Fluid Grids (Responsive Design)http://cssgrid.net/http://www.getskeleton.com/http://960.gs/http://www.designinfluences.com/fluid960gs/
Other trends
Fixed Top Bar
Textures
Digital Vintage & Skeuomorphism
• Retaining ornamental design cues
• Emulating i.e. luxurious and fragile feel
• Making new look and sound old and familiar
• Not necessary non-functional
Counter-approach to skeuomorphic
Designing GUI for mobile– Affordance and consistence
Some patterns for consideration
• 4 states for interactive elements
• visual clues
• learned behavior
• consistency
4 states
normal pressedfocused disabled
Visual clues
androiduipatterns.com
Proportionsin DP units
developer.android.com/design
Learned behaviorSearch box or action bar on top
>
androidpatterns.com
Changing views with buttons and menu
androidpatterns.com
Basic views – Dashboard
Application Icon
Action bar (with branding)
Contextual action
Most important functions
Relevant info; data updates
androiduipatterns.com
Basic views – Listing
Application icon
Never-ending list
androiduipatterns.com
Navigation
Action forchecked items
Swiping tabs
Consistency
androiduipatterns.com
Search Search Go!
Case – AllKpop.com
J. Nielsen 2011, useit.com
Case – AllKpop.com
J. Nielsen 2011, useit.com
Fewer features
Bigger touch surface
>
Full headlines
Visual content
Tighter design
Hiding date
Labeling drop down menu
References
• http://developer.android.com/design
• http://www.androidpatterns.com
• http://www.androiduipatterns.com
