1 / 16

Graphics and Illustrations

Graphics and Illustrations. TECM 3200 Dr. Lam. Five purposes for illustrations. Picture of an exact item Picture to help people serve themselves Picture to illustrate process or concept Chart, graph, map Mood Picture. Picture of an exact item. Used in e-commerce sites primarily

khanh
Download Presentation

Graphics and Illustrations

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. Graphics and Illustrations TECM 3200 Dr. Lam

  2. Five purposes for illustrations • Picture of an exact item • Picture to help people serve themselves • Picture to illustrate process or concept • Chart, graph, map • Mood Picture

  3. Picture of an exact item • Used in e-commerce sites primarily • Can be actual pictures or illustrations • Answers questions customer’s are interested in

  4. Pictures that help people serve themselves • Provides options for customer/user • Allows them to explore on their own • Answers key questions that words can’t answer

  5. Pictures that describe a process or concept • Adds visual interest • Makes process easier to understand or more memorable

  6. Charts, graphs, and maps • Reports data or information • Visually displays relationships better than just words • Can/should be used along side words

  7. Pictures that convey mood • Created to evoke emotional response (visual rhetoric) • Clear purpose (usually to evoke good feelings about a brand or site) • Think about the message you are trying to send

  8. Seven Guidelines for using illustrations effectively • Don’t make people wonder what or why • Choose an appropriate size • Show diversity • Don’t make content look like ads • Don’t annoy your site visitors with blinking, rolling, waving, or wandering text or pictures • Use animation only where it helps • Make illustrations accessible

  9. Don’t make people wonder what or why • Time is essential (remember 10 seconds) • Can be distracting • Can be confusing

  10. Choose an appropriate size • Don’t let large pictures push content down too far • Be mindful of “the fold” • Avoid using high detail pictures if they are small or thumbnails

  11. Show Diversity • Broadly represent your target audience • Show your internal diversity, but be truthful

  12. Don’t make content look like ads • Small, colorful boxes tend to look like ads • Likely to ignore these images

  13. Don’t annoy people with blinking, rolling, waving, or wandering text or images • Movement annoys users • Slow readers (or readers who pay attention to details) have issues with movement

  14. Use Animation only where it helps • Use animation to explain the content • Process driven content • http://www.artofflightmovie.com/ • http://www.dangersoffracking.com/

  15. Make illustrations accessible • Use meaningful ALT-text • “language image” vs. “a picture of a family of four”

  16. Technical Specs to be aware of • Use appropriate image format to ensure best image quality and smallest file size • JPEG for photos and full-color images • PNG for line drawings, low-mid color images, and images with transparency • GIF for line drawings, low-color images and images with transparency • Image resolution should be 72dpi. • Maximum image size is 40kb. • Photos and images must be resized to: • A minimum of 60px by 60px • A maximum of 560px by 400px • Special allowances may be made for images up to 752px wide.

More Related