Call us Toll-Free:
Email us


How to Design a Website (Process Flow)

Mike Peters, 12-19-2008
Helping so many companies design a new website or redesign an existing one, we're always amazed how most people approach the task of web design, all wrong.

Done right, the process of designing a website can be Fun, completed On Time and deliver the exact Results you are looking for. Over the years, SPI developed a unique process-flow that ensures the websites we develop, fit that profile.

It wasn't easy.

We tried a lot of different models, suffered our share of missed deadlines and pulled more "all-nighters" than we care to remember...

But it was all worth it.

We finally came up with a process flow, that works like a charm. Have been using it for the past two years and with this model, we can design/redesign the look & feel for any website, in two to four weeks guaranteed.

Here's how it works:

Step 1: Find another website you like

I cannot over-emphasize how important this step is.

Never sit down and simply start jotting your design ideas on paper. Take advantage of the time other companies have spent, testing and perfecting their design.

Look at as many websites as necessary, find the one you like the best and find 2-3 other websites you'd like to borrow design elements from.

This is not about copying or cloning another site. This is about selecting the style and design elements you like best.


Step 2: Sketch layout

Create a rough sketch of the first page, using the style and elements you liked most.

We are only going to design a single page. Stay focused!

You can sketch the layout with a pen of paper, or use your favorite paint program. It doesn't need to be pretty. All you want to do is clearly convey your target layout to a graphic designer.

Example of a sketch layout:


Step 3: Write web copy

Write the web copy to be included on the page. (Remember we're focusing on a single page right now)

You can always clean the web copy later, but the closer you can get to the final version (at least in terms of navigation items), the more time you'll save in the long run.

Stay away from Lorem Ipsum.

Step 4: Let a graphic designer draw a finished mockup

This is where the fun starts!

Send over your sketch, along with notes describing the site you liked best, web copy and the design elements you'd like to use from 2-3 other sites, to a professional graphic designer.

Don't get cheap. Done right, you should expect to pay around $1,000 per page. If you're a client of SPI, you'll end up paying a lot less, thanks to our economics of scale (Translation: We design LOTS of websites).

Example of a graphic design mockup:


Step 5: Cut images

Once you're happy with the mockup your graphic designer put together, it's time to begin the implementation.

You actually want buttons to work when users click on them, right? :-)

Before the work is handed over to the engineers, another designer has to go through the single image mockup and cut all unique graphic elements to individual images.

Buttons have to be cut to [left] [middle] [right]
Boxes have to be cut to [top left] [top] [top right] [left] [middle] [right] [bottom left] [bottom] [bottom right], etc.

Every image should be saved separately with a name that will make it easy for the engineers to understand what image it is.

Cutting images:


Step 6: Implement HTML + CSS

It's go time! As part of this step, the huge mockup image along with the individual images is handed over to the engineers for implementation.

Proper web design involves using CSS (Stylesheets) to render the look of the page, using the HTML for the sales copy and keeping it clean from any design elements (Translation: Don't use tables, Font tags, Image backgrounds in the html code).

Step 7: Rinse and Repeat 3-5

Not happy with the page look & fell? Go back to step 3 and repeat as necessary until you're happy with how the page works.

Step 8: Move to page #2

Congratulations! You've successfully completed designing a single page and can now move to page #2.

Since most sites share the same design elements across all pages, following our process to a tee, will help you save a lot of time.

Designing the remaining pages only involves using a graphic designer for the unique graphic elements of each page. The rest can be shared among all pages using templates (PHP / ASP / JSP)
Enjoyed this post?

Subscribe Now to receive new posts via Email as soon as they come out.

Post your comments

Note: No link spamming! If your message contains link/s, it will NOT be published on the site before manually approved by one of our moderators.

About Us  |  Contact us  |  Privacy Policy  |  Terms & Conditions