California Career and Technical Education Standards

• IT.B.B4.1 Use a logical and structured approach to isolate and identify problem sources an...
• IT.B.B5.1 Understand the purpose, scope, and development of a Web site.
• IT.FS.4.4 Understand effective technologies used in Web site development and Internet usage.

California Academic Content Standards (Reinforced)

• ELA.9-10.R.CAGT.2.6 Demonstrate use of sophisticated learning tools by following technical direction...2

• Hook - Hooks / Set

  Note:  This lesson comes after the Introducing Storyboards for Web Site Development, and the “About Me” content gathering lesson and activity.  All students should have their “About Me” content in the outline format readily available.  Students should also have their Site Storyboard/diagram as well.

  Verify with the students that they have their “About Me” outline and content.

  Hook:

  After the students have settled, start off the lesson with the "Googy Directions".  The last question in this short video asks Goofy if he can think of anyplace else where he can find directions.

  Using the TAPPLE method for checking for understanding, ask the students if they can relate what Webdesign processes have been covered in this class that would be considered directions for the design of a web site.

  The answers you are looking for are:  Create an Outline and create a Storyboard.

  The TAPPLE method:

  • T each First
  • A sk a Question
  • P ause
  • P ick a Non-Voluteer (at Random)
  • L isten to the Response
  • Provide Effective Feedback

  (See this website for more information on TAPPLE ( http://www.myboe.org/portal/default/Content/Viewer/Content?action=2&sciId=825 ).

  --Continue to the Lecture

  • Goofy Directions [ Watch Video ] [ Download Original Video ]
• Lecture - Lecture

  *Please use the provided PowerPoint to go along with the lecture.   Handout the provided wireframe handout or use the link provided to find your own wireframe handout.

  Storyboarding and wireframing your site before you start to code is another step in the website design process.  Both the storyboard and the wireframe pages are simple steps to help you plan your site, and then it becomes the blueprint from which you will follow.

  Consider all of the 3D animations in any of today’s movies.  All of these computer generated graphics, started out on paper, then made their way to a wireframe model, and after that to the screen as the final product. 

  A wireframe is your blueprint for layout, text and image placement, navigation components, color scheme, and other webpage components.  Instead of just jumping to a full-blown web design, take the time to create a wireframe to plan the sites layout. With a wireframe you and the client can point at things and have a mutual understanding of what is to be done.  Follow these steps to be able to create a wireframe. 

  Keep it simple at the start.  Follow a basic layout, such as left link or right link with a header and the content in the middle.  Please refer to the layout handout for examples (handout layout examples to students).

  Identify all of the links, if you are using color pencils or pens, pick a link color and stick to it.  Identify your graphic image placeholders and note the sizes near them.  Identify your content and content type.  Remember that you are not putting content here, but content identification.

  Remember this will be a layout of where the webpage components will be placed.  It is not a design pre-view.  It will be generic or even ugly, but that is OK.  Sketch out the layout to the best of your ability.  The import thing is that this will be the blueprint for your webpage, and website.

  For this activity we will be using a Paper Browser that was developed by Rain Creative Lab Design, Inc.  This tool is a design canvas that is 1024x768px within the website area. The website area is made up of grids that are 32x32px in dimension. With this you will be able to translate your component sizes in pixels.

  • Wireframe Lecture PowerPoint [ Download ]
  • Free Printable Wireframing Templates [ Go to Site ]
  • Layout Examples Handout [ Download ] Available for use with permission from author.
• Checking for Understanding - Check Understanding

  Using TAPPLE, check for understanding using key points from the lecture to gauge class understanding.  Reteach if you determine that the students do not grasp the context.

  The key concepts for the lecture are:

  • A wireframe is your blueprint for the layout of a web site.
  • Keep it simple at the start.  Follow a basic layout.
  • Identify all link, graphics, media, and content placement.
  • This is a layout, and not a design preview.  It's OK if it is ugly.

   
• Demonstration - Demo / Modeling

  Start off the Demo with the below "Wireframe Demo Movie".

  Using the provided "Blank Wireframe Handout" document and a document camera, sketch out a quick two column with header layout on the handout.

  Note:  If you do not have access to a document camera, you can make a transparent copy of the document and use an overhead projector.  Or, if you have access to a writing tablet (wacom or other type), you can use the tablet tools to write over the handout.  Use what is available to you.  You can also sketch out the paper on a whiteboard and then use that a the demo.

  Explain again about the handout:

  For this activity we will be using a Paper Browser that was developed by Rain Creative Lab Design, Inc.  This tool is a design canvas that is 1024x768px within the website area. The website area is made up of grids that are 32x32px in dimension. With this you will be able to translate your component sizes in pixels.

  • Wireframe Demo Movie [ Watch Video ] [ Download Original Video ]
  • Simple Wireframe Example Powerpoint [ Download ]
  • Simple Wireframe Example Image (JPG) [ View Image ] [ Download Original ]
  • Blank Wireframe Handout [ Download ]
• Checking For Understanding - Check Understanding

  Using TAPPLE, check for understanding using key points from the lecture to gauge class understanding.  Reteach if you determine that the students do not grasp the context.

  Use the key concepts from the lecture and question them about grid lines and pixels on the paper browser.
• Guided Practice - Guided Practice

  Gude the students in a practice sketch of a web page.

  • Pass out the handout to the students.
  • Pass out the sketching materials to the students.
  • Go over step by step the sketching of the example you just did for them.
  • Explain that making notes are important, so have them make notes about what the links would be or what type of content will be placed on this page.
  • Explain about the fact that this is a sketch and not a design preview.
• Quick Independent Practice to Check for Understanding - Check Understanding

  Do this quickly, spend only about five minutes on this.  Use a timer.

  Have the students quickly sketch out the simple 2 column layout that you demoed for them.  Change it up a bit to have them put down their name in the header area, and add real link names based upon the page names for a standard five page website.

  • Home
  • About
  • Contact Us
  • Product or Gallery
  • News or Blog

  Move around the classroom and observe the students, assist those that may be having problems with the concept.

  • Blank Wireframe Handout [ Download ]
• Closure Lecture Day - Closure

  Briefly go over the key concepts for Wireframing:

  • A wireframe is your blueprint for the layout of a web site.
  • Keep it simple at the start.  Follow a basic layout.
  • Identify all link, graphics, media, and content placement.
  • This is a layout, and not a design preview.  It's OK if it is ugly.

  Explain that they will be starting the wireframing project tomorrow, and that they will need their "About Me" outline and storyboard.
• "About Me" Wireframing Project Day 1 - Projects

  Spend about five minutes at the beginning of class on this.

  Go over the key concepts for Wireframing:

  • A wireframe is your blueprint for the layout of a web site.
  • Keep it simple at the start.  Follow a basic layout.
  • Identify all link, graphics, media, and content placement.
  • This is a layout, and not a design preview.  It's OK if it is ugly.

  Explain again about the handout:

  For this activity we will be using a Paper Browser that was developed by Rain Creative Lab Design, Inc.  This tool is a design canvas that is 1024x768px within the website area. The website area is made up of grids that are 32x32px in dimension. With this you will be able to translate your component sizes in pixels.

  Ensure that all of the students have their "About Me" outlines and storyboard, and they all have the layout handout, as they will use these to help sketch out the wireframes for their individual web site pages.

  Have them start with the "Home" page and then work on each of the other pages as identified on the "About Me outline and storyboard.

  They should be free to choose a layout design, but remind them that they will have to copy the layout into HTML and CSS later
• Check for Understanding - Check Understanding

  Using TAPPLE, check for understanding using key points from the lecture to gauge class understanding.  Reteach if you determine that the students do not grasp the context.

  Use the key concepts from the lecture and question them about grid lines and pixels on the paper browser.  Ask the students questions about the guided practice they did the on day one.

  This is quick and should only take 2 - 3 minutes.
• Closure Day 1 - Closure

  Collect all of the material and brief the students on what they accomplished on this project.
• Overview of Project -- Day 2 - Lecture

  Spend about five minutes at the beginning of class on this.

  Go over the key concepts for Wireframing:

  • A wireframe is your blueprint for the layout of a web site.
  • Keep it simple at the start.  Follow a basic layout.
  • Identify all link, graphics, media, and content placement.
  • This is a layout, and not a design preview.  It's OK if it is ugly.

  Explain again about the handout:

  For this activity we will be using a Paper Browser that was developed by Rain Creative Lab Design, Inc.  This tool is a design canvas that is 1024x768px within the website area. The website area is made up of grids that are 32x32px in dimension. With this you will be able to translate your component sizes in pixels.

  Ensure that all of the students have their "About Me" outlines and storyboard, and they all have the layout handout, as they will use these to help sketch out the wireframes for their individual web site pages.

  Have the students continue with their wireframe sketches and notations.

  • Blank Wireframe Handout [ Download ]
• Checking for Understanding - Check Understanding

  Using TAPPLE, check for understanding using key points from the lecture to gauge class understanding.  Reteach if you determine that the students do not grasp the context.

  Use the key concepts from the lecture and question them about grid lines and pixels on the paper browser.  Ask the students questions about the guided practice they did the on day one.

  This is quick and should only take 2 - 3 minutes.
• Closure Day 2 - Closure

  Collect all of the material and brief the students on what they accomplished on this project.
• Overview of Project -- Day 3 - Lecture

  Spend about five minutes at the beginning of class on this.

  Go over the key concepts for Wireframing:

  • A wireframe is your blueprint for the layout of a web site.
  • Keep it simple at the start.  Follow a basic layout.
  • Identify all link, graphics, media, and content placement.
  • This is a layout, and not a design preview.  It's OK if it is ugly.

  Explain again about the handout:

  For this activity we will be using a Paper Browser that was developed by Rain Creative Lab Design, Inc.  This tool is a design canvas that is 1024x768px within the website area. The website area is made up of grids that are 32x32px in dimension. With this you will be able to translate your component sizes in pixels.

  Ensure that all of the students have their "About Me" outlines and storyboard, and they all have the layout handout, as they will use these to help sketch out the wireframes for their individual web site pages.

  Have the students continue with their wireframe sketches and notations.

  The students will also place their wireframes on a presentation board before they turn in the project for evaluation.

   

  • Blank Wireframe Handout [ Download ]
• Checking for Understanding - Check Understanding

  Using TAPPLE, check for understanding using key points from the lecture to gauge class understanding.  Reteach if you determine that the students do not grasp the context.

  Use the key concepts from the lecture and question them about grid lines and pixels on the paper browser.  Ask the students questions about the guided practice they did the on day one.

  This is quick and should only take 2 - 3 minutes.
• Closure Day 3 - Closure

  Collect all of the material and brief the students on what they accomplished on this project.

  Collect all of the wireframe projects.

• Blank Wireframe Handout [ Download ] This is a blank wireframe document for use with wireframing student pages
• Wireframe Lesson Materials list [ Download ] Wireframe Lesson Materials list for this lesson
• About Me Five Page Outline Example [ Download ]
• More information on TAPPLE [ Go to Site ]
• Free Printable Wireframing Templates [ Go to Site ]
• Wireframe Lecture PowerPoint [ Download ]
• Simple Wireframe Example Powerpoint [ Download ]
• Simple Wireframe Example Image (JPG) [ View Image ] [ Download Original ]
• Layout Examples Handout [ Download ]
• Goofy Directions [ Watch Video ] [ Download Original Video ]
• Wireframe Demo Movie [ Watch Video ] [ Download Original Video ]