A Comprehensive

Website Planning
Guide (Part 1)
 27 min read
 Web Design, Guides
 Share on Twitter or LinkedIn

Smashing Newsletter

Upgrade your inbox and get our editors’ picks 2×

a month — delivered right into your inbox. Earlier
issues.
Your (smashing) emailSubscribe →

Earn your master’s degree online
Planning is essential for most businesses and
organizations. Unfortunately, when it comes
to websites there is often a failure to plan
properly or at all. This guide aims to change
that.
 As a veteran designer, developer and project manager on more sites
than I can count, I've identified a common problem with many web
projects: failure to plan. As the same issues come up repeatedly in my
work, I've written this guide in order to help our clients, other
designers, businesses and organizations plan and realize successful
websites.

Who This Guide Is For

Written in relatively non-technical language,

this guide provides a broad overview of the
process of developing a website, from the
initial needs assessment through site launch,
maintenance and follow up. It is appropriate
for:
 Small and medium-size businesses;
 Organizations;
 Institutions;
 Web designers, developers, and
design/development firms.
Important Note: Throughout the guide,
"business" and "organization" are used
interchangeably. How you apply the steps in
this guide will depend on your role and the
relative authority it offers. If you're leading a
web team, it will provide you a more
effective process. If you're less involved with
the building process, it will help you
understand best practices, the setting of
expectations, and allow you to ask more
informed questions of web team members —
and challenge them if they're not doing a
thorough, conscientious job. Also, because
this guide is written for a diverse audience, it
uses the language of both "business" and
"designer," and some sections are
highlighted for specific project roles.
"Designer" refers broadly to the person or
team building the web sites.
Also, while this is not a pricing guide, where
costs are mentioned, they are in U.S. Dollars.
Who This Guide Is Not For

While you may benefit from applying the

ideas within, if you're building a four-page
site for your family reunion or a 5,000-page
site for a Fortune 500 company, this guide
may be too detailed or way too short,
respectively. And since it's written to be
relatively accessible and non-technical, the
guide does not address the how-to of writing
HTML, using Photoshop, or working in a
Content Management System (CMS). Please
consult specialized resources for those tasks.
Web forms are at the center of every
meaningful interaction, so they’re worth
getting a firm handle on. Meet Adam
Silver’s Form Design Patterns, a practical
guide to designing and building forms for the

Jump to table of contents ↬

web.

Recognize The Purpose Of Your Website

The purpose of most business websites is to

drive sales. While successful sites engage,
inform, and educate visitors, their end goal is
to convert visitors into leads and leads into
customers. In some cases, visitors may
purchase tangible or digital products directly
from the website, while in others they may
engage in some way with the business,
eventually purchasing products or services
from the business.
If making sales is the end goal of your
website, you must always keep this in mind.
Too often this key point is forgotten in the
quest for design features, boatloads of
content and lengthy text descriptions of
products and services. Don't forget the
reason you're building a site in the first
place.
If sales are not the goal of your site,
determine what is. In most cases, you will
still have an action you want site visitors to
take: donate, request more information, or
volunteer.
Additionally, investing in a website means
investing in something that grows with your
business. Plan for your website to change
over time.
Why Plan?

Planning is essential for most businesses and

organizations. Unfortunately, when it comes
to websites there is often a failure to plan
properly or at all. Sometimes this is due to
the ever-busy, dynamic nature of the day to
day running of a business — there are so
many operational demands that sufficient
time is not allotted to the project. Sometimes
organizations simply underestimate the
time, skill, energy and expertise that goes
into building even the smallest website. But
often it is because people fail to recognize
that planning for the web is just as
important as planning for anything else
associated with their business.
YOUR WEBSITE IS THE RESPONSIBILITY OF MARKETING, NOT
IT (INFORMATION TECHNOLOGY)

Building a website is not a purely technical

endeavor. In some companies, especially
those slow to recognize the value and
importance of online marketing, the website
is considered the domain of the IT
department (or outside IT resources). This is
wrong. Websites are a function of marketing,
not IT. The design, structure, and content of
your website should be driven by
communicators, not technicians. Yes, you'll
need IT to successfully execute the plan of
the communicators and keep your site
running smoothly. But communicators
should be steering the ship. The role of IT in
the planning stages and beyond is to help
research and support the technology that
enables the company's online marketing
goals.
In too many cases, companies are getting in
their own way by giving IT authority over
their website instead of marketing. In every
organization, each department has a specific
area of expertise, and it's vitally important to
assign the responsibility for communication
to the public to the people who do this best.
If you don't have dedicated marketing
resources available to you, spend a little
time engaging qualified communicators to
help you build your site. Find the right
people for each job and then hire them.
THE DECK EXAMPLE

Consider the example of building a deck. If

you want to add a deck to your house, you
probably won't call several carpenters and
simply ask "How much is a deck?" If you do,
the smart answer will be "it depends." In
order to provide you with an estimate, a
carpenter will need some details about the
project. The more details you provide, the
more you work out ahead of time, the more
accurate the estimate will be. Of course
there is always the potential for things to
change during construction, but in general,
the adage "measure twice, cut once" holds
true for this, and for every other project. A
good carpenter will start by asking a series
of clarifying questions:
 What kind of wood? Cedar? Treated? Or do
you want synthetic?
 Where exactly will the deck go, and are
there any obstacles to work around?
 What size and height will it be, and how
many levels?
 Do you want benches, railings, built-in
planters?
 Is there clearance to bring special equipment
in to your yard?
 Do you have Homeowner's Association (HOA)
rules to deal with?

Large preview

Then there are a host of other things for the

carpenter to consider: scheduling, building
permits, inspection, maintenance, etc. That's
why a smart carpenter will answer your
simple question with "it depends." Without
more information, there's just no way to to
know. Obviously, it makes sense to meet
with one or more contractors to address the
questions above and more. When you
choose a carpenter, they should provide a
detailed plan of action that you both sign. As
they're building, they should check in with
you periodically and discuss any potential
snags in the project.
Surely all this makes sense, but
consider what the deck project would
look like without a clear plan:
"Hi, Jennifer Carpenter, it's Juan Homeowner.
I need a 20X30' cedar deck in my backyard. I
want it built in two weeks."

"Okay, Juan. I'll pick up the materials and get

started tomorrow. If you have any questions,
just see me in your backyard while I'm
working."
Jennifer Carpenter gets started, drilling post
holes for each corner of the deck. She
assumes Juan Homeowner has secured a
building permit from City Hall, since that's
the way most of her previous jobs
functioned.
There's no building permit

As Ms. Carpenter starts framing the deck,

she notices Mr. Homeowner has put a large
hose reel against his house and connected it
to his faucet. Based on where the deck will
sit, the hose reel will have to go. But she's
not sure if he will want to move it
somewhere else, or have his faucet rerouted
so he can re-connect it and attach it to the
deck, which is two feet off the ground. She
stops building, and plans to ask Mr.
Homeowner what he wants to do when he
gets home. She waits...
He's on a business trip for three days.
When he gets back, Ms. Carpenter reaches
him by phone. He's not happy that he'll have
to have his faucet moved, which now adds
unplanned expenses to the project. But
that's not Ms. Carpenter's fault, she's not the
plumber. She's just putting the deck where
he asked.
Once the deck is framed, she starts building
a railing for one side. This wasn't discussed
initially, but she sees Mr. Homeowner has
small children around and thinks this is a
 good safety feature. Mr. Homeowner comes
home one day and is happy to see great
progress on his deck, but then he notices the
railing.
 "What's this?"
 "I added a railing to this side, since you have
kids. It's a good safety feature."
 "I don't have small children."
 "But I saw them playing in your front yard."
 "Oh, those are the neighborhood kids. My
kids are in high school."
 "Well, a railing is a good feature."
 "Yeah, but can you make it shorter, and put
a bench next to it?"
 "I didn't buy enough wood for a bench, and
the railing is already drilled and attached. I'd
have to remove and re-cut it. Also, we didn't
talk about a bench."
 "Well, I'd like a bench here."
 "That will take more time. I won't be able to
get this done by your two-week deadline if
we add the bench. Plus, I'd have to charge
you for the extra wood."
What began as a "simple project" becomes a
series of headaches due to failure to plan
and to communicate. Jennifer Carpenter also
has to bill Mr. Homeowner for all the
unforeseen issues: for the extra material, for
her extra time, and for all the unanticipated
tasks that have gone into building this (now)
complex deck project.
From a web professional's perspective,
developing a 50-page website for six unique
stakeholders is far more complex than
building a rectangular deck. Also, a deck is a
physical structure built in stages. You can
look out the window and see the progress.
By contrast, a website has a number of
technical and administrative steps which,
while incredibly important, are effectively
invisible to the business.
A caveat... and the "waterfall" method of development

When I worked at an insurance company,

business analysts, part of the IT (Information
Technology) department would write project
charters — long, painfully boring documents
which attempted to outline every possible
aspect of a website. I really hated these
documents. I preferred to work much more
seat-of- the-pants. In part, this was because
unlike print material, websites are flexible.
Once a printed document has gone to print,
its content is not going to change without
starting all over again — printing new
physical documents. Websites are different.
The content in a website will change over
time, at will. The idea that every single
minute aspect of a website could be pre-
planned on paper was ludicrous.
IT departments that handle large projects
often use something called the "waterfall"
method of development. The idea is that the
phases of development flow downward
through the steps, toward the completion of
the project, with each previous stage
effecting the next one. In theory, this isn't a
bad idea at all. But in practice, this can
create the side effect of over-specification, of
detailing each and every minute part of the
project from top to bottom. Absolutely
everything is specified, down to the point
size of the type, the line length of page
headers, and exactly how a simple photo
gallery will work. This is my view of the
waterfall method: if you're building a
banking application that transfers money in
and out of customer accounts, you'd better
be sure your code is perfect. When dealing
with people's money — debits and credits —
there is zero allowance for error. For projects
this critical, it makes sense to specify
everything you're going to do in great detail
before writing a single line of code.
However, as I said earlier, websites are
flexible. So how do we reconcile the need for
clear and detailed specifications with the
inherent flexibility of the medium? We can
split the difference. By following the process
outlined below, we can create a set of
content and design specifications that
greatly reduce the potential for mid-project
glitches, while creating a framework that
allows the site to grow with time. In fact, we
can plan for expansion, allowing, for
example, a news section to handle ten news
items or two hundred. When properly
implemented in a Content Management
System (CMS), a website will allow site
editors the flexibility to swap out key photos,
change titles, headers, reorder content, etc.
— but all within the framework established in
the planning stage.
GETTING AGILE

You may also consider an approach called

Agile Development. While primarily
associated with software development, Agile
concepts can be applied to website creation
as well. It can be just as successful as
following a detailed plan, but it needs to suit
the skills, approach, and temperament of the
project participants. Read The Agile
Manifesto and consider if this approach is
right for your project.
Keep in mind that Agile development can
take a little longer (and thus cost a little
more) than traditional methods, and if you
tend to lose focus, this probably isn't the
best way forward. But for more complex
projects it can be a very effective way of
building a website. If you decide you want to
go this way, make sure to talk to your
creative team about their comfort level with
Agile. Some web professionals are more at
home with this method than others.
The Value Of Paying For Planning, Needs Assessment

Some businesses seeking an estimate for

their site will have a general idea of what
they want to do and possibly have developed
a simple site map or list of pages. Others,
especially organizations, will offer an RFP
(Request for Proposal). In most cases, none
of these items are enough, by themselves, to
allow us to generate an accurate proposal.
Even in the case of a multi-page RFP, there
is often not enough useful detail from which
to create a proposal and estimate. If a client
just wants a very broad ballpark figure, we
can usually do this. But to arrive at an
accurate cost, much additional information is
needed.
Enter The Needs Assessment

A needs assessment is the process of

figuring out where a business has been,
where its going, and how to get it there.
That's pretty broad, so let's break it down.
Please, please, no more RFPs

While created with good intentions, RFPs are

often a bad idea both for the issuing party
and for web firms responding to them.
Business and organizations who are used to
the RFP process should realize that for a
complex and creative project like building a
website, this approach is often inappropriate.
(It works just great for more static creative
work, like print advertisements, but for
flexible digital endeavors, it's just not
effective.) In many cases, asking a web
designer to craft a detailed response to an
RFP is like asking an architect to create
blueprints for a house "so we can see what
you would do for us." This is akin to asking
someone to work for free (on "spec"), and
such a process can be demanding and
unfair.
Worse still, when a business has already
chosen a designer, RFPs may be issued
simply to go through the motions,
pretending to seek competitive bids, giving
the appearance that rules were followed.
This bypasses the critical needs assessment,
forcing designers to invent numbers and
timelines without enough information to do
so. It is a waste of time and energy.
When RFPs are sent to a large number of
designers, the only thing a response
indicates is a willingness to respond to an
RFP, not that designer's suitability for the
project.
SKIPPING THE RFP, ASSESSING NEEDS

Businesses can benefit greatly from a needs

assessment. Twenty hours spent on a needs
assessment can easily save forty hours of
 development time during the building of the
site.
Discovering the true needs of a business
halfway through a project is a recipe for
headache, extended development time, cost
overruns and missed deadlines. As you'll
read below, failure to recognize and pay for
proper planning creates big problems.
Proper planning is an investment in a
headache-free development process, and
the first step to planning is figuring out what
is needed from top to bottom in as much
detail as possible. That's the purpose of a
needs assessment, and it's a vitally
important step in developing any website.
WHAT HAPPENS WHEN YOU FAIL TO PLAN?

 The designer or developer is forced to make

assumptions, which may or may not be
correct, as to how certain content will appear
on the site. (The way content is displayed
effects the way the pages are built, which
effects the complexity of development.)
 The amount of back-and-forth
communication about trivial matters can be
multiplied many times over. (Clarifying
 miscommunication takes longer than getting
it right the first time.)
 Backtracking causes delays and missed
deadlines. ("Do-overs" often mean that
developers are doing the same things twice
in different ways.)
 Work that falls outside the original scope of
the project creates cost overruns. (More is
more. This is called "scope creep" and can
be a serious issue, even in small doses.)
 Confusion and client dissatisfaction are the
byproducts of the shoot-from-the-hip
process. (Face it, nobody is happy when
things go wrong.)
 Anything but a simple tire swing.
The end result: a website that falls short of
its goals,yields poor ROI (Return On
Investment), and disappoints the people it
was created to serve.
Needs Assessment

Three important things to remember:

1. Unless you're building a tool exclusively

for internal communication, your website is
not for you—it must meet the needs of its
audience.
2. A website is not a one-time event. It is a
flexible, extensible communications tool
which reflects, negatively or positively, on
your business. For many businesses, it is the
key touch point between the business and
their customers.
3. This is where we can potentially start
using business-speak, i.e., "assemble your
key internal stakeholders." That's another
way of saying "get everyone together who
has something valuable to contribute."
The site must work in concert with the overall marketing

A website needs assessment may overlap

with other efforts and approaches of your
marketing department. That's fine. In fact,
established branding and marketing of your
business should inform the structure and
design of the website. A good website can't
happen in a vacuum. Continuity and
consistency across all your marketing
endeavors, digital and otherwise, are crucial
to the perception that you are professional
and that your business should be taken
seriously.
We've all seen this done incorrectly — a nice
website followed by a terrible brochure, or
vice versa, and lack of continuity always
makes a negative impact. Even if
customers/users can't quite put their finger
on what's wrong, they know something isn't
quite holding together, and they'll judge the
business for it. Most people don't stop to
think "Oh, they must have hired a
professional web designer, but just didn't
bother to update their brochure, maybe
they're working on that." It just feels wrong.
Cost and timeline

Generally speaking, a proper needs

assessment will cost between 5 and 15
percent of your total project budget, and
take between 10 to 30 percent of the total
project time. Of course, this assumes you
have determined a realistic budget and
timeline for your project. It's fine if you
haven't — sometimes you don't know what
you don't know. A good needs assessment
can help you figure this out.
The needs assessment: intake

In your intake meeting, you'll want to

address a series of questions. Start with the
core ideas, values, messages and offerings
of your business, then drill down in to more
details.
 There are many valid approaches — some
very formal and precise, and others looser
and more intuitive. In any case, if you're
leading this process, you should make sure
you have a set of key questions prepared.
The following comes from a brief we use to
learn the basics of a client's project. In our
experience, at least three new questions are
generated for each question the business
owner answers. If this is an internal company
project, you can and should go through the
same process, and ask and answer the same
questions. The answers might surprise
you. Note: the following questions apply to a
small business, but can be easily modified to
suit a nonprofit, institution or other types of
organizations.
 Mission statement: who are you and what do
you do (or substitute one-paragraph
company/or description).
 Why was your company/org created?
 How would you like to be perceived through
your website?
 What is the single most important thing
visitors want from your site? For example:
find new products, register for a course, join
 a mailing list. Note: Try to consider this from
the customer's perspective. This is not about
what you want for the company, i.e., more
sales, but what your visitors want from the
site.
 What is the single most important thing you
want to convey on your site? From the
perspective of your company/org.
 Describe your target audience.
 Who is your competition? (A competitive
review should follow: look at three sites from
similar or competing businesses. See where
each website succeeds and fails.)
 Why should clients chose your products or
services over the competition?
 How will you judge if this is a successful
project?
 List three or more websites you like.
 List three websites you don't like, and
indicate why for each one.
There's no hard rule for how many questions
you should ask, or how long this should take.
However, if you finish the process in 40
minutes and there are no follow-up
questions, you're not digging deep enough.
In fact, if you're doing your job right, each
time you go through this process, the
questions are going to be different as you
tune into the needs of the business, listen to
their responses, and identify further areas
needing clarification or uncover
opportunities worth exploring.
Each business and each project is different.
KEEP 'EM TALKING

The intake process is all about the business

owner. It's very important here to listen
carefully, take good notes, and keep
following threads and tangents if they are
yielding useful information. Resist the urge
to start offering solutions right away. Keep
your focus on learning everything you can
about the client's business, their audience,
and message. Solutions come later. You
need all the questions to come up with the
best answer.
Depending on the amount of time you have
for the intake process and the scope of the
project, you may want to return for one or
more subsequent meetings to explore
further. Some clients will resist this, as they
are typically focused on the day-to-day
challenges of running their organization.
They may say they don't have time.
Reinforce that you must thoroughly
understand the problem before offering the
solution. Whether the website is for a
business, nonprofit, sports team or science
foundation, it should serve the needs of the
client and their audience.
Often the only way to get this information is
more discussion. If you still have questions
or need more information to make informed
decisions and recommendations for the
assessment, forge ahead until you've got as
much information as you need. You don't
want to be a pest, but it's very important
that you stay focused and follow through on
every possible thread that comes up in the
intake process. If you handle this process
with grace and humor, clients will usually
understand the importance of this period of
inquiry.
Messaging essentials — you must know who you are

Your business probably has a lot going on.

Classes, conferences, seminars, workshops,
webinars, product demos, charitable work,
sponsorships, trade shows. The sheer
 volume of content and activity within your
day-to-day business can be overwhelming.
Since your home page can only focus on so
many points at once, it's very helpful to
distill what your business does into a
sentence or two. For example:
 "We make project management better."
 "Beautiful, sustainably produced furniture for
home and patio."
 "Building understanding about the impact of
mental illness."
This is different from a mission statement,
though it can be developed from one. When
you distill the essence of your business in to
a short statement, this can be the starting
point for how you present it and can make a
huge difference for the creative team as they
delve into the soul of the organization and
figure out how to best present the business
to the world.
In some businesses, key employees or
managers hold a wealth of experience that
could be helpful to the project, but you may
not meet these people right away. It can be
helpful to ask the business owner: "Is there
anyone else I should be talking to about
this?" Make sure you're not leaving out the
one person who can enlighten you and
change the path of the assessment.
"UH, WE DON'T REALLY KNOW WHO WE ARE."

Some businesses, especially those lacking a

strong brand, may take some coaxing to
reveal who they really are. Probing questions
can help. For example, if you ask a business
owner who their best customers are, find out
why — what makes these customers so
valuable, how did they find them, and what
are they doing to find more like them?
Wait — You've Got No Brand, No Logo?

The value of an established visual identity or

brand in the creation of a quality website
cannot be overstated. Small businesses
often dive in to website creation without
paying any attention to branding. Suffice to
say, if you do not at least have a
professionally designed logo, you have not
established a brand. A professionally
designed logo is not something sketched on
a napkin. It is not a font you found inside of
Microsoft Word. The skills required to make a
professional logo are very specific and you'll
 need a professional with branding
experience to do this for you.
WHAT IS A BRAND?

 The visual representation of your business.

 What people think of or visualize when they
hear your business name.
 The expression of the unique characteristics
which represent your business.
BRAND GUIDE

At bare minimum, a brand should have a

(professional) logo and color palette. A more
complete identity includes:
 Short statement outlining the mission or
purpose of the business and defining its
audience.
 Headline and body fonts.
 Guidelines for use of photography.
 Copywriting guidelines.
 Additional design elements (glyphs, textures,
shapes).
WHY YOUR BRAND IS SO IMPORTANT

 It sets the stage for everything you produce

— visually and otherwise.
 It sets you apart from other businesses.
 It is authentic, a manifestation of the cultural
values of what is being represented. If it's
not consistent with these values, it may
appear inauthentic (see surf shop vs. bank
example, which follows).
 Speaks to integrity. A reflection of all the
things you are.
WHY YOUR BRAND IS SO IMPORTANT TO BUILDING A
WEBSITE

One of the first steps in the web design

process is to decide on a visual look and feel.
Without at least minimal branding, your
designer is starting completely from scratch,
and essentially has to create a brand identity
for your business on the fly. This may or may
not be consistent with the image you want to
project. Development of your brand needs to
come before a website, because the site is
an extension of the brand and not the other
way around — don't put the cart before the
horse.
MY FAVORITE EXAMPLE: A SURF SHOP VS. 110-YEAR-OLD
BANK

Both categories of business have strong

identities established to suit both the
products and services they offer, and their
particular client base.

Large preview

Large preview

Now consider how successful they would be

if they swapped brand identities. Would you
be drawn in to a surf shop with a staid,
conservative font as its visual identity?

Large preview

How about a bank with a laid-back, breezy,

casual beach feel?
 Large preview

Note: Using the formal, bank-like font for the

surf shop isn't completely terrible, but it
doesn't evoke surfing, and it certainly
doesn't say "fun."
PROCEEDING WITHOUT A BRAND

Inevitably, some businesses simply refuse to

invest in a brand or insist that the fuzzy logo
they "designed" in 1992 is perfectly suitable
as the basis for their $15,000 website. Or
they may want to design their site and then
paste in a logo at the end of the process. By
the way — if the following logo examples
look like they took about five minutes to
make — you're exactly right, they did.
 Large preview

Large preview

Large preview

Everyone needs to eat.

You will no doubt find a web professional

who will gladly take on your project despite
this critical deficiency. They might do a
passable job on the website despite this
major handicap.

Ultimately, however, you'll have at best a

beautiful, modern house on a crumbling
foundation and at worst a house that's
barely standing, built in 8 different styles,
with windows where the doors should be and
vice versa. Yes, a consummate professional
can "make do," but making do will never be
as good as doing it right from the get-go.
Take a moment and decide whether or not
it's really worth it to move forward with your
foundationless house.
Our Fictional Restaurant

To help illustrate brand identity, we've

created a brand for a fictitious business
called New Harvest Restaurant and Wine
Bar. I chose this type of business because its
easily understandable — everyone knows
how a restaurant works.
New Harvest is an upscale business located
in a major city. Its customer base ranges
from young professionals to older adults with
an interest in fine dining. Its goal is to serve
quality food with high visual appeal, paired
with mid-priced wines from around the
world.
Logo

Large preview
Fonts

Large preview

Color palette

Large preview

Large preview

We'll use these elements, along with other

brand guidelines, to create mockups for the
New Harvest website. Keep in mind that this
example is only used to demonstrate
concepts within this guide. It is not a real
restaurant, and does not represent all the
aspects of marketing appropriate to such a
business.
Mood boards

Where budget and ability allow, a designer

may use mood boards to help establish the
look and feel of a website, or the designer
may ask the business to create a simple one
to get a visual indication of what the
business is looking for. Mood boards provide
a range of visuals to help establish elements
that can be hard to describe in writing.
These may consist of textures, images, and
font treatments drawn from a variety of print
and web sources.
In this example, we've assembled a group of
images that suggest wealth and elegance.
They might be used for a travel website, or
something related to luxury sailing or boat
cruises.
 Large preview

ESTABLISH THE BRAND, BUT DON'T PROVIDE DESIGN

SOLUTIONS

While working through the needs

assessment, participants may be tempted to
suggest design solutions, especially for
businesses who have weak or non-existent
brands. Resist. A needs assessment will be
more effective when focused on problems
instead of solutions. You can't offer a
solution until you know what the problem is.
CHOOSING A DOMAIN NAME

Most existing businesses have a domain

name. If the business is new, choose the
shortest, most easily pronounceable name
you can find. As they say about men, or
women, "all of the good ones are taken."
That's the case with domain names, too. You
may have to get creative. For example,
Fitzpatrick & Sons Construction Supply may
prefer fitzpatricksupply.com, but if that
domain is taken,
consider fitzsupply.com or fitzconstructionsp.
com.
Say the name out loud to see if it's clear or
potentially confusing. Type it out and look for
visually confusing combinations of letters
(sassyssamosas.com) and make sure it reads
well as well as sounding good. Spelling out
long business names can lead to typos when
entered in a search bar, which is
why fitzpatrickandsonscontructionsupply.co
m is not a good choice.
While search engines are very quick to
correct spelling mistakes and say "do you
mean {X}?" there's still value in having a
domain name that's brief.
A Few Words About Domain Names

I highly recommend taking a moment to

learn about the basics of names and how
they work. A little bit of literacy about how
domain names are administered, where they
come from, what extensions (.com, .co, .org)
mean and how they're used can keep you
out of a world of trouble later on.
Take a moment and do a little research.
Changing your domain name after it's
established online is a headache which
should be avoided at all costs. The time
choose your domain name is during the
preparation period, not after the site has
been built.
New TLDs

TLD stands for top-level domain, as

in .com, .net, .biz, etc. However, in 2014,
ICAAN, the agency which regulates TLDs,
approved the addition of a whole host of
options, from .auto to .vegas. Which TLD to
choose is a target-market consideration.
A .com TLD comes with certain connotations
—it may feel more traditional or trustworthy,
while other available TLDs for your site may
be easier to remember. You'll have to decide
if you want to stick with a more traditional
TLD or try something novel, and your
designer may advise you here. Time will tell
if these new TLDs become commonly
recognized and widely used.
In Part 2, I'll go into more detail of evaluating
a plan, choosing web professionals, and
determining your site structure. Stay tuned!

36
SHARES

200
VIEWS
Share on FacebookShare on Twitter
Your website is basically the heart of your successful digital
marketing. It’s your web home, a shop window over which
you have full control and the first place your target audience
stop to learn more about you. Creating your online assets
always involve these three processes: planning and design,
which create the appearance, layout and style that users see,
and development, which brings this imagery to life as a
functioning web tool. Your web design or web development
always should follow this path too.

Also Read:

A Comprehensive Guide To User Experience (UX) Design

How To Build Your Website By Yourself at Low Cost!

The fundamental principle of good web development and web

design is to understand your users: the people who will
actually be using and interacting with your website. What are
they looking for? What are their objectives? Your offering
must have user experience central to the process.

With web design, you create all the visual aspects of such
interface inclusive of the layout, colour scheme, images, logo,
type, design elements like buttons and links as well as any
things else that can be seen by users. Since your website is a
visual medium, it’s very important you make it engaging and
effective with the capabilities of meeting business objectives.

You Need To Persuade and Influence With

Your Design!
The design of your website which is your web’s visual
interface is what your web users see and interact with. It’s
where all the hardwork you invested into developing your
website is being visualized by users, where your site will be
first judged and what determines subsequent delightful
experiences users will gain from your business.

Eventhough the appearance of your website matters, its

design is not just about aesthetics but about the visual clues
you give to users so they know what to do next. It assures
your web visitors of your credibility and ability to answer their
questions, and turns them into customers.

A great web design should incorporate your visual identity.

Your visual identity answers the question: “How do users
know it’s you?”. Your brand design elements should be
carried throughout both your digital assets and traditional
assets including prints and traditional communication media,
starting with your logo.

Your logo is the most prominent approach to reinforce your

brand identity on your website. The primary font is typically
used for prominent headings on the site, while body copy is
often set in a standard web font that closely matches the
primary font. Menu and button style, as well as icons, are also
part of a site’s visual identity.

Some Basic Website Design

Concepts You Should Know:
 The Fold:
This is the imaginary line at the bottom of the monitor that
divides the immediately visible part of the website (content
above the fold) from the part that is visible only after
scrolling down (content below the fold). Your most important
message, content or Call to Action should usually be placed
above the fold. It is worth mentioning here that the concept
of above the fold has come across some scrutiny, because it
is not always useful.
  Consistency:
Consistency in use of visual elements is vital to your online
presence – across all your properties and channels (such as
your email newsletter, Facebook page and mobi site) – as
users do not perceive differences between platforms or even
on- or offline. They perceive it as one message on multiple
touchpoints. Within a website, elements should also be
consistent. Colour coding, or colour themes, can be used very
successfully to group areas or features on a website. For
example, if the help button and help navigation are coloured
yellow, then the user will quickly associate yellow with
support and assistance. This is another useful shortcut to
making the site usable and intuitive.
Figure: A website showing Consistency in Colour Themes

 White Space:
Spacing on the page allows the eye to travel easily between
chunks of information and allows scanning. This can be done
by using what is called white space. This space is not
necessarily white, but instead is merely empty. It refers to
the space between elements on a page. Always steer clear of
cluttered pages. This is especially true for landing pages,
where a very specific message is expected. Make your pages
as simple and easy to understand as possible.
Figure: A website showing typical white spaces in between
contents both in white and black background

 Colour:
Colour has an incredible psychological effect on people.
Based on our culture, preferences and learned cues, people
interpret colours in very specific ways – and this can be used
to inform and steer the user’s experience. Colour theory
online refers to the principles of combining colours to attract
people toward your brand and its offerings (Focus Designer,
2012). Most of the colour choices will be dictated by the CI,
but tones and shades will be selected by the designer.

Contrast is very important when displaying text online. If the

text and background are the same colour and there is no
contrast, this means that the text will not be readable. Best
practice is to use a light background colour and a dark colour
for the text. Black text on a white or light grey background
works well. Contrast is also a good way to draw your reader
to and differentiate between different aspects of the page.
Colours also hold different meanings and associations for
people. Ensure that you know these meanings for the
audience that you are targeting – for example, red signifies
luck in Asian cultures, but danger in many western cultures.

There are some colour-related web design conventions you

should follow:

 Red is used for warnings, error messages and problems.

 Green is used for successful actions, next steps and
correct submissions.
 Blue is best used for hyperlinks.
Your Call to Action is one of the most important parts of your
website and can be displayed as a link or button. As this is
meant to attract the eye, choose a colour that stands out.

Figure: A Typical Color Wheel Illustrating Color Theory and

Psychology

 Fonts:
Copy conveys your brand message to your client or customer
and should be easy to read and search engine friendly. The CI
is expressed through fonts, also known as typefaces.
Typographic layout can draw attention to the content users
should see first. Indicate which pieces of information take
precedence. Importance can be signified by text size, colour,
weight, capitalisation and italics. Placement also contributes
to how important text appears.

Some fonts are common to all computer users. These fonts

are known as websafe fonts. Anyone accessing websites that
use these fonts will be able to view them as the designer
intended and search engines will be able to search these
websites easily. Fonts that are not web safe may appear very
differently on some computers. Designers don’t always like to
be limited to using only web-safe fonts, and brand guidelines
in most instances don’t take web-safe fonts into account. This
means that fonts must be embedded by a developer using
tools such as Typekit, or alternative fonts need to be
selected.

Examples of WebSpace Font:

 Arial Comic Sans

 Courier New
 Georgia
 Impact
 Times New Roman
  Trebuchet Verdana

Now, Let’s Talk About “WEB

DEVELOPMENT” Process
Web development is the process of taking finished web
designs and transforming them into fully functioning,
interactive websites. Development is what gives life and
movement to the static designs, and enables users to access
the website through their web browsers. This is done by
translating the designs into webcoding languages that can be
interpreted and displayed by web browsers.

Learning to code your own website is not in the scope of this

post and requires years of practice and some considerable
technical know-how. But this post can teach you to
understand the aspects that go into creating a website, the
process that should be followed, and how to help in making
key choices about your website.

When developing a website, you need to make three key

decisions (don’t worry, I’ll explain each one below):

1. Should your website be static or should it have a content

management system (CMS)?
 2. Which server-side language should be used?
3. Which front-end language should you use?

Question 1: Static website or CMS?

A static website, as the name implies, is one that does not
change often – other than the occasional update, the website
stays the same over time and no new content is added.
Should new content be required, a web developer would need
to add it.

CMS stands for content management system. A CMS is used

to manage the content of a website. If a site is updated
frequently and if people other than web developers need to
update the content of a website, a CMS is used. Today, many
sites are built on a CMS, which can also allow content of a
website to be updated from any location in the world by
signing into an online management interface for the CMS.

There are three types of CMS you can

choose from:

1. Bespoke:
This is a CMS that is built specifically for a certain website,
and many web-development companies build their own CMS
that they use for their clients. This option is highly tailored
and customised to your website, and can be more expensive
than other options. It is also possibly less flexible.

2. Off the shelf:

A CMS can also be pre-built by an external company or
developer. These can be bought like any other software on
the market. While this may have fewer custom features, it’s
potentially a more costeffective option than a bespoke CMS.

3. Open source:
There are many open source, pre-built CMS options available,
some of which are free. Open source means that anyone can
see the code that the CMS is built with, and can manipulate
or improve it (and share this with everyone else using the
CMS). An open-source CMS can be more rudimentary than
paid options, but is also easy to tailor to your needs, and
there is often a community that can create the solutions you
need.

Some widely used open-source CMS solutions include:

 WordPress (wordpress.com)
  Joomla (joomla.org)
 Drupal (drupal.com)
A CMS should be selected with the goals and functions of the
website in mind. A CMS needs to be able to scale along with
the website and business that it supports, and not the other
way round! Of course, the CMS selected should result in a
website that is search engine friendly.

Here are some key features to look out for

when selecting or building a CMS:
1. Meta and title tag customisation: The CMS should allow
you to enter your own meta tags for each page, as well as
allow full customisation of title tags for each page.
2. URLs: instead of using dynamic parameters, the CMS
should allow for clean URLs by using server-side rewriting.
Clean URLs consist only of the path to a webpage without
extra code (a clean URL could look like this:
http://example.com/cats, while an unclean URL could look
like this: http://example.com/index.php?page=cats). It
should allow for the creation of URLs that are:
 Static

 Rewritable
 keyword rich

Be careful when building clean, descriptive and dynamic URLs

from CMS content. Should you use a news heading (‘Storm’,
in this example) as part of your URL
(http://www.site.com/cape/storm) and someone changes the
heading to ‘Tornado’ (http://www.site.com/cape/tornado), this
will alter the URL and the search engines will index this as a
new page, but with the same content as the URL which had
the old heading. Bear this in mind before adding dynamic
parameters to your URLs.

3. Customisable navigation: a good CMS will allow flexibility

when it comes to creating the information architecture for
a website. For the purposes of adding additional content
for search engines, a CMS should not require that all
content pages be linked to from the home page
navigation. This allows content to be added for search
engine optimisation (SEO) purposes, without adding it to
the main navigation.
4. The CMS needs to have good support for managing SEO
considerations such as URL rewriting and avoiding
duplicate content issues.
5. Customisable image naming and alt tags for images: a
good CMS will allow you to create custom alt tags and title
attributes.
6. txt management: ensure that you are able to customise
the robots.txt to your needs, or that this can at least be
managed using the meta tags.
Finally, using a CMS that supports standards-compliant HTML
and CSS is very important, as without it, inconsistencies may
be rendered across various browsers. It also ensures faster
loading time and reduced bandwidth, makes mark-up easier
to maintain, supports SEO efforts and ensures that every
visitor to a website, no matter what browser they are using,
will be able to see everything on the website.

Question 2: Which Server-side Language

Should You Use?
Server-side languages are the ‘hidden’ web coding languages
that determine how your website works and communicates
with the web server and your computer. The most popular
server-side framework for each language is also discussed.
When choosing a server-side language, you need to consider:

 Cost: The cost varies depending on the language you

choose for your web development project, as the
language chosen directly influences the salary of the
developer. If information is processed where your website
is housed, as opposed to on the client’s computer, it
increases the costs. Some languages also require on-
going website management and maintenance, which is an
additional cost to consider.
 Scalability: When planning a project where scalability is a
factor, consider whether there are developers readily
available to develop in this language. Also find out if there
are supporting libraries and frameworks available that suit
your project. Some of the most common and popular
server-side languages include PHP, Java, Ruby and
 the .NET languages. Ask your web developer to advise
you on the best language for your specific project.

Question 3: Which Front-end Language

Should You Use?
Web users have come to expect rich, interactive experiences
online, and interactive website interfaces are a part of that.
Front-end languages, or “client-side” languages, are
languages that are interpreted and executed in the user’s
browser rather than on the web server.

These experiences range from simple animations through to

highly responsive interfaces that require input from the user.
There are several technologies available to create such
experiences, each with its own opportunities and challenges.
As with server-side languages, you need to consider a few
properties of the frontend language you want to use. Bear in
mind that server-side languages and frontend languages are
often used together, as all web projects require front-end
languages for development.

 Cost: Front-end language development costs are relatively

low.
 Features: HTML, CSS and JavaScript are open source
languages often used together and are compatible with
most hardware and software. Content developed in these
 is also more search engine friendly. Flash is known for its
video, animation and interactive multimedia capabilities.
In many cases, similar results can be achieved with HTML,
CSS and javaScript. Flash can be used alone or in
conjunction with other languages. What your end users
will be able to view should always be the most important
consideration.
 Scalability: Depending on the capabilities of the device
executing the language, certain features may not be
available or certain code may run too slowly to create a
good user experience. The front-end code needs to take
all the considered devices into account.
 Browser and OS support: With front-end languages, you
have to cater for browser and operating system support. A
website will look different on each browser and operating
system and this needs to be factored in. If a feature
cannot be displayed under certain conditions, work-
arounds have to be implemented.
 Open-source or proprietary software: Any developer can
create addons for or improve on open-source software,
while proprietary software is owned and its use is
restricted. It can be cheaper to develop in an open-source
front-end language such as HTML, but as HTML is needed
to host all web pages, combinations of the two are
sometimes used. In most cases and for the languages we
cover, however, this is not a major consideration.

There are several options to choose from when

it comes to front-end languages, although the
most popular by far are HTML, coupled with CSS
and JavaScript.
 1. HTML5:
HTML is the language for creating websites and HTML5 is the
fifth iteration of the language. It is also the name for a range
of technologies that enable modern web browsing features.
It’s a specification published by the web standards body
(W3C) describing what features are available and how to use
them. HTML5 is different from proprietary web software such
as Adobe Flash in that the specification is the result of
contributions from many organisations, and can be
implemented by anyone without having to pay for royalties or
licensing fees. You do, however, pay for the development
tools provided by the companies.

HTML5 allows browsers to play multimedia content without

the use of Flash or a similar plug-in. There is also a
technology called Canvas, which allows developers to create
rich interactive experiences without the constraints that
came with previous versions of HTML. For example, a 3D
animated video can now be played – something that used to
require the use of Flash or Silverlight. The goal is a website
that just works, without the need for particular browsers or
plug-ins to enable certain functionality. To this end, having a
standardised way of implementing common features means
that the web is open and accessible to all, regardless of
competency.

2. CSS:
CSS stands for Cascading Style Sheets and is a style sheet
language used to instruct the browser how to render the
HTML code. For example, the plain text on a web page is
included in the HTML code and CSS defines how it will
appear. CSS can set many properties including the size,
colour and spacing around the text, as well as the placement
of images and other design-related items.

3. JavaScript
This is the most common client-side language used to create
rich, dynamic web properties. Because it is an open-source
language, many developers have added functionality that can
be more quickly implemented. For example, there are over 1
000 different gallery systems created by JavaScript
developers for JavaScript developers.
 4. Flash
Adobe Flash is a language for creating rich, interactive
experiences. It supports video, and is often used to create
game-like web experiences. Although widely supported by
desktop browsers, it has limited (and lessening) support on
mobile devices, and is not usable on Apple devices such as
the iPhone and iPad. It has a history of being problematic for
SEO, although there are ways to work around much of this…

Developing a Website For Mobile

Experiences
It’s important for all brands to make themselves accessible
on mobile devices. Developing for the mobile phone requires
an understanding of the opportunities and challenges
presented by mobile technology. Challenges include the
obvious, such as a smaller screen and navigation limitations,
as well as more complex issues such as file formats.

Which mobile experience should you

create?
When creating a platform for mobile users to access your
content and brand, you have three options:

1. Mobile website
2. Mobile application
3. Responsive website

 Mobile websites make it possible for users to access

information about your brand on the move wherever they
may be, as long as their phone has a browser and an
Internet connection. Mobile websites need to be designed
with the mobile device in mind. Mobile website interfaces
demand a simpler approach, and a consideration of
screen size and input method.

 A native mobile app is software designed to help users

perform particular tasks. Examples include a tool for
checking the weather, a fuel calculator or a recipe index.
Mobile apps can be sold, or made available for free. There
are many developers who create apps in order to derive
an income, while free apps that offer users value are often
sponsored by brands or advertising. An app can be an
excellent tool for connecting with your customer.
The key difference between native applications and mobile
websites is that websites can be accessed using any Internet-
enabled mobile device, while applications are designed for
particular handsets and operating systems and have to be
downloaded to the mobile device. That said, mobile apps
generally allow for more integration with the device and
hence a better user experience, depending on the complexity
of the functionality. It is a good idea to focus on mobile sites
when targeting a broader group and building an application
when wanting to reach a niche or targeted audience.

 A responsive website is a website that changes its layout

depending on the device it is displayed on – it looks one
way on a desktop computer, but then adapts to the
smaller screen size and layout on a tablet or mobile
phone. In this way, a single development project can cater
for multiple device form factors.
Creating a responsive website means you only need to build
one website for the full range of devices, from desktop to
mobile. This can be a technically challenging exercise and will
require a lot of planning upfront to make sure that the site
displays correctly on each device.
Figure: A Typical Responsive Website Aligning in Various
Devices

DESIGNING A RESPONSIVE DESIGN

Responsive websites are designed for a range of screen
widths. When deciding whether to create a responsive site or
separate mobi and desktop sites, consider your customer
first:

 How much of your website traffic comes from (specific)

mobile devices? If this is a large percentage, consider
building a dedicated mobile site. Bear in mind that the
 popularity of particular mobile devices can change quickly
as consumer preferences evolve.
 Do your desktop users have the same goals as your
mobile users? If your mobile consumer’s goals are very
different, then you may want to consider building a
separate mobile site.
 What is your budget and how quickly do you need your
website to be built? Responsive websites take longer to
build and can be more expensive. You could save money
long term by going this route, but there is a sizeable
upfront investment.
 Do you have an existing site, and can it be converted into
a responsive website, or will it need to be rebuilt (Du
Plessis, 2012)?

STEP-BY-STEP GUIDE TO BUILDING

A WEBSITE
This section discusses the general process of building a
website from the client’s perspective. There are different
approaches to building a website and all follow almost similar
process. I’ve already discussed fully on “how to design a CMS
website using WordPress” and “How to Develop a User
Experience Website” fully in my Previous Posts. Please I
recommend you to check them out too. Well, these are the
basic steps you’ve to take when designing a website:

Step 1: Planning and Research

Planning a website starts with research: your market, your
users, your competitors and your business. If you already
have a website, you can use existing web analytics data to
understand how well you are meeting your users’ needs. It’s
also worth running some user labs to watch how users
interact with your existing site. Have a look at the Market
Research post for a detailed discussion on How To Conduct
Your Online Research.

Key questions you need to ask:

 Business: What are your business objectives? How should
this digital property help you to achieve those objectives?
(For example, should it generate leads for you to follow up
on? Is it an eCommerce store?)
 Users: Who are your users, your potential customers?
What problem does your website need to help them
solve? (For example, collate travel information in one
place, such as with tripit.com.)
This research helps you to plan your website strategically,
ensuring that it is aligned with both user needs and business
objectives. In research and planning, you should also reach
an understanding of what tasks (or actions) users need to do
on your website. These are usually in line with your business
objectives. Some tasks a user may need to do include
checking the availability of a hotel, signing up to a
newsletter, or printing information.

Step 2: Choosing a domain name

Domain names are important. They are part of the URL of a
website. A domain name looks something like
this: www.mycompany.com . But a lot more information can
be included in this. Domain names can carry the following
information: subdomain.domain.tld/directory.
 Domain – the registered domain name of the website
 Subdomain – a domain that is part of a larger domain
 TLD – the top level domain, uppermost in the hierarchy of
domain names
 Directory – a folder to organise content

The TLD can indicate the country in which a domain is

registered, and can also give information about the nature of
the domain.
 .com – the most common TLD
 .co.za, .co.uk, .com.au – these TLDs give country
information
  .org – used by non-profit organisations
 .gov – used by governments
 .ac – used by academic institutions
Domain names must be registered and in most cases there is
a fee for doing so. Many hosting providers will register
domain names on your behalf, but you can also do it yourself.
Domain names should be easy to remember, and if possible,
include important search keywords for your business. For
example, if you were building a website for your restaurant
named Omega, www.omegarestaurant.com could be a better
choice than www.omega.com as it contains the important
keyword ‘restaurant’.

Step 3: UX and Content Strategy

You also need to gather, analyse and map out what content is
needed on the website. This content is then structured in a
process called information architecture. A sitemap should
reflect the hierarchy of content on the website, and
navigation (how users make their way through a website).

Before a website is designed and developed, it should be

sketched out using wireframes. These should then be
reviewed by everyone involved in the web design and
development project to make sure that they are feasible, as
well as to identify new ideas or approaches for design and
development. It’s much easier to change track in the
planning and research phase than down the line when design
and development have started.

At the same time, consider what content you want to include

on your site – will it be a relatively static site that doesn’t
change often, or will you need an editable CMS to regularly
add and update content, such as blog posts, images and
products? (I’ve Discussed on Content Marketing Strategy,
Please Read More About Crafting Your Content Strategy In
Our Previous Post)
Should the website be large enough to require it, a functional
specification document should be created, using all the
information compiled so far. This document details the
development requirements for the website, and can be used
to communicate any specific design constraints. It’s now time
to move on from planning to building.

Step 4: Search Engine Visibility

Search engine traffic is vital to a website; without it, chances
are that the site will never fulfil its marketing functions. It is
essential that the search engines can see the entire publicly
visible website, index it fully, and consider it relevant for its
chosen keywords.

I’ll soon publish a post fully on Search engine optimisation

(SEO), but here are the key considerations when it comes to
web development and design.

When it comes to web development, the copy that is shown

on the web page needs to be kept separate from the code
that tells the browser how to display the web page. This
means that the search engine spider will be able to discern
easily what content is to be read (and therefore scanned by
the spider) and what text is an instruction to the browser.
Cascading style sheets (CSS) can take care of that.

My Next Post on Writing for Digital and Search Engine

Optimisation will provide details on writing copy for online
use and for SEO benefit.
The following text styles cannot be indexed fully by
search engines:
 Text embedded in a Java Applet or a Macromedia Flash
File
 Text in an image file (that’s why you need descriptive alt
tags and title attributes)
 Text accessible only after submitting a form, logging in,
etc.
 Text accessible only after JavaScript on the page has
executed

If the search engine cannot see the text on the page, it

means that it cannot crawl and index that page.

Step 5: Design
Design happens before development. According to the steps
explained earlier in this chapter, the designer will transform
the wireframes and basic planning materials into beautifully
designed layouts – these are static images that show how the
website will look once it’s coded.

Step 6: Development
The development phase usually kicks in once the design is
finished, although developers will sometimes start their
involvement as early as the wireframe stage by creating low-
fidelity prototypes to support the user-testing process.
Normally, the developer uses the design templates to code
the actual website, using the front-end language that you
have chosen. Server-side development and CMS
considerations may also be part of this phase.

Step 7: Testing and launch

Having planned an amazing site, designed it beautifully, built
it skillfully and filled it with fantastic copy, it’s time to test it
fully and then take it live! Testing is an important part of
website development and design, and it should take place
throughout the process of planning, designing and building,
leaving just final quality assurance (QA) testing before the
site goes live. Test subjects should be real potential users of
the website, not just members of the development team!

The site needs to be tested in all common browsers to make

sure that it looks and works as it should across all of them. All
links should be tested to make sure that they work correctly,
and it’s always a good idea to get a final check of all the copy
before it goes live. Tools such as W3C’s HTML validator
(validator.w3.org) should be used to validate your HTML.
Make sure your web analytics tracking tags are in place, after
which it will be time to take your site live. Now, you need to
move on to driving traffic to your newly launched site.

10 Tips for Getting Started on a Web Design Project

10 TIPS FOR GETTING STARTED ON A WEB
DESIGN PROJECT
Prev
How Different Companies Define the Role of UX When Hiring
Next
UXperts Weigh In: How Can Designers Support Diversity in Their
Organizations?
DESIGN

by Karol KPOSTED ON 08-20-2017

Adobe Products in this article
Getting started on a web design project can be intimidating. There are a lot of
moving parts, and clients tend to expect high quality. Goal identification,
scope definition, sitemap and wireframe creation, content creation, UI design,
testing the site, these are all the elements that the web design process most
commonly includes.

In other words, there’s a lot that could go wrong. And I’m not saying this to
scare you, but to let you know how important it is to come prepared, and to
always have your game plan ready.

“Don’t bring a knife to a design fight.”

So today, we’re looking into 10 web design tips that you need to keep in
mind when designing a website for your client. This goes for all types of
websites where a business is selling to a customer (B2C). Think e-
commerce stores, small business websites, product websites, and so on.

1. Set the Expectations Right

A web design project cannot be successful until you have defined what
“success” actually means.

Depending on how experienced your client is with the idea of owning a

website, they may or may not be able to articulate what they truly need.

This can be catastrophic later down the road. There’s nothing worse than a
client realizing mid-project that, “this is not what I wanted!”

That’s why it’s incredibly important to set the expectations during your initial
communication with the client. Here are 5 questions to ask:

1. What’s the value of this website for you and your business?
2. What do you want the website to achieve?
3. How do you want to measure the website’s success?
 4. Is the website an essential part of your business? Or is the website a
place to provide information on the company, an extension of the
brand (microsite), or a side project?
5. Who is the target audience? Who will visit the website?

Once you have the answers, prepare a document that will “sell” the client on
your proposed solution. Include that document with the contract. At this
point, you’ve limited the number of surprises that can pop up later on.

2. Define the Goal

This one is in direct correlation with the previous point. Quite simply, a
website without a clear, single goal has no chance of being successful.

The goal is something that you and your client should define together. The
goal needs to be clearly defined, measurable and achievable. Here’s an
example of a good goal for a website:

Option: A good goal for a website should be these three things:

 Clearly defined. E.g. “it needs to bring in sales.”

 Measurable. E.g. “it needs to bring in at least X sales a month.”
 Achievable. Not “it needs to bring in gazillion sales a month.”

And most importantly, a website should have only. One. Main. Goal.

3. Think Audience First, and Solve a Specific Problem

Goals are what your client wants to achieve with the website. Problem
solving is something that the website does for its audience.

“Let the audience know what’s in it for them.”

For example, here’s Dollar Shave Club:

The main purpose of this e- commerce website is to deliver new blades and
shaving accessories to people every month. The Dollar Shave Club’s
subscription based service solves the problem of having to buy those items at
multiple different locations. The website’s message and goal (buy now) are
clear. In order to convert visitors into customers, the designers created a user
experience and navigation focused only on the things their audience wants to
know when considering the subscription based purchase.

4. Put Content First

No amount of beauty can replace good content presentation. Content is king.

You should always be thinking about content because content drives
engagement, and engagement drives action.

As a web designer, the worst thing you can do is put beauty above function.
Or, as John Maeda says it, “spray-on design.”

Always start with the content that your client wants to showcase on the
website, and only then think how design can help make that content more
visible and resonate with the audience better.

For example, if you’re building an e-commerce store, you should think about
how you can make the products stand out rather than blend in with the rest of
the design. Here’s an example by Tessemae’s:
Notice how the products are the most visible elements on the page. Not the
header, or the menu, or anything else.

5. Respect Web Standards

Standards are great. Learn to love them. Don’t rebel.

There’s one main reason why standards are great: people – your audience –
have gotten used to them. Don’t make your user learn a new design language
to navigate the website. Make it easy for your users by implementing web
standards that they’ve already come to understand.

For example, every e-commerce store places the shopping cart module in the
upper right corner. They don’t do that because it’s pretty. They do it because
people expect to find the shopping cart there.

Here’s an example by Wrightwood Furniture:

Embrace other web standards, too. Such as:

 Logo in the top left (a Nielsen Norman study says that users are 89
percent more likely to remember logos shown in the top-left position).
 Consistent branding and look across the whole website (individual
pages shouldn’t follow different design patterns – something often
occurring with e-commerce stores).
 Contact in the top right or center (for example, as visible in the
screenshot above).
 Main navigation across the top and avoiding confusing menus (which
are annoying to the users, as another Nielsen Normal study shows).
 Value proposition and call-to-action high up on the homepage (making
your call-to-action highly visible guarantees better conversions).
 Search feature in the header.
 Sign-up box in the footer.

6. Make Navigation Simple

If people can’t navigate from point A to point B easily then the website won’t
be able to achieve its goal.

Therefore, your navigation design should require only the minimum amount
of information needed to get the user from A to B quickly.

Start by laying out the most important steps along the user’s journey through
the website. Make sure that your navigation helps them with that journey
instead of making things more difficult. Think how you can help the user do
what they already want to do rather than forcing them to see things your way.
Utilize website navigation best practices and know basic patterns of mobile
navigation for an optimized user experience.
Here’s a nice example by Ugmonk.com. Notice how the navigation is very
minimal, and only gives you a handful of main options. At the same time, it
makes it very clear what page you are currently browsing:

7. Focus on Mobile

Mobile is where things are at right now – from surfing the web and watching
media, to engaging on social media and shopping. Today, more people go
online on mobile than on desktop.

For this reason, you absolutely have to make sure that your website design
is mobile optimized, meaning that everything is completely operational on
mobile. “Completely operational”, means that all the features, including the
shopping cart, need to work flawlessly for a great user experience.

Here are two examples of websites with very good mobile optimization in
terms of the layout and how easily accessible all the UI elements are:
 8. Don’t Disregard Typography

When you’re in the trenches and working on the visual aspects of your
project, it’s easy to make typography an afterthought … just adding some
fonts to an otherwise “finished” design.

Please don’t.

These days, many quality web design projects rely heavily on typography,
basically making typography not just a design element but a design tool in
and of itself. Another great thing about good typography – and this is
something that relates to the previous point – is that it must work on all
devices.

Here’s an example by Bittermilk(viewed on desktop):

And on mobile:

Please notice how the choice of fonts, colors, spacings, etc. plays a role in the
overall look and feel of the whole page, and works well on both a desktop
and mobile.

9. Deliver in Batches
Designing in solitude is never a good idea. If you think that building
something behind closed doors and then revealing it to your client after X
amount of weeks will produce good results then, sorry, but you’re wrong.

Instead, divide the project in two or three main parts, based on the complexity
of the project, and deliver those pieces according to the set schedule. Each
time, get feedback from the client and adjust the rest of the process
accordingly.

10. Embrace Social Media

Just like mobile, social media is an ever-present element in the modern web
landscape. Don’t ignore it.

Whether we like it or not, or more accurately, whether your client likes it or

not, social media is where people are, and they will certainly be spending
way more time on Facebook than on your client’s website. So, use that to
your advantage.

It’s been reported that around two billion people visit Facebook every month.
For that reason, you absolutely have to build some social media integration
into your client’s website. By doing so, you’re making it more likely for
people to share the client’s content or products and thus helping others find it
by directing traffic to the website

Here’s a good example by The Colossal Shop (notice the small social media
buttons under the item’s price):
As much as The Colossal Shop would want for people to stay on their pages
indefinitely, they know that’s not a real possibility, so they provide handy
tools for sharing the word about their products.

What’s Next?

While we’ve only scratched the surface of what it takes to design a successful
website, follow these web design commandments to get you started on your
next project. Remember to avoid common mistakes, and that graphic
designers have skills that naturally translate to web design and user
experience.

Get tips for being a freelance designer, increasing your income as a web
designer and if you should offer additional services as a web designer. If
you’d like to see what other advice we have for you, feel free to hop over to
the Adobe XD blog.