Graphics and interface design Feng Liu Ph.D.. Outline Design Principles – What designer need to...

Graphics and interface design

Feng Liu Ph.D.

Outline

• Design Principles – What designer need to keep in mind

• Elements of design• Where interface design stands in web design

cycle?

Design Principles

• What designer need to keep in mind– Balance

• Symmetry a mirror image • Asymmetry without symmetry

– Composition• Proportion: the relative size and scale of the various elements in a

design• Domination: emphasis of the design• Rhythm: repetition is the expression of visual harmony within

a design• 2D / 2D

– Creativity – Online resource need to read:

http://desktoppub.about.com/od/designbasicsindex/Graphic_Design_Basics.htm

Element of design

• Point• Line• Pattern/texture• Color• Motion

Composition

• Space – organize / group-relationship/ typographic

• Alignment – create • Contrast – create an interest / organize• Repetitiononline resource: http://www.youtube.com/watch?v=-eUhJ_jTrMQ

_(visual_arts)

Other resources

Other resource of design principle and composition rules to readhttp://en.wikipedia.org/wiki/

Design_elements_and_principleshttp://en.wikipedia.org/wiki/Composition

Why graphic design for Web design?

• Let’s see the process of a graphic design procedure

Website Design Process

Production

Design Refinement

Design Exploration

Discovery

… followed by implementation & maintenance

Web Design Process

Design Process: Discovery

Assess needs* understand client’s

expectations* determine scope of

project* characteristics of

users* evaluate existing site

and/or competition

Production

Design Refinement

Design Exploration

Discovery

Design Process: Design Exploration

Production

Design Refinement

Design Exploration

DiscoveryGenerate multiple designs

* visualize solutions to discovered issues

* information & navigation design

* early graphic design* select one design for

development

Design Process: Design Refinement

Production

Design Refinement

Design Exploration

DiscoveryDevelop the design

* increasing level of detail* heavy emphasis on

graphic design* iterate on design

Prepare design for handoff

* create final deliverable* specifications, guidelines,

and prototypes* as much detail as

possible

Design Process: Production

Production

Design Refinement

Design Exploration

Discovery

Artifacts of Design Practice

• Designers create representations of sites at multiple levels of detail

• Web sites are iteratively refined at all levels of detail

Site Maps Storyboards Schematics Mock-ups

Storyboards• Interaction sequence, minimal page level detail

Mock-ups• High-fidelity, precise representation of page