Below is a before and after screen shot of the soapfairy.com web site I designed for The Soap Fairy, Inc. a company located in Delaware that produces handmade soaps and lotions.

The original site was very much a first generation site (similar to sites produced in the late nineties), and was well past its prime. The owners recognized this and wanted a professional looking site that was much cleaner and more user friendly than the existing one. The after image depicts a screen shot of the redesigned home page for soapfairy.com.

MAJOR OVERHAULS

• A new clean, professional, design.
• Organized the products to make shopping easier.
• One click access to products and specials.
• A new flash navigation with tiny bubbles.
• New soft, colorful, photography of the products.

BEFORE:

A busy background, oversized logo, and large bold copy made the original Soap Fairy site look unprofessional. As this is an e-commece web site it needed a more professional look to build customer confidence.

AFTER:

Generous white space, soft photography, and pastel colors all add to the charm of the redesigned soapfairy.com. The main graphic loads randomly to promote a new product every time a customer refreshes the web browser. I also added small icons highlighting specials and “The Soap Dish” newsletter.

LET’S GET ORGANIZED

My first step in any web site design (or redesign) is to organize the site structure hierarchy. I build a chart showing every page in the site and how they link from the home page. This hierarchy is the road map for the site, it helps organize the information within the site. Below is a depiction of the soap fairy site hierarchy, I used this to organize their existing content (and some newly written copy) into a user friendly structure.

Ths site map is a road map to the entire web site. It starts with the homepage and expands in levels to determine the amount of pages needed for the site. It also helps me organize site content.

THUMBNAILS & ROUGHS

The next step in web site design is to develop thumbnails and rough sketches of the major pages in the web site. I will typically work through two or three rounds of rough sketches before beginning any computer designs. My final rough is a detailed drawing of the site mapped out on graph paper (below), this is a guide (in pixels) for me to use when determining how large graphics need to be to fit on a users screen.

A sketch of the hompage details the dimensions of each element in the design. It was the blue print I used to build the home page on the computer.

PHOTOSHOP

Using graphics and photos supplied by the client, I developed two to three layouts of the homepage and a secondary page in photoshop, at actual size. I present these layouts to the clients online allowing them to choose between three different looks for the site, or combine elements from all three designs. After they chose a look for the site, I moved on to developing the individual graphics and web pages.

SKELETON KEY

With the site design approved I moved on to developing a skeleton of the site, this is basically a first draft of the site. This is intended to show the client how the navigation will work and what content we have and what content we still need. I put in place all of the images I have and used stock shots to fill in areas I felt they needed a photo.

BUILDING THE SITE

After getting feedback on the site, making changes, and collecting the missing content from the client, I moved on to developing the final web pages. This site was a challenge as it is an e-commerce site and the client has a huge assortment of products. More products means more pages. The final site ended up with almost 75 pages, a decent sized site for one person to design and program!

BASIC TRAINING

There was no deal to maintain this site, that was going to be up to the client. The very last stage of this project was to teach the client how to update and maintain the site. This consisted of two day-long training sessions, I taught the client how to update every section of the Soap Fairy web site using both Dreamweaver and Photoshop. It was a fun experience and was great training for my teaching career starting this fall.