Images / Graphics in GUI Design
John Wu
Qiongzhi
Agenda
 Intro
 Guidelines
 Recommendation
 Examples
 Conclusion
Intro | Guidelines | Designing / Choosing | Toolbars ...
A picture is worth a thousand words.
Intro
 Graphical User Interface
 Graphics are integral part of software and increases
usability
Intro | Guidelines | Des...
Guidelines
 Use icons for a purpose
 Application Icons
 Click to launch
Intro | Guidelines | Designing / Choosing | Too...
Guidelines
 Use icons for a purpose
 Application Icons
 Button images
 Pictures used on buttons, clicking it does an a...
Guidelines
 Use icons for a purpose
 Application Icons
 Button images
 Message Icons
 Symbols used in messages to get...
Guidelines of use
 Shortcuts
 Quick illustration
 Photoshop icons
 International Recognition
Intro | Guidelines | Desi...
Designing and Choosing Graphics
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
Approach Example of appr...
Designing and Choosing Graphics
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
Approach Example of appr...
Designing and Choosing Graphics
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
Approach Example of appr...
Designing and Choosing Graphics
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
Approach Example of appr...
Designing and Choosing Graphics
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
Approach Example of appr...
Designing and Choosing Graphics
 Create a cohesive set
 Similar colours
Intro | Guidelines | Designing / Choosing | Tool...
Designing and Choosing Graphics
 Create a cohesive set
 Similar colours
 Include only enough details
 Sufficient
 Too...
Designing and Choosing Graphics
 Create a cohesive set
 Similar colours
 Include only enough details
 Sufficient
 Too...
Designing and Choosing Graphics
 Try to illustrate system state
 Be consistent
 Do not use a same icon for different ta...
Toolbars
 Most frequently used
 Text drop down menu
 Fairly frequent and across several screens
 Toolbar
Intro | Guide...
Toolbars
 Active items available
 Limit button images to 15
Intro | Guidelines | Designing / Choosing | Toolbars | Concl...
Conclusion
 Show feedback and/or system state
 Use only when it is better alternative to text
 Be consistent
Intro | Gu...
Thank YouReferences
Enterprise – Wide GUI Design
Susan Weinschenk
Sarah C. Yeo
CHI Journal 31st March
Personal Digital His...
Upcoming SlideShare
Loading in …5
×

John wu qiongzhi graphics

458 views

Published on

Published in: Technology, Spiritual
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
458
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

John wu qiongzhi graphics

  1. 1. Images / Graphics in GUI Design John Wu Qiongzhi
  2. 2. Agenda  Intro  Guidelines  Recommendation  Examples  Conclusion Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
  3. 3. A picture is worth a thousand words.
  4. 4. Intro  Graphical User Interface  Graphics are integral part of software and increases usability Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
  5. 5. Guidelines  Use icons for a purpose  Application Icons  Click to launch Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
  6. 6. Guidelines  Use icons for a purpose  Application Icons  Button images  Pictures used on buttons, clicking it does an action on the application Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
  7. 7. Guidelines  Use icons for a purpose  Application Icons  Button images  Message Icons  Symbols used in messages to get user’s attention Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
  8. 8. Guidelines of use  Shortcuts  Quick illustration  Photoshop icons  International Recognition Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
  9. 9. Designing and Choosing Graphics Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion Approach Example of approach Example icon Object A picture of a disk to represent disk
  10. 10. Designing and Choosing Graphics Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion Approach Example of approach Example icon Object A picture of a disk to represent disk Action A picture of someone running to indicate speed
  11. 11. Designing and Choosing Graphics Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion Approach Example of approach Example icon Object A picture of a disk to represent disk Action A picture of someone running to indicate speed Tool that represent action Ruler to indicate measuring
  12. 12. Designing and Choosing Graphics Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion Approach Example of approach Example icon Object A picture of a disk to represent disk Action A picture of someone running to indicate speed Tool that represent action Ruler to indicate measuring Physical Analogy Magnifying glass to show enlargement
  13. 13. Designing and Choosing Graphics Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion Approach Example of approach Example icon Object A picture of a disk to represent disk Action A picture of someone running to indicate speed Tool that represent action Ruler to indicate measuring Physical Analogy Magnifying glass to show enlargement Commonly used symbol International don’t do symbols
  14. 14. Designing and Choosing Graphics  Create a cohesive set  Similar colours Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
  15. 15. Designing and Choosing Graphics  Create a cohesive set  Similar colours  Include only enough details  Sufficient  Too much details Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
  16. 16. Designing and Choosing Graphics  Create a cohesive set  Similar colours  Include only enough details  Sufficient  Too much details  Try using standard icons:  The Icon Book and Disk: Visual Symbols for Computer Systems and Documentation by William Horton, (John Wiley &Sons, 1994) Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
  17. 17. Designing and Choosing Graphics  Try to illustrate system state  Be consistent  Do not use a same icon for different tasks  Do not use words  Use text labels when mouse hovers above the icon Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
  18. 18. Toolbars  Most frequently used  Text drop down menu  Fairly frequent and across several screens  Toolbar Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
  19. 19. Toolbars  Active items available  Limit button images to 15 Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
  20. 20. Conclusion  Show feedback and/or system state  Use only when it is better alternative to text  Be consistent Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
  21. 21. Thank YouReferences Enterprise – Wide GUI Design Susan Weinschenk Sarah C. Yeo CHI Journal 31st March Personal Digital Historian: User interface Design AMX User interface design style guide

×