The 2 Out of Three Design Process

At 2 Out of Three we are passionate about good design. And we want more of it. So, why do companies like Apple or Google just “get it”? Where do they keep coming up with great products and software like the iPod or gmail? They certainly didn’t just appear out of thin air or even from a moment of Photoshop inspiration. Good design – be it for software or a physical gadget – comes from a good process. First the idea comes about, then a good design process develops that idea into a tangible product, and finally it’s executed upon. At 2 Out of Three we follow a design process in order to achieve something we’re passionate about. And we’re willing to let you in on our secrets so you can go out there and make more web sites and gadgets that we get excited to use.

Let’s begin by giving you a general idea of the steps we go through when we’re first approached by a client to create a web site. In this post I’ll concentrate on the big picture, walking you through each step of the design process. In future entries we’ll go into greater details about each step. You’ll be able to read about the reasons why we do certain things and the secrets we’ve learned over the years to create a high quality finished product and avoid disasters.

Step 1 – Gathering Information

In this step we work closely with our clients to determine what kind of web site they want built. Since websites can vary vastly in scope and functionality it’s important to hash out the details and possibly document requirements if the site is complex. This will typically take anywhere from 2 to 10 hours depending on the range and intricacy of the web site.

Step 2 – Site Map

A site map comes out of the initial gathering of information stage. It helps everyone visualize what is going to be built, it’s scope, and the flow of the site. A site map also gives the design team an idea about how to work with elements such as navigation and other key pieces of functionality.

Step 3 – Wireframes

Wireframes are simply layouts that give a general idea about the layout, functionality, and content of each page. I have always found wireframes an extremely valuable step that is often over looked. Ideally wireframes will be absent of all artist and graphic designs. The lack of a visual look and feel to the wireframes is done on purpose in order to help both the design team and the client concentrate on content and functionality. It’s often difficult to tackle the challenge of formulating an aesthetic design and functional design during a single round of feedback. This stage typically takes 25 to 30 hours of work over a few rounds of feedback but can very greatly depending on the number of pages and functionality required by the site.

Step 4 – Aesthetic Design

When we get to the aesthetic design phase everybody gets excited. At this point in the design process we develop an artistic look and feel for the site. This encompasses a number of features including color scheme, fonts, and graphic design. We typically present our clients with two or three initial designs and then work through a couple of iterations to focus in on the final look of the site. Similar to the wireframes stage aesthetic designs typically take 25 to 30 hours of work over a few rounds of feedback.

Step 5 – Development

Once the design has been approved the actual coding begins. At this point we fire up our text editors and start writing XHTML, CSS, and PHP. The amount of time in the development phase varies vastly depending on the functionality and complexity of the site. As a ballpark figure, most sites will take 15 to 20 hours of work.

Step 6 – Configuration

Our site is all coded and now we need to get our production environment (servers, databases, domain names, etc) configured and ready for the real world.

Step 7 – Testing

We’re getting close now. But, before we jump the gun and tell the whole world about the new site we need to spend 3 or 4 hours testing all the pages and features – using all appropriate browsers and operating systems.

Step 8 – Launch

We’re done. Slap an alpha marker on the site and send out a launch email to everyone we’re live.

So that’s the 2 Out of Three design process, various modifications have helped us create everything from video game user interface’s, photo shoots, and of course websites. We’d be happy to answer any questions you have about how we do our work. Leave a comment or email us.

Photo credit: ieshraq for Ideas r Bulletproof