Design Phase vs. Coding Phase, Why Can’t They Just Be One?

Design Phase vs. Coding Phase, Why Can’t They Just Be One?

If you’ve done business with inConcert, you know that we have a solid process in place to create our new website projects. We inform every prospective client about our process and why we have one in place (basically…it’s saves us time and saves you money). Our process is made up of 75 steps to ensure we don’t miss anything, however, we have broken down this process into a more generalized list to easier explain what needs to be done when creating your new site. These five general steps are: The Defining Phase, Design Phase, Coding and Buildout Phase, Testing and Deployment Phase, and Maintenance and Marketing Phase. (To view detailed descriptions of each phase, please click here). Each phase is just as important as the one before and the one after, yet clients often don’t understand the reasoning behind the separation between design and coding.

After 8 years of being in the website business, we’ve learned that the best and most efficient way of developing a custom website is by following this process. If  you haven’t read our past article about the design brief, please read it now. The design brief is completed during the Defining Phase which leads into the Design Phase. During the Design Phase, the graphic designer will review your design brief document and create a custom design for your site. This design is saved as a simple jpg (called a mockup) and is then emailed to the client for review and approval. Again…the design is saved as a simple jpg…it doesn’t function, it doesn’t have pages, and it just might have some “lorem ipsum” placeholder text that tends to confuse people (lorem ipsum is randomly generated dummy text who’s sole purpose is to be a placeholder for text that might not be readily available at the time of design). Now, this can be frustrating to some people because they cannot visualize how it will work by simply looking at a static design with placeholder text (this is understandable, especially if you are requesting a lot of functionality). However, it is important to understand two things: 1. The design is developed according to your functionality requests and visual preferences (keep in mind this does not happen within an hour).  Designers go through their own experimental processes before coming to the right solutions. We often have to figure out what doesn’t work before we can determine what does. 2. Populating and making a website function is not as easy as “copy/paste”. Hours of coding go into the development of a functioning website and depending on what applications you’ve purchased, fitting those applications into the site design can take a lot of time and sometimes require some trial and error.

When a design is approved, it goes to our coding department. Our web developers take the approved design and literally slice it up into pieces, optimize those pieces to make them the smallest file size possible without losing quality and then put those pieces back together through code. For example, inConcert’s design template requires 125 sliced out images that actually make up the entire design.

125 Images Make up inConcert’s Design Template

Tom Giannattasio uses the perfect analogy in his “In Defense of Photoshop” article; if you are an architect assigned the task of designing a skyscraper, you are going to sketch out the design, mock it up on the computer and possibly create a small-scale model. This gives the client a good idea of what it will look like yet giving them the freedom to make changes and tweaks before actually building the “real deal”. “Construction begins only once everything has been designed.” In the long run, this saves the client a lot of money. Now let’s say this architect is building a house, if the architect can mockup a home to scale, the homeowner can determine if they like the pitch of the roof without actually seeing it built. Assume the architect never creates a mockup, the contractors get all the rafters secure, the homeowner arrives at the building site and wants the pitch of the roof to be a bit steeper. Now, the contractors have to spend the time and frustration of dismantling all of the rafters, re-measure, re-cut, etc. and put all of the rafters back up according to the new specifications. This is very inefficient. As would be coding the website as it gets designed instead of creating a static mockup beforehand.

Again, we can’t stress enough that this process has been put into place not only for our benefit but also for our client’s benefit. The less time we need to spend on the project, the lower we can keep our costs which means the less the client has to pay. Hopefully by reading this article you’ve come to a better understanding as to how the process works and why we do the things the way we do. For more on our process, visit our process page.

Some thoughts and ideas were adopted from Tom Giannattasio’s article, “In Defense of Photoshop“.

No Comments

Sorry, the comment form is closed at this time.