Step 1: Multi-stage web design process

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.

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

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

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.

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.

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.

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.

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.

Step 7: Usability

Website usability is extremely important.

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).

Step 9: Standards-compliant

Perhaps the most difficult, time-consuming aspect of professional web design is making sure your website is standards-compliant.

Step 10: Optimization

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

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:

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.

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 is in there, along with many other highly-respected professional web design companies.