Creative Process

I have always been fascinated by the process behind the development of any product. From a website to a snowboard their are so many unique and creative steps that go into creating the final product. At 2 Out of Three we want to help you understand the general steps that we go through when we design and develop a web site, or any user interface. These steps are a broad overview of a process that has served us very well weather we're working on a video game user interface with a 150 plus development team or working with a friend to design their personal web site.



1. Scope and Define
Ideas make the world go round.  And their is nothing better than seeing you're idea go from nebulous thought and into a finished product.

The first thing we need to do when a client comes to us and ask us to build a web site is to dig a little deeper. A web site is such a broad term and can cover everyt.hing from graphic design, to application development, to transaction processing. It's important to understand what our client wants and if we can even build it for them. Do they want an online store akin to Amazon.com which would require extensive application development or do they want a slick online brochure with Flash transitions.

Once we have an overview of what the client wants it's time to get into the nuts and bolts. A simple site or a logo design may only need a short creative brief. More complex sites that requires application development will require a more in-depth requirements doc be written to help define it's functionality. A key reason to document a project is to ensure that both the client and the developer can have the same expectations and avoid any potential problems or "scope creep" down the line.



2. Doodle & Design
It's important to seperate ascetics and functionality - most people have trouble seperating the two when they are giving feedback.  That's why we create wireframes before we create an ascetic design.

The scoping and requirements process in phase one defined what we are going to design and got everyone on the same page. The second step is creating a framework for our project using wireframes. Wireframes are exactly what they sound like, simple drawings for each page in our site that illustrate layout, organization, and flow for the project. Creating wireframes helps us better understand the location of all the content in the site, refine our navigation, and gives the client the chance to make structural changes to the site before any design elements have been introduced. It's always quicker and cheaper to make changes to a site at this stage. I personally find this to be a key step in the process of creating a site. If I can understand the content and navigation at this phase I am more likely to create a design that successfully combines ascetics and functionality.

Now that we know more about our content, navigation, and layout we can begin the aesthetic design phase. We typically create at least three different initial designs in order to play with things like color scheme and artistic direction. Both good and bad designs help us narrow down the direction we are going, and after a couple of rounds we pull the good parts together in one design that excites our client.



3. Develop and Iterate
The core skills of design are synthesis, understanding people, and iterative prototyping. - Bill Moggridge

The planning is done, requirements have been detailed, designs have been approved, all that's left to do is to actually build the site. Let the heavy lifting begin. All HTML, scripting, Flash, and image production occur at this stage. Once the initial implementation of the project is complete it's important to go through the site and find out what works and what needs improvement. No matter how much time you spend planning a design there will always be features you did not implement, bugs you missed, and aesthetics that can be improved. By iterating on our sites before and after they launch 2 out of Three ensures we deliver top quality designs and features in all our projects.



4. Test and Release
Test and Release

When development is complete it's important to kick the tires before letting the whole world know about the site. In addition to our own rigorous testing process we like to have a group of outsiders beta test our site and provide feedback that we can incorporate into the site to improve the overall experience. Collecting information from users who have never viewed the site before helps us polish and refine features to ensure the final product will be a success.

Release, the final stage in the creative process. Files are uploaded to the production servers, DNS entries are configured, domains begin to resolve to right place and everybody is nervous with anticipation as they read over the latest version of the marketing email announcing the new site. Hit send, hope you don't have any typos, open a nice bottle of wine and watch the traffic roll in.

Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 3.0 License