Competencies/Learning Objectives:
Upon completion of this course, you should be able to:
Topics
Competencies
Terminology
· Define and differentiate between interface design, information design, information architecture and interaction design · Define and differentiate between site map, wire frame, comps, interface prototype · Build a personal design lexicon
The design process
· Describe the design process for a web site · Define factors that are critical to a creating an effective design · Carry out a design exercise including exploration of design approaches, color palettes, typography choices, design of wire frames, and comps, compilation of design concept note, and development of the interface prototype
Color & Type
· Describe specific color schemes (complimentary, analogous, monochromatic) · Explore the relevance and use of color when designing the pages of a web site · Identify appropriate color palettes depending on the goals and target audience for a web site · Differentiate between the use of type for print and for electronic display · Describe different font families and identify properties of each · Define kerning, leading, spacing for fonts · Correlate kerning, leading, spacing with readability · Write CSS code for identifying font classes for a web site · Choose fonts that are appropriate to the message on a web site · Critically evaluate a web page layout in terms of font and color choices
Principles of design (Proximity, Alignment, Repetition, Contrast)
· List interface design heuristics · Define Proximity, Alignment, Repetition and Contrast · Use principles of Proximity, Alignment, Repetition, and Contrast when designing the layout of a web page · Apply principles of design to create different web page layouts for the same communication objectives
Navigation design
· Identify various design options for navigation on a web page · Explain how different navigation designs impact the user experience · Design different navigation options for a web site · Create a library of examples of conventional as well as non-conventional navigation designs
Form design
· Identify general design guidelines for forms (including submit and reset) · Create a library of examples of effective form design · Design a contact form · Carry out user evaluation of the form
Presentation of design concept
· Write a design concept note · Print and package the design concept note
Design critique
· Critique the design of a web site from the following perspectives
o User experience
o Color
o Type
o Layout
o Information design
o Navigation
Upon completion of this course, you should be able to:
· Define and differentiate between site map, wire frame, comps, interface prototype
· Build a personal design lexicon
· Define factors that are critical to a creating an effective design
· Carry out a design exercise including exploration of design approaches, color palettes, typography choices, design of wire frames, and comps, compilation of design concept note, and development of the interface prototype
· Explore the relevance and use of color when designing the pages of a web site
· Identify appropriate color palettes depending on the goals and target audience for a web site
· Differentiate between the use of type for print and for electronic display
· Describe different font families and identify properties of each
· Define kerning, leading, spacing for fonts
· Correlate kerning, leading, spacing with readability
· Write CSS code for identifying font classes for a web site
· Choose fonts that are appropriate to the message on a web site
· Critically evaluate a web page layout in terms of font and color choices
· Define Proximity, Alignment, Repetition and Contrast
· Use principles of Proximity, Alignment, Repetition, and Contrast when designing the layout of a web page
· Apply principles of design to create different web page layouts for the same communication objectives
· Explain how different navigation designs impact the user experience
· Design different navigation options for a web site
· Create a library of examples of conventional as well as non-conventional navigation designs
· Create a library of examples of effective form design
· Design a contact form
· Carry out user evaluation of the form
· Print and package the design concept note
o User experience
o Color
o Type
o Layout
o Information design
o Navigation