1. Graphics and interface design Feng Liu Ph.D.

2. Outline Design Principles – What designer need to keep in mind Elements of design Where interface design stands in web design cycle?

3. 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

4. Element of design Point Line Pattern/texture Color Motion

5. Composition Space – organize / group-relationship/ typographic Alignment – create Contrast – create an interest / organize Repetition online resource: http://www.youtube.com/watch?v=-eUhJ_jTrMQ _(visual_arts)

6. Other resources Other resource of design principle and composition rules to read http://en.wikipedia.org/wiki/Design_elements_and _principles http://en.wikipedia.org/wiki/Composition

7. Why graphic design for Web design? Let’s see the process of a graphic design procedure

8. Website Design Process Production Design Refinement Design Exploration Discovery … followed by implementation & maintenance

9. Web Design Process

10. 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

11. 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

12. 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

13. 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

14. 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

15. Storyboards Interaction sequence, minimal page level detail

16. Mock-ups High-fidelity, precise representation of page