Avast!  Thar be our series on Linkshape’s website design process we call The Art of Linkshaping.  We’re returning after a brief change in the winds allowed us to explore the difference between custom website design and pre-built website design.  Understanding the difference between these two types of website design is important, because our remaining two topics really only apply to custom website design.

Today, we discuss website design wireframes, which mark a transition from the Strategy phase in the Art of Linkshaping to the Design phase.  Not all website designers or website design companies prepare wireframes before moving into the actual build of a website.  One reason for this might be what we mentioned in the first paragraph: they might be using a pre-built website design – and that’s fine, as long as you’re not under the impression you’re getting a custom website design.

Another reason might be the website designer’s or design company’s philosophy of design.  In a moment, we’re going to discuss the wireframe’s importance in the discipline of website usability, which some website designers may not pay much care to, either by choice or in ignorance.  On the other hand, the designer may simply have a production process that effectively eliminates the feedback they receive from their clients.  Perhaps it’s just faster for them just to bang out a website and then seek approval after the fact.  It’s hard to say, because that’s not our approach.

For us Linkshapers and indeed for many of our website design peers, wireframes are a necessity for creating well organized, custom website designs.

Website design wireframes as a blueprint

The website design wireframe for a recent client. Imagine peeling away the superficial website design to look at the website's skeleton.

I know that we referred to the Project Description as the blueprint for a website design project, but I think almost everyone would agree that the wireframe most closely resembles what we would conventionally call a blueprint for a website.  Although engineering blueprints are much more complex, they bear a similar visual appearance and function.  They spatially map out the arrangement of the overall structure.

Imagine, if you can, peeling back the superficial design layer of a website.  The underlying skeleton of that layout would be the wireframe.

Like a custom website design itself, there is an art to wireframing and there is variation in the particular styles of one wireframe to another.  Some of this variation is aesthetic – I mean, we are talking about designers here and for most, there’s always going to be a certain desire to provide a designer’s touch.  For example, because wireframing has its roots in actual hand-drawn diagrams, some designers give their wireframes a hand-drawn appearance.  Actually, this usually is done to remind the client that the wireframe doesn’t reflect the appearance of the website design.

Wireframes can also sometimes take the form of prototypes – functional outlines of a website flow.  These are most common in projects that include custom website development, programming, or web-based applications.  Again, the emphasis is not on the design of the application, but on the flow and functionality.

Probably the most important tip I can give you, the client, is: the wireframe is not what your website design will look like.

Website design as a content container

In good website design, the wireframe helps the website designer "frame in" sections of content. The actual appearance of these elements will be the icing on the cake.

After more than a decade in the website design industry, if you were to ask me what I think the most important skill a website designer can possess is, I’ll you: “Organizational ability.”  Following that, I’d say: “Design talent.”  That may surprise some of you.

When I talk about organization, I’m not talking about a website designer who is obsessive about keeping a well organized desk and personal space or the website designer who has their day mapped out with sophisticated spreadsheets.  What I’m referring to is the ability to take raw information, analyze it, and organize it in a way that makes sense and other people would expect to find it.  This “raw information” I refer to is website content: pages upon pages of text, graphs, images, videos, and other media that will ultimately be presented on the website.

So much emphasis is placed on the actual “design” of website design, it’s easy to forget that people choose to visit websites, first and foremost, for website content – all the stuff that is generated during the Research and Strategy phases.

Recall that I mentioned wireframes are a necessary tool for well organized websites.  In my opinion, a good website designer views the role of website design as a container for the website content.  It supports the content by framing it in, emphasizing relatively important content, and subduing the lesser.  For such designers, wireframes, along with site maps and other prototyping processes, are powerful tools that help organize content before one goes about making everything “look pretty.”

Website design as a user experience

Although some of you are only now getting around to getting a website, the art of website design has been around for quite a while now.  In that time, important developments have emerged that fundamentally shift the focus within the industry.  One such development is usability: the understanding that a website presents an experience to the website user and the quality of that experience can have a deep impact on the overall success of that website.

For example: If I wanted to perform a search, does the placement of the search box and button fall in line with my expectations as a user?  Does the wording of a button give me an understanding of what will happen if I press it?  Wireframes allow us to address fundamental usability concerns.

Usability is an incredibly complex subject and a website design artform unto itself, which could easily command an entire article discussing it solely.  So for now, understand that we view good organization as having a direct impact on good user experience.

Website design wireframes – review and approval

In the Art of Linkshaping, the wireframe is a critical component of custom website design, which is why we take care to present, review, and seek approval of your wireframe before moving onto the next important step.  Wireframing will almost always start immediately upon receiving approved website content, either from your team or from our professional copywriters.

In our experience, the approval of wireframes is quick and painless.  If there are any changes requested, it usually to add or remove blocks of last-minute content changes.

Upon approval of the wireframes, we move into the next stage in the Design phase; the final topic in this series: website design mock-ups.  Join us next week for our wrap-up.  Oh, and if you have a question or comment about this article, please leave a comment below.  See you next week!