User Interface + Graphic Design INTRODUCTION Presented by Sonia Williamson User Interface Graphic Designer [email protected] 937.681.7961 User Interface + Graphic Design
User Interface + Graphic Design INTRODUCTION Presented by Sonia Williamson User Interface Graphic Designer [email protected] 937.681.7961 User.
Dec 22, 2015
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
User Interface + Graphic Design
INTRODUCTION
Presented by
Sonia Williamson User Interface Graphic [email protected] 937.681.7961
User Interface + Graphic Design
User Interface + Graphic Design
OVERVIEW
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
User Interface + Graphic Design
INTRODUCTION
Utility Usability Likeability
Considerations :
Functionality
Performance
Appropriate features
Developers’ arena
Considerations :
Microsoft Principles of UsabilityDiscoveryLearningEfficiencyJakob Nielsen Principles of UsabilityLearnabilityEfficiencyMemorabilityErrors (low amount)Satisfaction
Developers + Designers
Considerations :
User’s enjoyment
Aesthetic appeal
Willingness to return
Minimization of frustrations
Designers’ arena
User Interface + Graphic Design
DRILLDOWN
Microsoft’s 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 Nielsen’s are basically these 3 broken down in different ways.
D
User Interface + Graphic Design
PURPOSE
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
AWARD WINNING DESIGN!
#1 WEBGURU!!!!
Free Consultation
Your site can look this good
too
Call us at 937-406-2009
User Interface + Graphic Design
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
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.
User Interface + Graphic Design
EYE TRACKING
Example of very little hierarchy: there is no emphasized element.
User Interface + Graphic Design
RULE OF THIRDS
User Interface + Graphic Design
BALANCE
If you are going to center anything vertically, cheat it up.
User Interface + Graphic Design
COLOR THEORY
Color plays a large role in the style and feel of any design.
User Interface + Graphic Design
DESIGN DOs
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)
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 don’t be afraid to break the rules once you know how to use them!
DESIGN DONTs
User Interface + Graphic Design
CURRENT TRENDS
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 Carousels10 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.comwww.smashingmagazine.com
User Interface + Graphic Design
CURRENT TRENDS
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
User Interface + Graphic Design
GOOD RESOURCES
http://ui-patterns.com
http://quince.infragistics.com
http://windowsclient.net/learn/
http://www.msdn.microsoft.com
http://www.smashingmagazine.com
User Interface + Graphic Design
BLEND TUTORIAL
Add object
Drop shadow effect
Gradient tool & gradient transform arrow
Combining objects
Masking objects & video
Simple timeline
Related Documents
