![Page 1: Visual design basics - HCI 2013 - University of Trento](https://reader033.vdocuments.mx/reader033/viewer/2022051322/54042f418d7f72aa768b45e9/html5/thumbnails/1.jpg)
VISUAL DESIGNbasics
Color M
arks by el patojo on Flickr
HCI course 2013 / 2014University of Trento
![Page 2: Visual design basics - HCI 2013 - University of Trento](https://reader033.vdocuments.mx/reader033/viewer/2022051322/54042f418d7f72aa768b45e9/html5/thumbnails/2.jpg)
DESIGN FRAMESIn H
er World by N
ana Bi A
gyei on Flickr
![Page 3: Visual design basics - HCI 2013 - University of Trento](https://reader033.vdocuments.mx/reader033/viewer/2022051322/54042f418d7f72aa768b45e9/html5/thumbnails/3.jpg)
Official guideSmashing Magazine guideJuhani Lethimaki, Smashing Android UI book
ANDROID
![Page 4: Visual design basics - HCI 2013 - University of Trento](https://reader033.vdocuments.mx/reader033/viewer/2022051322/54042f418d7f72aa768b45e9/html5/thumbnails/4.jpg)
VISUAL ELEMENTS
Phillip Ingham on Flickr Rai Dukk on Flickr
![Page 5: Visual design basics - HCI 2013 - University of Trento](https://reader033.vdocuments.mx/reader033/viewer/2022051322/54042f418d7f72aa768b45e9/html5/thumbnails/5.jpg)
Thinking with type
Roboto Android typeface:
TYPEA typographic Anatomy Lesson by Grant Hutchinson on Flickr
![Page 6: Visual design basics - HCI 2013 - University of Trento](https://reader033.vdocuments.mx/reader033/viewer/2022051322/54042f418d7f72aa768b45e9/html5/thumbnails/6.jpg)
Johnston typeface
Signs from
the Underground by S
preng Ben on Flickr
![Page 7: Visual design basics - HCI 2013 - University of Trento](https://reader033.vdocuments.mx/reader033/viewer/2022051322/54042f418d7f72aa768b45e9/html5/thumbnails/7.jpg)
Wise use of colours can influence positively you design. It is useful to define a colour palette to use throughout your design: it will help navigation and help recalling a comfortable environment for what you design wants to provide.
Katrina Alana on Flickr
COLOUR
colour blind check
reference: Design Elements, Color Fundamentals By Aaris Sherin
COLD WARM
color trends
![Page 8: Visual design basics - HCI 2013 - University of Trento](https://reader033.vdocuments.mx/reader033/viewer/2022051322/54042f418d7f72aa768b45e9/html5/thumbnails/8.jpg)
define them (photos? illustrations?icons? charts?) and their impact in the composition (do they suggest meaning?)
Icons in Android
IMAGERY
![Page 9: Visual design basics - HCI 2013 - University of Trento](https://reader033.vdocuments.mx/reader033/viewer/2022051322/54042f418d7f72aa768b45e9/html5/thumbnails/9.jpg)
Google Analytics logo
Google doc icon
CASE STUDY: GOOGLE ICONS
Google Drive icons
Google Drive icons emulation
![Page 10: Visual design basics - HCI 2013 - University of Trento](https://reader033.vdocuments.mx/reader033/viewer/2022051322/54042f418d7f72aa768b45e9/html5/thumbnails/10.jpg)
A BALANCED COMPOSITION
Reference
“More decorative typefaces can be attractive but might be more difficult to read, causing the reader to move on to simpler letterforms and words in the layout. Choosing typeface will inevitably affect the visual hierarchy but not necessarily in a straightforward way; all of the visual implications of a typeface need to be considered.”
![Page 11: Visual design basics - HCI 2013 - University of Trento](https://reader033.vdocuments.mx/reader033/viewer/2022051322/54042f418d7f72aa768b45e9/html5/thumbnails/11.jpg)
use white space in order to improve legibility, grive breadth to your design elements,
Space management in Android
DESIGN LAYOUT
![Page 12: Visual design basics - HCI 2013 - University of Trento](https://reader033.vdocuments.mx/reader033/viewer/2022051322/54042f418d7f72aa768b45e9/html5/thumbnails/12.jpg)
Now trending: flat style
Can you pick out a brand just by their button design?
![Page 13: Visual design basics - HCI 2013 - University of Trento](https://reader033.vdocuments.mx/reader033/viewer/2022051322/54042f418d7f72aa768b45e9/html5/thumbnails/13.jpg)
Android nicetiesother: pinterest UI boards, Google groups, Behance, sample screenshots on Google Play
INSPIRING YOURSELF
![Page 14: Visual design basics - HCI 2013 - University of Trento](https://reader033.vdocuments.mx/reader033/viewer/2022051322/54042f418d7f72aa768b45e9/html5/thumbnails/14.jpg)
2010 Google I/O conference - pitch about Android UI design patterns
PATTERNS
![Page 15: Visual design basics - HCI 2013 - University of Trento](https://reader033.vdocuments.mx/reader033/viewer/2022051322/54042f418d7f72aa768b45e9/html5/thumbnails/15.jpg)
http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-2/9084309(collaborative work about Google corporate ID)
more:http://www.behance.net/rogeroddone(senior creative at Google)
GOOGLE VISUAL IDENTITY
![Page 16: Visual design basics - HCI 2013 - University of Trento](https://reader033.vdocuments.mx/reader033/viewer/2022051322/54042f418d7f72aa768b45e9/html5/thumbnails/16.jpg)
pre-filled Photoshop/GIMP resource with Android graphic elements:http://androiduiux.com/2013/10/04/android-ui-design-kit-for-photoshop-and-gimp-4-3-free-download/
you can also download other files from android website:http://developer.android.com/design/downloads/index.html
RESOURCES
![Page 17: Visual design basics - HCI 2013 - University of Trento](https://reader033.vdocuments.mx/reader033/viewer/2022051322/54042f418d7f72aa768b45e9/html5/thumbnails/17.jpg)
Visual usability: principles and practices for designing digital applicationsTania Schlatter, Deborah Levinson, 2013:http://visualusabilitybook.com/
OTHER REFERENCES