Wire framing your website is the first step in a new design planning process. By taking your vision and implementing that into a wire frame, your website design can begin to take shape. Wire framing is the preparation that will determine what your new site website looks like, especially when it is a custom website. It all starts with the site’s wire frame.

What is a Wire Frame?

Often a wire frame is a very simple schematic or blueprint for where: objects, images, titles, copy and navigation will layout on a website design. The nice part about wire framing before designing a custom website is that you have room to play with different concepts regarding: placement, bounding boxes, shapes, negative space and the site’s visual hierarchy.

Before the days of buying canned, done-for-you WordPress themes, a web design was limited to creating a website using programming code like: html, java, php or asp/ajax. Today’s web design has moved beyond Adobe Dreamweaver to open source development using: Ruby on Rails and HTMLpad. No matter what type of code your new website will be using to build its Content Management System, a wire frame will help you avoid making major changes to the design elements and function of your website.

How To Begin Your Wire Frame

The first stages of wire framing for a website should begin with a blank white slate canvas. We recommend starting with a canvas size that is close to the pixel size (width and height) that your actual site will be. As you begin adding elements to the canvas, a structure and layout will soon emerge. It is important that the elements you have chosen to add on the page layout will fit both: the needs, wants, desires and functions of the consumer that will be visiting the site and the client.

Wire Framing Tip: Use very light colored, neutral tones for imagery position and elements that are added to the wire frame.

Here we have an example of a wire frame layout in its first stage:

As we begin to layout the key elements that our site needs to have for the homepage we can see things begin to take shape. We have already determined a placement for the: logo, primary & secondary navigation links, business information, categories, footer and search box.

Wire Framing Tip: Often the best ways to get inspired by the site you are designing is to first seek sites that you may enjoy using and then emulating the aesthetics and function of those sites in your wire frame.

It is okay to try more than one concept in your first stages of wire framing.

Here is a second option that we have considered using for the website home page:

In the second wire frame option you can see that we removed the secondary navigation and replaced it with 3 feature images and 3 columns that provide the user a short description of each feature that we want them to see on the home page. We have also included a slider with a description box, to elaborate more on the message that each slide image may be conveying to the site visitor. We no longer have the business info on the home page, where we initially placed it on wire frame #1. Since we have moved that information from the home page to a contact or contact us page, we can begin designing the layout for the contact us page next.

Once again we can choose to entertain a second layout or design frame for the contact us page:

In our second attempt at a contact us page we have decided to include a contact form with four fields: name, email, phone number and notes. Once we have chosen the wire frame for the site’s contact page, we can translate that into how our other pages may look:

Our website’s wire frame is taking shape nicely and now we can decide if the services pages will each match the layout used on the contact us and about us page, or if we would like to have an alternative design for services pages.

As we near completion of the wire frame process it is important to account for the many functions of the site. If we will use the search box in the header of the website design then we do need to determine how to code that in place to work properly. The same goes for the navigation links, the map, social icons and the contact form. These elements are an important part of the web development. Choose wisely!

Website Design Tips

Wire framing websites can be a designers best friend. If you skip these steps you will be left shooting in the dark with an unclear direction for your new website’s design, function and abilities. Always design sites with the user experience in mind. Keep it simple, clean, straight forward and intuitive for the user. A website presented to the user should make sense instantly and your website should be responsive!

Learn more about Website Design with our Four Tips on Effective Web Design from The Sherwood Group.

If you enjoyed this article, you may also want to check out these others:

The Importance of Unique Content On Your Website
7 Steps for Getting on Board With Social Media
5 Ways You Can Benefit By Using LinkedIn
How To Amp Up Your Visibility With Facebook
How To Spark Conversation About Your Business
4 Essential Tips for Growing Your Business with Pinterest
3 Tips for Social Media Marketing Brilliance

This article is published by Will Sherwood | The Sherwood Group |Website Design | Graphic Design | Marketing Communications: The Sherwood Group has over 30 years of experience working with all sorts of companies, small and large. Our clients range from entrepreneurs to Fortune 500 firms, in nearly every business sector, from across the street to around the world (and yes, even Europe, China, and South America). Our goal is to create advertising,  graphic design, website design, and marketing communication that still looks fresh and relevant 10-15 years later. Our mission is to stir your imagination and leave your competition shaken and wondering,  Now what do we do?”  We are located in Myrtle Beach, South Carolina.

Do you need help growing your business? Click here to check out the social media marketing and website design packages from The Sherwood Group. We’ll help you capture new business and achieve your goals.

“Like” us and/or “Follow” us at these social media sites and we’ll return the favor:

LinkedIn | Facebook | Twitter

Please comment. We’d like to know if you found this article informative or helpful?