About this site's lack of design: Yes, it's supposed to look this way — I'm using a sandbox theme for WordPress (see it on GitHub).

Dan Rubin's SuperfluousBanter

Design, random musings, and the Web. Since 1977

The Final Word on IE6

This item was posted by Dan Rubin on Wednesday, September 3rd, 2008.

A friend of mine recent­ly asked the ques­tion “Why the Hate on Inter­net Explor­er 6?” He explains some very log­i­cal rea­sons why it does­n’t make sense to be so neg­a­tive about IE6, and as I agree with him on just about all points, I thought I’d give the clear­est answer I could.

Sim­ply put, IE6 should­n’t get any hate. Nor should it receive any love, either.

The best thing the web stan­dards com­mu­ni­ty (and any oth­er smart web folk) can do is stop com­plain­ing about an ancient brows­er whose devel­op­er wait­ed too long to replace, and just stop sup­port­ing it alto­geth­er.

One of the ben­e­fits of web stan­dards is that our doc­u­ments are marked up cor­rect­ly before we reach the pre­sen­ta­tion­al stage. One of the ben­e­fits of IE6 (et al) is that we can tar­get spe­cif­ic ver­sions using Con­di­tion­al Com­ments. The com­bi­na­tion of the two means we can still send our con­tent to old browsers, but not have to both­er with the pre­sen­ta­tion, thus sav­ing our­selves hours of need­less headaches and frus­tra­tions, while not pun­ish­ing the users of said old browsers by deny­ing them access to our con­tent.

There’s con­stant dis­cus­sion about whether or not to con­tin­ue sup­port for IE6, and the only rea­son ever giv­en these days in favor of sup­port­ing that brows­er is its mar­ket share. That mar­ket share is dimin­ish­ing, and we’ve already reached the sec­ond beta of IE8, so let’s start drop­ping it already. Make the argu­ment against sup­port­ing IE6, to your clients, your boss, your team—whoever needs to hear it, keep apply­ing pres­sure and don’t back down.

It’s time to stop sup­port­ing IE6. Peri­od.


This arti­cle has very kind­ly been trans­lat­ed to Ser­bo-Croa­t­ian lan­guage by Jovana Miluti­novich from Webhostinggeeks.com.

Categories:

56 Comments

Regex Patterns for Single Line CSS

This item was posted by Dan Rubin on Friday, August 29th, 2008.

Update: You can now down­load the Text­mate macro file rather than record­ing your own (skip to the down­load »).

There has been plen­ty of dis­cus­sion about the pros and cons of sin­gle-line style sheets, and I’ve been includ­ing them as an option when teach­ing CSS man­age­ment and orga­ni­za­tion in my Web Design World pre­sen­ta­tions in Chica­go, Seat­tle, and lat­er this year in Las Vegas (at Web­Builder) and Boston.

It’s a matter of preference

As a fel­low Side­bar-ian (Side­bar­bar­ian?) Steve has been try­ing to con­vince me to use the sin­gle-line approach for a while of course, and Bryan and Jon have also become fans of this for­mat­ting style for their own work. Although they are enam­ored with it, I haven’t tak­en to it yet, still pre­fer­ring to write my style sheets using the “nor­mal” indent­ed for­mat­ting most of us are used to.

Now, before any­one gets their knick­ers in a twist about why they love, hate, “can’t live with­out” or “will die before they try” sin­gle-line for­mat­ting, let’s just take a step back and remem­ber one thing: it isn’t any­thing spe­cial, just an alter­nate for­mat­ting style that does­n’t affect the way the brows­er inter­prets the style sheet one iota. It’s a per­son­al preference—remember that before jump­ing on or off this par­tic­u­lar band­wag­on.

Always keep your options open

Now that I’ve got that out of my sys­tem, let’s talk prac­ti­cal­i­ty: there are indeed ben­e­fits to be had when using sin­gle-line CSS formatting—for exam­ple, I find it can make a dif­fer­ence after a project has been com­plet­ed, at which point I’m usu­al­ly more inter­est­ed in visu­al­ly scan­ning a style sheet for the selec­tors first, and then for a par­tic­u­lar prop­er­ty I’m inter­est­ed in edit­ing. This is where I’ve found sin­gle-line for­mat­ting can come in handy.

But my editor already does that!

This is the point where some peo­ple will start going on about how you could just use Text­mate’s “fold­ings” fea­ture to get the same visu­al result (with­out alter­ing your file), or how CSS Edit has a handy list of all the selec­tors in a col­umn on the left side of its win­dow, or that you could always use your edi­tor’s “find” com­mand and search for the selec­tor you want to edit. Yet while those are all per­fect­ly log­i­cal, sane sug­ges­tions, they don’t account for flex­i­bil­i­ty and choice.

Just another way of doing things

Much like Jon Hicks with his harem of web browsers, I tend to be a bit of a “text edi­tor polyg­a­mist”, bounc­ing from Text­mate to CSS Edit to Coda to BBE­d­it to Trans­mit’s text edi­tor and a host of CLI edi­tors, most­ly depend­ing on my mood (though some­times con­tex­tu­al if I’m at a com­put­er that does­n’t have a par­tic­u­lar application—a Win­dowsXP box with noth­ing but Notepad, for instance). It’s the times when I’m using an edi­tor that does­n’t have “fold­ings” or pret­ty columns of selec­tors that I start to appre­ci­ate sin­gle-line CSS when mak­ing quick edits, so I’ve start­ed con­vert­ing style sheets to a “sim­ple” sin­gle-line for­mat (with­out the left-aligned tab blocks to start each rule’s prop­er­ties) once they are ready to go live.

Patterns fit for a kilt

Edi­tors like Text­mate and BBE­d­it have built-in com­mands for for­mat­ting (the stan­dard, mul­ti-line approach) or com­press­ing (the entire style sheet on one line, osten­si­bly to reduce file size by strip­ping white space) CSS, but no way to con­vert to sin­gle-line for­mat­ting and Text­mate’s “For­mat CSS Com­pressed” bun­dle can for­mat your stylesheet to a sin­gle line per-rule, though it’s all squished togeth­er, mak­ing it dif­fi­cult to scan due to a lack of white­space. Con­vert­ing a style sheet by hand every time would be much too time-con­sum­ing to both­er with, but that’s where reg­u­lar expres­sions come to the res­cue.

In Text­mate, you can record a macro using each of these regex pat­terns as a sep­a­rate step (I’m sure oth­er edi­tors have a sim­i­lar fea­ture, so please feel free to post details in the com­ments below). This allowed me to cre­ate a “For­mat CSS Sin­gle-line” com­mand, com­plete with a key­board short­cut, which enables an easy switch between mul­ti- and sin­gle-line for­mat­ting.

Unfor­tu­nate­ly, as of this writ­ing Text­mate macros can­not be export­ed and shared For those using Text­mate, get­ting the macro is a sim­ple mat­ter of down­load­ing, expand­ing and dou­ble-click­ing this file:

While sim­i­lar to “For­mat CSS Com­pressed”, this macro retains a sin­gle blank line where your orig­i­nal con­tained two or more blank lines (help­ful if you group your rules), and adds white­space that match­es my stan­dard for­mat­ting pref­er­ences (which I find makes it eas­i­er to scan quick­ly). To switch between each for­mat­ting style, just run each com­mand in turn (via the Bun­dles menu or the key­board short­cuts).

How­ev­er, that would­n’t be much use to every­one who does­n’t use Text­mate, so here are the respec­tive groups of regex I used for the con­ver­sion:

\n{3,}
\n\n

[ \t]+
 
(?m)([;:])\s+
$1

\s*}
 }

\s*{\s*
 { 

[ \t]*,[ \t]*
,

@import(.*?);
@import$1;\n\n

What’s missing

In Text­mate and BBE­d­it I can return to mul­ti-line for­mat­ting with a sin­gle com­mand, but that might not be as sim­ple in oth­er edi­tors. What I’d love to see is a pair of shell scripts that con­vert from mul­ti- to sin­gle-line and back, and pos­si­bly a web-based proces­sor that does the same (paste your style sheet into a textarea, select your for­mat­ting, hit “process” and the script pro­duces the result). If any­one would like to take on those tasks, I’ll hap­pi­ly update this post to link to the prod­ucts of your labor.

And in the end…

If you’ve nev­er tried sin­gle-line for­mat­ting, this makes it easy to exper­i­ment with­out com­mit­ting your­self (and I do rec­om­mend giv­ing it a try—you may be sur­prised once you’ve worked with it a few times).

Ulti­mate­ly, because I can return to mul­ti-line with a sin­gle com­mand my pri­ma­ry text edi­tor should I ever feel like it, automat­ing the switch from mul­ti- to sin­gle-line is a con­ve­nient way to get the ben­e­fits of sin­gle-line for­mat­ting with­out back­ing myself or my clients into a for­mat­ting cor­ner.

Categories:

67 Comments

Simple CSS Hover Tab

This item was posted by Dan Rubin on Tuesday, August 19th, 2008.

Update: The orig­i­nal edit of this post and demo file did­n’t work in IE6/7. See the com­ments for my quick expla­na­tion of the fix (the demo now works in FF2/3, Safari 2/3, Opera 9, and IE6/7).

After throw­ing togeth­er a quick lit­tle hover/tab wid­get for my pre­vi­ous arti­cle, I thought I’d share how it was made, in case you find a need for it some­day.

Bulletproof lists

The wid­get in ques­tion is just a sim­ple unordered list, with each list item con­tain­ing an anchor and an image—we want the images in this case because I want them to dis­play in my RSS feed and for any­one who can’t (or choos­es not to) view the styled ver­sion of this site.

Note: Feel free to ref­er­ence images in the stylesheet rather than inline if that suits your pur­pos­es.

See the wid­get in use in my pre­vi­ous arti­cle, or check out this demo.

The code

First, the markup (with URLs trun­cat­ed to save trees):


Sim­ple, unclut­tered, uncom­pli­cat­ed.

Next, the CSS:

ul#hover-tab-thingy {
  position:relative;
  padding:0;
  width:500px;
  height:498px; }
#hover-tab-thingy li {
  float:left;
  list-style:none; }
#hover-tab-thingy li a {
  float:left;
  padding:9px 21px;
  background-color:#eee;
  color:#999;
  font-size:9px;
  text-align:center;
  text-transform:uppercase;
  border-right:1px solid #fff; }
#hover-tab-thingy li a:hover {
  background-color:#f60;
  color:#fff; }
li#one a,
li#one a:hover {
  background-color:#e5e5e5;
  color:#555; }
#hover-tab-thingy li a img {
  position:absolute;
  left:0;
  top:30px;
  width:500px;
  height:460px;
  clear:left;
  margin-left:-9999px;
  padding:1px;
  border:3px solid #e5e5e5; }
li#one a img,
#hover-tab-thingy li a:hover img {
  margin-left:0; }
li#two a:hover img,
li#three a:hover img {
  border-color:#f60; }

This is all fair­ly straight­for­ward, so here are the high­lights that may help when dupli­cat­ing this on your own:

  1. The entire idea is that you have tabs that are each asso­ci­at­ed with con­tent (images in this case) which are made vis­i­ble when the user hov­ers over the tab. There are more things you could do with this, but that’s your job, grasshop­per.
  2. The tabs are float­ed; the con­tent ele­ments (img in this case) clear the floats.
  3. The con­tent ele­ments are set to position:absolute, so they can appear in the same loca­tion for each tab. To accom­plish this, the ul is set to position:relative (in short: an absolute­ly posi­tioned ele­ment will be posi­tioned rel­a­tive to its near­est posi­tioned ancestor—see Doug Bow­man’s great write up for more), and it’s prob­a­bly a good idea if the dimen­sions of your ul (the con­tain­er for your con­tent) have a lot in com­mon with those of your con­tent ele­ments.
  4. IE6 has a prob­lem revert­ing ele­ments that set display:block on :hover to their orig­i­nal state (e.g. display:none). To counter this, use a neg­a­tive left mar­gin as the default posi­tion­ing, and then set margin-left:0; on the hov­er state, which works in all mod­ern browsers.
  5. The width and height is spe­cif­ic to my exam­ple (the dimen­sions of the images I used), dit­to for the padding on the tabs and the top posi­tion­ing on the img ele­ments (to push them below the tabs). Bend them to your will.

Wrap-up

This may be some­thing that you’ll find use for on a reg­u­lar basis—one of those tiny snip­pets of reusable “stuff” that you’ll be glad you don’t have to type every time.

Categories:

15 Comments

I Need Some Spacing

This item was posted by Dan Rubin on Tuesday, August 19th, 2008.

Way back in June over on Sub­trac­tion, Khoi pre­sent­ed a tweaked ver­sion of the Gmail inter­face (and then a fol­low-up arti­cle regard­ing the feed­back on the first), improv­ing spac­ing and align­ment by mak­ing a few small but sig­nif­i­cant changes over­all:

…by nor­mal­iz­ing the space between like ele­ments, align­ing ele­ments along sim­i­lar spa­tial planes, mod­er­ate­ly increas­ing the space between stacked items and pay­ing atten­tion to how ele­ments are framed by neg­a­tive space, we can get what is, in my opin­ion, a sig­nif­i­cant­ly more attrac­tive Gmail inter­face.” Khoi Vinh

This is some­thing I’ve want­ed to see for a while in Gmail, and in fact had pre­sent­ed a few exam­ples last year (July 2007) as part of my inter­view process at Google (I real­ly must write about my series of amaz­ing job inter­views last sum­mer, but I’ll leave that for anoth­er time). After reading—and commenting—on Khoi’s post, I had intend­ed to pub­lish my vari­a­tion on Google’s mid-2007 inter­face, but as the ded­i­ca­tion to blog­ging con­tin­ues to elude me, this too fell a few pages back in the Mole­sk­ine to-do list—until now.

The Setup

I took a slight­ly dif­fer­ent approach than Khoi, though my goals were sim­i­lar:

That last goal was impor­tant and act­ed as a guide to the rest: I want­ed to present improve­ments that could be made right away with­out caus­ing a neg­a­tive reac­tion among Gmail users.

Rather than adjust the line height of the main mes­sage area, I decid­ed to bring as many of the oth­er ele­ments in line with that as I could. You’ll notice spac­ing improve­ments with­in each line how­ev­er, reclaim­ing some poor­ly used hor­i­zon­tal space. Like Khoi, I felt the mes­sage lines were a bit crowd­ed, so to give the impres­sion of more room in those lines, I removed the grey hor­i­zon­tal lines between each item and allowed the back­ground col­or to bleed through (all they need is some separation—further empha­sis on those lines just adds weight). The result is that it feels like there’s a bit more space, with­out actu­al­ly adding any.

The main nav­i­ga­tion lost its under­lines (again, remov­ing unnec­es­sary visu­al weight—the “this is a link” cue is super­flu­ous here) and gained space (match­ing the base­line of the mes­sage list). The “Com­pose Mail” link got an extra high­light by way of a back­ground; the extra padding makes it the only nav­i­ga­tion item that does­n’t align with the base­line, but that also gives it a lit­tle more con­trast ver­ti­cal­ly, thus it stands out more with­out hav­ing to scream for atten­tion. Less impor­tant text links with­in the mes­sage area were made slight­ly small­er (but kept their under­lines), and “Mark as read” was pulled out of the drop-down menu and giv­en its own but­ton: I had spent a week or so watch­ing peo­ple use Gmail before doing this exer­cise, and that was the sec­ond most fre­quent action users need­ed (right behind “Delete”) but was hid­den in the drop-down.

Final­ly, all round­ed cor­ners were cleaned up a bit, foot­er text was aligned to the base­line, and the mes­sage list was enclosed on the right side (maybe it’s just me, but it’s always bugged me how those lines just run right to the edge).

Reveal Already!

I’m still hap­py with how this turned out a year lat­er, and it was well received by the Google inter­view crew. Com­pare the before and after images, and you’ll also notice that the improved spac­ing in this exam­ple actu­al­ly reduces the over­all height of the page, allow­ing two addi­tion­al mes­sage lines to fit in the space of the orig­i­nal.

Both Khoi’s and my realign leave almost all the orig­i­nal ele­ments of the inter­face intact—this is very impor­tant when mak­ing changes (even if only sug­gest­ed ones) to such a pop­u­lar appli­ca­tion, and the same goes for any prod­uct, pub­li­ca­tion or web site that is part of a per­son­’s dai­ly rou­tine.

Whether Gmail incor­po­rates any of these sug­ges­tions is out of our hands, but it’s still nice to have the chance to com­pare.

Note: many changes have already been made to the Gmail inter­face over the last year, and even in the last few months since Khoi post­ed his exam­ple. Not all are improve­ments, but at least some­one’s mak­ing an attempt.

Categories:

13 Comments

Some Thoughts on Logo Design

This item was posted by Dan Rubin on Friday, June 20th, 2008.

A few months ago, I had the plea­sure of answer­ing a few ques­tions for an arti­cle being writ­ten by my friend Elliot Jay Stocks for .net Mag­a­zine (Prac­ti­cal Web Design here in the States). Elliot quot­ed me quite nice­ly in the arti­cle, but I thought it would be inter­est­ing to pub­lish my com­plete answers here, along with his ques­tions, and he kind­ly gave his per­mis­sion.

Note: The arti­cle itself is full of some sol­id infor­ma­tion and quotes some bright minds—well worth pick­ing up if you get the chance (as is the rest of the issue).

EJS: Please could you tell us a bit about your­self and your work with logos so far?

DR: I’ve always loved logos, and some of my ear­li­est exper­i­ments with design were logo­types (I tend to pre­fer type-dri­ven logos with min­i­mal imagery). I don’t get as many oppor­tu­ni­ties to design logos for clients as I’d like, but I do a fair amount for friends and per­son­al projects, some­times for imag­i­nary ideas just as an excuse to design a logo or logo­type.

EJS: Which logo (that you’ve designed) are you most proud of and why?

DR: I’m torn between the cur­rent logo for Super­flu­ous­Ban­ter and a logo I did a few years ago for a real estate com­pa­ny that by broth­er was start­ing. I put most of the work I do into two cat­e­gories: design for myself, and design for others—so those are my cur­rent favorites from each cat­e­go­ry.

In the case of SuperfluousBanter’s cur­rent logo (there have been a few over the years), the “sb” mark on an orange field sport­ing a lighter spi­ral (with the counter of the “b” over the cen­ter of the spi­ral) has a nice bal­ance of sym­me­try and asym­me­try at the same time, with­out get­ting com­pli­cat­ed.

With the logo for the real estate firm, the busi­ness name was that of the main part­ner in the com­pa­ny, so it required a visu­al mark in addi­tion to the logo­type in order to com­mu­ni­cate the type of busi­ness. Not that it was ground­break­ing in any way, but the mark does its job well, with­out being too complicated—the more basic the shapes, the eas­i­er it is to rec­og­nize an image at a glance (impor­tant for prop­er­ty sig­nage), and the bet­ter its repro­duc­tion at var­i­ous high- and low-res­o­lu­tions. The qual­i­ties of the mark that make it my favorite are sim­i­lar to those of the Super­flu­ous­Ban­ter mark: a com­bi­na­tion of sym­me­try and asym­me­try that results in bal­ance (it’s extreme­ly impor­tant to have all three), and in this case, the end result was almost exact­ly what I pic­tured in my head before even sketch­ing the first rough.

EJS: Can you name an all-time favourite (web-relat­ed) logo that some­one else has designed? Why do you like it so much?

DR: It’s hard to decide, but I’ll go with Dan Cederholm’s Cork’d logo. I like Dan’s style in gen­er­al, but the Cork’d logo is just ele­gant in its own lit­tle way (recur­ring theme: com­bi­na­tion of sym­me­try and asym­me­try result­ing in an over­all bal­ance). I wear the t‑shirt so much that I’ve almost worn it out ;)

EJS: What do you con­sid­er to be the cur­rent trends in web indus­try logo design? Are they good or bad?

DR: While there are still a lot of “web 2.0” design trends every­where (not just online, either), in my expe­ri­ence these design trends result almost as much from client demand as from design­ers impos­ing those trends on their work. As I said before, I’m a fan of type-dri­ven logos, with sim­ple, straight-for­ward visu­al marks to sup­port the type. Aside from the drop-shad­ows, bevels and oth­er stan­dard design clichés, I don’t think there are any awful trends per se (some peo­ple might say there’s been enough round­ed type and bright, hap­py col­ors, but if a client wants their brand to be ‘friend­ly’ etc., more often than not it’s the right direc­tion), but I could still do with­out bla­tant 3‑D or an over abun­dance of fil­ter effects. And let’s not get into the pros and cons of reflec­tions…

EJS: Where do you get your inspi­ra­tion from and can you rec­om­mend any good places of inspi­ra­tion or resources (books, web­sites, design­ers, etc.)?

DR: I’m con­stant­ly search­ing for new sources of inspiration—my per­son­al pref­er­ence is to find as much as pos­si­ble offline rather than use the web. Not only does it give my eyes some need­ed respite from the glare of the screen, but I find my reac­tions are dif­fer­ent when read­ing a book, sift­ing through old album cov­ers, dig­ging through piles of magazines—the tac­tile expe­ri­ence engages more sens­es, and that helps get the cre­ative juices flow­ing for me. As for spe­cif­ic resources, I think it’s use­ful to have good exam­ples around (for com­par­i­son if noth­ing else), and the Logo Lounge series of books is a good place to start for more recent designs. A sim­i­lar resource online is Logo­Pond (though I wouldn’t per­son­al­ly sub­ject in-progress work to pub­lic exam­i­na­tion like some users of the site). If you can find books about logo design and brand­ing written/printed pri­or to the mid-1980’s, you’ll find some great exam­ples of how to design marks with­out going over­board (a sim­ple mark that repro­duces well in black after being faxed will like­ly trans­late quite nice­ly to the web).

EJS: How do you approach the logo-design­ing process? Is there a sys­tem (maybe in 6 steps) that you can rec­om­mend?

DR: While I don’t have a fixed set of steps in place for any of my work (I like to think it helps avoid pat­terns and forces me to think from a fresh per­spec­tive on every project), I do tend to go about the prob­lem-solv­ing process the same way each time:

  • Find out as much as you can about the client/product/organization/person/service that the logo will rep­re­sent. With­out that input, a logo is just some text, lines and col­or.
  • Research oth­er brands in the same market—I used to use this step as moti­va­tion to “design a bet­ter logo” or “beat the com­pe­ti­tion” but I feel that was mis­guid­ed. Now I use it pri­mar­i­ly to get a feel for what is already suc­cess­ful, and to know what to avoid visu­al­ly in order to cre­ate some­thing unique.
  • Sketch and Play—this step is the most ran­dom for me: some­times I’m sketch­ing with pen­cil in a Mole­sk­ine, oth­er times I’m mess­ing around in Pho­to­shop or Illus­tra­tor, and a few times the good ideas have come on the req­ui­site cock­tail nap­kin or in the mar­gins of a mag­a­zine. The exper­i­men­ta­tion is the fun part—it’s not always need­ed (if you see the final logo in your head the first time inspi­ra­tion hits, get to a com­put­er as quick­ly as pos­si­ble and just draw the thing!), but when you’re wait­ing for the light­ning to strike it’s a good way to try things out.
  • Design in black and white until you have your logo­type and/or mark, then add col­or and adjust as need­ed.
  • Once you have some­thing, print it out. A lot. I tend to do most dig­i­tal logo work in Illus­tra­tor so every­thing is vec­tor and eas­i­ly print­ed at var­i­ous sizes. Print vari­a­tions in type weight/style, as well as invert­ed ver­sions of your logo­type and mark. Print large ver­sions and paste them to the wall, or lay them out on the floor. Look at them for a few hours, or a day, or a few days—as much time as it takes you to real­ly let things sink in.
  • If it’s paid work, don’t deliv­er final art until receiv­ing final pay­ment. If it’s for a friend, give them a CD over din­ner.

EJS: What tools fea­ture in your logo-mak­ing process (and how promi­nent­ly, like main­ly Illus­tra­tor and only a bit of Pho­to­shop?), and can you name any that peo­ple might not know about (i.e: any apps out­side of the Adobe fam­i­ly)?

DR: I guess I already answered that for the most part. Illus­tra­tor is my pri­ma­ry weapon, though any­thing that allows vec­tor illus­tra­tion should be fine (even if you’re design­ing a logo for a web site—there’s noth­ing worse than design­ing a kick-ass logo in Pho­to­shop at 72dpi and then real­iz­ing that you have to recre­ate it from scratch as vec­tor art because the client wants to make t‑shirts).

EJS: What prob­lems have you encoun­tered in design­ing logos and how do you avoid them?

DR: Aside from fig­ur­ing out the start­ing point (always a mov­ing tar­get from project to project), clients and their expectations/preferences are the biggest prob­lem. That’s a big­ger top­ic of dis­cus­sion, but I retain as much cre­ative con­trol as pos­si­ble, and let my clients know up front that I expect them to trust my opin­ions. If you’re firm with your client from the begin­ning, their expec­ta­tions will fall more close­ly in line with yours.

EJS: What gen­er­al tips can you offer for oth­er logo design­ers out there?

DR: Play. A lot. Look for sources of inspi­ra­tion that may not seem imme­di­ate­ly obvious—if you’re stuck for ideas on a logo for a children’s book, start dig­ging through some heavy met­al album cov­ers, or a stack of per­for­mance car mag­a­zines, or some swimwear cat­a­logs. The con­trast can do won­ders for your sub­con­scious.

EJS: How would you define a good logo? What ele­ments does it need?

DR: Though I have my own, sub­jec­tive thoughts on this, I’m sure not many would dis­agree that a good logo is one that com­mu­ni­cates the intend­ed mes­sage effec­tive­ly. Usu­al­ly that mes­sage helps define the brand in an eas­i­ly digestible way. So a suc­cess­ful logo is one that can rep­re­sent the brand (whether it’s an indi­vid­ual, a small non-prof­it orga­ni­za­tion, or a mul­ti-nation­al cor­po­ra­tion).

When it comes to the actu­al visu­al ele­ments, I pre­fer logos that do the above described job with­out being com­pli­cat­ed. Strik­ing the cor­rect bal­ance between typog­ra­phy, col­or, shapes and sym­me­try isn’t some­thing that can be quantified—it will be dif­fer­ent for every logo. I find that the logos that pique my inter­est the most are those with some lev­el of bal­anced asym­me­try: if you split a logo down the cen­ter of either axis, it should not result in a mir­ror image. Type is a straight­for­ward way to achieve this, since you can very eas­i­ly bal­ance the let­ter­forms with­out cre­at­ing a mir­ror image. In fact, you’d have to work very hard to achieve that effect, to the extent that if it was the intend­ed effect, it would like­ly be a more cre­ative end result (and as such, become a suc­cess­ful excep­tion to the mir­ror rule), for exam­ple the ambi­grams of John Lang­don.

EJS: What would you con­sid­er to be mis­takes in logo design, be them your own or made by oth­ers?

DR: A lev­el of detail that pre­cludes low-res­o­lu­tion or small-size repro­duc­tion, includ­ing col­or and type selec­tion in some cas­es. This is a poten­tial issue with the pre­pon­der­ance of pho­to­re­al­is­tic logos that are becom­ing increas­ing­ly pop­u­lar with soft­ware com­pa­nies, but I’m start­ing to see it creep into oth­er uses. I also feel like type­face selec­tion is often not giv­en as much care­ful con­sid­er­a­tion as it requires. Of course, logos can still be suc­cess­ful with­out being “per­fect” by any one person’s def­i­n­i­tion.

Many thanks again to Elliot and the edi­tors of .net Mag­a­zine.

Categories:

10 Comments

Older