Wireframing is a very important part of any screen design process, this primarily allows yourself to define information hierarchy of your designs, and this makes it easier for you to layout according to how you want your user information to look.

A wireframe is like a blueprint for a house, you need to have two-dimensional black and white diagrams so you can understand how to build the actual house. This is the same for a website; you need to determine the layout of the site.  Wireframe is important, it allows designers to plan the layout and interaction of the interface, which does not distract colors, typeface choices or copy.

How To Get Inspiration: Most designers use the site I love wireframes, with this site it gives an overview and visual understanding on how they handle the process of using wireframes. If you observe other sites or designers when they are creating a wireframe, is will help you organize the information on the screen.

The Process: Every designer is different when they approach wireframing and its translation to visuals or codes are different. You want to find what your own strengths are and what fits you better. Try a couple different ways and see what is more effective for yourself.

Choosing Your Tools: There are some popular tools that you can use for a wireframing.

1. Adobe Illustrator: Many designers are familiar with this program,. When you try to do a quick, complex wireframes, there is no interactivity. You are able to export the file as a PSD with the layers and you are able to fix anything else that is needed.
2. Fireworks: With this program, you can use the entire design process in creating a wireframe. You can go from basic wireframe to full visual wireframe design. It supports master pages and you can make interactive prototypes with fireworks quickly.

Grid And Box Layout: You want to be able to create a wireframe design that is compatible with all devices from mobile, tablet to computer.  After you have created your wireframe grid, start to layout the boxes in place of where you want your content to be. Make a spot for:

• Your logo
• Introduction
• Navigation bar
• Clients
• Banner
• Footer
• Features
• Services

Using Typography: After you have created your grid layout with the boxes, start to include little bits of type in the page. The content you want to deliver to your users has to be made loud and clear. Use different font sizes to show the different levels of the information that is on the page.

Using Grayscale: Grayscale can help you figure out the visual strength of the elements for the site without having to pick a color palette just yet. This will help you during the design process later on.

For more information about how to use wireframes, contact Windy City Web Designs.