These guys win my award for best presentation slides of the entire conference, no contest. Sadly I can’t give them the same award for polished verbal presentation, but you can’t winnem all, eh? I wasn’t really sure whether the schtick about forgetting who was presenting which slides was authentic disorganization or a poorly executed attempt at humor. In any case…

Design is in the Details, presented by Bryan Veloso and Dan Rubin focused on how the tiny details are what distinguish a good design from a great design. You can check out the entire presentation at their site, Design is in the Details.The presentation focused on the essentials of good design feel: layout, type, and pixels.
Layout. Let your layout breathe. It’s what the slide said and it’s what you should do. Bryan and Dan remind us that at some point you need to step back from your design, break out of code view, and look at the screen. Feel what’s going on with the entire design because that’s what the eye is going to do. The human eye does not go about distinguishing individual pixel rendering choices so that it can pop up a brain alert to the effect that the 1px line in that button is what makes it most realistic. The eye just takes it all in and communicates a feeling.

Type. Use visual design patterns in typography. Using multiples of 3 or rules of ten will help to accomplish this. Check out CNN for an example of excellent visual patterning. You don’t notice it because it’s done well, but there is patterning all over this site. I know because Bryan and Dan pointed it out to me. The spacing between the header and the content works on multiples of 3 (18, I believe). Font sizing is 12. Spacing between content is 12. The wider gap between content and header is intentional and indicates to the eye that there’s a bigger distinction happening here for a reason.

I don’t even have to tell you everything that CNN has done well. Just go to Fox news for some suck-out-loud stab-you-in-the-eye design. There is just about no reproducible design behavior on this site. See that padding around the Fox news logo? Why is it there? There’s no standard spacing anywhere on this page. Notice how CNN had lots of channels but they didn’t accost you? Why does Fox news have channels within channels within pages of channels? This is design at its worst. Check out Bryan and Dan’s presentation slides to see their take on making Fox news better (ha! I know…ha!).

Some specific techniques that will benefit you in the type department

  • use range kerning or CSS letter spacing to control the spacing between characters. Visually you just don’t need all of that air around the letters on a screen. This will help with the next technique.
  • Avoid widows.
  • Using ALLCAPS? Give characters in all capital letters more room to breathe. Your brain recognizes letters by their shapes, too much crowding makes that really difficult for the eye.
  • Strive to mimic real life tactile experiences. Don’t use =”black”. Try taking on a text color that’s nearly imperceptibly different from true black. Try using HEX 111 or 333 or some percentage of black.

Pixels. Pixels are where the idea of feel becomes extra important. A pixel is tiny, the smallest unit in a digital image, in fact. Bryan and Dan suggest that you engage in some pixel hacking if you’re really looking to move from good design to great design. Pixel hacking, in my best explanation, is about using the stock options in your progs and then adding things like a 1px stroke or tweaking opacity to make these tiny changes that add up to big textural feel. For example, in Photoshop, the standard settings for dropshadows are ridiculous and will render a dropshadow that has absolutely no realism. Instead tweak the setting to 90%+ opacity and the feel becomes much more effective.

The guys are truly much more effective at discussing these concepts than I, I suggest checking them out sometime if you get a chance. But really, don’t expect too much poise and polish, these guys are big on the um and uh parts of the speaking experience.