What is a Wireframe? - Tools & Examples

Instructor: Beth Loy

Dr. Loy has a Ph.D. in Resource Economics; master's degrees in economics, human resources, and safety; and has taught masters and doctorate level courses in statistics, research methods, economics, and management.

This lesson looks at what a wireframe is and how to create one using familiar images. These will be the basis for the interaction between a user and a software program. Using these symbols, you work through developing a wireframe for a webpage.

What Is A Wireframe?

Do you doodle? Well, if you doodle in meetings you might just be an expert at designing wireframes. Wireframes are rudimentary sketches that show an illustration of an electronic interface. This interface is what controls how the user interacts with a software program or electronic system, like a website.

If you are designing a webpage, database, or information system, the interface is how users interact with software. In the case of a webpage, the interface is what a user sees. Wireframes are basic sketches or designs that skip colors, fonts, sizing, and graphics to focus on functionality, space, content, and interplay.

Say we are designing a website and we start with an idea of how we want it to work. This would be considered a prototype. It's a sketch for the designers and programmers to work from in finding ways for the website to work. These sketches can be done simply on a napkin with a pencil or by using online design tools. Most online tools contain libraries of symbols and mockups to help a designer visualize what a wireframe should and could look like. To continue the discussion, let's develop a wireframe.

Developing A Wireframe

You can use wireframes to design different types of systems, such as an information system, databases, work teams, or marketing plans. There are variations in symbols. To be sure the sketch is understandable, it should have items that represent placeholders for logos, images, text, navigation and menu bars, buttons, and headers. When designing wireframes, we go through iterations, where we repeat the design of a wireframe until the result is our desired outcome.

Let's say we are designing a website for a nonprofit. You might start with a wireframe that's as simple as a blueprint with a header, body, and footer.

Wireframe 1

Next, it's good to make sure you have all of your contact information front and center. This would include things like telephone, fax, TTY, email, and chat. Adding your logo with a link to your homepage is helpful here, too.

Wireframe 2

Then, you could add some interaction elements such as navigational and dropdown menus.

Wireframe 3

To unlock this lesson you must be a Study.com Member.
Create your account

Register to view this lesson

Are you a student or a teacher?

Unlock Your Education

See for yourself why 30 million people use Study.com

Become a Study.com member and start learning now.
Become a Member  Back
What teachers are saying about Study.com
Try it now
Create an account to start this course today
Used by over 30 million students worldwide
Create an account