WDV 151 - Intro Web Design

Credits: 3
Lecture Hours: 2
Lab Hours: 2
Practicum Hours: 0
Work Experience: 0
Course Type: Voc/Tech

1. Formulate a web design proposal.
   1. List and describe the four stages of the design workflow; from discovery to implementation.
   2. Construct a client analysis and web design proposal.
   3. Prepare a flow chart demonstrating web site organization.
   4. Identify web page anatomy.
   5. List resources for images and inspiration.
2. Interpret principles of design as they relate to web site construction.
   1. Identify sites that contain the following design principles: Unity, Proximity, Repetition, Focal point, Continuance, Isolation, Contrast, and Proportion.
   2. Discuss the role of proximity in design.
   3. Demonstrate the use of positive/negative space in a design.
   4. Examine current web design trends.
3. Design a website that utilizes the principles of composition.
   1. List and identify web page anatomy.
   2. Identify and list basic navigation structures.
   3. Explain Grid Theory and the Rule of Thirds
   4. Construct static web page wireframe layouts that use a grid system and Rule of Thirds.
   5. Identify sites that are symmetrical and asymmetrical in layout.
   6. Construct static web page wireframe layouts that are symmetrically and asymmetrically balanced.
4. Produce a web page prototype design using color theory and principles.
   1. Identify primary, secondary, and tertiary colors in a color wheel.
   2. Differentiate between Hue, Saturation and Value .
   3. Define the specification of Hex Decimal color.
   4. Identify various color schemes.
   5. Compare various color schemes that are applied to websites.
   6. Examine resources for color palettes and color groupings.
   7. Use online resources to develop various color palettes based upon color schemes.
   8. Describe color associations and how color is used in marketing.
5. Produce a web page prototype design using texture and pattern.
   1. Differentiate between the terms “texture” and “pattern”
   2. Identify sites that use texture and pattern in design.
   3. Discuss the components of pattern including line, shape, and repetition.
   4. Apply textures and patterns to a static web page design.
   5. Construct a custom texture and apply to a web page design.
   6. Create seamless graphics and apply as repeating backgrounds.
6. Produce a web page design that displays volume and depth.
   1. Define the terms “volume”, “depth”, “proportion”, and “perspective”.
   2. Describe how simulating light and shadow produces a 3-dimensional visual effect.
   3. Identify sites that use texture and pattern in design.
7. Produce a web page prototype design that displays good use of typography.
   1. Identify the basic type categories and their uses.
   2. Identify the parts of letterform anatomy.
   3. Identify sites that use type as the main design component.
   4. Create a basic typographic logo.
   5. Apply typographic concepts to via html/css code to improve the readability of text in a web page.
   6. Apply custom fonts via html/css to a website.
   7. Create a web page design that uses type as the main design component.
8. Compare and Contrast the use of images in web design.
   1. Identify three main criteria for choosing images.
   2. List sources for obtaining images to be used in web pages.
   3. Examine web sites that use imagery in a unique manner or as a strong communication tool.
   4. Differentiate between public domain, royalty-free, and copyright protected images.
   5. Discuss the construction of digital images in regards to pixel, pixel dimension, and file formats.
   6. Crop and optimize digital images for web use.
9. Use design related terms to communicate design ideas.
   1. Generalize the design principles of a particular web site design
   2. Review layout, grid, and balance of a web page design.
   3. Assess a web site color palette in terms of the color scheme used and the psychological associations with that color palette.
   4. Explain how a web site uses texture, pattern, volume, and/or depth to enhance the site design.
   5. Give examples of how a web site uses type either as the main design element or how concepts are applied to improve readability.
   6. Summarize how a web site uses imagery to enhance communication.
10. Construct a web site prototype design.
    1. Construct a prototype for a site to be viewed on a desktop computer/monitor.
    2. Construct a prototype for a site to be viewed on a mobile device, paying attention to differences in size relationships of images and text.

 
Competencies Revised Date: 2019