Step 1: Wireframe

Building a wireframe, or site map, is a simple but essential step. In short, we must determine what a site will consist of. How many pages will it contain? Does it include a shopping cart or downloadable documents. If you were building a house, this would be like saying 'We want a 4-bed, 2.5 bath house in 2000sq ft. plus a 2-car garage.' In practice, a wireframe usually takes less than an hour to complete and we don't charge anything for our help on this step.

Step 2: Proposal

Once a wireframe has been built, we can start building an estimate for the project. That estimate will often explore multiple ways to approach various challenges, define the technical requirements for the project, and look forward to future goals and maintenance. Keep in mind that the proposal is built based on the wireframe. If you decide to add or remove items from the wireframe, the estimate will need to change also. Again, this doesn't cost any money, but it can take time.

At this point a signed proposal and a deposit are typically required. Depending on the details of the project, this may be 1/3 or 1/2 of the total estimated cost.

Step 3: Graphic Design and Copy Writing

Before we go here, it's important to make an important distinction. Code-Monkeys is not a graphic design shop. We build the thing while somebody else determines how it will look. That said, we work with a wide variety of graphic designers, each with their particular specialties and styles, and regularly bring one of them in as a sub on projects that need it. However, if you have your own designer their process may not be like ours...at all. But the point is, we'll need a finished comp before we move to step 4.

The graphic design phase of the project will follow this basic pattern:

1. Initial comps: consists of 2-4 rough comps based on the designer's consultation with the client. The client will select one of the comps to refine, or suggest a combination of various elements from multiple comps to recombine into a second phase composition. Major changes to the proposed comps should be voiced in this phase.
2. Refine: Based on phase 1 results, one new, refined comp will be delivered that seeks to incorporate the suggestions and desires of the client. The client can then request fine-tuning requests, but not major alterations.
3. Final Comp: A final, fine-tuned comp will be delivered based on the feedback from phase 2.

Each review period will be limited to a maximum of 14 days. If the approval/re-work cycle extends outside of this structure, a change order and additional charges may be added. This is at the discretion of the desire and the client will be notified if any work would constitute a change order before the work is done.

Concurrent with the design portion, we will need to collect all photography and copy (text) for the site. For many, this seems like it should be one of the final steps, but from our perspective, the text contained in each page significantly effects how we build various elements, and the formatting of that text is one of the more labor intensive portions of our job. More to the point, we don't want to do any page twice if we don't have to. To see an example of a typical copy brief, download this document.

Step 4: Mockup

Once the client has approved a final design we will construct a "pixel perfect" mockup of the entire site/application, including all back end administration screens. All static pages will be set into their final version in this phase, while all dynamic or data driven pages will appear with sample data.

The mockup phase is one of the most important parts of the process. It's here that a wide variety of necessary, but less than obvious details get defined. What fields are required on a form? When you say "name" do you want one name field, or both a first and last name field? What about a middle initial? It's here that we build all JavaScript functionality and all the HTML elements needed for the display of the entire application. When we are done, every clickable element of the site will be operational.

It is important that the client pay close attention to the fine details of this mockup including text formatting, page flow and design implementation. This mockup will be used to materially inform the final buildout phase and changes made after the mockup is closed are likely to incur significant additional charge.

Once the mockup phase has been delivered, a second invoice will be generated and the you'll have the opportunity to review and make change requests to the mockup. This review period will extend a maximum of 30 days, at which time Code-Monkeys will proceed on to the buildout phase. But during that review period, we're waiting on you and the official development clock isn't ticking. Also keep in mind that this should be a one step process. Once the mock-up is delivered we wait for you to compile your comments on the entire mockup, and make changes based on your comments at the end of that review, as opposed to a change-as-you-go approach.

Finally, note that any significant changes made at this junction, like adding or removing pages, will bring us officially 'out of scope.' Nine times out of ten, that means we're also out of budget and additional charges will occur. That said, it's still far less expensive to make changes now than at the end of the buildout phase.

Step 5: Buildout Phase

Once a mockup has been completed, we will begin building all "back-end" structures assuming the project requires it. This may include database design, dynamic scripting, or any other functionality described in the estimate but not deployed in the mockup phase. At the completion of this phase, the final invoice will be created.