graphics and interface design feng liu ph.d.. outline design principles – what designer need to...
TRANSCRIPT
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