Web Design Process


Web Design Process

Discovery

Where are we, and where are we going?

We'll start by sending over our Project Discovery worksheet – don't worry, it's not graded. But, it will help get everyone thinking about possibilities, requirements, deliverables, conversions, etc.

  • Requirements - These are clearly defined and measurable features or functions the website will perform.
  • Deliverables - Images, HTML Code,  essentially the substance of the actual end product.
  • Conversions - What do you want your visitors to do? Watch a video? Order a widget? Sign up for your newsletter? Buy you pizza? We design with your measurable goals in mind.

Planning

When and How? 

This is a bit recursive, as the whole processes is planning, perhaps it would be better titled "Scheduling, Communicating, and Coordinating."  Anyway, the point is that next we'll hash out some milestone dates to gauge how the project is going. We usually figure 8 to 10 weeks for an average website requiring 30 - 40 hours with 3 to 4 milestones.  True, we've designed and developed websites in 2 to 3 weeks; however, often times things will go overlooked when everyone is in rush mode. Trust us: plan ahead, take it slow, and you'll be much happier (us too).

Wireframing

Functionality and Organization

Think of wireframes as blueprints. We have a sample one here. Taking what we learned from the Discovery step, we'll put together a very basic wireframe with outlines and placement of major features and page layouts.

Design

Look and Feel

Now that we know what your website will do and how, we can begin to put some thought into what it will look like.

Years ago, the first thing we would do is create 3 mockups and have you pick one. The trouble is, we didn't know what you really needed, and you didn't know what you really wanted. We've learned from these time-consuming (and expensive) process, and now we plan and brainstorm with you a lot more.

Taking inspiration from the Discovery Worksheet and the approved wireframes, we'll build one mockup. Yes, one mockup. We do this because we can put more effort into creating the best one possible rather than splitting our effort into three mediocre mockups.

If you don't like where things are at, no problem, you get two revisions to get things just like you want it. Each revision can be a new mockup entirely or an edit to a current mockup.  

Development

"It's Alive!"

Now, because we're so smart, we can start some development work once wireframes are approved. 

As part of the development milestone we can send you a link to a testing site where you can visit and watch as your site is created over the next few weeks. 

QA / Testing

Cross the t's and dot the i's

By now you should see something that looks like the design mockup, and functions like the wireframes say it should.  However, like all complex systems, there can be bugs and small items that need to be tweaked before launch.

The following are areas we pay close attention to:

  • Check that all forms work properly
  • Test site visually in Safari, IE7 , IE8 and Firefox 3
  • Check for HTML Code validation
  • Optimize and combine code wherever we can
  • And of course, fix any bugs we find

Launch

Lets party

Wow, did the time go by that fast?  Now before we flip the switch, we like to do a final walk through with you. We'll also give some basic training for you on how to update the site and use any functionality we've created.