INTRODUCTION User Interface + Graphic Design User Interface

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

Recently Viewed Presentations

  • Human Genetics - Chapter 5

    Human Genetics - Chapter 5

    Heteroplasmy. Condition where the mtDNA sequence is not the same in all copies of the genome. Mitochondrion will have different alleles for the same gene. At each cell division, the mitochondria are distributed at random into daughter cells. If an...
  • Olympians for Reading: Carrying the Torch for Literacy

    Olympians for Reading: Carrying the Torch for Literacy

    Olympians for Reading: Carrying the Torch for Literacy ... Jim Strawn and Chuck Stump Jim has been the Director of Marketing and Community Education at Highland Hospital since 1995 He serves on 15 different non-profit Boards He hopes that the...
  • Strategický marketing

    Strategický marketing

    Strategický marketing Mgr. Jiří Boháček, Dr. Všechny otázky zkušebního testu jsou zodpovězeny v této prezentaci * Příklad koncern VW Konzern Leit Linien (KLL) Definice podnikové kultury zahrnující vztahy mezi zaměstnanci, vystupování, způsoby jednání, atd.
  • The Invisible Hand (or The Allocative Function of

    The Invisible Hand (or The Allocative Function of

    The Invisible Hand "Every individual... neither intends to promote the public interest, nor knows how much he is promoting it... he intends only his own security; by directing that industry in such a manner as its produce may be of...
  • Tissue inhomogeneities in Monte Carlo treatment planning for

    Tissue inhomogeneities in Monte Carlo treatment planning for

    The shift in the Bragg peak demonstrates the need for careful mass density assignment in MC dose calculations for proton beams. The dose calculation errors using the conventional single-energy CT tissue segmentation below 2% suggest that the use of DECT...
  • CMSC 611: Advanced Computer Architecture

    CMSC 611: Advanced Computer Architecture

    Present a taxonomy of ISA alternatives + some qualitative assessment of pros and cons. Present and analyze some instruction set measurements. Address the issue of languages and compilers and their bearing on instruction set architecture. Show some example ISA's
  • Remembering Csar Chvez: A Legacy for Peace, Justice,

    Remembering Csar Chvez: A Legacy for Peace, Justice,

    Dr. Kimber Quinney, Assistant Professor, History; Campus Coordinator, American Democracy Project . Laurie Schmelzer, Student Services Professional, College of Science and Mathematics. Lourdes Shahamiri, Catalog and Curriculum Coordinator, Academic Programs. Ariel Stevenson, Diversity Coordinator, Office of Diversity, Educational Equity and...
  • Genotype Error Detection using Hiddend Markov Models of ...

    Genotype Error Detection using Hiddend Markov Models of ...

    Haplotype frequencies are used to determine the likelihood of the best phasing for each trio-which is the maximum product of parent haplotype frequencies over all possible phasings of the trio. Due to Truncating the list of haplotypes, FAMHAP may produce...