How to Build a Website Wireframe
A website wireframe is an easy way to plan out the organizational structure of a website before designing the actual user interface itself. This can be a useful tool for the graphic designer and content writer, who will be able to design the interface and content around the structural requirements.
Other People Are Reading
Things You'll Need
- Any program capable of drawing shapes or a program specifically built for wireframe design
Instructions
-
Basic Layout Considerations
-
1
Determine the basic layout, such as how many columns the site will have, and if it will have a header or footer. Draw these.
-
2
Choose a location for the navigation of the the site. A rule of good website design is to place the navigation as close to the top of the page as possible.
-
-
3
Decide where to place the company or website logo as well as title. This should also be placed near the top of the page somewhere.
Adding Additional Functionality and Instruction
-
4
If your site will include functionality such as search or the login, choose a placement for these items. Typically these are shown as a box just as they would appear on the actual website.
-
5
Some will choose to wireframe the sections of a website. At this point, it may prove beneficial to start planning out the navigational structure of the site, also referred to as a sitemap. This will prevent unforeseen navigational conflicts.
-
6
With the layout finished, now label the various sections you have created, specifying the type of information to be included within each section i.e. "News," "Navigation," "Login."
Applying the Layout to a Simple Website Mockup
-
7
With these steps done, and the general layout agreed to, design a image-less HTML only version of the site, using simple text without font formatting and links. Do not include any imagery. Include a short description of the purpose of each page near the top to remind those working on it what the purpose of each page is.
-
8
Add in content to this basic design. Again, leave out any formatting. Ensure that the content is to the client's liking. Some experts suggest leaving the page description on the page at this point to prevent the content from drifting too far from the original plan as things are added and deleted.
-
9
Create placeholders for the images to be put on the website. If the size of each image element is known, create a solid-colored image labeled with the image description for your site's graphic designer to refer to, and place it on the mock-up.
-
10
With the image specifications agreed to, the wireframing is now complete and the site can proceed to the actual design stage.
-
1
Tips & Warnings
When using a program such as Microsoft Visio or Word, ensure that your colleagues have the program necessary to open the file. While some applications offer a reader that allows the end user to open files in a "read-only" format, some will not.
Do not design actual interface elements unless you wish to ensure that they make it into the final layout. Giving your graphic designer and content creators more freedom is preferable because they will likely have more experience in the best practices for the display of information.
