Griffin | Web Design
 
Resume Table of Contents  

Web Design
Design

 
Intro. C. R. A. P. Review. Analysis.
State Standards
 
  • WD 2.1 Content Standard: Students plan a web site.
  • WD 2.1.2 Explain and demonstrate the principles of good web page design
    (LA11.5.8)(12.5.8)
  • WD 2.1.3 Determine the purpose and target audience of the web site (A1.9.6)
  • WD 2.1.4 Evaluate web page design and layout with attention to the effective use of space, balance, symmetry, and color (A1.9.6)
  • WD 3.1 Content Standard: Students demonstrate the principles of good design and graphics utilizing commercial based software. (e.g. Adobe Photoshop, Microsoft Paint, Macromedia Fireworks, Macromedia Flash) (H.9.1)
Chapter Objectives
 

Student will:

  • Describe each of the four design principles.
  • Analyze the design of web sites.
  • Use design to create a document to make it quick and easy for people to absorb information.
1. The Joshua Tree
Duration: 1 Period
 
  1. Read the Joshua Tree Intro.
  2. Redesign the linked flyer in MS Word. Type your name and period in the lower left header.
  3. Add a Design Section to your portfolio and add the flyer. (Newest items are listed first so it should go at the top.)
  4. Transfer the portfolio and flyer to the student web server.
Grading:
1. Redesigned Flyer (Linked/Txfered)

 ___ 5 points

Total  
 ___ 5 points
2. Contrast
Duration: 1 Period
top

Read Chapter 5 of the NDDB. Open the linked document and type the listed questions and answers. (Open and 'save'. Then open in Word and type your document.) Print and hand into the instructor.

  • Go big or go home
  • Avoid similar items

  • Note what draws your eye to the page
  • Note the largest text size and what colors stand out
Contrast Handout
3. Repetition
Duration: 1 Period
top

Read Chapter 4 of the NDDB. Open the linked document and type the listed questions and answers. Print and hand into the instructor.

  • Can be over multiple pages
  • Push existing consistencies further
  • Avoid too many repeated items

  • Note the repeated colors and shapes.

Repetition Handout

4. Alignment
Duration: 1 Period
top

Read Chapter 3 of the NDDB. Open the linked document and type the listed questions and answers. Print and hand into the instructor.

  • State the primary alignment then note exceptions
  • Note alignment of 3rd party adds
  • Avoid all centered text or multiple alignments

  • Note the text alighment - Left, right, center, or justified/full TEXT
  • Note text exceptions
  • Note how are the design elements horizontally and vertically connected?

Alignment Handout

5. Proximity
Duration: 1 Period
top

Read Chapter 2 of the NDDB. Open the linked document and type the listed questions and answers. Print and hand into the instructor.

5b Note: Use design terminology when describing how the web site groups information. It is not because you love a McRib or because your eye is drawn to the page. You have just read 16 excellent pages describing how elements are grouped using proximity. Your writing should reflect that reading.

  • Squint, count, and circle the visual elements
  • How are they separated? (white space, boxes around links, shapes, background colors, dividing lines, indention's, bold text)
  • Avoid too many elements

  • Note the number of sections
  • Note how they are seperated
  • Note eye flow. Where does your eye start? Where does it go after that?

Proximity Handout

6. Putting It All Together
Duration: 1 Period
top

Redesign the attached FFA Flyer or the Building Literacy Flyer using the newly learned design principles. Save as FFA-Flyer.docx or Literacy-Flyer.docx. Include your name in the lower left footer and hand into the instructor.

FFA Small Literacy Small

Grading FFA Flyer:
1. Contrast:  
 

 

• Eye drawn to page
• Visible difference between elements
 
2. Repetition  
    • visual elements repeated  
3. Alignment  
    • centered text avoided
• visual connections made on page
 
4. Proximity  
   

• 3 - 5 visual elements on page
• good eye flow

 
5. Other  
   

pertinent info
avoid text on an edge

 
Total ___ 10 points

7. Design Analysis
Duration: 1 Period
top

Locate and analyze a web site that embodies good design (contrast, repetition, alignment, and proximity). Be prepared to present your analysis to the class in a 3 - 4 minute presentation.

design_analysis Use the information and format document.

Example of a great analysis!

8. Design Quiz
Duration: 1 Period

Take the quiz! Version 1 (Use the same language Robin and I use. Check the web site. Check the text.)

Take the quiz! Version 2 (Use the same language Robin and I use. Check the web site. Check the text.)

top