INTRODUCTION
This presentation is the property of its rightful owner.
Sponsored Links
1 / 22

User Interface + Graphic Design PowerPoint PPT Presentation


  • 82 Views
  • Uploaded on
  • Presentation posted in: General

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.

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


User interface graphic design

INTRODUCTION

User Interface + Graphic Design

User Interface + Graphic Design

Presented bySonia WilliamsonUser Interface Graphic [email protected]

937.681.7961


User interface graphic design

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


User interface graphic design

INTRODUCTION

User Interface + Graphic Design


User interface graphic design

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


User interface graphic design

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


User interface graphic design

Your site can look this good

too

Call us at

937-406-2009

#1 WEB

GURU!!!!

AWARD WINNING DESIGN!

Free Consultation


User interface graphic design

ILLUSTRATION 1

User Interface + Graphic Design


User interface graphic design

ILLUSTRATION 2

User Interface + Graphic Design


User interface graphic design

ILLUSTRATION 3

User Interface + Graphic Design


User interface graphic design

ILLUSTRATION 4

User Interface + Graphic Design


User interface graphic design

ILLUSTRATION 5

User Interface + Graphic Design


User interface graphic design

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.


User interface graphic design

EYE TRACKING

User Interface + Graphic Design

Example of very little hierarchy: there is no emphasized element.


User interface graphic design

RULE OF THIRDS

User Interface + Graphic Design


User interface graphic design

BALANCE

User Interface + Graphic Design

If you are going to center anything vertically, cheat it up.


User interface graphic design

COLOR THEORY

User Interface + Graphic Design

Color plays a large role in the style and feel of any design.


User interface graphic 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)


User interface graphic design

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!


User interface graphic design

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


User interface graphic design

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


User interface graphic design

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


User interface graphic design

BLEND TUTORIAL

User Interface + Graphic Design

Add object

Drop shadow effect

Gradient tool & gradient transform arrow

Combining objects

Masking objects & video

Simple timeline


  • Login