2004 / September 4^th/ The finer points of design

Wow. What a week. Only three short days at a design firm and I feel as though I’ve learned so much, yet have so much more to learn. You know, I used to pride myself in thinking that I had an understanding for the finer points of design. Boy was I wrong. Never before have I had my work looked over with a fine tooth comb or a 400x magnifying glass.

A little on typography

This first lesson I learned while working on a very small page. Let me re-iterate this. This was one single page, filled with quite a bit of text (although the majority of it was a disclaimer). It just about filled up my screen on a browser around 1000 x 950 or so. Needless to say, this project took up the better part of my day. It’s all in the details.

1. Registered trademarks (r) are too big - many times you must make them smaller than they would be by default, in addition to putting them all in superscript <sup> tags. CSS styling can do this for you, of course
2. Multiple superscripts suck. This can be found while dealing with something that needs a trademark symbol, followed by a footnote. Something like Example^{SM 1} Many times you just have to deal with these on a pixel by pixel basis. Notice how un-readable my example is.
3. Footnote references¹ many times need to be defined in their own font. Fonts like Georgia will make for awkward placing when dealing with various numbers. Look at this¹ versus this³ Notice how the 3 looks bigger? It shouldn’t be.
4. Encode EVERYTHING. I never noticed this, but when dealing with top-tier clients you need to make sure your work is spotless. Encode all those … and those ’s. When facing a multi-thousand character document this can be meticulous. But it’s worth it in the end (I hope?).
5. As a web producer (coding and implementing design) your job is to make sure very small details such as letter kerning haven’t been looked over in the design phase. Many designers overlook these small details because they’ve looked at 5 or 6 mock ups and could care less by the time they send you their final product.
6. When dealing with sub navigation, you should be able to see things in “groups” For example, each section that has sub-navigation should be seen in one ‘group’ and then each option/link should be seen as a group, with the whole navigation being seen as a group. Wow… that’s hard to do. How do you do it? Very carefully with headings, indentation and subtle margins. I never noticed this, but the margins towards the bottom of any list are larger than the top margins. What does this do? It naturally separates the list into a group of its own. Pretty cool, no?

So here are a few gems that I have learned in my few days. I hope to learn so much more. Hell, all I’ve been learning so far is what I thought I knew in the first place. What great things must be in store. There have also been quite a few small design tricks I’ve learned, but honestly it’s near impossible for me to describe. In a little while hopefully I’ll get around to posting the billions of shortcuts that have saved me tons of time.

So, you might be wondering to yourself - how do I learn the finer details of design? I challenge you to take something as simple as Google’s homepage and redesign it. You might think to yourself that there’s nothing to design.. but there is. I’m not talking about giant flash headers and massive graphics. I’m talking about keeping with the Google style and creating something new, useful and beautiful. I think you’ll find it’s a hell of a lot harder than it seems. There’s a lot more to design in the finer details than I ever thought possible.

Quick gem: Check out some free music from O.A.R. (really free). Here’s one of my favorite songs from the show I went to featuring John Popper (Blues Traveler). … of a revoltuion - Anyway.

1. 

   Benjamin

   September 4^th | #

   I have an affinity for typing properly on the Web. I double-checked to make sure all my non-WordPress manages pages (save the archives page, but I’m working on that) are coded properly, with the correct curly quotes, em dashes, and ellipses.

   It just makes you work look so much tidier; more professional.

Name

Email (will not be published)

Website (optional)