Design Soup
April 29, 2009, 4:07 pm - By: Chad Halvorson
What kind are you making?
I'm pretty into analogies. Especially when trying to communicate technical situations, but recently I've been thinking about design and creative work. I think I've found my analogy—words to live by in my opinion.
Design is like cooking. As designers, we try to come up with new flavors by trying different ingredients. The best dishes are created by combining ingredients—with an end result in mind about how it should taste. Here are a couple of soup analogies that I think put things in a nice perspective.
- Sometimes the customer knows what kind of soup they want. The customer may taste the soup and send it back because its to spicy or bland for their taste. It's important to consider their tastes and adapt the dish to respect their pallet—in the end if they don't like it, that soup is going in the trash.
- Some customers don't know what they're in the mood for or they want the chef to create a dish that reflects the tastes and perspectives of the restaurant. That's why people choose the restaurants they do—because the food has a certain flavor they like.
- The servers and other people wandering around the kitchen should be less inclined to toss ingredients in or make judgment before the soup has had time to simmer. If the cook wants someone to taste the soup before serving, they will ask. The sous chef and chef de cuisine are working hard on preparing these dishes—let them finish the dish before tasting it.
The Web Design Trifecta
April 23, 2009, 9:15 am - By: Chad Halvorson
Let's face it. The biggest no-no or reluctance in web design is a site who's live area consists of rounded corners with drop-shadow on a patterned background. We've faced this issue twice recently. The first time we used some fancy javascript & CSS with PNG images (http://www.loft.org). It worked fine, but we had hoped it could be simpler. The second time I think we nailed it. We managed to keep the entire integrity of the design by using standard CSS techniques and simple JPGs; —no PNGs (http://www.tcspine.com).
First, we assumed a maximum resolution width of 1920. Then we broke the site into essentially three rows. The top row, or header, is a long JPG stretching 1920 pixels wide. The second row is the content area and is a wide 1920 pixel JPG that is 7 pixels tall. The height of this JPG is important because it repeats vertically and needs to maintain the patterned background. The third row is pretty much the same as the top row. The footer JPG only needs to be tall enough to accommodate your bottom rounded corners. Finally, using CSS the positioning of these three rows needs to be centered.
This method only applies to fixed width website designs, but it allows for a fluid background pattern up to 1920 pixels wide. If you desire to accommodate larger resolutions, just make the widths of the JPGs wider. What's really neat about this approach is it works natively with the main browsers. It also eliminate the weird one pixel shift that shows up in Firefox and Safari.