How to Create Website Wireframes
By Eric Miller
1 of 4
The Focus
of Website Wireframes
Ad
Design Your Own Websitewww.moonfruit.com/WebsiteDesignBuild Your Own Website In Minutes! Free Professional Designs.
Try Now.
Website
Wireframe
Website wireframes are simple line drawings that show the
placement of elements on a web page. You can save yourself a great deal of time
by editing the layout of a simple wireframe at the start of the design process
instead of a complex design later.
Using wireframes is a great way to begin a web site project, as
it allows you and your client to focus on layout without the distraction of
color, type and other design elements. Concentrate on what goes where on your
web pages and the percentage of space that each element takes up, which can be
determined by your client’s needs.
What to Include
in a Website Wireframe
Ad
Design Your Own Websitewww.moonfruit.com/WebsiteDesignBe Up & Running Online In Minutes. No Programming Required -
Try Now!
Simple
wireframe example
All of the important elements of a web page should be
represented in your website wireframe. Use simple shapes instead of actual
graphics, and label them. These elements include:
·
Navigation: Buttons for users to visit the main sections of your
site.
·
Company logo: Can just be represented by a box.
·
Content areas: Where will your different sections of content
appear?
·
Search boxes
·
User login areas
How to Create Website Wireframes
Design Your Own Websitewww.moonfruit.com/WebsiteDesignBe Up & Running Online In Minutes. No
Programming Required - Try Now!
OmniGraffle Screenshot
There are a variety of ways to create a website
wireframe. They include:
Drawing it by hand on paper
This method comes in handy when face to face with a client. Sketch out your layout ideas on paper, with a focus on what elements should go where.
This method comes in handy when face to face with a client. Sketch out your layout ideas on paper, with a focus on what elements should go where.
Using Adobe Photoshop, Illustrator, or other
graphics software
Most graphics software packages come equipped with all of the basic tools necessary to create wireframes. Simple lines, shapes and text (to label your elements) are all you need to create a presentable wireframe.
Most graphics software packages come equipped with all of the basic tools necessary to create wireframes. Simple lines, shapes and text (to label your elements) are all you need to create a presentable wireframe.
Using software created for this type of task
While Photoshop and Illustrator can do the trick, some software packages are developed specifically for this type of work. OmniGraffle is a piece of software that simplifies the creation of wireframes by providing shape, line, arrow and text tools to use on a blank canvas. You can even download custom graphics sets (for free) at Graffletopia, which gives you more elements, such as common web buttons, to work with.
While Photoshop and Illustrator can do the trick, some software packages are developed specifically for this type of work. OmniGraffle is a piece of software that simplifies the creation of wireframes by providing shape, line, arrow and text tools to use on a blank canvas. You can even download custom graphics sets (for free) at Graffletopia, which gives you more elements, such as common web buttons, to work with.
How to Create Website Wireframes
By Eric Miller
4 of 4
The
Benefits
With website wireframes, you have the benefit of tweaking a
simple line drawing to achieve the desired layout. Rather than move complex
elements around a page, it can take very little time to drag a couple of boxes
into new positions. It is also much more productive for you or your client to
focus on the layout first…you won’t start out with comments like “I don’t like
that color there!” Instead, you will start with a finalized layout and
structure on which to base your design.
