Griffin | Web Design
 
Resume Table of Contents  

Web Design
Design

5 Pager
 
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 2.2 Content Standard: Students design and develop a basic web site using HTML/XHTML.
    • WD 2.2.2 Plan a basic HTML/XHTML document considering subject, audience, layout, color, links, and graphics (LA11.7.1)(LA12.7.1)
    • WD 2.2.3 Utilize HTML/XHTML tags that display and format web content to create a basic web page in a text editor
    • WD 2.2.4 Utilize HTML/XHTML attribute tags

  • WD 2.3 Content Standard: Students utilize graphics and multimedia in a HTML/XHTML document.
    • WD 2.3.1 Insert and align graphics using the <img src=…>
    • WD 2.3.2 Resize a graphic image using the HEIGHT and WIDTH attributes
    • WD 2.3.3 Realign images that will affect the text layout of a document

  • WD 2.4 Content Standard: Students create links within a HTML/XHTML document.
    • WD 2.4.2 Link to other web sites utilizing the <a href=”http:…>, </a> tag
    • WD 2.4.3 Link to other HTML documents utilizing the <a href=”file:…>,</a>
    • WD 2.4.5 Link one web page to another page by clicking a graphic image utilizing a combination of the <a href=”file:…>…

  • WD 2.5 Content Standard: Students create and format a table in a HTML/XHTML document. (A1.9.1)(A1.9.6)
    • WD 2.5.1 Diagram and construct a table
    • WD 2.5.2 Write the code to insert a table in a document using <table>
    • WD 2.5.3 Construct a table using the <tr> and <td> tags to create table rows and columns in a document
    • WD 2.5.4 Utilize the ROWSPAN and COLSPAN attribute on a document
    • WD 2.5.5 Apply BORDER= attributes to a table (BORDERCOLOR=, BORDERSIZE=)
    • WD 2.5.6 Control the dimensions of a table by utilizing attributes (CELLPADDING=, CELLSPACING=, WIDTH=)
    • WD 2.5.7 Align text in a table utilizing the ALIGN= attribute

  • WD 2.8 Content Standard: Students demonstrate knowledge of content management.
    • WD 2.8.1 Test site/application after content is updated to ensure integrity
    • WD 2.8.4 Perform updates in a timely manner
    • WD 2.8.5 Update and review links
    • WD 2.8.6 Log all update activities

  • WD 3.1 Content Standard: Students demonstrate the principles of good design and graphics utilizing commercial based software. (H.9.1)
    • WD 3.1.2 Use free downloadable or existing clipart files and convert them to appropriate Web format and size
    • WD 3.1.4 Create transparent and animated GIFs
    • WD 3.1.5 Edit, crop, and resize existing clipart files(A1.3.1)
    • WD 3.1.7 Optimize and export graphics to improve web page loading time
    • WD 3.1.8 Utilize proper typography in relation to graphic creation

  • WD 4.1 Content Standard: Students demonstrate management and communication skills to maintain a web site.
    • WD 4.1.2 Maintain and modify an existing web site utilizing a plan

  • WD 5.1 Content Standard: Students recognize and apply proper legal issues and follow proper ethics.
    • WD 5.1.2 Apply proper copyright laws in all web-related projects
    • WD 5.1.5 Adhere to corporation computer use policy(s)

  • WD 6.1 Content Standard: Students use commercial Web design software (i.e., Macromedia Dreamweaver) to create attractive Web pages.
    • WD 6.1.1 Create web pages using commercial web design software using content standards 2.2 through 2.8

Chapter Objectives
 

Student will:

  1. Make it as quick and easy as possible for people to receive information.

  2. Apply:
    1. knowledge of HTML
    2. knowledge of Dreamweaver
    3. knowledge of Fireworks
    4. knowledge of design and
    5. knowledge of the Web Development Life Cycle to:

      1. Determine customer communication needs. (What do they want on the site?)
      2. Determine design needs. (What do they want it to look like?)
      3. Using design principles create a web site that fits those needs.
      4. Make adjustments according to the customer's needs.

Background
 

Based on your previous web design experience you have been hired to develop a web site for __________________________. From your experience in Web Design 1 you know it is best to follow the web design life cycle outlined here. Your site must include at least 4 pages and allow for the communication and design needs of your customer.

1. Step 1: Determine the customers communication needs
Duration: 1 Period
Print and fill out the attached form. thumb

CONTENT
RUBRIC -->

Example Memo 1: Example for another project. Your memo will be to me, from you, describing 3 - 5 web pages.
Example Memo 2: Specific to this example.
Example Memo 3: Specific to this example.

Paragraph 1: Intro
Paragraph 2: General Overview
Paragraph 3: Description of Purpose
Paragraph 4: Description of Audience
Paragraph 5: Description of Each Screen
Paragraph 6: Include 3 thumbnails. Circle and state you are using design from Australia Rail.

Record:

  1. Purpose of the web site (Why would someone want to use the site?)
  2. Audience of the web site (Who would want to use your web site?)
  3. Content Areas (What info do you want on the site?)

Example:

  1. Purpose: A marketing web site for Mr. Crull
  2. Audience: FHS parents and students interested in Mr. Crull or Marketing
  3. Content Areas: Bio on Mr. Crull, Marketing 1, Marketing 2, Sports, Recreation, and Entertainment Marketing
2. Step 2: Determine design needs
Duration: 1 Period
Print and fill out the attached form. thumb

DESIGN
RUBRIC -->


Create the Design Document Memo using the pdf rubric.

Design Sample 1: Crull Memo Example
Design Sample 2: Other Memo Example
Design Sample 3: Other Memo Example

Include a flowchart, hand drawn sample screens, and a design analysis for the project. This is a separate memo and signature from the proposal described above. Staple this grade sheet to ALL FIVE sections! All components listed must be completed before the proposal will be graded. Review and check each proposal element to ensure completeness. Neatness counts!

I - Memo: Create a memo requesting your sponsor to review and change the attached Flow Chart and Sample Screens.

II - Flowchart: Show how each screen should link using a flowchart. If your project is not a web site, outline tasks to complete project. See Page 127 of the Non-Designer's Web Book. This shows a great example of what it should look like.

FlowChart

III - Print Screen - Paste a small sample of a current professional site whose design you intend to use. (Your hand drawn screen should match the print screen.)

IV - Sample Screens: Draw each screen by hand. (Do not use a computer for this task.) If the same design continues on subsequent pages, you may draw smaller thumbnails. There should be at least two screens on one page. Partial Credit will be given for sloppy work.

V - Application of Design Principles: Use the attached Design Template to describe in detail how your page uses good design principles.

Do not say the page shows good contrast or alignment. Do not tell me that colors and shapes are repeated. Tell me what colors and what shapes are repeated.

Contrast

What draws your eye to the page?

 

Why is it different?

 

Note the contrasted text size and color.

 

What else is different on the page?

   
Repetition

How design is used to add visual interest.

 

What colors and shapes are repeated on the page or in the site?

   
Alignment

Include a few sentences on the visual connections from one element to the next. Talk about horizontal and vertical alignments.

 

Describe the text alignment as left, right, centered, or full.

 

What is the primary text alignment?

 

Are there mixed alignments?

 

Should there be mixed alignments?

 

Is there a lot of centered alignment?

   
Proximity

How design is used to organize the web page?

 

How many visual elements are on the page?

   
Eye Flow

Where does your eye initially focus?

 

Where does it go from there?

 

Is it drawn off the page at all?

AR

3. Step 3: Assemble Content
Duration: 1/2 Period

Locate the content and images for the web site. Do not forgot to cite sources.

Example:

  • Microsoft Clip art Online

  • Mr. Crull Bio: Crull
    • Born and raised outside of Peoria, IL
    • Graduated with a B.S. in Marketing and a minor in Finance from Southwest Baptist University, 1990
    • Worked in Information Technology for various companies from 1991-2002
    • Sales Associate at FORUM Solutions 2002-2005
    • Completed first year of two-year MBA program at Anderson University
    • During MBA program felt calling to become a teacher, withdrew from AU and enrolled in University of Indianapolis' MAT program.
    • Began teaching at Westfield HS in August of 2005
    • Graduated with a Master of Arts in Teaching from Univ. of Indianapolis May 2006
    • Came to Fishers HS in January 2008
    • Married to Rebecca, and two children, Brannon and Alex

  • 4520(BUS60S) * MARKETING 1 (10, 11, 12) Marketing is a one semester course, which will provide a basic introduction to the scope and importance of marketing in the global economy.  Focus topics for the class will include economics, human resources, and marketing and business foundations.  Emphasis will be placed on oral and written communications, mathematical applications, problem solving, and critical thinking skills as they relate to selling, promotion, pricing, purchasing, marketing information management, product/service planning, distribution, financing, and risk management. 

  • 4520 * MARKETING II (10, 11, 12) Marketing II offers students an opportunity to take a second semester of Marketing.  This course builds upon the foundations of Marketing I and allows students to further their study of marketing and apply the previously learned concepts.   Instructional strategies may include school-based enterprise, computer-technology applications, real and/or simulated occupational experiences, or projects in the marketing functions such as those available through the DECA program or co-curricular activities.  Requirement – Marketing I

  • 5984(BUSXXX) * SPORTS, RECREATION, AND ENTERTAINMENT MARKETING (11, 12)  This course provides students with the opportunity to apply the marketing principles, as learned in marketing foundations, in the fields of sports, recreation, and entertainment.  We will study professional sports teams, entertainment events, and theme parks, with emphasis placed upon how to market, sell, promote, and control such events.  The course contains significant hands-on learning through student-developed activities and projects such as developing plans to market school events.  The course will also address management issues as they relate to parks, professional sports, and events.  Students should plan to be available to attend several school events throughout the semester.  Requirement – Marketing I

4. Create the Site
Duration: 2 Periods
top

Make sure you use the design principles and include an appropriate level of content within your pages. (That means a lot!)

Steps to Create Your Site
1. Bullet2 Draw the table for page 1.
   

2. Bullet2 Insert the proper number of columns and rows.
    Table

3. Bullet2 Merge columns and rows to match design.
    2

4. Bullet2 Insert Image Placeholders so you know what sizes to make your images.
    3

5. Bullet2 Create "skinny lines" by:
 
  1. Click in the row
  2. Add a background color
  3. Enter '5' in the row height (remember to press enter. Your row will disappear if you do not enter the height first.)
  4. Show Code and Design View (Split)
  5. Delete the &nbsp;
  6. Click on Refresh.
    4

6. Bullet2 Add text.
  Bullet2 Make sure the text is Aligned/Top but not on the top edge. (Shift/Enter to Single Space.)
  Bullet2 Also split columns to add spacing between the text if needed.(Right-Mouse click/Table/Split Cell/Select Columns.)
   

7. Bullet2 Create properly sized images in Fireworks that match your Image Placeholders.
  Bullet2 Do not stretch image.
  Bullet2 Add text on image as needed, Usually in the lower left (but not on the edge.)
  Bullet2 Adding a subtle black glow drop shadow to text can add depth.
  Bullet2 Use Guidelines to match the horizontal and vertical alignment.
 

Bullet2

Save As a *.jpg. (File/Image Preview/Change Settings/Export)
    2

8. Bullet2 Insert the images into the Dreamweaver page.
  Bullet2 Adjust columns and rows to match the vertical alignment from the image text, Heading Text, and description text.
  Bullet2 Add any remaining text.
    4

9. Bullet2 (You may need to add columns or rows to get the horizontal or vertical alighment to match.)
  Bullet2 Frame in the bottom of the page with a final thin row making sure to have the same space below the text as you did above.
    9

8

10. Bullet2 Complete the home page. Check grading scale below and make sure everything is exactly the way you want it. Save the home page.
  Bullet2 Then Save File As to save it as the second page. Create Page 2 exactly the way you want it.
  Bullet2 Add All links on all pages.
  Bullet2 Create and insert the smaller banner image.
  Bullet2 Save the second page. Save File As to create the remaining pages.
  Bullet2 Check all links on all pages.

 

5. Review and Rework
Duration: 1 Period
 

Print Screen your inspired site and your finished first page into the document. I'll review and grade your project and possibly request changes.

Use the linked WOS Grading Word Document. thumb

WOS Grading Document -->
Grading:
1. San Serif Fonts Match  
2. Table Size Matches/Border = 0      
3. Text size small (except in photo or headings)    
4. Column widths are close to the
sample (300 x 3) 
 
5. Picture sizes match      
6. No centered text  
7. No PNG's  
8. No text on an edge  
9. HTML Titles (all pages) - No Untitled's  
10. horz & vert alignment  
11. All links work  
12. Page-2 linked / no movement       
13. Page-3, 4, 5 linked / no movement    
14. Portfolio Updated  
15. name, period, date, class (first page)  
Total  
 ___ 20 points

2013 Example Period 1 (5 Pager)

2013 Example Period 2 (5 Pager)

Example Period 3 (5 Pager)

6. Design Analysis
Duration: 1 Period
 

Analyze the web site (contrast, repetition, alignment, and proximity).