graphics and interface design feng liu ph.d.. outline design principles – what designer need to...
TRANSCRIPT
![Page 1: Graphics and interface design Feng Liu Ph.D.. Outline Design Principles – What designer need to keep in mind Elements of design Where interface design](https://reader036.vdocuments.mx/reader036/viewer/2022081520/5697bf931a28abf838c8fcb4/html5/thumbnails/1.jpg)
Graphics and interface design
Feng Liu Ph.D.
![Page 2: Graphics and interface design Feng Liu Ph.D.. Outline Design Principles – What designer need to keep in mind Elements of design Where interface design](https://reader036.vdocuments.mx/reader036/viewer/2022081520/5697bf931a28abf838c8fcb4/html5/thumbnails/2.jpg)
Outline
• Design Principles – What designer need to keep in mind
• Elements of design• Where interface design stands in web design
cycle?
![Page 3: Graphics and interface design Feng Liu Ph.D.. Outline Design Principles – What designer need to keep in mind Elements of design Where interface design](https://reader036.vdocuments.mx/reader036/viewer/2022081520/5697bf931a28abf838c8fcb4/html5/thumbnails/3.jpg)
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
![Page 4: Graphics and interface design Feng Liu Ph.D.. Outline Design Principles – What designer need to keep in mind Elements of design Where interface design](https://reader036.vdocuments.mx/reader036/viewer/2022081520/5697bf931a28abf838c8fcb4/html5/thumbnails/4.jpg)
Element of design
• Point• Line• Pattern/texture• Color• Motion
![Page 5: Graphics and interface design Feng Liu Ph.D.. Outline Design Principles – What designer need to keep in mind Elements of design Where interface design](https://reader036.vdocuments.mx/reader036/viewer/2022081520/5697bf931a28abf838c8fcb4/html5/thumbnails/5.jpg)
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)
![Page 6: Graphics and interface design Feng Liu Ph.D.. Outline Design Principles – What designer need to keep in mind Elements of design Where interface design](https://reader036.vdocuments.mx/reader036/viewer/2022081520/5697bf931a28abf838c8fcb4/html5/thumbnails/6.jpg)
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
![Page 7: Graphics and interface design Feng Liu Ph.D.. Outline Design Principles – What designer need to keep in mind Elements of design Where interface design](https://reader036.vdocuments.mx/reader036/viewer/2022081520/5697bf931a28abf838c8fcb4/html5/thumbnails/7.jpg)
Why graphic design for Web design?
• Let’s see the process of a graphic design procedure
![Page 8: Graphics and interface design Feng Liu Ph.D.. Outline Design Principles – What designer need to keep in mind Elements of design Where interface design](https://reader036.vdocuments.mx/reader036/viewer/2022081520/5697bf931a28abf838c8fcb4/html5/thumbnails/8.jpg)
Website Design Process
Production
Design Refinement
Design Exploration
Discovery
… followed by implementation & maintenance
![Page 9: Graphics and interface design Feng Liu Ph.D.. Outline Design Principles – What designer need to keep in mind Elements of design Where interface design](https://reader036.vdocuments.mx/reader036/viewer/2022081520/5697bf931a28abf838c8fcb4/html5/thumbnails/9.jpg)
Web Design Process
![Page 10: Graphics and interface design Feng Liu Ph.D.. Outline Design Principles – What designer need to keep in mind Elements of design Where interface design](https://reader036.vdocuments.mx/reader036/viewer/2022081520/5697bf931a28abf838c8fcb4/html5/thumbnails/10.jpg)
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
![Page 11: Graphics and interface design Feng Liu Ph.D.. Outline Design Principles – What designer need to keep in mind Elements of design Where interface design](https://reader036.vdocuments.mx/reader036/viewer/2022081520/5697bf931a28abf838c8fcb4/html5/thumbnails/11.jpg)
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
![Page 12: Graphics and interface design Feng Liu Ph.D.. Outline Design Principles – What designer need to keep in mind Elements of design Where interface design](https://reader036.vdocuments.mx/reader036/viewer/2022081520/5697bf931a28abf838c8fcb4/html5/thumbnails/12.jpg)
Design Process: Design Refinement
Production
Design Refinement
Design Exploration
DiscoveryDevelop the design
* increasing level of detail* heavy emphasis on
graphic design* iterate on design
![Page 13: Graphics and interface design Feng Liu Ph.D.. Outline Design Principles – What designer need to keep in mind Elements of design Where interface design](https://reader036.vdocuments.mx/reader036/viewer/2022081520/5697bf931a28abf838c8fcb4/html5/thumbnails/13.jpg)
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
![Page 14: Graphics and interface design Feng Liu Ph.D.. Outline Design Principles – What designer need to keep in mind Elements of design Where interface design](https://reader036.vdocuments.mx/reader036/viewer/2022081520/5697bf931a28abf838c8fcb4/html5/thumbnails/14.jpg)
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
![Page 15: Graphics and interface design Feng Liu Ph.D.. Outline Design Principles – What designer need to keep in mind Elements of design Where interface design](https://reader036.vdocuments.mx/reader036/viewer/2022081520/5697bf931a28abf838c8fcb4/html5/thumbnails/15.jpg)
Storyboards• Interaction sequence, minimal page level detail
![Page 16: Graphics and interface design Feng Liu Ph.D.. Outline Design Principles – What designer need to keep in mind Elements of design Where interface design](https://reader036.vdocuments.mx/reader036/viewer/2022081520/5697bf931a28abf838c8fcb4/html5/thumbnails/16.jpg)
Mock-ups• High-fidelity, precise representation of page