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
- Create a site skeleton
- Freehand drawing on paper
- Using Adobe Photoshop, Illustrator or other software
- Using software designed for these types of tasks
- Advantages
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.