My name is Alex and I’m a a reality TV addict.
Hi, Alex.
I admit my guilty pleasure and embrace it. My favorite show is Project Runway, because it neatly sidesteps most of the Real World-esque drama and focuses on the creative process. Truth be told, I’m probably more of a creative junkie than a reality TV addict but, either way, I’m not giving up my TV anytime soon.
What does this have to do with web design?
Watching the fashion designers create clothes made me reconsider my own process for designing websites. Here’s what web designers have been doing for quite a while now:
- Meet the client and chat about needs
- Write up a proposal to summarize the project
- Draw up wireframes and a site map
- Design the website in Photoshop or Illustrator
- Show the design to the client and get revisions
- Redesign the website in Photoshop or Illustrator
- Repeat the last two steps (sometime ad nauseam) until the design is finished
- Build the site using HTML, CSS, Javascript and possibly a Content Management System
- Show the design to the client and get revisions
- Rebuild the site
- Repeat the last two steps
- Get final approval
- Launch the site
A lot of that time is spent designing a flat image for the client to look at and try to imagine as a finished site. It can be hard to explain how a scrolling image gallery, randomized testimonials, or a navigation menu works just using images from Photoshop.
Designing in the browser
I’m a big fan of Andy Clarke and the growing movement of web designers who advocate designing in the browser. If you’re not familiar with the concept check out the lovely Meagan Fisher’s Make Your Mockup in Markup and Mr. Clarke’s original article that started all the buzz, Time to stop showing clients static design visuals. The basic idea is that instead of spending all that time designing in Photoshop and explaining your images to the client, you do the meat and potatoes of the design work with HTML, CSS, and Javascript. You still plan the site, create wireframes, and spend a little bit of time in Photoshop, but when you show the proof to the client it’s a functional website. This helps nip a lot of questions (like “what happens when I roll my mouse over the menu?”) in the bud. A functional website is easier to explain, it can (sometimes) be easier to revise, and if you got it right the first time you’re already 80% of the way there.
Designing in the browser isn’t for everyone, and there are certainly times to avoid it. That said, I think we’ve been avoiding it out of habit instead of necessity. As front-end development languages mature, designers are getting more and more options for creating visual effects using pure code instead of slicing images. CSS3’s support of RGBA/opacity, rounded corners, border images, box shadow, and text shadow are just a few examples of new enhancements. When you throw in the growing options for displaying fonts on the web and the jQuery UI library you’re not too far away from having access to all the tools you know and love in image editing software. Well, maybe that’s a stretch, but you get where I’m going.
So what does this all have to do with Project Runway?
In each challenge, the designers are given a set period of time to create a new outfit from scratch. Out of ten hours to complete the challenge they’re only allowed 30 minutes to sketch, the rest of the time is spent buying the fabric and working with the actual material. As web designers, we spend a massive amount of time sketching. It sometimes feels like we only work with the actual fabric (read: code) as an afterthought. If you compare web design to building a house it makes sense to draft that many blueprints before breaking ground, but the costs of starting over on the code isn’t equivalent to starting over on a house (thank god). Working with the code is more like re-draping the fabric on a dress; it’s something that benefits from being worked with instead of over planned. I think most craftsmen would laugh at the idea of drawing 30 sketches for a product before actually working with the materials involved, but that’s not unusual for web designers creating mock ups of multiple page sites. While I believe good planning is essential, I think we’ve got to remember our materials aren’t expendable and that our code is only limited by our time, training and imagination. Get your hands dirty sooner, and let the process of working on the actual site (instead of static visual proofs) inform the design decisions.
Either way you do it, “make it work.”
Further Reading
If you want to learn more about designing in the browser, I recommend reading Andy Clarke’s Walls Come Tumbling Down and Smashing Magazine’s great dissenting opinion, In Defense of Photoshop.
