Frank La Vigne Applied Information Sciences Microsoft MVP: Tablet PC www.FranksWorld.com [email_address]
<ul><li>Microsoft MVP: Tablet PC </li></ul><ul><li>15 years of professional experience </li></ul><ul><li>Started career wr...
<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>Which site is likely to get repeat visitors? </li></ul><ul><li>Which site is more likely to generate revenue? </li...
<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>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><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>This chart conveys important information. </li></ul>But what?
Edward R. Tufte,   Visual Explanations: Images and Quantities, Evidence and Narrative  (1992)
 
<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>Some Simple Tips to Create Happy Users </li></ul>
 
 
 
 
 
 
<ul><li>The Tools to Build a Better User Experience </li></ul>
<ul><li>XML Based </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
×

From Developer to Devigner

6,112 views

Published on

An updated version of my slide deck on Graphic Design for Developers.

Published in: Technology, News & Politics
4 Comments
3 Likes
Statistics
Notes
No Downloads
Views
Total views
6,112
On SlideShare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
1
Comments
4
Likes
3
Embeds 0
No embeds

No notes for slide

From Developer to Devigner

  1. 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. <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.  
  12.  
  13.  
  14.  
  15. <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>
  16. <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>
  17. <ul><li>But how? </li></ul>
  18. <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
  19. <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>
  20. <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>
  21.  
  22.  
  23.  
  24.  
  25.  
  26.  
  27.  
  28.  
  29.  
  30.  
  31. <ul><li>This chart conveys important information. </li></ul>But what?
  32. Edward R. Tufte, Visual Explanations: Images and Quantities, Evidence and Narrative (1992)
  33.  
  34. <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>
  35. <ul><li>Relevance and frequency are immediately obvious </li></ul>
  36.  
  37. <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>
  38. <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>
  39. <ul><li>Yogi Berra </li></ul>the predominance of the colors red & yellow in many restaurants is there only to make customers hungry
  40. <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
  41. <ul><li>Some Simple Tips to Create Happy Users </li></ul>
  42.  
  43.  
  44.  
  45.  
  46.  
  47.  
  48. <ul><li>The Tools to Build a Better User Experience </li></ul>
  49. <ul><li>XML Based </li></ul>
  50. <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>
  51.  
  52. Frank La Vigne www.FranksWorld.com [email_address]

×