INTRODUCTION User Interface + Graphic Design User Interface

INTRODUCTION User Interface + Graphic Design User Interface + Graphic Design Presented by Sonia Williamson User Interface Graphic Designer [email protected] 937.681.7961

OVERVIEW User Interface + Graphic Design Different aspects of the user experience and the importance of aesthetics Basic design guidelines Dos, donts, and current trends Brief Blend tutorial : the design view INTRODUCTION User Interface + Graphic Design

Utility Usability Likeability Considerations : Considerations :

Considerations : Functionality Microsoft Principles of Usability Users enjoyment Performance Appropriate features Developers arena

Discovery Learning Efficiency Jakob Nielsen Principles of Usability Learnability Efficiency Memorability Errors (low amount) Satisfaction

Developers + Designers Aesthetic appeal Willingness to return Minimization of frustrations Designers arena DRILLDOWN User Interface + Graphic Design Microsofts usability stages

Discovery Looking for and finding the feature you need. An effective discovery period would have minimal wrong choices/errors in feature location. Learning Process of figuring out how to use the feature. Length of process and number of errors are an indication

or success or failure at this stage. Efficiency Mastery of the process in terms of memorability and speed of execution Jakob Nielsens are basically these 3 broken down in different ways. PURPOSE User Interface + Graphic Design

Aesthetics in UI design create customer trust and product likeability which contribute to a satisfying user experience. Humans are more readily able to solve problems when they are able to think outside the box. Tense, anxious people lose the ability to creatively solve problems. Attractive items and appealing interfaces put users in a more relaxed state of mind, making it easier try different solutions. They are also more likely to overlook minor irritations than tense/anxious users. Emotional Design by Donald Norman

Your site can look this good too Call us at #1 WEB GURU!!!! 937-406-2009 WARD WINNING DESIGN! Free Consultation

ILLUSTRATION 1 User Interface + Graphic Design ILLUSTRATION 2 User Interface + Graphic Design ILLUSTRATION 3 User Interface + Graphic Design ILLUSTRATION 4

User Interface + Graphic Design ILLUSTRATION 5 User Interface + Graphic Design EYE TRACKING User Interface + Graphic Design The Login screen is NOT what the user is looking for or what they should notice first. Scoring as the number one thing the user looks at = this is an ineffective design for its intended purpose.

EYE TRACKING User Interface + Graphic Design Example of very little hierarchy: there is no emphasized element. RULE OF THIRDS User Interface + Graphic Design BALANCE User Interface + Graphic Design

If you are going to center anything vertically, cheat it up. COLOR THEORY User Interface + Graphic Design Color plays a large role in the style and feel of any design. DESIGN DOs User Interface + Graphic Design

DO Follow the golden rule of design : intent of design DO Use whitespace : objects need to breathe DO Be consistent DO Use the Gestalt principles DO Stick to sans serif fonts for UI design (typically) DO Create a clear hierarchy DO Use color theory to focus attention DO Create balance DO Remember to be aware of visual flow DO Use the Rule of Thirds (this is not design doctrine but it can be a helpful tool)

DESIGN DONTs User Interface + Graphic Design DONT Create clever but unclear navigation schemes DONT Overload the information DONT Use all-caps carelessly to create emphasis DONT Have near misses DONT Mix fonts DONT Create visual strain with competing colors & tints DONT Over-do the flashy items DONT Add elements just because

DONT Forget that the purpose of the design is paramount And dont be afraid to break the rules once you know how to use them! CURRENT TRENDS User Interface + Graphic Design 1 Embossing 2 Rich user interfaces 3 PNG transparency 4 Big typography 5 Font replacement (sIRF)

6 Modal boxes 7 Media blocks 8 The magazine look 9 Carousels 10 Vintage / retro styles 11 Handwritten notes 12 Grungy 13 PNG transparency 14 Splatter print 15 Watercolor

16 Collage 17 Wood pattern 18 Zigzag pattern 19 Sketches / handwritten fonts www.webdesignerwall.com www.smashingmagazine.com CURRENT TRENDS User Interface + Graphic Design OUT Shiny logos

OUT Unnecessary reflections below objects OUT Blinking images OUT Busy backgrounds behind text (MySpace!!!!!) OUT Flash homepages OUT Aqua style icons and buttons OUT Rounded corners www.hostway.com GOOD RESOURCES User Interface + Graphic Design

http://ui-patterns.com http://quince.infragistics.com http://windowsclient.net/learn/ http://www.msdn.microsoft.com http://www.smashingmagazine.com BLEND TUTORIAL User Interface + Graphic Design Add object Drop shadow effect

Gradient tool & gradient transform arrow Combining objects Masking objects & video Simple timeline