Design vs. Development: Real Life Example

Remember this post from a week ago, in which I discussed the difference between designing a website and developing it? I can now provide a practical example.

We just went live with a new website for Stacy Peterson, a local illustrator and graphic designer. Stacy is a design pro (she did the illustrations for one of Madonna's children's books, The English Roses: To Good To Be True) and as such certainly didn't need my limited skills in that area. So she brought me a fully realized design and it was my job to translate the printed layouts into something that rendered accurately in web browsers. I worked with Stacy's artwork which was in Adobe Photoshop and Illustrator formats, and tried to replicate as closely as possible the vision she laid out for her site.

As gifted as Stacy is in the area of graphic design and illustration, she would be the first to admit that she's not an expert in website design and the mechanics that make a site functional. Her design presented some challenges from a development perspective - things that are quite simple to do in print media, like the nice drop shadow surrounding the main content window, or the seamless tiling of the flowery page background - are harder to replicate in a website. Finding solutions that work across a wide range of browsers and platforms is an ongoing challenge for everyone who builds websites, but especially when the design is conceived with no forethought about how those issues might come into play.

The new website includes some tasty jQuery scripts (for the illustration popups and the book cover slideshow) and some semi-complex CSS (I finally had to resort to a separate style sheet for Internet Explorer 6 and earlier to work around some conflicts between the aforementioned scripts and certain parts of the design; if you're still using IE6, you have my deepest sympathies, although only if someone is forcing you to do so).

We did have to compromise on a couple of rather insignificant design details that didn't work as well on screen as they did on paper, but overall, I think I succeeded in creating code that accurately brings Stacy's design onto your computer monitor while keeping it compliant with current standards and as visible as possible to search engines.

And, if I've played my developer role correctly, the only thing you're aware of is Stacy's beautiful artwork.

About this Entry

This page contains a single entry by Eric published on May 28, 2010 6:32 AM.

American Basket Flower was the previous entry in this blog.

"Environmental Chic" and the Gulf Oil Spill is the next entry in this blog.

Archives Index