The 8 Steps of Website Design

THE EIGHT STEPS OF WEB DESIGN

One common question I get, is how a website job should be planned and executed – what are the steps? The following is a quick outline of the process that I have been using for years with good success – at least most of the time.
:)

THE 8 STEPS OF WEB DESIGN

The steps:

1. Figure out what the focus of the website will be.
2. What specific features do you want in the website.
3. Create a list of sections for your website and give them a hierarchy of importance.
4. Write out your content and finalize it.
5. Find a style / look that meets your website’s and your industry’s requirements.
6. Build the website.
7. Evaluate the website and make the required changes / updates.
8. Go live – register a domain, find a host, upload the website.

1. THE FOCUS OF THE WEBSITE

This is the first thing you want to define clearly before any other step is taken. You need to decide what the main purpose of the website is - what you want to focus on in terms of a subject.
It is important that you define this step as clearly as possible because a website’s focus has a major impact on the whole project; this is the ‘foundation’ of the site.

For example:

- A web store.
- Information hub for established clients.
- Branding website.

2. SPECIFIC WEBSITE FEATURES

This builds off of the first step, where now you look at actual features that you need to implement. For example:

A shopping cart for an online store
A password protected section of the website

Again, the more detail the better.

3. MAP OUT THE MAJOR SECTIONS OF THE WEBSITE

With the first two steps completed, you’re ready to actually start mapping out the major sections of the website; drawing out quick diagrams of the website is a useful way of doing this.

A diagram can easily show the hierarchy of a website and how the various sections are related to each other.

4. WRITE OUT YOUR FINAL CONTENT

This part is usually left to the end … then people wonder why they have to go back and rethink the structure of the site.

All websites are driven by content; it’s the content that makes a site effective and successful. As such, this part of the process is arguably the most important, so you need to pay attention to it.

5. FIND A STYLE / LOOK FOR THE WEBSITE

At this stage of the process, you are ready to start looking at the visual aspect of the site – the design. You have a few options:
- Hire a graphic designer / web designer
- Come up with your own design – I’m assuming you have some artistic and design experience.
- Buy yourself a website template and save time and money.

6. BUILD THE WEBSITE

Yes, I know it seems impossible but you can finally start building the actual site at this point!
With the above questions answered and steps completed, you’ll find the process of building the website (actually writing out the code,) is much easier and you will have reduced the chance of having to go back and redo things.

7. EVALUATE THE WEBSITE, MAKE THE REQUIRED CHANGES / UPDATES

Once you've built the website, you should walk away from it for a day or two. This will allow you to come back and evaluate it with fresh eyes. It might also be a good idea to get someone who has not worked on the site, to take a look as well.

Here are some of the things you should be looking for:

- Clean easy to update design/structure.
- Good usability in the design - and all that implies.
- Fast loading 'light' pages.
- Intelligent use of technology - using Flash when it makes sense not because you want a 'cool' intro!
- The website’s ability to convey the meaning/message of the website quickly if not instantly.

8. GO LIVE – REGISTER A DOMAIN, FIND A HOST, UPLOAD THE WEBSITE.

If you’ve passed steps 1 to 7, you know you're ready to show the world the website. All that is left to do is go live:

- Register a domain
- Find a hosting company
- Upload the website

WEBSITE DESIGNER SECRET WEAPON

Introduction

Website templates (web design templates) can be an excellent tool when building a new web site; a tool that can speed up the production schedule, improve the quality of the final web site and just make the whole process of building a web site much easier.

A fast way to build quality web sites

Now that the web has matured, the experts have discovered what works and what doesn't work when it comes to web site design. Out of this experience come web templates; web site designs that have been tried and tested.

As with building a house, there is no longer a need to reinvent the wheel with every project - today you can select a web design template and get your website online fast!

Don't reinvent the wheel!

As a software architect and programmer, I can tell you that a core rule in that field is to not reinvent the wheel. This basically means that if someone else has built it already, you should use it! You are wasting your time and money trying to recreate things from scratch.

Fortunately you can now select from a huge collection of proven web site styles that you can use 'out of the box' or use the web site template as the foundation to your own creation.

My own experience

I've been creating web sites since 1994-95 and have seen and tried just about all the possible ways of approaching a web project.

In the early years we would create all our web sites from scratch; this was a slow, tedious and expensive process. Besides trying to make the web pages look good, you had to figure out how to make it work with all the browser and within the limits of your potential visitors' computers:

Will the web site end up being fast enough for people on slow modems?
Will it work with Netscape and Internet Explorer?
Can we fit all the required sections so it works in an 800x600 screen resolution?

In those days I was not to keen on website templates because I wanted to produce an 'original web site'. But I always discovered that the web site ended up looking like other web sites already out there!

Why was this happening?

It happened (and still happens) because web developers have figured out what works ... and they do it! In the same way that the automobile industry has figured out that a car seems to work best with four wheels, web designers over the years have figured out the best way to structure and design a web page. As such you're going to see most web sites work with the same handful of proven designs and styles ... given a project's needs.

The web site designer's point of view

If you try hard enough, you can probably come up with some funky style for a page with for example, a new wacky navigational menu. The problem is that everybody expects to see a web page layout follow certain basic rules; navigation sections have to be arranged in a certain way, links have to look a certain way ... being consistent makes the web site easier for the visitor to use.

No worries, you can still be original within the context of a template; people do it all the time. The web site template serves as the framework for designers, where it eliminates the grueling structural work and frees you to develop the subtlety of the web site's style.

With so many web site templates to choose from these days, you are almost guaranteed to find the basic style and layout you are looking for. You can then build off of that, speeding up the process - makes good sense for you and your clients!

The business point of view

Web site templates save you time and money; the production cycle of a web site project is at least cut in half when you use a web site template. Another advantage of using templates is that you can show the web site designers what you want rather than trying to describe it to them. The reverse is also true where the designer can show the client several templates that he/she can choose from - this alone will always be a great tool!

I have also found over the years that most people don't really know what they want until they actually see it. Templates allows the business owner to identify what they really want in a web site and actually buy it right there and then. They can hand the template off to the web designer for the personalized touches.

Even the great artists develop a 'template' of their own

This is just a side note, but it may be worth considering:

Artists typically become known for their style, this style is consistently applied in their work and it defines their careers. Picasso is one such artist; if you look at any of his paintings, you can clearly see that it's a Picasso.

Other examples are found in the music of the Beatles and the Rolling Stones; you may have never heard a particular song, but their styles are so well defined you instantly know whose song it is.

An artist's style is really just a template of what works for them. In a sense, an accomplished artist creates his or her own design template and then applies it to their work.

THE DO'S AND DON'TS OF WEBSITE DESIGN PART 1

THE DO'S AND DON'TS OF WEBSITE DESIGNING

Let’s discuss an important point about online content/text versus print. People read text on a computer screen at about 1/4th the speed that they do on paper. This important fact tells us that we should keep what we want to say on the web short and sweet. If some of my articles have been too long, I apologize for my flapping mouth and keyboard!

My goal with Killersites.com is to teach how to build great sites while making it as easy as possible for people. I’m trying to do this with ‘to the point’ articles and newsletters. As such I have avoided a diatribe of things like the history of HTML and left out some of the marginal options in web design. Instead I've focused on those things that have come up often in my own experiences over the years.

There are many options available when creating web pages, many good and many bad. The following is a list of some of those options and how I think you should deal with them.

Some things you should do and not do in your web pages:

1. No page counters: Page counters do nothing except make you look like an amateur, mess with your design, and tell people information about your site you probably don’t want them to know! If you want to know how many people are hitting your site, just ask your host for server stats. Any host worth it’s salt should be able to provide you with detailed stats that make page counters look stupid.

2. Forget blinking or flashing text: The only place you see blinking and or flashing text is on the neon signs of naked bars or web sites made in the mid 90's! People don’t like them and expect to see naked people inside sites or buildings that have them … enough said.

3. Make your titles on your web page make sense: One of the core attributes of a web page is its title. In between the tags you can specify the page's title as it appears in the browsers top title bar and in the search engine results.
People pay attention to page titles, so you should make sure that they are clear. If you have a page on how to take care of dogs and you happen to have a dog named ‘Jimmy’ don’t title your page: ‘How to look after Jimmy and his furry friends.’ You should title you page something like: ‘How to take care of dogs.’

4. Don’t force people to download a new browser of special plug-in to see your site: Unless you have a site that people are dying to see, why limit your audience because you want to use some special features in a browser or a plug-in like Flash. Today, with proper use of CSS and HTML, you can present fantastic looking pages without having to jump through the hoops old timers like me had to when garbage browsers like Netscape 4 were being used in great numbers.

5. Think twice before using framesets: In the olden days you could argue a use for framesets because of HTML’s lousy layout capabilities. Today with CSS positioning being well supported by all the major browsers there is no need to use framesets for just about 99.9% of websites. Why don’t you want to use framesets you ask? Well beginners tend to have trouble creating and using them properly. Framesets tend to make websites more complicated than they need to be and finally they can cause you all kinds of problems with the search engines.

6. Don’t try any stupid cheat tricks in an attempt to fool the search engines: In the past we webmasters developed various nefarious (disreputable) methods in an attempt to get higher rankings in the search engines. Tactics included putting hundreds of key words on the pages as invisible text, etc … These tactics may have had some limited success in the past, but those days are long gone. Try to fool Google (the king of search engines) and you and your web site will die a horrible and painful death! I will not describe how to get high rankings now, but keep this is mind: good content honestly presented is the foundation of high rankings and high traffic for your site.

7. Chat rooms: Most people don’t give a crap about chat rooms. And worse than having a chat room is having an empty chat room! Who wants to hang out at a club that has nobody inside? So unless you have a web site with tens of thousands of visitors a month and is of a subject that might necessitate a chat room, don't do it.

8. Flash intros: I am guilty of this as much as the next guy. A few years back Flash intros where all the rage, not sure if anyone knew why we ‘needed’ them, but as it turns out the ‘skip intro’ button is the 2nd most clicked on the web today. Don’t waste your time on Flash intros and in my opinion Flash should only be used in special situations.

9. Under construction pages: Just forget it, if the page is not ready, don’t put it up. If you have links that are pointing to the pages, disable them until your page is ready. If your page is truly ‘under construction’ and has content on it that is ready to be seen by your web surfers, just post a ‘last updated’ date and make sure you get the new content in place soon. What ever you do, don’t put one of those cheesy ‘under construction’ images on the page.