1 / 37

Design Principles and Patterns

Design Principles and Patterns. CS 5115 Fall 2012 October 1. Agenda for today. Usability Lab Visit Project – coming up (Visual) Design Principles and Patterns. Visual Design. Get a trained graphic designer (teams!) Use standard toolkits Follow principles and patterns

braden
Download Presentation

Design Principles and Patterns

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Design Principles and Patterns CS 5115 Fall 2012 October 1

  2. Agenda for today • Usability Lab Visit • Project – coming up • (Visual) Design Principles and Patterns

  3. Visual Design • Get a trained graphic designer (teams!) • Use standard toolkits • Follow principles and patterns • “Good artists copy, great artists steal”

  4. I know it when I (don’t) see it

  5. Some principles • Contrast • Repetition • Alignment • Proximity

  6. Some principles • Contrast • Repetition • Alignment • Proximity

  7. CRAP • Contrast • Emphasize important information • Make different things look different • Repetition • Consistency • Repeat design throughout the interface • Alignment • visually connect elements • create a visual flow • Proximity • group related elements, separate unrelated Robin Williams Non-Designers Design Book, Peachpit Press

  8. More on Visual Design • Be simple / don’t distract / don’t annoy • No animated gifs, flashing • Take care with colors • Take care with sound

  9. The principles in action

  10. Original

  11. Proximity

  12. Alignment

  13. Contrast

  14. Repetition

  15. Android Principles

  16. Android Principles • http://developer.android.com/design/get-started/principles.html

  17. Android UI Style • http://developer.android.com/design/style/index.html • http://developer.android.com/design/style/iconography.html • http://developer.android.com/design/style/writing.html

  18. Design Patterns • Practical wisdom • Concrete solutions to design problems • Structure + behavior • Let’s walk through some patterns • http://designinginterfaces.com/firstedition/index.php?page=About_Patterns • http://designinginterfaces.com/patterns/

  19. Example Patterns • http://designinginterfaces.com/firstedition/index.php?page=Two-Panel_Selector • http://designinginterfaces.com/firstedition/index.php?page=One-Window_Drilldown • http://designinginterfaces.com/firstedition/index.php?page=Extras_On_Demand • http://designinginterfaces.com/firstedition/index.php?page=Clear_Entry_Points • http://designinginterfaces.com/firstedition/index.php?page=Global_Navigation • http://designinginterfaces.com/firstedition/index.php?page=Visual_Framework • http://designinginterfaces.com/firstedition/index.php?page=Center_Stage • http://designinginterfaces.com/firstedition/index.php?page=Responsive_Disclosure • http://designinginterfaces.com/firstedition/index.php?page=Overview_Plus_Detail

  20. Android UI Framework / Patterns / General App Structure • http://developer.android.com/design/get-started/ui-overview.html • http://developer.android.com/design/patterns/app-structure.html • http://developer.android.com/design/patterns/index.html

  21. Android Pattern Examples • http://mobile-patterns.com/ • http://www.androidpatterns.com/

  22. Android Pattern Examples • http://mobile-patterns.com/ • http://mobile-patterns.com/dashboard-navigation • http://mobile-patterns.com/activityfeeds • http://www.androidpatterns.com/

  23. Design Patterns Exercises

  24. Design Patterns Exercises • http://www.androiduipatterns.com/2011/11/cautionary-example-of-bad-design.html

More Related