Visual design basics - HCI 2013 - University of Trento
•
4 likes•1,891 views
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.
Recommended
More Related Content
Recently uploaded
Recently uploaded (20)
Featured
Featured (20)
Visual design basics - HCI 2013 - University of Trento
- 1. VISUAL DESIGN basics HCI course 2013 / 2014 University of Trento Color Marks by el patojo on Flickr
- 2. DESIGN FRAMES In Her World by Nana Bi Agyei on Flickr
- 3. ANDROID Official guide Smashing Magazine guide Juhani Lethimaki, Smashing Android UI book
- 4. Phillip Ingham on Flickr Rai Dukk on Flickr VISUAL ELEMENTS
- 5. A typographic Anatomy Lesson by Grant Hutchinson on Flickr TYPE Thinking with type Roboto Android typeface:
- 6. Johnston typeface Signs from the Underground by Spreng Ben on Flickr
- 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. IMAGERY define them (photos? illustrations?icons? charts?) and their impact in the composition (do they suggest meaning?) Icons in Android
- 9. CASE STUDY: GOOGLE ICONS Google Drive icons Google Analytics logo Google Drive icons emulation Google doc icon
- 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. DESIGN LAYOUT use white space in order to improve legibility, grive breadth to your design elements, Space management in Android
- 12. Now trending: flat style Can you pick out a brand just by their button design?
- 13. INSPIRING YOURSELF Android niceties other: pinterest UI boards, Google groups, Behance, sample screenshots on Google Play
- 14. PATTERNS 2010 Google I/O conference - pitch about Android UI design patterns
- 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. 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. OTHER REFERENCES Visual usability: principles and practices for designing digital applications Tania Schlatter, Deborah Levinson, 2013: http://visualusabilitybook.com/