Thoughts on Design

Steven at SpyderBlog had a really good comment on my last post. I started to answer it in the comment section, but it soon became clear that it needed more significant attention.

I quoted the The Design Constitution which says, in part:

Rather than dictate specific changes to a design–”move this here” or “change the color to,: - let’s agree the Client will request a new design or a variation of the original that addresses specific problems.

Steven’s response was:

From a web usability and content writing perspective, I know of many times when a small change does not require an entirely new design or a variation of a mostly approved design.

I agree, small changes often don’t require that sort of drastic change. It’s more of the attitude of the designer/client relationship that I’m considering. The key as I see it, is for the designer to be able to address specific client identified problems, rather than having the client acting as designer.

I have no problem with clients identifying problems with a design. I do have a problem with the client trying to identify and execute the solution to the problem. As a designer, I don’t want a client looking over my shoulder saying things like “move that up a little”, or “a little to the left”. That may sound silly, but I’ve had clients try to do that both figuratively and literally. What I want is to have the client say something like “I think the text is too tight around that graphic”, then let me address that problem.

I am good at my job, my clients are good at theirs. They are not however good at mine. What I like about this constitution is how it clarifies this relationship. This is my job as graphic designer or web designer, that is yours as a client. That clarity is often missing in designer/client relationships.

You could argue, as some of the commenters do, that his isn’t workable. Who cares? This is far and away the best demonstration of the proper interaction between designer and client that I’ve seen. For me, it’s more important as an ideal than as a workable plan. Once the ideal is defined, then a workable subset of these rules can be made. When no ideal exists, what do you work towards?

The Design Constitution

Great work results from a near obsession with detail and nuance. Done right, a brochure, a web site, a catalog, and so on, is so carefully structured, changing a single significant element can drastically impact the whole.
Rather than dictate specific changes to a design–”move this here” or “change the color to,”–let’s agree the Client will request a new design or a variation of the original that addresses specific problems.

Hat tip to Evolution of Intelligent Design.

Cascading style sheets (CSS) can be simple, complex, convoluted beyond belief. While CSS is the backbone of modern web design, it’s not fully understood by a lot of people using it. I constantly see CSS with significantly more code than is necessary. More isn’t always better. I’ve always thought it was better to just clearly define what you want and be done with it. Consider this CSS:

body {font-size:medium;}
p { font-family:Arial, Helvetica, sans-serif;}
a:link {
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color: #660000;}
a:visited {
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color: #000000;}
a:hover {
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color: #330000;}
a:active {
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color: #990000;}

Sure, it would work, but what if you want to change it? If you wanted to make a site wide font change, you’d have to change every instance of the the font specification. By first assigning all general specifications, then listing exceptions, we can significantly shorten this code.

body {
font-size:medium;
font-family:Arial, Helvetica, sans-serif;}
a { font-weight:bold;}
a:link { color: #666600;}
a:visited { color: #000000;}
a:hover { color: #330000;}
a:active { color: #990000;}

By defining the site’s basic font on the body tag, we’ve eliminated any need to use it elsewhere. By defining all links “a {” as bold, we’ve eliminated the need to define it elsewhere. To change the font on the entire site would now only require changing the body tag’s definition.

If I wanted some aspect of the site to use a different font than defined in the body tag, it would only be a matter of adding that tag into the CSS with the font defined differently. For instance:

body {font-family:Arial, Helvetica, sans-serif;}
h1, h2, h3, h4 {font-family:”Times New Roman”, Times, serif;}

This would make all fonts Arial, except for headers 1-4. First we defined the site as all Arial font, then we changed the headers to Times. My rule of thumb for CSS is first define the general, then define exceptions. This short post won’t make you a master of CSS, but maybe it can help you keep it simple.

Indi Young at TechSoup.org had an interesting post yesterday called Is Your Home Page Immature?

So how can you tell if your organization isn’t using its home page to best advantage? One symptom is a failure to trust your own navigation and architecture systems to direct customers to valuable information.

I’ve seen that type of “immature” designing before, but I’ve never heard it described quite that well. I’ve always disliked that sort of webdesign, but for purely aesthetic reasons. The “immature” style as Ms. Young calls it is too cluttered and fragmented for my taste. It’s the same design theory that brought us “Bold everything, it’s all important!”

I’m particularly interested in her second step in improving your site:

Think of every pixel as dynamic content. Very little on your home page - ” besides the navigation and logo, of course -” should be considered permanent.

It takes an idea that I’ve been using, and pushes it much farther that I’d ever considered. “Think of every pixel as dynamic content.” I’m going to have to revisit several of my sites with this idea in mind. What content have I been letting sit on the home page, just because it’s always been there? Definitely something to think about.

How fast does your site load? One of the most common problems I see with web pages is slow load speed. Most often the problems that are slowing the site down are easily fixable. Unoptimized images, too many images, too many scripts, and way too many domain lookups.

Amitav Roy at Web Design And Graphic Design has a great post on this today called Tips on Fast Loading Web pages. A must read for any web designer.

Optimizing page load performance is not just for content which will be viewed by narrow band dial up visitors. It is just as important for broadband content and can lead to dramatic improvements even for your visitors with the fastest connections.

Trackposted to Wake Up America, Rightwing Guy, Perri Nelson’s Website, Is It Just Me?, The Random Yak, Big Dog’s Weblog, basil’s blog, Blue Star Chronicles, The Pink Flamingo, Conservative Cat, Right Voices, and OTB Sports, thanks to Linkfest Haven Deluxe.

I found an interesting post by the Grammar Girl’s called Correcting Other People’s Grammar today. One aspect of graphic design that is always underestimated by designers and clients alike is corrections. Clients always think that their supplied copy is perfect, graphic designers know better. Graphic designers know that our design is flawless, customers disagree. Grammar Girl’s suggestions for making grammar corrections could just as easily be applied to getting corrections done on graphic design projects.

In any other case, you must ask yourself if the person you wish to correct would actually like to be corrected. If the answer is”no”, then you should keep it to yourself. One exception to this is if you are putting together a work product, and there is a grammatical error that would make you or your company look bad. In this case, you should just suggest the edit and your reasoning behind the correction and refrain from delivering a grammar lesson.

Whether you use this method or another, there will always be corrections. It’s the nature of the business. Being prepared for them, and dealing with them in an organized an appropriate fashion will save yo time, and clients. Sure, clients don’t want to be corrected, but they don’t want to look bad either. It may be awkward pointing out a problem to a client, but it’s better to do it yourself before the project is completed, than to have someone else inform the client of it after it’s completed.

I saw something at writerus drivelus this morning that got me thinking.

> Stop trying to be ‘right’ and just do something that works.

The implication being, go back to tables; it’s a simple page requiring a simple solution.

Do I do what works, or what’s right?

As an individual, designing my own site, I can design on a whim, there are no rules. As a point of reference, my first design for this site had jagged edges instead of straight lines, I just wanted to see how it looked.

As a graphic design professional though, I have to choose option three, “all of the above”. It has to work, and be the right choice. It doesn’t do my reputation any good to do something that works, only to have client come back six months later to ask why it isn’t “right”. My philosophy has always been to leave my work in a condition that would allow another designer to sit down in my chair tomorrow and take over. Make the right design choices, and do the production work in a straight forward and predictable fashion. Maybe another designer can’t match my technical skills, or understand why I did something, but there should be no confusion about the product they’re looking at.

So to answer the question “Do I do what works, or what’s right?” I would have to say… yes! As a professional, making the right choice work is the only option.

As I’ve said before negative space is a very underutilized aspect of graphic design. So when I see good writing on that subject, it catches my eye. This morning I spotted an article by Mark Boulton on A List Apart. Mr. Boulton’s Whitespace article covers many of the different ways that whitespace is used in modern design. From Direct Mail:

I soon discovered that the graphic design principles I’d learned in college were of little use when I designed for direct mail, where big, bold, and crowded is the order of the day. In the words of one client - words I will never forget “whitespace is empty space.”

To Brand Positioning:

A lot more goes into brand positioning than just whitespace, but as a brief lands on your desk for a luxury brand, it’s very likely that the client - and their target audience - expects whitespace and plenty of it to align the product with its competitors.

To everything in between. Go read the whole article, it’s worth your time.

I’ve been thinking a lot about proofing lately. It’s something that comes up often. As a graphic designer, and as a blogger, my work is always under the scrutiny of others. Whether it’s design critics, superiors, or my own proofreaders, everyone seems to look over my work. Never the less, things get missed. Are you a designer, writer, or blogger? Here are a few ideas that have come up over the years to help keep my work free of errors.

Proofreading

• Always have others proof your work. It’s hard to proofread your own work.
• Never put all your trust into the proofreading ability of others. In the end, responsibility falls on you.
• Always proofread from a printed copy. I don’t know why, but it works better.
• Set it aside and come back later. Looking too close blinds you to your own errors.

Design

• Check the design in black and white. If it doesn’t work in black and white it doesn’t work in color.
• Look at the design in it’s final context. if it’s going to be 4″ x 6″, proof it at that size. Large monitors can cloud your judgment about the size of your work
• Set the printed piece on a table and step back until it’s unreadable. Does the design still work? It should.
• Turn it upside down. A good layout will still be interesting upside down, and a bad layout will look horrible.
• Start at the bottom, and work up. Have a coding problem you can’t find? Putting the code out of context like this lets you see it with fresh eyes.

Grammar Girl’s have some good suggestions for proofing your writing. You’ll notice a few are familiar. Here are the key points, but you need to go read the whole thing.

1) Read your work backwards**, starting with the last sentence and working your way in reverse order to the beginning.

Despite checking my HTML code backwards, reading the design copy backwards had never occurred to me, I’ll be trying this one.

2) Read your work out loud.

I’d never heard the read out loud suggestion before, but I’ll be trying this one too.

3) Always proofread a printed version of your work.

I never miss this one.

4) Give yourself some time.

Difficult to do sometimes, but always a good idea.

The important thing to take away here, is to proof, and then do it again. Find out what works for you and stick to it. Careful proofing will improve the quality of your work, and you won’t be the only one who notices.

Have you ever mistyped something in a data form in Firefox? How about submitted something on a form that you’ll never need again? When you go to enter information in a form, does it gives you a long list of suggestions, when you regularly only use one entry? Now you can clear out the bad or outdated form entries, without clearing all of your form data. Delete one saved form item at a time.

Go to the form where the mistake is. Put your cursor in the text entry widget and hit down until the incorrect entry is highlighted. Now press shift + del… voila. You’re welcome. - Mission Data