What’s a Wireframe?

At the start of every web design project with Website Muscle, you’ll hear us refer to the wireframe. But you may not be 100% certain what a wireframe is. (Don’t worry – you’re not alone!) Or perhaps what we call a wireframe could be different than what you were expecting or have previous experience with.

So we’d like to explain what a Website Muscle wireframe is, and how we will use it for your project.

According to a well-known online encyclopedia, a website wireframe is “is a visual guide that represents the skeletal framework of a website.” Spot on, Wikipedia. Spot on.

We’re not as fancy as Wikipedia, so we call our wireframes “stick figure drawings”. We’ll definitely wireframe the home page of your new site, and in the case of larger or more complex sites, sometimes one or two more “key pages” as well.

When do we create a wireframe?

We create the wireframe after we’ve gone through our Discovery and Strategy process with you and the sitemap has been confirmed. Essentially it’s time to wireframe when we feel we have a good handle on what elements or sections are going to be the most important for 1) telling your story and 2) reaching your target audience.

What’s the point of a wireframe?

We consider a wireframe to be the first step in website design. We want you to see bare-bones, without any fonts, images, or colors, what will be included on the home page. That’s because the content and messaging of your website is more important than the particular shade of blue or whether the font is serif or sans serif. (I know, how dare us. We’ll get into all that later.)

We want your initial impression of the home page to be solely based on:

1) what’s there and
2) in what order.

Once you approve the wireframe, we’ll start designing and add in the fun stuff – design elements like your logo, images, fonts, and colors.

What feedback do we need?

We’ll present the wireframe to you accompanied by a handy dandy screenshare video, where we walk you through our thought process and intent behind each section and its placement on the page. That should help you understand what we’ve done and why. Ideally nothing should come as a complete surprise, although pleasant surprises are always appreciated. 😉

We will ask for your feedback so we can either make adjustments to the wireframe or proceed to design. To help you give us the most useful feedback, try to answer these questions when you view your wireframe:

  • Is there anything on the wireframe that shouldn’t be there?
  • Is there anything missing from the wireframe that should be there?
  • Is the order of sections appropriate? In other words, does it flow well for you?

Again, keep in mind that the page will look much prettier when it’s designed. We’ll add lovely images and other nice touches to break up the sections, evoke some emotion, and so forth. The wireframe’s job is to make sure everything’s there that needs to be there, and nothing’s there that shouldn’t be there.

Here's an example of a wireframe and designed home page.

wireframe example
Fullerton Business Services screenshot

So that’s the 411 on wireframes. Hope this helps, and if not feel free to reach out with any questions. We’re here for you!

Share this post

Share on facebook
Share on twitter
Share on linkedin
Share on email