There’s a reason why we’re only just now talking about the actual design of a website. So much emphasis is placed on it – heck, it’s even the name of our industry and job title.

Hopefully through this series, you’ve grown to appreciate all of the background work that goes into and is built into a well-planned website. The previously developed project description, the valuable information gathered during the creative brief, and website design wireframes all lead to a website design that stands the greatest chance of success.

Website design mock-ups: What are they?

This topic, along with our previous one on website design wireframes, is within the context of custom website design projects.  If you’ve ever worked with graphic designers or other website designers, you’ve probably already heard the term “mock-up”; but for those who haven’t:

In website design, a mock-up is a graphical depiction of a webpage design and layout

If we go back to our metaphor of building a sailing ship – we as the ship builders would have an artist sculpt a model of the ship before it were actually fabricated. However, since we’re talking about website design, it would be appropriate to think of a website design mock-up as a life-size model of that ship. The only difference between the model and the actual ship is that the ship itself is fully fabricated and functional. The same is true with website design mock-ups. They look just like the real thing, but it’s just a static representation.

The importance of mock-up review and approval

A website design is more like a mosaic than a painting. The "bigger picture" is made up complex arrangement of interdependent files, much like Robert Silver's photomosaic of the Mona Lisa.

Some people might wonder why we don’t just go ahead and build out the actual website without presenting a mock-up. Why spend the time reviewing something that doesn’t have clickable buttons and such? That’s understandable.

If you were to look at that life-size model of a ship, if you didn’t know any better, you’d think it were a fully-functional ship. However, once you got on board and started taking a look around, you’d see that it was an empty facade. The same is true for people who don’t really understand what they’re looking at when viewing a live webpage.

Without going into any boring, techie details: A majority of modern webpages are a mosaic of different files.  Some of those files are images, some are scripts that perform actions, some are files that tell your browser how a particular line of text should look, some perform complex animation or application-like functionality, and so on.  The glue that holds all these files together is the webpage programming language file – typically, one of several flavors of HTML. All that stuff is the moving, working parts that separate our actual ship from the life size model.

Now, let’s say you’re looking at the actual ship floating in the water, ready to set sail at your command. After a moment, you think to yourself, “You know, I’d really like it to be a little wider.” Imagine what affect that change would have on all the working parts, just under the ship’s facade.

At Linkshape, we do our very best to absolutely NAIL the design of a website right off the bat. However, we also want to accommodate any requests you might make after the design has been presented. If you say “I’d really like it to be a little wider”, it just makes a whole lot more sense for everyone to make those types of design changes to the mock-ups, before all those moving parts have been fabricated. You see?

Looking back & looking ahead

For now, this concludes our series on the Art of Linkshaping. To recap:

• In the Introduction, we talked about the approval process and learned why everyone hates change orders
• We identified the dimensions of the Project Description: Services, Pages & Features, and the Platform & Technologies
• We learned of the importance the Creative Brief plays in website design and Internet marketing
• We took a time-out to identify the differences between completely Custom Designs and Customized Pre-Built Designs
• We learned the value of Wireframing for content and layout organization
• Today, we learned the importance of reviewing Mock-ups before the website is actually built out

We’ll revisit the topic of Linkshaping from an ongoing marketing and online business perspective in the very near future. For now, we hope you’ve enjoyed this series and look forward to seeing you here again next week.

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!

Notice that I made a point to say “custom” website designs.  Before we can effectively talk about website design wireframing, we needed to talk about two very broad design classifications.  In writing this article about that topic, I realized that I was nearing the invisible limits I consider a good article length without actually having started to write on-topic yet.  And so I have rededicated this article to our new topic:

Custom and pre-built website designs

When it comes to the planning and executing the design of a website or Online Business, there are really two ways of going about it.  On one side, you have custom website designs and on the other, you have pre-built website designs.

1. Custom website designs

When we say “custom” website designs, we’re referring to designs that are conceptualized, designed, and built from the ground up, specifically for a particular website or Online Business.  These “one off” designs are only used for that single company, product, or service and you won’t see the same design being used by any other website.  These website designs have not be pre-built by a design company for use by several clients or resold by any template retailers.

Linkshape is proud to offer custom website designs, specially crafted by our website design artisans specifically for your unique brand.

2. Pre-built website designs

There are hundreds of high-quality pre-built website designs that can offer significant cost savings over custom website design.

In contrast to custom website designs, pre-built website designs have been built either:

1. For no single product/service/company – The pre-built design has been built to be used by several websites or Online Businesses.
2. For a single website non-exclusively – Although the website designer created the website design for a particular client, the design was created to be reused for appropriate future clients as well.

Website designers and website design companies will typically customize the pre-built design for the client’s unique brand and purposes.  This includes things like inserting the client’s logo and perhaps modifying the designs color scheme to match.  These are sometimes referred to as “customized” designs, so it’s important to be aware of the difference between “custom” and “customized”.

Linkshape also provides pre-built designs, customized to your brand.

The many meanings of website design “template”

Pre-built website designs are often referred to as “templates”, although that term is also used in elsewhere in the website design & development industry to refer to the design of a website that is built using a Content Management System or other website platform.  For such websites, the design is separated from the actual page contents, and the empty website design is referred to as a “template”.

This becomes confusing because some websites which are platform-based may have a unique template that is a completely custom design.  Thus, “template” in a general sense, may or may not refer to a pre-built website design.

Which is best, custom or pre-built website design?

Deciding between custom or pre-built website design usually comes down to the best fit, based on your chosen dimensions of quality.

There are plenty of debates on which is better, and I am personally a bit biased, but we’re going to try to stick to the facts and let you form your own opinion on the subject.  Each process has it’s own pros and cons and at Linkshape, we believe these need to be carefully weighed for each client to determine the best solution.  Thus, we provide both custom and pre-built website designs to our clients.

To determine if a website design should be custom or pre-built, we consider the following dimensions of quality:

Branding

As website design is a part of Internet marketing and marketing in general, branding is an important facet of your efforts.  Your brand includes a visual vocabulary: symbols, colors, and fonts which can all be utilized in the shaping of your custom website design.  For branding purposes, a custom website design allows a greater opportunity to present and reinforce your brand.

Cost

The process of conceptualizing, planning, and creating a custom website design is generally more complex than using a pre-built design, even if the pre-built design is customized for your purposes.  The complexity of custom website design demands a higher cost.  So from a purely cost-based perspective, using a pre-built website design will almost always be the better choice.

Time

The complexity of custom website design also demands more time than the process of customizing a pre-built design.  If you’re looking for the quickest turnaround to launch, you’ll want to consider using a pre-built design.

Flexibility

Using a pre-built template is a bit like buying and moving into a house.  You’re confined to the dimensions and layout of that design and you may find that you’re working fill that space, rather than building a space around your content and features.  If you have to make some radical customizations to that pre-built website design in order to make it work for your website or Online Business, the costs of those customizations might become an issue.

In general, if flexibility of the layout and design are what you’re focused on, you’re probably better off with a custom design.

So what’s the point?

How heavily you weigh the dimensions of quality I list above will determine what type of website design you should choose for your website or Online Business.  It’s also important to know that these dimensions are in a constant state of push and pull.  Recall that heavily customizing a pre-built design can increase the costs, but it will also have an effect on the project turnaround (time).  So take the time to discuss your website design options when the time comes.

Looking ahead, the reason why we are making the distinction between custom and pre-built website designs is that our next topic on wireframes and the following topic on mock-ups are part of custom website design.  Now you’re fully prepared for the context of our continued look into the Art of Linkshaping.  See you again next week!

Project description – what is it?

Let’s say you’re choosing a website design and development company to assist you in building your new online business.  It goes without saying that you’re considering getting Linkshaped .  Perhaps you have a vision of what your online business should look like, what some of the pages should be, if you plan to offer an eCommerce experience, and if you’re really on the ball, you know what sort of marketing functions the online business will attempt to perform.

You convey this vision as best you can to your Linkshaper, be it Chris, Ted, or even myself and we’re going to write all of it down.  We’re also going to ask you questions and generally seek to expand your vision to cover other aspects that perhaps you haven’t considered yet.  A good portion of our questions will focus on marketing functions, largely due to Linkshape’s tenet of purpose-driven websites, the hallmark of successful online businesses.

The result of this activity is a shared, refined vision of your online business which guides us in the assembly of your project description.

The project description is the blueprint for your project.  It describes what is being built as completely and in as much detail as possible.

Remember last week we spoke about the importance of approval in the Art of Linkshaping?  Well, the project description is the first thing you’ll be approving as you’re getting Linkshaped.  That’s because your project description is a critical component of your project agreement and is the basis for providing and maintaining your project’s cost.

The dimensions of project description

There are a lot of ways to describe a project and, of course, every project is unique.  However, in your Linkshape project agreement under “Project Description”, you’ll see at least three common dimensions, and if you’re considering other website designers, you’ll probably see something similar from them:

1. Services

Online business consulting, website design and development, and Internet marketing services consist of more specific activities that take place during the course of a project build.  The Services description is a broad, but comprehensive listing of these activities.  Again, the specific activities included in any given project will vary, but here are a few examples you could see:

• Project type – Generally speaking, what’s being built?  Is it a full website or just a design?  Is it an online business or just a website?  Some other website design companies use this information as the project description, and separate out other services involved.
• Design type – This is where we’ll talk about the various design services we’ll use for your project.  Is it a new design, from the ground up?  Are we customizing a premium template for your unique brand?  If so, what customization is included?  Are we including an email template design for email marketing?
• Page build-out – Does the project include full-page build-outs including page copy and accompanying images?  Some website design companies will only build you an empty shell of a website and you’re expected to fill it in yourself.
• Modules set-up – Does building the online business include building out web forms, a blog or forum, email marketing, or eCommerce?  If there are peripheral  sections of the online business, sometimes called add-ons or modules, this is where you’ll find them.  Again, some website design companies will build you a site that will allow you to add a shopping cart to your site, but don’t actually do it for you.
• Consulting, testing, & training – A lot of website design companies don’t include these vital services for online businesses, but Linkshape does and you’ll find them listed in your project description.

2. Pages and Features

This section goes hand-in-hand with the Page build-out in the Services description.  Some website design companies list this as the “site map”, which is accurate because it maps out the various pages and sections of a website.  We take it a step further and list out any important page sections and features, so you’ll know if it includes a web form or a listing of upcoming events.

3. Platform / Technologies

It’s important to know what type of platform your online business will be using for an infrastructure.  There are several popular CMS technologies which are used, including WordPress and Joomla.  In fact, you may be familiar with these technologies and specifically request we use one.

For online businesses, Linkshape utilizes the powerful Adobe Business Catalyst platform, which integrates several Internet technologies all from a single interface.  If you’ve decided to stick with one of our standard online business plans, the details of that plan will be listed here for your convenience.

The importance of understanding the project description

Although most website design and development companies include detailed project descriptions, we’ve found that a large percentage of them will submit the agreement to you and expect you to go through it on your own.  I have a suspicion that some of these companies just hope you don’t bother to read it and will just sign it and send out your payment.  I think this occurs a lot, because the client is usually in a hurry so they just take a look at the pricing, the project schedule and just assume that the project description matches that vision they had at the beginning.

Frankly, I understand this type of activity, because if I try to think like a non-web type person, a lot of this stuff is either boring to read or simply incomprehensible.

However, we feel this is a bad practice, both for the website designer and the client because it sets the stage for disappointment down the waterway.  For this reason, your Linkshaper actually takes the time to go through the agreement, including the project description with you before you sign the agreement.  So if you don’t understand what “Flash menu customization, limited to replacing button text” means, you can ask your Linkshaper right then and there.

Recall from last week, we used the metaphor of traveling down the canal to describe building an online business and that, sometimes breaks in the canal will occur.  In the website design industry, this is known as “project creep” – the alteration (read: “expansion”) of the project scope – and if left unmanaged, it will result in additional cost for both the designer and the client.

This is why understanding the project description at the time of agreement is so very important.  It plots the course of the canal, so that everyone understands there’ll be happy sailing within the parameters of that course.

If you’d like to ask questions or want to discuss project descriptions further, be sure to submit your comments below.  Until next week, happy Linkshaping!