Kiddies, what makes good design is good clients. It’s as simple as that. Look at CBS–the eye. Genuis. But Frank Stanton, the head of the network, deserves as much credit as Bill Golden, who actually designed it. If the sumvabitch paying the bills isn’t on your bus, you ain’t going anywhere. But if he really lets you drive, you can gun it to the moon.

We definitely agree with the sentiment that credit for a great design can be mutually shared between the designer and the client (who has provided the designer with enough license to craft genius.) Unfortunately, unsuccessful designs are also created by both the designer and client. Articles dealing with designers vs. clients and the design process with clients place the success of a project in the hands of a healthy client-designer relationship.

Make the logo bigger? There are other possibilities.

Because the relationship between client and designer is so critical to the success of a project, we’re continually trying to come up with better ways for these key players to interact. We need to be mindful of the time, investment and even prior experience that a client is putting into the project, while at the same time pushing that client to try and step back and let us do our thing.

It’s important for us to hear the business objectives and business problems directly from clients so we can understand the reason why they are seeking something new. At the same time, we can also look to read between the lines, and dig to find solutions that the client might not realize exist.

It is far more useful for us to hear a client’s perspective such as “most of the customers who arrive on our home page don’t yet know us, and our brand is being lost on a page that is overwhelming them with content” instead of “make the logo bigger“. By stating their concern, we can provide solutions that may or may not include making the logo bigger (for example, brand presence can be increased through colour and pattern, typographic treatments, minimizing other distracting elements etc… not just making the logo bigger.) Sometimes these alternatives are better than the client’s self-diagnosed and self-prescribed treatment.

How does a designer build this kind of trust in the client to step back and not rush to solutions?

Confidence has to be one of the key motivators. Once a client feels secure that their design issues are going to be addressed in a thoughtful and intelligent way, they’re far more willing to let the process unfold. How do you inspire that kind of confidence? That’s the million dollar answer, and I don’t have it, yet. Proven experience, self-confidence, the ability to listen and give thoughtful feedback, a dazzling portfolio of staggering genius – maybe all of the above..?

We’ll keep working on it, and continue to tell our story. Communication is the key ingredient in arriving at a final product that everyone is proud of – something that fulfills business communication goals, has a rich user experience, and is visually stunning. So let’s get back to the drawing board.

There are many tools and tricks available to web designers when it comes to styling type: size, colour, alignment, line-height (leading), word-spacing (don’t do it), but an important one I find most often ignored by developers is letter-spacing (tracking). Letter-spacing is literally the space between the letters… and it can make a big difference in terms of legibility and the overall feel of a site.

“Don’t blame me; you forgot the letter-spacing…”

As a designer, it feels like I am often getting flack from developers for type that is “too small”. Ninety-nine percent of the time after I hand off an Illustrator file or PSD of a design, the coded page comes back to me without any letter-spacing included in the CSS. Letter-spacing is like air: you don’t really notice it, but it makes a difference whether it is there or not.

It’s easy, just do it.

I’m really bad at math, but the other day it dawned on me how to figure out the CSS letter-spacing measurement from my AI (or PSD) file. Tracking in Adobe programs is measured in 1/1000em so when the design file specifies “50″ or “100″ in the tracking character palette, it is 100/1000 = 0.1em. That 0.1em can take a 10px all caps style from “too small” to “completely awesome”. See below:

EXAMPLE WITHOUT ANY LETTER-SPACING, OMG SO TIGHT, NOT IN A GOOD/SEXY WAY.

ADDED 0.1EM OF LETTER-SPACING. LOOK HOW AMAZING IT IS NOW.

2PX OF LETTER-SPACING? CRAZYTOWN! GET THE EFF OUT OF HERE!

Of course there are issues…

Like in many cases, basically Firefox is the only browser that does letter-spacing right. Depending on your product/audience, this may not be an issue, but it is definitely something to keep in mind when specifying sub-pixel measurements that may be rounded up or down in browsers other than Firefox.

Negative letter-spacing: it’s just a fad, right?

This is so tight, yo! I can’t even read it!

Over the last couple years a big web typography trend has been the bold sans type with negative letter-spacing, “all the cool kids are doing it.” While I can see the appeal (in that it speaks to the whole web 2.0 design aesthetic), I expect that this trend will soon remedy itself. Letter-spacing is meant to be applied with a gentle touch, and when heavy-handed negative (or positive) tracking occurs, it can definitely affect the legibility, as some of those examples clearly show.

The bottom line

Always use letter-spacing to your advantage and not to your own detriment, just because it’s “in”. Yell at developers when they omit it from the CSS and then decide to blame you, the designer. And if that doesn’t work, do what I had to do: get the keys to the site or app, then tweak to your heart’s content.

WYSIWYG

What you see isn’t what they get

There is no way to control the way online content is viewed and experienced by your audience. You can plan wisely to an extent, but you’ll go nuts trying to get the same site to show up in the same way on all computers across the world. Browsers and operating systems vary between user to user, and even with the same set-up, their viewing areas within browsers can vary too, due to stupid Bing toolbars etc. Monitors are getting increasingly gigantic leading to higher screen resolutions; with the wide range of physical and virtual viewing sizes, the old notion of a defined fold really goes out the window. Fluid or elastic width layouts (like Google Maps) can be a great solution to have your site look its’ best for various users, but those options come with their own headaches (like ridiculous line lengths across 30″ monitors…)

Long scrolling pages, FTW!

I was always told that going too far below the fold annoyed users and that the content would be completely lost and ignored, due to “too much scrolling”. I have no idea where that misconception came from, but maybe it stems from the 56k modem days where too much content one a single page wouldn’t load fast enough to maintain interest. Technology has obviously grown beyond the whine of a dial-up connection. I love having a lot content available on one page; instead of clicking to read short pages, I can just keep scrolling – I don’t have to wait for a series of pages to load, just one –albeit larger– page (check out Black Estate Vineyard for a great example). The fold is really useless in this case since it’s proven that people scroll – as long as you provide them with the tools at the bottom of the page to move on, or go back up, there is no problem with long scrolling pages.

Some other pages that take full advantage of vertical scrolling include: thismortalmagic and the idsgn blog where you can keep clicking “More posts” if you’re interested in additional content. Even corporate marketing pages like Basecamp utilize length to their advantage; if I feel like reading all of their testimonials, everything is here for my enjoyment. If this content doesn’t interest me, I haven’t lost anything.

Beyond the fold: enriching the user experience

The space that web designers have to work with now is no longer limited to just a width and height. There are many ways to enrich the user experience with additional content above, below, and hidden behind the visible content. As long as the layers of information are relevant to the user, the additional dimensions can promote easier browsing and encourage discovery. As these web technologies and capabilities grow, the idea of the fold becomes increasingly outdated. Exercising common sense in UI design basically covers all aspects that the fold was meant to dictate, things like important content should be high up on the page so the user notices it when they arrive (wow, who would’ve thought of that…).

I would love to see a shift in online experiences from the dated “all content in the fold” sites to a more blog-style experience, where everything is on the table. We shouldn’t have to worry about overwhelming the user – as long as the content is edited, compelling and engaging and well designed, they should have the final decision on what they want to read or ignore.

We were recently contacted by a well regarded designer who felt that the some of the iPhone icons we were giving away for free, bore too close a resemblance to his own icons (which he was selling from his site), and that we were possibly infringing on his copyright.

We hadn’t seen his icons before, and knew we hadn’t copied them. Our hackles were raised, but fortunately we let it rest overnight and followed up the next day. How? We did the *Canadian* thing and politely replied to his email, explained the situation. After a couple emails, we easily came to agreement.

Who was right?

The episode left me with a lingering question. Was it even possible to infringe on someone’s copyright without ever having seeing their original work ? And further, what are the rules around copyrighting images and icons in particular.

Legal battles that shaped the computer industry.

After searching around and reading for a few hours I discovered that there are plenty of places that you can find typically obtuse legal information about copyright. We did, however, find an excellent  article, from a book titled “Legal battles that shaped the computer industry.” By Lawrence D. Graham. You can find it in google books

Two salient points from the article were:

1. “Icons are protected as soon as they are fixed in a tangible medium of expression.” This seems fairly self-evident; they need to exist in some format that is perceivable.

2. “Copyright law prohibits the unauthorized copying of the icon designs, but does not prevent others from independently developing and using similar designs. Unless a given icon design is particularly original and creative, copyright law prevents only the nearly exact copying of the icon design.”

This second point leaves a bit of ambiguity. Essentially, if the icon is not ‘particularly original’, then copyright law prevents the exact or nearly exact copying of it.

However:

A. what does ‘not particularly original’ mean?
I’d be interested in hearing what others think, but after some thought, my interpretation would be that any ‘icon -> concept’ which has been created before would certainly not be ‘particularly original’. For example, the ‘lightbulb -> idea’ icon would not be particularly original, as it has been used for decades as the representation of the ‘eureka idea moment’.

and secondly,

B. what does ‘nearly exact copying’ mean? My interpretation would be that while ‘exact’ copies would be indistinguishable,’nearly exact’ designs would be merely difficult to distinguish.

The assessment

So turns out that, ‘yes’ you can be infringe on someone’s copyright without ever having seen their work. It  just takes a major coincidence (call it zeitgeist or the collective unconscious) . But ‘no’, based on my understanding of the copyright (see above) it was clear that our designs passed neither test to indicate copyright infringement.

Dialogue beats Courtrooms

What turned out to be more relevant than who was legally ‘in the right’, was my re-confirmation that most of the time, the person on the other end is acting in good faith, sincerely describing their position, and is often quite reasonable in  discussion and agreement. People are generally good at heart and in intention. Dialogue beats courtrooms.

Lately we’ve been getting more involved in developing iPhone apps for our clients. iPhone apps have their own size and UI standards, so we decided to speed things up for you by sharing some clean and simple iPhone toolbar icons. Feel free to download this 160-piece set, and use it in on your own projects. If you decide to download or use them,  please drop a link to this blog post. Thanks!

2009/10/06 Update: We’ve received several inquiries about our iPhone icons. We’ve decided to license them under a Creative Commons Attribution-Share Alike license.  You may use the icons for both commercial and non-profit purposes, as well as modify them (in fact we challenge you to make ‘em better).

1. Bad typography is too easy
2. Illegible and annoying sites
3. @font-face + CSS3 effects = disaster
4. Pirates and the shipwrecked

Bad typography is too easy

A lot of bad or amateur-looking print design is victim of poor type decisions paired with improper typographic finesse. With all the choice out there, why pick Papyrus or Hobo for a menu or brochure? It happens far too often in print and now it can happen easily online with @font-face. For every beautifully crafted typeface, there are probably 10 mediocre ones, and 25 really fugly ones; the odds are stacked against us, but hopefully designers will exercise restraint and common sense.

Illegible and annoying sites

@font-face has the potential to marry beautiful typography with usable, accessible, and indexable content, but there are also foreseeable legibility disasters in this free-for-all. One of the best things about web-safe fonts, such as Verdana and Georgia, is that they are fairly cross-platform reliable, and have proven legibility. With its large x-height, giant counters, and distinctly varied characters, Verdana was designed to be read easily on-screen at small sizes. However when used in print, it sometimes falls comically flat – look at how IKEA just screwed their print branding by using this traditionally web typeface.

Techniques like Cufón and sIFR are technologically hefty, often limiting use just to headline text. Since @font-face is lightweight enough to use throughout an entire site, paragraph text styled poorly in an awkward font can easily impede legibility and annoy users. It’s not worth sacrificing access to the content just to make something look nicer.

CSS3 effects + @font-face = the internet circa 1995

Pair a little cheesy text-shadowing with a “funky” typeface and the internet has been set back 15 years. There is probably never an online situation that calls for drop-shadowed, glowing, or flaming type; we’re talking web design, not cereal boxes. Like crappy flash intros, just because it exists, doesn’t mean it should be used. Let’s hope that clients don’t get a whiff of this one and start requesting it for home page headlines.

Pirates and the shipwrecked

Though it can be argued that pirates will always find a way to get what they want for free, why make it any easier to steal fonts? If used incorrectly, @font-face can offer up copyrighted font files for free. Solutions like Typekit are taking steps in the right direction, but there are bound to be inexperienced slip-ups at first. Browser compatibility issues with @font-face may also end up leaving users on older browsers behind, viewing (in theory) less typographically rich content. It will be fun watching the online typographic revolution unfold once copyright issues are resolved, and cross-browser support is ready. Hopefully @font-face will make the internet a more beautiful place, and not like a bunch of designers got drunk on the punch and barfed typefaces everywhere.