Website Wireframe

What is a Website Wireframe?

A website wireframe is a drawing that shows what content/functionality is required to go on a particular web page and will also influence the visual design of the page. A wireframe helps to start to visually map out how you wish to direct people around on the website as well as inform the web designer important key elements to the sites layout/ hierarchy  and functionality.

The wireframe drawing can be done by pencil and paper or by using a computer program such as Photoshop (or by using a free wireframing software), it does not really matter as long as the information is conveyed clearly. There can be one or several wireframe sketches for a single website depending upon the website complexity.

The wireframe outlines the layout that can then be used to guide the visual design process of the website. It is also useful to highlight particular blocks of information (eg News section) and functionality (Eg Form when submitted redirects users to a new page with the website) too.

Even though the wireframe is a simple drawing, thoughtful strategies on how the website will be used/perform (UX User Experience) are fundamental to create the wireframe.

Examples of wireframe sketches

Pencil Wireframe sketch

The below wireframe was done with pencil and paper. Numbering was then added and further information was supplied to explain each area within the wireframe sketch.

Wireframe created with pencil and paper

Wireframes created with Illustrator

Simplified block layout showcasing specific areas of the website.

Wireframe created with Illustrator

Wireframe created with Photoshop

Simple drawing showing the layout with short explanations of each section.

Wireframe created with Photoshop.