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 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

Become a member and start learning now.
Become a Member  Back
What teachers are saying about
Try it risk-free for 30 days

Earning College Credit

Did you know… We have over 160 college courses that prepare you to earn credit by exam that is accepted by over 1,500 colleges and universities. You can test out of the first two years of college and save thousands off your degree. Anyone can earn credit-by-exam regardless of age or education level.

To learn more, visit our Earning Credit Page

Transferring credit to the school of your choice

Not sure what college you want to attend yet? has thousands of articles about every imaginable degree, area of study and career path that can help you find the school that's right for you.

Create an account to start this course today
Try it risk-free for 30 days!
Create An Account