1 / 22

User Interface + Graphic Design

INTRODUCTION. User Interface + Graphic Design. User Interface + Graphic Design. Presented by Sonia Williamson User Interface Graphic Designer sonia.williamson@rightnow.com 937.681.7961. OVERVIEW. User Interface + Graphic Design.

mari
Download Presentation

User Interface + Graphic Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. INTRODUCTION User Interface + Graphic Design User Interface + Graphic Design Presented bySonia WilliamsonUser Interface Graphic Designersonia.williamson@rightnow.com 937.681.7961

  2. OVERVIEW User Interface + Graphic Design Different aspects of the user experience and the importance of aesthetics Basic design guidelines Dos, don’ts, and current trends Brief Blend tutorial : the design view

  3. INTRODUCTION User Interface + Graphic Design

  4. DRILLDOWN User Interface + Graphic Design Microsoft’s usability stages DiscoveryLooking for and finding the feature you need. An effective discovery period would have minimal wrong choices/errors in feature location. LearningProcess 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. EfficiencyMastery of the process in terms of memorabilityand speed of execution Jakob Nielsen’s are basically these 3 broken down in different ways. D

  5. 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

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

  7. ILLUSTRATION 1 User Interface + Graphic Design

  8. ILLUSTRATION 2 User Interface + Graphic Design

  9. ILLUSTRATION 3 User Interface + Graphic Design

  10. ILLUSTRATION 4 User Interface + Graphic Design

  11. ILLUSTRATION 5 User Interface + Graphic Design

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

  13. EYE TRACKING User Interface + Graphic Design Example of very little hierarchy: there is no emphasized element.

  14. RULE OF THIRDS User Interface + Graphic Design

  15. BALANCE User Interface + Graphic Design If you are going to center anything vertically, cheat it up.

  16. COLOR THEORY User Interface + Graphic Design Color plays a large role in the style and feel of any design.

  17. 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)

  18. 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” DONTForget that the purpose of the design is paramount And don’t be afraid to break the rules once you know how to use them!

  19. 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

  20. 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

  21. 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

  22. BLEND TUTORIAL User Interface + Graphic Design Add object Drop shadow effect Gradient tool & gradient transform arrow Combining objects Masking objects & video Simple timeline

More Related