john wu qiongzhi graphics
DESCRIPTION
TRANSCRIPT
![Page 1: John wu qiongzhi graphics](https://reader033.vdocuments.site/reader033/viewer/2022061209/548c343bb47959d0288b466d/html5/thumbnails/1.jpg)
Images / Graphics in GUI Design
John Wu Qiongzhi
![Page 2: John wu qiongzhi graphics](https://reader033.vdocuments.site/reader033/viewer/2022061209/548c343bb47959d0288b466d/html5/thumbnails/2.jpg)
Agenda
Intro Guidelines Recommendation Examples Conclusion
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
![Page 3: John wu qiongzhi graphics](https://reader033.vdocuments.site/reader033/viewer/2022061209/548c343bb47959d0288b466d/html5/thumbnails/3.jpg)
A picture is worth a thousand words.
![Page 4: John wu qiongzhi graphics](https://reader033.vdocuments.site/reader033/viewer/2022061209/548c343bb47959d0288b466d/html5/thumbnails/4.jpg)
Intro
Graphical User Interface Graphics are integral part of software and increases
usability
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
![Page 5: John wu qiongzhi graphics](https://reader033.vdocuments.site/reader033/viewer/2022061209/548c343bb47959d0288b466d/html5/thumbnails/5.jpg)
Guidelines
Use icons for a purpose Application Icons
Click to launch
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
![Page 6: John wu qiongzhi graphics](https://reader033.vdocuments.site/reader033/viewer/2022061209/548c343bb47959d0288b466d/html5/thumbnails/6.jpg)
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
![Page 7: John wu qiongzhi graphics](https://reader033.vdocuments.site/reader033/viewer/2022061209/548c343bb47959d0288b466d/html5/thumbnails/7.jpg)
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
![Page 8: John wu qiongzhi graphics](https://reader033.vdocuments.site/reader033/viewer/2022061209/548c343bb47959d0288b466d/html5/thumbnails/8.jpg)
Guidelines of use
Shortcuts
Quick illustration Photoshop icons
International Recognition
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
![Page 9: John wu qiongzhi graphics](https://reader033.vdocuments.site/reader033/viewer/2022061209/548c343bb47959d0288b466d/html5/thumbnails/9.jpg)
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
![Page 10: John wu qiongzhi graphics](https://reader033.vdocuments.site/reader033/viewer/2022061209/548c343bb47959d0288b466d/html5/thumbnails/10.jpg)
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
![Page 11: John wu qiongzhi graphics](https://reader033.vdocuments.site/reader033/viewer/2022061209/548c343bb47959d0288b466d/html5/thumbnails/11.jpg)
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
![Page 12: John wu qiongzhi graphics](https://reader033.vdocuments.site/reader033/viewer/2022061209/548c343bb47959d0288b466d/html5/thumbnails/12.jpg)
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
![Page 13: John wu qiongzhi graphics](https://reader033.vdocuments.site/reader033/viewer/2022061209/548c343bb47959d0288b466d/html5/thumbnails/13.jpg)
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
![Page 14: John wu qiongzhi graphics](https://reader033.vdocuments.site/reader033/viewer/2022061209/548c343bb47959d0288b466d/html5/thumbnails/14.jpg)
Designing and Choosing Graphics
Create a cohesive set Similar colours
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
![Page 15: John wu qiongzhi graphics](https://reader033.vdocuments.site/reader033/viewer/2022061209/548c343bb47959d0288b466d/html5/thumbnails/15.jpg)
Designing and Choosing Graphics
Create a cohesive set Similar colours
Include only enough details Sufficient Too much details
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
![Page 16: John wu qiongzhi graphics](https://reader033.vdocuments.site/reader033/viewer/2022061209/548c343bb47959d0288b466d/html5/thumbnails/16.jpg)
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
![Page 17: John wu qiongzhi graphics](https://reader033.vdocuments.site/reader033/viewer/2022061209/548c343bb47959d0288b466d/html5/thumbnails/17.jpg)
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
![Page 18: John wu qiongzhi graphics](https://reader033.vdocuments.site/reader033/viewer/2022061209/548c343bb47959d0288b466d/html5/thumbnails/18.jpg)
Toolbars
Most frequently used Text drop down menu
Fairly frequent and across several screens Toolbar
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
![Page 19: John wu qiongzhi graphics](https://reader033.vdocuments.site/reader033/viewer/2022061209/548c343bb47959d0288b466d/html5/thumbnails/19.jpg)
Toolbars
Active items available
Limit button images to 15
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
![Page 20: John wu qiongzhi graphics](https://reader033.vdocuments.site/reader033/viewer/2022061209/548c343bb47959d0288b466d/html5/thumbnails/20.jpg)
Conclusion
Show feedback and/or system state Use only when it is better alternative to text Be consistent
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
![Page 21: John wu qiongzhi graphics](https://reader033.vdocuments.site/reader033/viewer/2022061209/548c343bb47959d0288b466d/html5/thumbnails/21.jpg)
Thank YouReferences
Enterprise – Wide GUI Design Susan WeinschenkSarah C. Yeo
CHI Journal 31st MarchPersonal Digital Historian: User interface Design
AMXUser interface design style guide