Your SlideShare is downloading. ×
John wu qiongzhi  graphics
John wu qiongzhi  graphics
John wu qiongzhi  graphics
John wu qiongzhi  graphics
John wu qiongzhi  graphics
John wu qiongzhi  graphics
John wu qiongzhi  graphics
John wu qiongzhi  graphics
John wu qiongzhi  graphics
John wu qiongzhi  graphics
John wu qiongzhi  graphics
John wu qiongzhi  graphics
John wu qiongzhi  graphics
John wu qiongzhi  graphics
John wu qiongzhi  graphics
John wu qiongzhi  graphics
John wu qiongzhi  graphics
John wu qiongzhi  graphics
John wu qiongzhi  graphics
John wu qiongzhi  graphics
John wu qiongzhi  graphics
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

John wu qiongzhi graphics

286

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
286
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Images / Graphics in GUI Design John Wu Qiongzhi
  • 2. Agenda  Intro  Guidelines  Recommendation  Examples  Conclusion Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
  • 3. A picture is worth a thousand words.
  • 4. Intro  Graphical User Interface  Graphics are integral part of software and increases usability Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
  • 5. Guidelines  Use icons for a purpose  Application Icons  Click to launch Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
  • 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. 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. Guidelines of use  Shortcuts  Quick illustration  Photoshop icons  International Recognition Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
  • 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. 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. 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. 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. 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. Designing and Choosing Graphics  Create a cohesive set  Similar colours Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
  • 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. 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. 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. Toolbars  Most frequently used  Text drop down menu  Fairly frequent and across several screens  Toolbar Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
  • 19. Toolbars  Active items available  Limit button images to 15 Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
  • 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. 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

×