Introducing Wireframes
Objectives and Overview
This lesson introduces wireframing, an important tool in web design. The content includes some examples of wireframes as well as an activity to get started practicing.
Lesson Objectives
- Identify the benefits of creating a wireframe for a web project and demonstrate this by creating a low-fidelity wireframe
- Practice your wireframing skills by sketching the layouts of existing websites
What is a Wireframe?
The first skill you’re going to use is wireframing. You’ll create low fidelity wireframes that will help you map out your site content and layout. Wireframing is a tool that you should use for any web project, as it helps create a roadmap to follow.
Wireframes are placeholders that act as a plan for your design. Low fidelity means that you’ll be creating sketches instead of a higher quality digital prototype. Pen and paper is a fantastic tool for wireframing! This helps you focus on the layout and structure of the content and build the skeleton of your site.
Things to Include in a Wireframe
The main purpose of a wireframe is to create a blueprint so you’ll want to include elements that convey information. Before beginning, determine the content that your site needs.
One way to build this skill and develop an eye for layout is to open some webpages that you like and look at the layout. You can practice creating a wireframe for those pages. This helps build your skills and you’ll start to view webpages from a different perspective.
Wireframing Resources
There are plenty of online resources about wireframes. Let’s take a look at a few to help you get started.
The first is a video about wireframing by Jesse Showalter, a product designer who creates high-quality content and shares it on YouTube. Check it the video here:
Another resource is this article from Speckyboy.com that has 20 examples of wireframe sketches for websites: 20 Effective Examples of Web and Mobile Wireframe Sketches.
Here’s one example of a sketch featured in the article:
This example shows the basic structure and layout of the page with sample headings placed in. Boxes represent layout elements and there are written notes for more context. This wireframe is a sketch but conveys lots of information that will be a helpful roadmap for the design and development process.
Here’s another great article by Winnie Nguyen, a product designer: Why is low fidelity wireframe important in product design?
Activity: Practice Wireframe
For this activity, select a webpage and create a wireframe for the home page. Include the layout elements that you think are important, and then write notes about how the site is structured.
Begin by selecting a page that contains basic visual elements. After you get some practice, start gradually copying more complex layouts.
Steps
- Use a paper and pencil and create a wireframe for the main page.
- Include the following things:
- Basic layout (this can be done with boxes like in the examples)
- Notes and annotations about the layout and content
- Some mockups for headings and lines to represent paragraphs
- Placeholders (boxes with low-fi sketches) for images
- Create the wireframe for the main page! Remember, focus on the layout and content structure.
- Annotate (mark up) the wireframe with notes and observations.
The purpose of this activity is to actively practice reviewing and copying existing sites. It’s important to not feel intimidated during this phase — there’s no need to create a perfect drawing. Remember, the purpose is to create a crude sketch or prototype that maps out the main layout elements of the site.
Do a few more of these. The more wireframes the make the more practice you’ll have! You don’t need to wireframe an entire website – instead, focus on the main page. Think about how you can draw the layout. See if you find any similarities on different websites you draw!