Graphic Design For Developers Richmond Code Camp

3,745 views

Published on

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

No Downloads
Views
Total views
3,745
On SlideShare
0
From Embeds
0
Number of Embeds
48
Actions
Shares
0
Downloads
1
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Graphic Design For Developers Richmond Code Camp

  1. Richmond Code Camp October 4, 2008 Frank La Vigne Applied Information Sciences Microsoft MVP: Tablet PC www.FranksWorld.com [email_address]
  2. <ul><li>Microsoft MVP: Tablet PC </li></ul><ul><li>15 years of professional experience </li></ul><ul><li>Started career writing Microsoft Visual Basic 3 applications </li></ul><ul><li>Author, User Group & Code Camp speaker </li></ul><ul><li>Long Time Dev-igner </li></ul><ul><li>INETA Membership Mentor for DC, MD and DE </li></ul><ul><li>Lead Designer @ Applied Information Sciences </li></ul><ul><ul><li>Blog: http://www.franksworld.com </li></ul></ul><ul><ul><li>Corporate: http://www.appliedis.com </li></ul></ul><ul><li>// TODO: Find a better picture of myself </li></ul>
  3.  
  4.  
  5. <ul><li>“ I’m not an artist.” No one is asking you to be one. </li></ul><ul><li>“ UI is just fluff anyways.” Have you ever been frustrated by one? </li></ul><ul><li>“ Good UI is subjective.” Not Really. It is measurable. </li></ul><ul><li>“ I don’t own any turtlenecks.” That’s OK. </li></ul>
  6.  
  7. <ul><li>UI = User Interface </li></ul><ul><li>UX = User Experience </li></ul>
  8. <ul><li>Graphic design is a process </li></ul><ul><ul><li>Just like designing software: There are rules, patterns and conventions </li></ul></ul><ul><li>There are even acronyms </li></ul><ul><ul><li>User Interface (UI) </li></ul></ul><ul><ul><li>User Experience (UX) </li></ul></ul><ul><li>What’s the difference between UI and UX? </li></ul><ul><ul><li>It’s easy actually. </li></ul></ul>* Or how I stopped worrying and embraced my creative side.
  9.  
  10.  
  11. <ul><li>User Interface is </li></ul><ul><ul><li>What the user sees </li></ul></ul><ul><ul><ul><li>Controls </li></ul></ul></ul><ul><ul><ul><li>Layout </li></ul></ul></ul><ul><li>User Experience is </li></ul><ul><ul><li>What the user feels </li></ul></ul><ul><ul><ul><li>Steps in a process </li></ul></ul></ul><ul><ul><ul><li>Wait times </li></ul></ul></ul><ul><ul><ul><li>Shifts in attention & eye focus </li></ul></ul></ul>
  12. <ul><li>Yogi Berra </li></ul>Examples of good (and bad) design are all around us.
  13.  
  14.  
  15.  
  16.  
  17. <ul><li>Which site is likely to get repeat visitors? </li></ul><ul><li>Which site is more likely to generate revenue? </li></ul><ul><li>Does UX design matter? </li></ul>
  18. <ul><li>Q: Why are screens like this still common sights at retail stores, hospitals, etc in 2008? </li></ul><ul><li>A: It’s actually usable. </li></ul><ul><li>Keystroke navigation </li></ul><ul><li>Consistent </li></ul><ul><li>High contrast </li></ul>
  19.  
  20.  
  21. <ul><li>We have lots of tools: </li></ul><ul><ul><li>Powerful CPUs </li></ul></ul><ul><ul><li>Graphics cards </li></ul></ul><ul><ul><li>Slick IDEs </li></ul></ul><ul><li>What are we designing for really? </li></ul><ul><li>What is our Target OS? </li></ul>
  22. <ul><li>The Human Mind aka Homo Sapien 1.0 </li></ul><ul><ul><li>Focus </li></ul></ul><ul><ul><li>Focal Length </li></ul></ul><ul><ul><li>Attention Span </li></ul></ul><ul><ul><li>Visual Perception </li></ul></ul>http://shrinkster.com/11dx Bill Hill, Microsoft Research
  23.  
  24.  
  25.  
  26.  
  27.  
  28.  
  29.  
  30.  
  31.  
  32. <ul><li>Look at the application through a user’s eyes: </li></ul><ul><li>Are the text boxes lined up? </li></ul><ul><ul><li>Neatness counts. </li></ul></ul><ul><li>A lot of folks rarely use the mouse. </li></ul><ul><ul><li>Do the tab orders line up? </li></ul></ul><ul><ul><li>Do keyboard shortcuts make sense? </li></ul></ul><ul><li>Are frequent tasks easy? </li></ul><ul><ul><li>Count the number of clicks/keystrokes/context shifts it takes to perform a task. </li></ul></ul>
  33. <ul><li>Look at the application through a user’s eyes: </li></ul><ul><li>Is a given screen’s purpose obvious? </li></ul><ul><ul><li>To you? </li></ul></ul><ul><ul><li>To everyone else? </li></ul></ul><ul><ul><li>To your target customers? </li></ul></ul><ul><li>Placement of information </li></ul><ul><ul><li>In Western Cultures, users read from Top Left to Bottom Right </li></ul></ul><ul><ul><li>“ Above the fold” </li></ul></ul>
  34.  
  35.  
  36.  
  37.  
  38.  
  39.  
  40.  
  41.  
  42.  
  43.  
  44. <ul><li>This chart conveys important information. </li></ul>But what?
  45. Edward R. Tufte, Visual Explanations: Images and Quantities, Evidence and Narrative (1992)
  46. <ul><li>Look at the application through a user’s eyes: </li></ul><ul><li>Can users readily identify important data? </li></ul><ul><ul><li>Colors and Contrast </li></ul></ul><ul><ul><li>Font size </li></ul></ul><ul><li>Can users see text clearly? </li></ul><ul><ul><li>If they have to squint or hunt, then the answer is no. </li></ul></ul>
  47.  
  48. <ul><li>Relevance and frequency are immediately obvious </li></ul>
  49.  
  50. <ul><li>Colors </li></ul><ul><li>Draw our attention </li></ul><ul><li>Excite the mind </li></ul><ul><li>Have significance and meaning </li></ul><ul><ul><li>That vary from culture to culture </li></ul></ul><ul><li>Inspire emotions </li></ul><ul><ul><li>Can make us hungry, nervous or calm </li></ul></ul>
  51. <ul><li>Red </li></ul><ul><ul><li>Red is also considered an intense, or even angry, color that creates feelings of excitement or intensity </li></ul></ul><ul><li>Yellow </li></ul><ul><ul><li>Yellow can also create feelings of frustration & anger </li></ul></ul><ul><ul><li>Yellow can also increase the metabolism. </li></ul></ul><ul><li>Green </li></ul><ul><ul><li>symbolizes nature and the natural world. </li></ul></ul><ul><ul><li>represents tranquility, good luck, health, and jealousy. </li></ul></ul>
  52. <ul><li>Yogi Berra </li></ul>the predominance of the colors red & yellow in many restaurants is there only to make customers hungry
  53. <ul><li>Yogi Berra </li></ul>Blue conveys importance and confidence without being somber or sinister, hence the blue power suit of the corporate world
  54. <ul><li>Some Simple Tips for Happy User Experiences </li></ul>
  55.  
  56.  
  57.  
  58.  
  59.  
  60.  
  61.  
  62.  
  63.  
  64.  
  65.  
  66. <ul><li>The Tools to Build a Better User Experience </li></ul>
  67. <ul><li>Expression is a suite of products for building UX’s </li></ul><ul><li>--Much like Office is a suite of business tools </li></ul><ul><li>Demos </li></ul><ul><li>Expression Design </li></ul><ul><li>Expression Blend </li></ul>
  68.  
  69. Frank La Vigne www.FranksWorld.com [email_address]

×