VISUAL DESIGN
basics
HCI course 2013 / 2014
University of Trento

Color Marks by el patojo on Flickr
DESIGN FRAMES

In Her World by Nana Bi Agyei on Flickr
ANDROID

Official guide
Smashing Magazine guide
Juhani Lethimaki, Smashing Android UI book
Phillip Ingham on Flickr

Rai Dukk on Flickr

VISUAL ELEMENTS
A typographic Anatomy Lesson by Grant Hutchinson on Flickr

TYPE
Thinking with type

Roboto Android typeface:
Johnston
typeface
Signs from the Underground by Spreng Ben on Flickr
COLOUR
Wise use of colours can influence positively you design. It is useful to define a colour palette to use
throughout ...
IMAGERY
define them (photos? illustrations?icons? charts?) and their impact in the composition (do they suggest
meaning?)
...
CASE STUDY: GOOGLE ICONS

Google Drive icons

Google Analytics logo

Google Drive icons emulation

Google doc icon
A BALANCED COMPOSITION
“More decorative typefaces can be attractive but might be more difficult to read, causing the reade...
DESIGN LAYOUT
use white space in order to improve legibility, grive breadth to your design elements,

Space management in
...
Now
trending:
flat style
Can you pick out a
brand just by their
button design?
INSPIRING YOURSELF

Android niceties
other: pinterest UI boards, Google groups, Behance, sample screenshots on Google Play
PATTERNS
2010 Google
I/O conference
- pitch about
Android UI
design patterns
GOOGLE VISUAL IDENTITY
http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077
http://www.behance.ne...
RESOURCES
pre-filled Photoshop/GIMP resource with Android graphic elements:
http://androiduiux.com/2013/10/04/android-ui-d...
OTHER REFERENCES
Visual usability: principles and practices for designing digital applications
Tania Schlatter, Deborah Le...
Upcoming SlideShare
Loading in...5
×

Visual design basics - HCI 2013 - University of Trento

625

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 ( www.smartcampuslab.it ) aimed at supporting students life in the University Campus.

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
625
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
22
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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 http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077 http://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)
  16. 16. RESOURCES pre-filled Photoshop/GIMP resource with Android graphic elements: http://androiduiux.com/2013/10/04/android-ui-design-kit-for-photoshop-and-gimp-4-3free-download/ you can also download other files from android website: http://developer.android.com/design/downloads/index.html
  17. 17. OTHER REFERENCES Visual usability: principles and practices for designing digital applications Tania Schlatter, Deborah Levinson, 2013: http://visualusabilitybook.com/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×