What is a WireFrame?

Lesson Content

• Lesson Plan Template:

  CTE Lesson Plan

• CTE Course Info and Benchmark Notes

  
  

  Course Title: Foundations of Web

  Course Number: 9001110

  Career Cluster: Information Technology

  CIP Number: 0511080100

  Course Type: Career Preparatory

  Standard(s) or benchmarks:

  18.01 Create basic webpage structures using common markup elements and attributes

  SC.912.CS-CS.3.1 Describe digital tools or resources to use for a real-world task based on their efficiency and effectiveness.

• Unit Outline

  
  

  This lesson may fall within a unit on creating a webpage. This lesson can be used first to introduce wireframes before students create an actual webpage.

• Career Connection

  
  

  This lesson requires students to use research skills as well as encourages creativity in creating quality wireframes. Wireframes are an essential prerequisite skill to creating webpages because it is used as a blueprint for the creation of a webpage.

• Learning Objectives

  
  

  Students will be able to:

  • Outline the purposes for creating a wireframe.
  • Understanding the various tools and/or methods in creating a wireframe.
  • Research a variety of wireframes in preparation for creating their own wireframe.

• Prior Knowledge

  
  

  Students should be familiar with/able to:

  • Basic computing skills.

• Guiding Questions

  
  
  • How does your wireframe reflect a website?
  • What is missing from your wireframe?
  • What could you add to your wireframe so it can be more descriptive?

• Procedure

  
  
  1. To introduce the lesson,
     • The teacher will explain what a wireframe is and the purpose of it.
       • Is a Wireframe an outline/draft of your website before created?
       • Can your wireframe be created digitally? If so, what software/programs can you use to create this?
       • Is a wireframe necessary?
  2. Students will refer to Wireframe Research Handout attachment. Students will then research and document/take notes of different wireframes and their use, utilizing 3 or more websites they frequently visit.
  3. Following, students will create a wireframe using any creative format of their choice. Available options of choice can be hand drawn, a program such as Microsoft Word, PowerPoint, Canva, Illustrator, and so forth.
     
     • What findings have you found about the different wireframes you have researched? Are there any similarities or any differences?
  4. Students will begin creating a wireframe based off a topic given by the teacher.
     • Students must have a minimum of 5 web pages within their wireframe.
     • Students must include all placeholders for images, textbox fields, navigation bar and so forth.
  5. To bring the lesson to a close,
     • Students will individually present their wireframe to the teacher.
     • The teacher will provide corrective feedback and suggestions to the students on their wireframe before proceeding to the design phase.

• Teacher Notes

  
  
  • Teachers can choose wireframe topics based off students interests or use one of the topics below
  • • Teacher Site
    • Business Site
    • Portfolio
  • Provide students with a resource of sites and/or software that they will be able to use to create their wireframe within the classroom and at home if needed.

• Optional

  
  

  Accommodation Idea:

  • Grouping students into pairs to complete the assignment. This could assist in achieving learning goals and bouncing creative ideas from one another.