Graphic Design For Developers

6,595
-1

Published on

Slide deck from my guest appearance on "Web Wednesday" June 4, 2008.

Published in: Business, Technology
3 Comments
18 Likes
Statistics
Notes
  • nice one...loved it
    can i have this one ...
    myi.y2k@gmail.com

    thnxs
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • very good presentations, and would you like to share this presentation with my?
    my email, wzmgogo@sohu.com
    Thanks.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Excellent sharing and nice presentation.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
6,595
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
3
Likes
18
Embeds 0
No embeds

No notes for slide

Graphic Design For Developers

  1. Frank La Vigne Applied Information Sciences Microsoft MVP: Tablet PC www.FranksWorld.com [email_address]
  2. <ul><li>15 years of professional experience </li></ul><ul><li>Started career writing Microsoft Visual Basic 3 applications </li></ul><ul><li>Microsoft MVP: Tablet PC </li></ul><ul><li>User Group & Code Camp speaker </li></ul><ul><li>CoDE Magazine Author </li></ul><ul><li>President Emeritus of Richmond.NET User Group </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>
  3. <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>
  4.  
  5. <ul><li>UI = User Interface </li></ul><ul><li>UX = User Experience </li></ul>
  6. <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.
  7.  
  8.  
  9. <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>
  10. <ul><li>Yogi Berra </li></ul>Examples of good (and bad) design are all around us.
  11. <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>
  12. <ul><li>But how? </li></ul>
  13. <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 you know. </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>
  14. <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>
  15.  
  16.  
  17.  
  18. <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>
  19.  
  20.  
  21.  
  22. <ul><li>Yogi Berra </li></ul>What good is data if decision makers can’t understand its meaning?
  23. What good is data if decision makers can’t understand its meaning? Edward R. Tufte, Visual Explanations: Images and Quantities, Evidence and Narrative (1992)
  24. <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>
  25.  
  26. <ul><li>Relevance and frequency are immediately obvious </li></ul>
  27.  
  28. <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><li>Inspire emotions </li></ul><ul><ul><li>Can make us hungry, nervous or calm </li></ul></ul>
  29. <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>
  30. <ul><li>Yogi Berra </li></ul>the predominance of the colors red & yellow in many restaurants is there only to make customers hungry
  31. <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
  32. <ul><li>The Tools to Build a Better User Experience </li></ul>
  33. <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>
  34. Frank La Vigne www.FranksWorld.com [email_address]

×