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: _Basics.htm

Element of design Point Line Pattern/texture Color Motion

Composition Space – organize / group-relationship/ typographic Alignment – create Contrast – create an interest / organize Repetition online resource: _(visual_arts)

Other resources Other resource of design principle and composition rules to read _principles

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 Discovery Generate 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 Discovery Develop 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 StoryboardsSchematicsMock-ups

Storyboards Interaction sequence, minimal page level detail

Mock-ups High-fidelity, precise representation of page