Here are the three most important things I learned along the way:

1. Tell a story with relationship
2. Shoot on manual
3. Edit ruthlessly

There’s a lot more to what I learned than the three items above, but these are the lessons I go back to over and over again.

1. Tell a story with relationship

As designers we marry form and function to help a client meet a need. Usually, that need is to sell a product, advertise an event, or build goodwill and trust in the company. We’re trying to convey information in a way that makes it stick and creates a reaction in the viewer. Stories make information more interesting and memorable. In my opinion, good work tells a story (or evokes a feeling) and bad work just provides information.

Working as a photographer taught me that relationship is key to telling stories. The way that subjects interact in a photo or the way the subject of the photo is in relation to their surroundings helps you tell a story. Let’s look at an example (photos © Jan Will):

This is a penguin.

This is a penguin waiting for someone, a lonely penguin, or a penguin starting a journey.

The penguin’s relationship with his/her surroundings tells a story and makes the picture more interesting and easier to remember.

As designers we’re visual story tellers. Despite protests that we just make posters, websites, or xyz, in reality we’re helping our clients tell their story. Most of this storytelling become an unconscious part of the design process, but thinking about the relationship between elements on the page in terms of relationship is a great way to see the design with fresh eyes.

2. Shoot on manual

Your digital camera has a number of settings ranging from full-auto to manual. The best way to become a better photographer is to learn the fundamentals of how the camera works and then shoot exclusively on manual mode.

The fundamentals of how the camera work are actually quite simple. I learned from a book from the ’70s that dedicated one page each to aperture, shutter speed, and film speed. Knowing how your camera works isn’t the same as knowing fundamentals of photography, but you learn those while shooting (and making a lot of mistakes) on manual.

Sure, there are times when the auto or aperture priority mode can be useful, but shooting on manual teaches you to think about what you’re doing and become conscious of why you’re taking a particular path to the finish line.

When I started designing websites I knew it would be important to “shoot on manual” so I could develop my skills instead of developing my reliance on a program that took care of the fundamentals for me.

Throw Dreamweaver to the curb, stop using plug-ins and get your hands dirty with a basic text editor. The more you know about what’s going on under the hood the closer you come to mastering the skill. Admittedly, there are times you’ve got to use a plug-in, a program, or an auto setting to complete a project on time and on budget — but if you push yourself to “shoot on manual” you’ll grow exponentially faster than you thought possible.

3. Edit ruthlessly

The ratio of “keeper images” to the total number of images shot is never one-to-one. In my own work I’m happy to keep one out of four on a good day (and more like one out of ten on a bad day).

Learn to be a ruthless editor of your images (and ideas) and it will raise your standards, help you build discipline to meet those standards, and save you time in the long run.

After editing through over 35,000 images in the past three years I’ve learned to trust my gut instincts. You know when something isn’t working, don’t over think it.

Don’t waste your time with the bad images or ideas. If it’s not working jettison the idea and move on to something else. You’ve only go so much billable time per week, and only so much time left on this planet, spend it on the good ideas and the interesting images.

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.

Couple of hopes/requests/wishlist items:

• Get CMS systems to play nicely with custom databases & custom applications
• Figure out way of unifying user login/accounts across multiple website applications
• Clean URLs system for customs sites
• Style Inheritance in CSS
• Death of IE6 and the end of IE6 CSS overrides 

Should be an interesting decade for design!

Final Truck Mock-up

We just wrapped up the photo shoot for the new precision van graphic.

Precision Plumbing Van Graphic - Weightlifter Pose

Precision Plumbing - Concept Sketches New Van Graphic

We are now  done with the project, and awaiting the final product from the prineters.

1. concept sketches
2. mock-ups
3. photography
4. layout design
5. prep for press

We worked with DotFotDot photography to get this shot, and sent the files to Summit Graphics for printing.

CSS issues

• Multi-column layouts in CSS
• Vertically-centered content in CSS
• Active Links tag

Cross-browser compatibility issues

• Rounded corners
• Embedded fonts
• Rotated text
• PNG image files
• CSS Vertical Collapsing Margins
• Table Rowspan alignment
• ALT/title tags

Search Engine Readability Issues

• Ajax / Spry content
• Flash content
• Dynamic page URL naming

Designer Task Issues

• Hghlight current link/page in navigation
• Converting HTML table-layout site to CSS-layout site
• Thumnail galleries – cropping/aspect ratio matching
• Sub-domain RSS/XML security restrictions

Wish List

• Rounded corners!!!
• CSS/HTML dropshadow effect
• Simple fade effect for hover state
• Clean way to separate template from style from content

• Dreamweaver CS4 – awesome package
• InContext CMS – great way to upgrade static sites to allow for basics client CMS
• Spry Datasets – fast way to create a mini-database.  tragically, not readable by search engines
• Flash FLV player – quickly stream most media

From others

• WordPress – fast, simple, powerful tool
• Web Developers Toolbar for Firefox – great way to see how other sites are built
• Lightbox & Shadowbox – fast, simple, beautiful script for linking to and displaying images/media from thumbnails
• Google Analytics – nearly perfect web stats application. (still needs some improvements on heatmaps and click counts.)
• Browsershots.org – Great tool for generating screenshots for an array of opperating systems and internet browsers

CSS AND Table Website Layout Hybrid Design

As most web designers know, there is a debate raging over the use of HTML Tables (ie. table, tr, td, etc.) in the construction of web page layouts.

The main issue is that CSS offers no simple (and supported) solution for the creation of basic, vertically flexible, columns. In fact, it offers no grid structure to work with whatsoever (yet). As an old school designer, I am used to doing full table layouts, but CSS offers some masterful improvements — just not in this area.

So my short term solution has been to use a table superstructure to establish the layout grid, and use CSS for everything else.

The screenshot above is an example of a site layout containing just one table. The red lines show the table-based superstructure of the page. This solves the column issue without bogging down the code too much, and it requires no CSS “hacks” to create the layout.

A more conservative use of tables might make sense, like the New York Times website:

NY Times Website - Sparring Use of Tables in Layout

One thing is certain, however, 100% table-based layouts are out. Oddly google is a bit behind (see below). I am sure they have their reasons though.

Google News - Odd Overuse of Tables in Layout