Wireframes

Objectives
In this lesson, students will learn

  • To create a wireframe to develop/plan the layout of a webpage

Wireframes
website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.

Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose.

Creating a wireframe is one of the first steps you should take before designing a website. It primarily allows you to define the information hierarchy of your design, making it easier for you to plan the layout according to how you want your user to process the information.

Example of a Wireframe (PDF)

https://wireframe.cc/7qbmAi

Resources
Using Wireframes to Streamline your Development Process
A beginners guide to wireframe
Website Wireframes

Tools
Wireframe.cc
WireframePro
Google Drawing (Google Drive)


Wireframe Exercise

       

Choose two websites designs from the examples provided and create a wireframe for each.

File names:
Wireframe 1 – LastName_FirstName-wireframes1.png
Wireframe 2 – LastName_FirstName-wireframes2.png

Upload files to Google Classroom > Wireframes.

DUE: Tuesday, November 13, 2018 (at the end of the day)