A Short Bit of History

Since our designers here at Studio4Squared began creating Web sites over ten years ago, we've been following a design methodology which most other firms and agencies have followed as well.  We begin each and every Web site design using Photoshop - Studio4Squared has never employed the use of template recycling - every design created by us is unique.

We then show the initial design to the client, making adjustments to the layout as necessary according to feedback.  Before moving forward, we require an approval on the home page design.  Once we receive this initial approval, we move on to the overall look and feel to be used for the sub pages.

Once the sub page look and feel is approved, we then move on to the coding phase of the project.

Puzzle Pieces of the Past

To better understand what we're talking about from a visual standpoint, click on the image next to this paragraph - it shows a globe and a title reading "COMPANY X".  Imagine this image is a Web page design in Photoshop.  It's now been approved and is ready to be coded.

The coding process involves our designers here at Studio4Squared taking the Photoshop document(s) and "slicing" them up into smaller, individual graphics.  ...you can think of this process as if you were taking a photograph and cutting it up into small puzzle pieces.

Our designers take these individual puzzle pieces (referred to as "slices") and reassemble them into HTML, thereby creating the Web page you see online in your browser.  Click on the next image to the right accompanying this paragraph, we've taken the initial layout from above (the one with the globe and "COMPANY X") and have sliced it up into individual pieces to then reassemble in HTML.

Attempting to Prevent Wheel Spinning

As mentioned previously, each step of this process involves individual approvals before proceeding to the next phase.  This is necessary to prevent us from spinning our wheels.  Unfortunately, if a client makes large changes to the overall look and feel of the Web site after we've completed coding the HTML - then in most cases we have to start the entire process all over again.

Simple Changes Sometimes Aren't that Simple

Using the image from above (globe and "COMPANY X"), let's imagine that the client has asked us to simply move the globe down slightly and increase the size of the header text.  Sounds simple enough, right? Well, click on the image accompanying this paragraph - in the large pop-up image we've placed the original set of puzzle pieces on the left, and the updated set on the right.

Notice how every single puzzle piece is now completely different from the previous set of puzzle pieces!  The changes the client requested sounded like minor ones didn't they?  Unfortunately the actual work involved to make these changes is rather significant!

Essentially, we would need to re-create the entire Web site a second time!  We would need to make the edits to the home page design in Photoshop, get a new approval, adjust the sub pages as necessary, get another approval, and then re-slice and re-code everything - all over again.

So even with our strict design/coding methodology, we've still had to start a few projects over from scratch after major changes were requested even though we'd received the necessary approvals for each step of the process.

If only there were some magical way to solve this problem.

Major Changes Solve a Major Problem

In October of 2006, Studio4Squared made a major transition from static site design to Web site designs powered by content management systems.  Exactly two years later, Studio4Squared does it again...

In October of 2008, Studio4Squared came up with a major breakthrough by formulating an entirely new approach to our Web site design and coding process.  We still create each and every design in Photoshop, but the individual slices of imagery are now independent from each other!  The image accompanying this paragraph is the closest representation we have to visually explain this new concept.  The image represents the design ready to be assembled into HTML.  As you'll no doubt notice immediately, there are no more puzzle pieces.  In their place are the graphics as you would expect them to be.  If the client asks to make the title "COMPANY X" larger, none of the surrounding imagery will be effected.

Just to reiterate that point - if the client asks to move the globe down slightly.  Okay, no problem.  We simply move the globe down slightly.  If the client asks us to make the title larger, okay.  No problem, we simply make the title larger.

Even after the site has been completely coded and is online - if large design changes are made, we will no longer be spinning our wheels and needing to go back to square one.  We can now quickly make the necessary edits to only the portions of the site which need to be changed.

The days where a seemingly minor edit could potentially cause a chain reaction across every image is no more.

An Improved Way of Coding, an Improved Way of Designing

We won't bore you with the technical aspects regarding specifically how this radically different approach to Web design is achieved.  But we will tell you that not only has this new approach eliminated a huge problem with Web site design development, it has also significantly reduced coding time to a mere fraction of what it once was.  Best of all for us as designers - it has opened up a whole new way of thinking in terms of what we can do creatively!

This breakthrough, coupled with our in-house content management system NEATO, propels Studio4Squared far ahead in terms of speed and flexibility.  If you would like more information on how this new methodology can benefit you and your Web site project, contact us today!