Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Visual design basics - HCI 2013 - University of Trento


Published on

Visual Design lesson aimed at supporting Computer Science students of University of Trento developing an high fidelity prototype of new Android based mobile apps. These new apps were designed during Human Computer Interaction course 2013/2014 and were thought to be integrated in an existing set of mobile apps ( ) aimed at supporting students life in the University Campus.

  • Be the first to comment

Visual design basics - HCI 2013 - University of Trento

  1. 1. VISUAL DESIGN basics HCI course 2013 / 2014 University of Trento Color Marks by el patojo on Flickr
  2. 2. DESIGN FRAMES In Her World by Nana Bi Agyei on Flickr
  3. 3. ANDROID Official guide Smashing Magazine guide Juhani Lethimaki, Smashing Android UI book
  4. 4. Phillip Ingham on Flickr Rai Dukk on Flickr VISUAL ELEMENTS
  5. 5. A typographic Anatomy Lesson by Grant Hutchinson on Flickr TYPE Thinking with type Roboto Android typeface:
  6. 6. Johnston typeface Signs from the Underground by Spreng Ben on Flickr
  7. 7. COLOUR 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. COLD WARM colour blind check Katrina Alana on Flickr reference: Design Elements, Color Fundamentals By Aaris Sherin color trends
  8. 8. IMAGERY define them (photos? illustrations?icons? charts?) and their impact in the composition (do they suggest meaning?) Icons in Android
  9. 9. CASE STUDY: GOOGLE ICONS Google Drive icons Google Analytics logo Google Drive icons emulation Google doc icon
  10. 10. A BALANCED COMPOSITION “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.” Reference
  11. 11. DESIGN LAYOUT use white space in order to improve legibility, grive breadth to your design elements, Space management in Android
  12. 12. Now trending: flat style Can you pick out a brand just by their button design?
  13. 13. INSPIRING YOURSELF Android niceties other: pinterest UI boards, Google groups, Behance, sample screenshots on Google Play
  14. 14. PATTERNS 2010 Google I/O conference - pitch about Android UI design patterns
  15. 15. GOOGLE VISUAL IDENTITY (collaborative work about Google corporate ID) more: (senior creative at Google)
  16. 16. RESOURCES pre-filled Photoshop/GIMP resource with Android graphic elements: you can also download other files from android website:
  17. 17. OTHER REFERENCES Visual usability: principles and practices for designing digital applications Tania Schlatter, Deborah Levinson, 2013: