Frank La Vigne Applied Information Sciences Microsoft MVP: Tablet PC www.FranksWorld.com [email_address]
<ul><li>15 years of professional experience </li></ul><ul><li>Started career writing Microsoft Visual  Basic 3 application...
<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...
 
<ul><li>UI = User Interface </li></ul><ul><li>UX = User Experience </li></ul>
<ul><li>Graphic design is a process </li></ul><ul><ul><li>Just like designing software: There are rules, patterns and conv...
 
 
<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><li>Yogi Berra </li></ul>Examples of good (and bad) design are all around us.
<ul><li>Q: Why are screens like this still common sights at retail stores, hospitals, etc in 2008? </li></ul><ul><li>A: It...
<ul><li>But how? </li></ul>
<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><l...
<ul><li>Look at the application through a user’s eyes: </li></ul><ul><li>Is a given screen’s purpose obvious? </li></ul><u...
 
 
 
<ul><li>Which site is likely to get repeat visitors? </li></ul><ul><li>Which site is more likely to generate revenue? </li...
 
 
 
<ul><li>Yogi Berra </li></ul>What good is data if decision makers can’t understand its meaning?
What good is data if decision makers can’t understand its meaning? Edward R. Tufte,   Visual Explanations: Images and Quan...
<ul><li>Look at the application through a user’s eyes: </li></ul><ul><li>Can users readily identify important data? </li><...
 
<ul><li>Relevance and frequency are immediately obvious </li></ul>
 
<ul><li>Colors  </li></ul><ul><li>Draw our attention </li></ul><ul><li>Excite the mind </li></ul><ul><li>Have significance...
<ul><li>Red </li></ul><ul><ul><li>Red is also considered an intense, or even angry, color that creates feelings of excitem...
<ul><li>Yogi Berra </li></ul>the predominance of the colors red & yellow in many restaurants is there only to make custome...
<ul><li>Yogi Berra </li></ul>Blue conveys importance and confidence without being somber or sinister, hence the blue power...
<ul><li>The Tools to Build a Better User Experience </li></ul>
<ul><li>Expression is a suite of products for building UX’s </li></ul><ul><li>--Much like Office is a suite of business to...
Frank La Vigne www.FranksWorld.com [email_address]
Upcoming SlideShare
Loading in...5
×

Graphic Design For Developers

6,385

Published on

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

Published in: Business, Technology
3 Comments
19 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,385
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
3
Likes
19
Embeds 0
No embeds

No notes for slide

Graphic Design For Developers

  1. 1. Frank La Vigne Applied Information Sciences Microsoft MVP: Tablet PC www.FranksWorld.com [email_address]
  2. 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. 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>
  5. 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.
  6. 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>
  7. 10. <ul><li>Yogi Berra </li></ul>Examples of good (and bad) design are all around us.
  8. 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>
  9. 12. <ul><li>But how? </li></ul>
  10. 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>
  11. 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>
  12. 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>
  13. 22. <ul><li>Yogi Berra </li></ul>What good is data if decision makers can’t understand its meaning?
  14. 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)
  15. 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>
  16. 26. <ul><li>Relevance and frequency are immediately obvious </li></ul>
  17. 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>
  18. 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>
  19. 30. <ul><li>Yogi Berra </li></ul>the predominance of the colors red & yellow in many restaurants is there only to make customers hungry
  20. 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
  21. 32. <ul><li>The Tools to Build a Better User Experience </li></ul>
  22. 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>
  23. 34. Frank La Vigne www.FranksWorld.com [email_address]

×