What is Wireframe?
A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually being informed by a business objective and a creative idea.
The wireframe depicts the page layout or arrangement of the website's content, including interface elements and navigational systems, and how they work together. The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content. In other words, it focuses on what a screen does, not what it looks like.
Wireframes can be pencil drawings or sketches on a whiteboard, or they can be produced by means of a broad array of free or commercial software applications. Wireframes are generally created by business analysts, user experience designers, developers, visual designers and other roles with expertise in interaction design, information architecture and user research.
A Web wireframe is a simple visual guide to show you what a Web page would look like. It suggests the structure of a page, without using any graphics or text. A website wireframe would show the entire site structure - including what pages link to where.
Web wireframes are a great way to start your design work. And while it's possible to create complex wireframes with huge amounts of detail, your planning can start with a napkin and a pen. The key to making good wireframes is to leave out all visual elements. Use boxes and lines to represent pictures and text.
Wireframes focus on:
- The kinds of information displayed
- The range of functions available
- The relative priorities of the information and functions
- The rules for displaying certain kinds of information
- The effect of different scenarios on the display