• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Graphic Design For Developers Richmond Code Camp
 

Graphic Design For Developers Richmond Code Camp

on

  • 3,051 views

 

Statistics

Views

Total Views
3,051
Views on SlideShare
3,014
Embed Views
37

Actions

Likes
5
Downloads
1
Comments
0

4 Embeds 37

http://franksworld.com 27
http://www.franksworld.com 5
http://www.e-presentations.us 4
http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Graphic Design For Developers Richmond Code Camp Graphic Design For Developers Richmond Code Camp Presentation Transcript

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