Squeeze Web Site: Behind The Design

We were thrilled to have the opportunity to design the new web site for the band Squeeze, and thought we’d describe the creative process involved.

There often is a lot of research and preparation behind a design that the viewer isn’t aware of, as well as design changes made along the way. We thought it would be interesting to detail out the steps that were taken to arrive at the final site.

Step 1: Research
We were provided with the current promo artwork of a man and woman in 1940’s comic-style, plus the Squeeze logo.

The first thing we did was research the album artwork of their 30-year career, to get an overview of their design past. We knew that the current artwork was a throwback to their “Goodbye Girl” single from 1978, which used a Lichtenstein-style illustration.

We then refreshed ourselves on Roy Lichtenstein’s 1960’s era Pop Art. Lichtenstein replicated comic panels as large paintings, even meticulously reproducing the “Ben-Day Dots” – the dot pattern used to create shaded areas in printed matter. As a bonus, we ended up at MoMA around that time to check out the Tim Burton exhibit, so we were able to go and see some Lichtenstein upclose and personal.

We found samples of Ben-Day dot patterns, and tested methods in Photoshop to see how they would look. We ended up using a slightly stylized version along the sides of the site.

Step 2: Design Concept
Our initial concept called for a large header image with the main navigation running under it. A right-hand secondary nav was to mimic the slanted rectangle and comic lettering used in the logo.

The top and bottom of the site were to have ripped paper edges, like a page torn from a comic book. The sides would have a Ben-Day pattern.

The client approved the concept sketch and we moved forward with the actual design of the site, which was then signed off by the client.

Step 3: Site Design
We started building the basic framework of the template using HTML and CSS, and then added in the header elements, navigation and background Ben-Day Dots.

We found that since the artwork of the man ended abruptly on the right, it didn’t look right. So we drew a shoulder and back to extend the illustration.

It then became apparent that the ripped edge wasn’t working with the menu bar, or the footer. The dot pattern was too distracting, and we decided the Ben-Day dots didn’t fit the style as much as we’d thought.

We scraped the paper rip and Ben-Day dot along the sides idea, but did end up keeping a dot pattern in the red area of the header. We also switched the site from a centered format to a wide format with headers and footers running the width of the screen.

We went back to our research, this time focusing on the 1940’s era comics that Lichtenstein used as source. We found inspiration in some issues of “True Crime” and based some elements of the new design on that. The final design ended up being a modern take on the 1940′s comics style.

The modified concept was presented to the client, approved, and we proceeded coding the site in the new direction.

Step 4: The Final Site
Once the artwork changes were implemented, the functioning aspects of the site were created such as rollovers.

The client approved the site template, and then the additional pages and content were added. Extensive testing took place on multiple browsers to make sure it looked right in all of them, and any backend settings were checked.The domain was then pointed from the old host to the new and the site was live.

For this project the design and approval to site launch process took about 6 weeks, with a few weeks spent acquiring resources from the client before that.

Squeeze was happy with the result, and the site is getting a decent amount of traffic. We were very pleased with the final design as well. You can check the site out at www.SqueezeOfficial.com.