How to develop a website from idea to launch?

After answering start-up questions and defining goals, we will now spend some time

on the website development process.

Note: The following text is written with client-developer relationship in mind, but is extremely useful for everyone who wants to learn basics of website development process.

1. Gather Information and prepare a plan

First phase of every new site is about gathering as much information about new website as possible, and organizing it into logical form. You need to think how you are going to structure things. What is the most important element, what is second most important?

Your goal of this first phase is to prepare a visual sitemap (hierarchy of pages) and to draw a mockup (sketch on paper). These two things are your input for developing a wireframe.

2. Create a Wireframe

Wireframe is a working model of your website without any graphical elements. It is used to indicate navigation, elements and their function, before single line of code is written and before any color of design is chosen. In practice it can cut costs and time by 40 %, because it eliminates unnecessary revisions. You can create it in Adobe Illustrator CS3, Adobe Photoshop CS3 or Adobe Fireworks CS3 (these are links to programs on amazon, but you can use any program you want) - it is up to you, but it is something I warmly recommend to do for every website.

3. Planning Content

Based on sitemap and wireframe, start planning how text will be asserted on new site. This phase is done together with a client, who is usually responsible for producing content. My experience shows that this phase causes most problems, because of inappropriate text length, spelling mistakes, biggest workload for client and so on. To handle it properly, you need to prepare a good specification and explain it to your client.

4. Web Design

While content is being prepared, you can focus on creating a base design. The initial design usually consists of homepage and typical, sub-level page. Scope of web design covers defining graphical elements (typography, colors and imagery) and developing user experience. You can create a design in Photoshop or Fireworks (check links above for details), both are very good tools. Even if you are not a web designer, you can still create a supreme looking website. You can hire a professional web designer or buy web templates.

5. Building Pages

After client has confirmed web design, you can start "slicing". Design needs to be converted into HTML and CSS (Cascading Style Sheet), which defines how HTML document should be formatted. Again there are many ways to do it even if you are not good at programming. You can hire a template slicing service that does it for you. Or you can build your site with CMS (Content Management System) like Joomla , Wordpress , Typepad and others.

6. Debug until site is ready

After presentation to your client, site will surely need some corrections. In this phase, it is time to get your team on board and test new site extensively. You need to test your site in different web browsers, operating systems, on PDAs, even mobiles. Make sure you set aside a day or two before launch to do that. Webweaver lists a few popular website validators.

7. Launch

Make a final check before launch, get your team on board and cool down some champagne! You have earned it! In the next week or so, watch closely what happens with new site and be prepared to fix things if necessary.

Further Reading:

Check this one of a kind website development article by Japanese Author Koji Ito. He uses funny pictures to illustrate process of creating a website. It made me laugh because I found some things to be so true when managing a project...:)

EasySiteGuide Recommends:

Deliver First Class Web Sites: 101 Essential Checklists

by Shirley Kaiser. Excellent book powered with inspiration and motivation tips that will help you get in action. After reading this book you will be able to produce modern, user and browser friendly websites. Shirley covers everything from colors, navigation, information architecture and usability. Really handy reference to have at your fingertips even for more experienced webmasters.