Illustrating User Interface

Talk for the Web Expo Guildford Conference 2012.

How illustration can be used to enhance UI on the web, help tell stories, easily describe concepts and convey a mood or a feeling to help users become more engaged with the brand.

http://webexpoguildford.co.uk

Transcript

1. ILLUSTRATING USER INTERFACE supereightstudio.com @matthamm
2. ABOUT ME
7. 1 WHY? 2 TYPES 3 STYLES 4 WORKFLOW
8. WHY?
10. 40,000 YEARS OLD
11. PRIMITIVE
13. DESIGN ART
14. ILLUSTRATION ART Style
15. DESIGN IS PROBLEM SOLVING
16. ILLUSTRATION CAN SOLVE PROBLEMS
17. We work our way through, initially understanding the problem, whatever that may be, thoughtfully considering the client, the business, the market, the goals, the audience and users, and then find ways of telling the right story.” “ - Mark Bolton
18. Illustration is pictures to read or words to look at.” - Quentin Blake “
20. TYPES
21. MASCOT & CHARACTER
22. THEMATIC
25. ICONIC
27. THE NOUN PROJECT
28. HAND RENDERED TYPE
31. DIAGRAMMATIC
32. APIs API API SIP Your OSS/BSS Your Servers DRUM HQ Your Customer Billing Reporting Provisioning Tra c connection Integrate Reporting + Billing Provision Access No. + PINS Call Control Collaboration Provisioning Fully Integrated Audio Conferencing & Web Meetings Drum Audio Your Network Drum Web Hosted Service Drum Web Meetings
35. DATA VISUALISATION
39. STYLES
40. STYLE ISN’T ONLY VISUAL
41. 3D RENDERED
42. HYPER-REALISTIC
43. SIMPLE VECTORS
46. MINIMALIST
48. HAND DRAWN
51. TRADITIONAL
53. WORKFLOW
54. THE BRIEF
55. Can u design me a cool mascot 4 my website, like Mailchimp? okthxbye” - New client “
56. CLARIFY THE STYLE THE AMOUNT OF CONCEPTS NUMBER OF ITERATIONS PRICING STRUCTURE EXAMPLES
57. RESEARCH
62. FLICKR ISTOCKPHOTO DRIBBBLE GIMMIEBAR/ZOOTOOL GOOGLE IMAGE SEARCH
63. ASK FRIENDS BRAND GUIDELINES READ BOOKS TARGET AUDIENCE ILLUSTRATION BLOGS
64. SKETCH
70. VECTOR ARTWORK
75. ITERATE
81. DETAIL
89. $50 $40 $30 $20 YHOO
91. ESTABLISH AN ILLUSTRATION STYLE
92. THE USE OF ILLUSTRATION ISN'T APPROPRIATE FOR EVERY BRAND
93. DOODLE
94. FIN supereightstudio.com @matthamm