12 Steps to Creating a Professional Web

Design
Matt | Tuesday, January 22nd, 2008 63 comments

Before we share some of the necessary steps used to create a professional web design
and website, the following question must be addressed: What constitutes a
“professional web design”? More often than not, a web designer or web design
company claims to offer professional web design services for their clients. However,
should they be promoting “web design services” rather than “professional web design
services”? When measuring the professionalism of a web design and website, one
must take into consideration a number of factors/steps:

1. Multi-stage web design process

2. Project collaboration tools (if project has more than one person involved)
3. High-quality design
4. Attention to detail
5. Current web design technology (CSS)
6. Well written, interesting, grammatically-correct content
7. Usability
8. XHTML and CSS validation (clean code)
9. Standards-compliant
10. Optimization
11. SEO (Search Engine Optimization) friendly
12. Abuse of Flash, Javascript, and sound effects

To put it simply, what separates professional web design from web design is whether
or not a designer or web design company takes into consideration the above items
when designing and building a website. Other than paying for a respected companies
name and reputation, the items listed above are why professional web design services
tend to cost more than regular web design services - you’re getting a lot more than a
website - you’re getting the total package of web design professionalism that will
surely shine through once the website is completed and released to the public.

The good news is, you don’t need to hire a professional web design company or
professional web designer if you want a professional web design and website.
Although there is a great deal of work involved, if you’d like to attempt to do the
heavy lifting on your own, then the following professional web design tips will help
you create a professional web design and website.

Note: You might be wondering why a professional web design company would give
away their process and professional web design “checklist” for free. The answer is
quite simple: there is only so much time in the day, and unfortunately we can’t
professionally design every website in the world. The more high-quality, professional
websites there are in cyberspace, the happier we as professional web designers and
lovers of websites will be. To be blunt, there is just way too much junk out there. Lets
get started.
Step 1: Multi-stage web design process

We’ve already written an extensive article on the basics of a professional web design
process, so we’re just going to list some of the article’s key points for the sake of
avoiding redundancy.

Stage 1: Conceptualization and planning (flowcharts)

When designing a website, one should not begin the process inside of a text editor
(BBedit) or website builder application (Dreamweaver, GoLive, etc). Instead, the
process should begin on a piece of paper or within flowchart software. According to
Wikipedia, a flowchart is:

a schematic representation of an algorithm or a process.

In layman’s terms, a flowchart provides a visual chart illustrating the structure of your
website. How many main navigational items will your website contain? What will
these items be called? Will there be any pages contained within the main pages? What
will they be called? By planning out your website using a flowchart, you get a head
start on:

1. Information organization
2. Usability
3. Determining the volume of content required

Stage 2: Modeling (wireframes)

In the modeling stage, static “wireframe” mockups are created for each unique web
page. To create wireframes, one may use either:

• paper and pencil

• mockup software such as Adobe Photoshop or our personal choice,
OmniGraffle Professional

These wireframes contain a bare-bones skeleton which illustrate the layout of a

particular web page. Where will the logo go? Where will the content be located? Will
there be breadcrumbs? Will you have a login box? Each of these questions (and many
more) are answered in the modeling stage. A few things one should take into
consideration when creating wireframes:

• be sure to include all important elements that will be used (logo, navigation,
content placement, images/video placement, login box, search, breadcrumbs,
etc)
• reference the flowchart which you created in Stage 1
• don’t use graphics - wireframes are meant to be bare-bones:
boxes/circles/ovals which illustrate the placement of objects
• only use text to label the elements, don’t use body text (thats for the third
stage)
• focus on clean, well-organized, user-friendly layout; avoid cluttered layouts
Stage 3: Execution

The third stage in our professional web design process includes:

1. Creating the graphical user interface (GUI), also known as the design
2. Creating the content
3. Converting the web designs from images into code (markup) which web
browsers use to present your website on the Internet

In the final stage, reference both the flowcharts created in Stage 1 and the wireframe
mockups created in Stage 2 to create the final page layouts and designs. The design
should be finalized in Photoshop or whatever image editing software you choose to
use because it is a pain to make changes to the design once it has been converted into
markup (code).

Trust us, process makes perfect

Following a well-structured web design process is by far one of the most importance
steps that many web designers choose to neglect. By following a web design process
such as the one we’ve just described, you increase the likelihood that your website
will be well-organized, easily navigable, and user-friendly. If you’re going to skip any
of the items in our professional web design checklist, make sure that the web design
process is not one of them.

Step 2: Project collaboration tools

Note: If you are the only one working on your project, then you can skip this step.
Project collaboration tools are only recommended for projects which have two or
more people involved.

Communication is one of the most important elements in a project. When multiple

people are building a website, there usually are quite a few e-mails sent back and forth
between one another. The more e-mails exchanged, the longer it can take to find a
certain e-mail and the easier it can be to misplace important bits of information. This
was one of the biggest problems that our professional web design company faced
when we first began - there wasn’t an easy way to organize the e-mails, attachments,
milestones, etc.

Thankfully, after a little bit of research, we discovered a project collaboration tool

called Basecamp. Taken directly from the Basecamp website:

Projects don’t fail from a lack of charts, graphs, stats, or reports, they fail from a lack
of clear communication. Basecamp solves this problem by providing tools tailored to
improve the communication between people working together on a project.

Basecamp (and project collaboration tools like it) allows multiple users to access a
website which stores all of the messages, milestones, file uploads, to-do lists, time it
takes to complete parts of the project, etc. that are associated with a project. No more
sending e-mails. Everything is securely stored on the Basecamp servers. The only e-
mails you will ever receive are notifications whenever something is contributed or
changed within a project.

Basecamp has packages available that can be tailored to suit your needs. If you only
need to use Basecamp for one project at a time, then you can signup for free.
Unfortunately with the free version, there are no file uploads allowed. However, for a
measly $12/month, you can control up to 3 projects at once, have 250 megabytes of
file upload space, have unlimited people and clients, have a real-time chat that can
easily be integrated into Basecamp, and much more.

When it comes to project collaboration and communication, nothing beats a web

application like Basecamp. If you’re serious about your project and want to have the
best communication possible, then you must try Basecamp. A project collaboration
tool such as Basecamp is especially useful for a professional web design company
which handles a number of projects and clients at any given time. For project
collaboration, there is simply no better way to communicate.

Plug over.

Step 3: High-quality design

Who and what determines a “high-quality design”? There isn’t one answer. Often
times something that is appealing to one person may be extremely unappealing to
another. Despite this fact, there are several things that a high-quality design should
have:

• Balance. Balance refers to the equal distribution of the heavy and the light
elements on a single page.
• Unity. Unity keeps all of the similar elements in the website alike and those
that are diverse further apart; everything should be pulled into one integrated
whole.
• Emphasis. Emphasis involves the main points where the eye is drawn into the
design; also known as “focal points”.
• Contrast. Not just color contrast, but also contrasting shapes, sizes, textures,
and even typography.
• Rhythm. Also known as repetition, rhythm brings internal consistency into
your web design.

Since this is a broad topic and cannot be fully covered in this article, you can read
more about the five basic elements of web design.

In addition to these five basic elements of web design, information overload is often
times one of the biggest killers of a website design. Designers sometimes forget the
saying “less is more” and somehow seem to believe that the more information that is
stuffed onto one page, the better it will be. Don’t become a victim of information
overload. Keep your layout as clean as possible. Give different topics their own
dedicated web pages. One of the biggest causes for information overload is not
successfully planning out your website layout through the use of flowcharts and
wireframes, discussed above in Step 1: Multi-stage web design process. Remember:
white space is not necessarily a bad thing. As a matter of fact, white space is your
friend, especially when creating a professional web design. Successful professional
web designers learn how to use white, negative space to their advantage, and make it
a key element of the design.

Step 4: Attention to detail

When professionally designing a website, every little detail is thought out and
planned. Should there be a line above the headers, and if so, why? If you use rounded
corners for your main body, should you be consistent and use rounded corners for
everything else? Does your logo look better with a reflection underneath? The only
way to answer any of these questions is to experiment. Sometimes the best results
come from accidental experimentation. Don’t always be happy with the first design.
Work to improve upon the design and go through a few revisions, each time asking
yourself “What can be done to make the design look better?”, be more consistent, and
most importantly, give your website a stronger identity and image.

When we say “detail”, we’re not just talking about graphic design elements. No,
graphic design is just the tip of the iceberg. We’re also talking about typography (font
faces i.e. Arial, Verdana, Trebuchet MS, font sizes i.e 10 pixels, 12 pixels, 18 pixels,
font weight/style i.e. bold, italic, font placement), the use of negative space, and other
elements of design.

Attention to detail is important because it is oftentimes the details in your design

which make your website stand out from the competition (or from other websites in
general). People get bored with the same old design - give them something different,
unique, and attractive, and they will come back and visit. Heck, they may even
become inspired by your design.

Remember: Less is more. Use details, but don’t abuse details.

Step 5: Current web design technology (CSS)

CSS - also known as cascading style sheets - replaced table-based website layouts
years ago. The problem is, a lot of web designers are still using tables to create their
designs. Not only is this unprofessional, but tables just plain suck. Here are a number
of reasons why using tables for your web design is a bad idea:

1. Tables slow down your website. Everything inside of a table’s cell is loaded
before being shown to the user. This is especially apparent for people using
dial up connections.
2. Tables make messy code and add unnecessary junk markup. File sizes are
increased due to the excessive lines of code which means slower load times.
Also, having to sift through hundreds (sometimes thousands) of lines of code
just to make a change isn’t a lot of fun.
3. Universal layout updates are difficult and time consuming when using
tables. Making universal edits with tables involves opening each file, sifting
through the code and junk markup, and making a change (again, on each
page). Often times with CSS, all one must do is open the stylesheet and
change a single value.
4. Tables should only be used to show data, not be used to design websites.
 5. Tables limit your creativity and design. Table layouts are limited to boring,
grid-based layouts. With CSS, you can place anything anywhere. The layout
possibilities with CSS are endless.
6. CSS will save you time and increase your revenue in the long run. Updates
and edits are much easier using CSS than tables. Because of faster load times,
fewer visitors are likely to become impatient and leave. Longer visits = more
browsing, more ad-clicking, lower bounce rates = more money for you.
7. Display your CSS website on tons of high-quality CSS Showcase websites.
Tons of exposure if your website is featured. Table-based layouts are not
welcome. Complete list on listible.com.

Some people will argue that table-based layouts are better than layouts which are built
using CSS. However, oftentimes the person arguing that tables are better than CSS is
the person who spent thousands of dollars on a table-based layout. Despite what
anyone tells you, table-based layouts are inferior to CSS and should be avoided at all
costs.

To read all about CSS, visit w3schools.com. Again, to be blunt, if your website is
created using tables, it is not professional web design quality. Start using CSS
stylesheets today and keep the tables in your spreadsheet application.

Step 6: Well written, interesting, grammatically-correct content

One thing that greatly compromises the quality and credibility of a website is poorly
written, grammatically incorrect, misspelled content. This kind of content is
unfortunately present in an extremely high number of websites - especially
“professional” company websites.

If you don’t know how to write, then hire someone to write the content of your
website. You’ll thank yourself later. Even if you do know how to write, mistakes are
easy to make. Run through your content a few times to confirm that everything makes
sense, is interesting, and is spelled correctly. You’ll look more professional and people
will take what you have to say more seriously.

Step 7: Usability

Website usability is extremely important. According to usability.gov:

In general, usability refers to how well users can learn and use a product to achieve
their goals and how satisfied they are with that process. Usability, as defined by
Joseph Dumas and Janice (Ginny) Redish, means that people who use the product can
do so quickly and easily to accomplish their tasks. Usability may also consider such
factors as cost-effectiveness and usefulness.

If website usability is poor, then people can easily become frustrated and leave your
website. A great deal of importance must be placed on website usability if you want
your web design to be of professional quality. It is usually poor usability which
separates the regular websites from the professionally designed websites. Usability is
the most important element of a professionally designed website.
For a wealth of information regarding website usability, visit usability.gov and also
read our Dos and Donts of Website Navigation Usability.

Step 8: XHTML and CSS validation

Some people will argue that validating your website with XHTML and CSS
validation from W3.org is a waste of time. To be blunt, they are wrong (for a number
of reasons).

1. Accessibility. Without accessibility, you run the risk of being sued. For
example: a disabled person who cannot use a “conventional” browser can sue
you if your website is inaccessible to them. Although validation doesn’t
necessarily guarantee accessibility, it is an important component of exercising
ones due diligence and is reason enough that you should validate your
website’s XHTML and CSS.
2. Cross browser compatibility. The more validation errors your website has,
the higher the chances are that your website will not look the same in all web
browsers. We will cover the importance of cross browser compatibility in the
next step.
3. You look more professional with a valid website. Again, like having
interesting content free of grammatical errors and misspellings, having a valid
website makes you look more professional to your visitors. It tells them “Hey,
I care about my website’s image, I took the time to validate it”.

If you’re building a website for the first time, then you may find that your website has
a lot of validation errors. Don’t worry, this happens to the best of us. The more
websites you build and the more time that you take to learn the rules of validation, the
fewer errors you will get and the easier it will be to validate your website.

For more information about XHTML and CSS validation visit W3.org.

Step 9: Standards-compliant

Perhaps the most difficult, time-consuming aspect of professional web design is

making sure your website is standards-compliant.

Taken directly from Wikipedia:

Standards-compliant is a term often used in describing websites & user agents’ (often
web browsers) relative compliance with web standards proposed by the World Wide
Web Consortium (W3C)

In layman’s terms, if you want your website to be considered professional, then it

must look and function the same in all major browsers. In addition, achieving
interoperability lowers costs to content providers since they must only develop one
version of a document.

As mentioned above, creating a standards-compliant website will take a good deal of

time and can even involve using basic hacks in order for certain elements to appear
the same across all major browsers. Major browsers include: Internet Explorer 6 (IE6
-PC), Internet Explorer 7 (IE7 - PC), Firefox (PC and Mac), Safari (PC and Mac), and
Opera (PC and Mac). These browsers control the majority of the browser market
share and therefore the website which you create should be tested extensively in each
of these browsers to ensure standards-compliance. In addition, XHTML and CSS
validation (as mentioned in Step 8: XHTML and CSS validation) are extremely
important when programming a website to be standards-compliant. Validate your
website, validate your CSS stylesheet, validate yourself (okay, you can’t validate
yourself, but if you could, would you?).

Step 10: Optimization

Website optimization is another crucial factor that must be taken into consideration
when professionally designing a website. Website optimization includes:

• Image optimization. Next to audio and video, images can severely

compromise the speed in which your website loads. Always compress your
images using Photoshop or your favorite image compression utility. By
compressing images, you decrease the size of a file which allows a web page
to load quicker which ultimately decreases the chance that your visitor will
leave your website due to long load times.
• Audio/Video optimization. Another major annoyance which screams
“unprofessional” is having enormous video and audio files embedded in your
web pages. Try to use Flash Video (.flv) compression for your video files and
(.mp3) compression for your audio files. Not only are the file sizes smaller
than using (.avi) or (.mpg) for video or (.wav) for audio, but the video/audio
loads faster which means other elements on your web page will load faster,
too.
• Clean code (just say no to tables). In case you skipped Step 5, do not use
tables when designing your website - use CSS (cascading style sheets). Tables
have a ton of junk markup which will slow down your page load time,
increase file sizes, and make editing and updating quite difficult.
• Validate your XHTML and CSS. Although covered in Step 8, XHTML and
CSS validation is an integral part of professional website optimization and
therefore should not be skipped. Validate your XHTML and CSS.

Step 11: SEO (Search Engine Optimization) friendly

Professionally designed websites should be designed with a solid SEO friendly

foundation. To make your website SEO friendly:

• Don’t use Flash. If you must use Flash, make sure it is used sparingly. Flash
content is not crawlable by search engine spiders and therefore the content
located inside of Flash files cannot be indexed in the search engines such as
Google, Yahoo, MSN, or Ask.
• Don’t use Frames. Search Engine Spiders have a difficult time crawling
through a website that uses frames. Many Search Engine Spiders will receive
the following message when visiting a website designed using frames:

“Sorry! You need a frames-browser to view this site.”

 • Keyword Research. Optimize your web pages by including keywords
relevant to the content on your website. Use keyword research tools such as
Wordtracker or Overture to find the best, most relevant keywords for your
content.
• Researched Keywords in Title of web pages. Arguably the most important
element in SEO, make sure that your title tags include the keywords found in
the keyword research stage.
• Researched Keywords in URL. Be sure to include the researched keywords
in the title of your web pages as well. For example, if a page on your website
is about energy drinks, make sure that the file is saved as “energy-
drinks.html”. Use dashes instead of underscores, if possible.
• CSS Navigation/CSS Stylesheets. CSS navigation guarantees that your
website navigational text is crawlable by search engine spiders. CSS
navigation also loads very quickly and anyone will be able to view the
navigation using any browser.
• Researched Keywords in Anchor Text. For hyperlinks inside and outside of
your website, be sure to include the researched keywords in the anchor text of
your hyperlinks. This helps search engines better determine what a particular
page is about and will help that page rank higher with the researched
keyword(s).
• Images: ALT tags, no text in images. Not only are ALT tags required for
XHTML validation, but they are necessary components of web accessibility.
Try to avoid placing text inside of your images since search engine spiders
cannot crawl image text. However, if you must place text inside of an image,
use the text inside of the image as that image’s ALT tag. Search engine spiders
can read ALT tags, just not the text inside of images.

Step 12: Abuse of Flash, Javascript, and sound effects

The last step in creating a professional web design and website is to avoid the abuse
of Flash, Javascript, and sound effects. Not everyone has Flash or Javascript enabled
on their computer, and therefore your website should not be built around them. If
you’re going to use Flash or Javascript, use it sparingly.

Try not to use Flash Intros on your website. Most people hate waiting for Flash Intros
to load, hate being forced to sit through them, and hate being surprised by the sound
that many of them have. Do not create your website using only Flash. Again, what
about the users who do not have Flash enabled on their computer? That could be a
potential client, customer, or reader who you’re missing out on because of an
unnecessary technological limitation.

If you’re going to use sound effects, make sure that they only play if the user enables
sound on your website - never force sound effects onto your visitors. Nothing screams
“unprofessional” like having a sound effect play each time a navigational item is
rolled over or even worse, when the visitor lands on the home page of your website.

As a matter of fact, Flash and sound effects should generally be avoided when
creating a professional web design. Javascript is the only exception as long as you
program the website to work even if Javascript is disabled. Flash and sound effects
are a nuisance to a lot of people, so for that reason alone, try to stay away from them.
The recipe to professional web design

These 12 steps make up the majority of the recipe which many professional web
designers live by when designing websites. Of course, knowing the things that you
know after reading this article and actually being able to create a professional web
design are two very different things. However, as it does with anything, practice
makes perfect. Now get out there and start building a professionally designed website!
And hey, if you can’t do it yourself, go to Google and search “professional web
design”. Chromatic Sites is in there, along with many other highly-respected
professional web design companies.