Nora Brown Design

The Website Development Process

1. Project definition

After a client contacts me about a website, I ask her fill out a questionnaire, and we then discuss her responses by phone. In this part of the process I try to discover:

• if she has existing marketing materials such as a logo, business cards, or a brochure, and if so, how she feels about them. (If the client doesn’t have a logo, I’ll often create one before starting the site design.)
• what types of content she’ll want on the site, and how it will be organized
• if she’ll want any special features on the site (common ones are blog, contact form, newsletter signup)
• who her target audience is, and what message she wants to communicate to them
• last but not least, what kind of look and feel she wants the site to have. We talk about other logos and/or websites she likes and dislikes and why, what color scheme she may have in mind, etc.

After these items are somewhat established, I prepare a cost estimate, and if the client approves, I ask for a deposit on the amount.

2. Initial sketches

I normally start a design with pencil and paper. I write down all the essential components of the homepage (header, navigation, footer, specific content areas), and sketch them out in different configurations.

3. Illustrator mockups

Then I’ll move to Illustrator (sometimes using Photoshop as well), firming up a few different layouts over a grid. I try to start broadly and then work into the details such as different color combinations, different fonts, flourishes or design refinements. Once I have two or three that I’m happy with, I export those as gif or jpg images—mockups of the site design. I then create a webpage to display the different mockups, and send the url to the client.

4. Client feedback

The client can view the mockups in a web browser. Unfortunately, these plain images don’t behave like a real website, in that they don’t resize to fit the browser window, they don’t have any links or rollover effects, and of course don’t display any proposed javascript effects or functionality. However, this is the fastest, most affordable way I have come up with so far to present design ideas.

Via email or phone, the client communicates her likes and dislikes about the designs. This can be “I don’t like any of these” or “I love all of these and I don’t know how to choose” or anything in between.

5. Revisions

Incorporating feedback from the client, I make revisions to one or possibly two of the initial designs. In rare cases, I have to go back to a blank drawing board, but more often than not this stage involves modifying color schemes, making small additions or subtractions, etc.

I again export the mockups and upload to the web for the client to view. If all goes as planned, we can then agree on a design, but sometimes further revisions are necessary.

6. Building HTML and CSS

Once the design is finalized, I export all the necessary graphics for the site (logo, icons, background images).

Then begins the process of putting together the html and css necessary for the site, which goes something like this:

1. create an html document for the homepage with all the necessary components, filled with actual or placeholder content
2. create the css necessary to achieve the basic layout
3. do some basic browser testing, and adjust as necessary
4. work on css for typography and design details, attending to styling for links, lists, blockquotes, etc.
5. more browser testing and adjustment
6. repeat above steps for a sample content page, contact form, and any other type of page the site will have (like blog page, individual posts, etc.)

7. Installing the CMS

This step involves setting up a database and uploading the files for the content management system (normally Textpattern), and then configuring the installation and installing plugins, and making sure all is working smoothly.

8. Creating sections and templates

I create all the necessary sections (for example about, contact, faq — these often correspond to the main navigation items). Then I build up the templates needed for each section and each different type of content (for example, a blog post with pictures, or an FAQ article).

9. Adding content

If the client has provided it to me (and hopefully they have, early on in the process), I then add all the text and imagery that will be used on the site. Depending on the original format, this can take a bit of editing.

10. Finishing up

I’ve made a checklist (which I’m still perfecting) of items I go through during this step. They include:

• Install Google Analytics code, and set client up to view her site stats
• Other stats package if requested
• Create/Submit and XML sitemap to Google
• Make sure footer is complete, with copyright notice and NBD link, if permitted
• Make sure SEO methods are in place, including:
  • Unique page titles
  • Meta descriptions
  • Meta keywords
  • Redirects
• Favicon
• Custom and helpful error page
• Final browser testing in: IE6, IE7, Firefox, Safari, Opera, and any adjustments necessary

Whew. So there you have it. Build a website in 10 easy steps! Of course, I always hope a website I create isn’t just set adrift on the Internet when it is “complete.” I provide screencasts for the client to help her keep it up to date, and am always game for updates, additions, and improvements along the way.