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:
Multi-stage web design process
Project
collaboration tools (if project has more than one person involved)
High-quality design
Attention to detail
Current web design technology (CSS)
Well written, interesting, grammatically-correct content
Usability
XHTML and CSS
validation (clean code)
Standards-compliant
Optimization
SEO (Search Engine Optimization) friendly
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:
Information organization
Usability
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:
Creating the graphical user interface (GUI), also known as the design
Creating the content
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:
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.
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.
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.
Tables should only be used to show data, not be used to design websites.
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.
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.
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).
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.
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.
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.
