Login

How to Wireframe a Website: Examples & Tools

Instructor: David Gloag
Websites offer a wealth of communication opportunities. A wireframe is extremely helpful in the development of a website, but what is it exactly? In this lesson, we'll take a look at the website, what a wireframe looks like, and some tools used to create wireframes.

The Internet Explosion

The Internet is a vital asset in almost every part of the world. You'd be hard pressed to find someone that hasn't heard of it, at the very least. The Internet had more humble beginnings, starting out as a military communications network (sponsored by DARPA). Originally used by a select few, it has grown to the point where it now reaches most of the people on the planet. Much of that growth can be attributed to the desires of people all over the world wanting to connect with others of a similar mind, on a wide range of subjects. That growth has been fueled by many enabling technologies. Most notably, the website.

What is a Website?

A website is a collection of text, images, movies, and links, centered around a particular theme. Most of us are familiar with them, at least to some degree, as the Internet plays a big part in global communications. When you first enter a website, you are presented with an initial screen of information, and a set of links, that allow you to traverse what the website has to offer. This can be straight information, it can be entertainment, or it can be products or services for sale. Websites are often the first point of contact a business has with a potential customer.

What is a Website Wireframe?

A website wireframe is a template for what a website will look like and do. It forms the basis for any work to be done on the website, and allows the design team to get a feel for the website before all the elements are in place. It also acts as a starting point for discussion on content and traversal. Many other discipline use a similar idea. Car makers, for example, use clay sculptures when creating new body designs. Digital artists use sketches to plan out their next rendering. And architects use cardboard models to plan out their latest building. Each is looking to smooth out the rough edges before investing a lot of time and effort on the final result.

What Does a Website Wireframe Look Like?

A website wireframe can take many forms. The simplest is done on a sheet, or sheets, of paper using a pencil or similar writing instrument. They contain various pieces of useful information, as shown in the image below:

Wireframe Example
Wireframe

Similar examples can be created in the computer using software that allows you to draw and render the wireframe. The end result provides the same information: content, included elements, and locations. But the computer-generated version typically will have a more professional look to it.

What are Some Tools Used to Wireframe a Website?

There are many website wireframe tools available, each offering a unique set of features. Some of the more notable ones are:

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

Register for a free trial

Are you a student or a teacher?
I am a teacher
What is your educational goal?
 Back

Unlock Your Education

See for yourself why 10 million people use Study.com

Become a Study.com member and start learning now.
Become a Member  Back

Earning College Credit

Did you know… We have over 95 college courses that prepare you to earn credit by exam that is accepted by over 2,000 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? Study.com 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 free for 5 days!
Create An Account
Support