Create a site skeleton

Wireframes for websites are simple line drawings that show the placement of elements on a web page. You can save a lot of time by editing a simple wireframe layout early in the design process rather than a complex project later.

Using wireframes is a great way to start a website project as it allows you and your client to focus on the layout without being distracted by color, type, and other design elements. Focus on what’s happening on your web pages and the percentage of space each element takes up, which can be determined by your customer’s needs.

What to include in a site framework

All the important elements of a web page should be presented in the wireframe of your site. Use simple shapes instead of real images and label them. These elements include:

• Navigation: Buttons that allow users to visit the main sections of your site.

• Company Logo: Can be easily displayed through the box.

• Content Areas: Where do the different content sections appear?

• Search windows

• User Login Zones

Create a site skeleton

There are many ways to create a site skeleton. These include:

Freehand drawing on paper

This method is useful when you are face to face with a customer. Draw your layout ideas on paper with a focus on which elements to go and where

Using Adobe Photoshop, Illustrator or other software

Most graphics software packages come with all the basic tools you need to create wireframes. Simple lines, shapes, and text (to label your elements) are all you need to create a presentable wireframe.

Using software designed for these types of tasks

While Photoshop and Illustrator can do the job, some software packages are specifically designed for this type of work. OmniGraffle is a piece of software that makes it easy to create wireframes by providing tools for creating shapes, lines, arrows, and text on a blank canvas. You can even download custom graphic sets (for free) from Graffletopia, giving you more elements, like regular web buttons, to work with.

Advantages

Web site wireframes allow you to modify a simple line drawing to achieve the layout you want. Instead of moving complex elements around the page, it can take very little time to drag a few blocks to new positions. It’s also much more efficient for you or your client to focus on the layout first… you don’t start with comments like “I don’t like that color over there!”. Instead, you start with the final layout and structure. on which your design is based.