Wireframing: What They Are and Why We Use Them

If you’ve ever had a website developed, you know that there are two main stages. First, you go through the design stage where you figure out what your website is going to look like. Then, you go through the development stage where your website is built and you test its functionality. While this is still generally the case, there are many more steps that most experienced web developers take to ensure clients get exactly the product they desire. One of these steps is wireframing. While it has been around in the design field for years, most people outside of the industry don’t really have a clue what wireframing actually is.

So, what is wireframing?

Wireframing, as defined by the almighty Google:

“A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.”

A sample wireframe - view the full size.

A sample wireframe – view the full size.

In layman’s terms, a wireframe is a grayscale, and usually very simple, layout guide for what your website will look like. It allows both the client and the developer to simplify the project to its most basic functions, which is actually more important than how it looks on a screen.

That’s exactly why we wireframe before clients get to the design stage. It’s easier to figure out that the all important “Login” button should be at the top of the website with a black and white box than it is to design an intricately laid out website and then move elements around.

Other benefits

One of the other benefits is that because wireframing can usually be done fairly quickly because of their simplicity, clients get to see a version of their websites early in the process. This gives you a visual aid when developing content for the website. Clients also get to see the content area as well as what other elements will be on the page which just gives a better idea of exactly what kinds of content is needed.

Wireframing also gives developers a heads up as to what we should plan. Seeing a skeleton of what developers create before it’s even in design let’s us get a jump start on the build, which cuts down on development time. This is especially true for responsive websites. All of this gets a project out of the door even quicker, which is a win for everyone.

In conclusion…

Wireframes make the design and development process easier for everyone. It’s a simple additional step in the planning phase of a website project that accelerates everything moving forward. Check back soon when we cover the process and tools that we use in our own wireframing process.

May 15, 2015

About Jack Nycz

Jack works as a front-end developer at Southern Web Group, and his passion for staying up to date on the latest coding techniques benefits both the team and our clients. While attending Gainesville State, Jack discovered his passion for coding and successfully built his first website – he’s never looked back. Born and raised in Atlanta, Georgia where his mother and three brothers still reside, Jack is also a sports enthusiast. When not focused behind a computer screen, he spends much of his time playing football, basketball and lacrosse.

Leave a Reply

Your email address will not be published. Required fields are marked *