Eight things I wish I’d known when I started

~ 26 July 2004 ~

Ever wish you could rewind time and start over?

I sure do. Sadly, the luxury of such is never afforded. However, they say prevention is better than cure, so perhaps the following eight points will provide a strong start for budding designers — and a strong refining point for those of us more experienced.

1. Details a great designer maketh. If there’s one thing I’ve repeated over the course of my career more than anything else, it’s this simple philosophy: If you have time and talent to care for the smaller details, it almost always means you’ve already cared for the bigger details. Meaning, if you have time and talent to readjust the logo positioning 1px or 1pt to the left or right, it likely means you’ve already solidified usability, cross-browser compatibility, primary headline, and so on. I’m amazed by works that continue to impress as you dig deeper into the details.

2. There’s a point at which quality becomes too costly. Find that point with every project. Having expounded on importance of details, allow me to counterbalance with a brief discussion about the cost of quality. You’ll inevitably hit a point on every project when we all say, “If I just do this or that improvement, it’ll be much more impressive as a portfolio piece.” At that point, you’re essentially designing off the clock. If you (and your employer) can afford the time, more power to you. If not, however, the cost of the additional quality is both too expensive and unnoticeable by the client and its audience — time to stop and move on. (Economics majors: Think law of decreasing margins.)

3. Those who code XHTML/CSS as well as they design will always have an edge over those who only design. For those of you who already code well, this is a no-brainer. You’re able to foresee potential layout and coding issues while the comp is still in Photoshop or Fireworks or even Illustrator. The benefits of such are rarely overrated, as time, er, money is saved and frustration is minimized.

4. Communicate, don’t decorate. How often are you caught up in adding imagery and typography — even details —that have little or no relevance to the project at hand? No worries, I still struggle too. But the sooner you and I learn to communicate with our designs using only what’s necessary and relevant, rather than decorate for the mere purpose of decorating, the sooner we’ll find our designs touch the consumer’s heart, rather than just satisfy the designer’s eye. Think of it this way: Every element added to a design, whether print or web, decreases the importance of every other element already on the page. You better be sure, then, that the additional element enhances rather than detracts.

5. When you hit a snag in CSS, strip down to the base ID and work up. Imagine this: The div containing your masthead image wraps improperly in IE, but displays perfectly in other browsers. While not all that difficult to imagine, it’s quite frustrating. Apart from coding from the start in Firefox, I’ve found it useful to comment out everything except the container div, for example. Once I’m positive the container div is working, I uncomment in the next div. Once that div is working properly in tandem with the container div, I uncomment the next div. And so on. A simple technique, no doubt, but often a useful one.

6. Rock. Paper. Trimmer. Forget scissors. Get yourself a quality paper trimmer. I can’t even begin to tell you how valuable a good paper trimmer is when prototyping print work. So much so, in fact, that I’ve wasted an entire point just on paper trimmers. What to look for? A rotary blade trimmer that can handle up to 11” × 17” prints. (And if you’re wondering, I use one similar to this.)

7. Give me one canvas, two fonts, and I’ll make something that sings. Type. Typography. Fonts. Typefaces. Whatever floats your boat. The important thing is this: Typography can make or break a piece. Typeface selection is crucial. Try testing your type savvy by creating a print ad using only two typefaces. No color, no photography, no logo. Just you and the type. Then submit it for peer review. You’ll quickly discover how well — or how poorly — you choose typefaces.

8. Chunking. The limitations of a weblog article don’t allow for an elaborate description of chunking. Suffice it to say someday I’ll write an article on the topic. For now, refer to portions of this outline PDF. Summarized in one sentence, “chunking” a brand increases consumer recollection. It’s the reason you can identify a BMW based solely on the front kidney grill, or the reason you can identify an iPod based solely on the white case.

Why not ten things, you ask? I’ve always been taught to deliver only what needs to be delivered to make a point. Nothing more, nothing less. Perhaps that’s number nine.

 

29  Comments

Veer Veer: Visual Elements for Creatives.
Stock photography, type, and killer tees. Genuinely recommended by Authentic Boredom.

1   Jeff ~ 26 July 2004 at 07:31 AM

Excellent article Cameron. I wholeheartedly agree with all the points listed here. I especially identify with the point on CSS. It’s much easier to troubleshoot as you go along through the design rather than to whip up a whole page and find out that preliminary, nested elements don’t place properly in all browsers. It makes the design process a lot more efficient as well as a lot less frustrating.


2   Jonathan Snook ~ 26 July 2004 at 07:50 AM

Great article filled with great wisdom. Number 3 is one of my favourites. Being a coder, I’ve always insisted that I see the comps before they go to a client. So often I find myself asking questions like, “What would you see if I expanded this design? Is the background going to tile or just fall off here?” I’m still surprised by how often I hear, “I don’t know.”

Number 7 should also be expanded to limit the use of fonts within a design. Excluding logo, there shouldn’t be more than two fonts used in a design.

I look forward to hearing more on chunking. Sounds interesting. :)


3   Dave S. ~ 26 July 2004 at 07:57 AM

Another unofficial #9 for consideration — bill a percentage before work begins, and collect the rest upon delivery. Pay the legal fees for a good binding agreement/contract, keep it flexible enough that if the unexpected happens either party may back out gracefully. Always bill for work delivered.

The last one is a ‘well, duh’ type suggestion, but creative types have problems with this. I have problems with this.


4   Alan M. ~ 26 July 2004 at 08:24 AM

Fantastic words of wisdom, Cameron! I especially agree with #4. Communication is what it’s all about.


5   Cameron Moll ~ 26 July 2004 at 09:05 AM

Re: contracts, no kidding. I could write another 8 things I wish I’d known just on contracts.


6   Jon Hicks ~ 26 July 2004 at 09:32 AM

Spot on! I’d add a personal one for me, which is “It always takes longer than you think it should..”


7   Jason G ~ 26 July 2004 at 09:51 AM

great article! I really need to dive into the art of branding more.

Another tip for helping you figure out your CSS challenges is to temporarily put a 1px border of different colors around the styled elements that are giving you problems. This way you can see exactly how the elements are reacting/interacting with each other. It’s gotten me out of several head scratching sessions (except on really dry days!)


8   Dave Neal ~ 26 July 2004 at 10:04 AM

Wonderful! To the point, and every word rings with the bell-like tone of truth. I’m posing this above my monitor to review daily.


9   Dave Neal ~ 26 July 2004 at 10:05 AM

Wonderful! To the point, and every word rings with the bell-like tone of truth. I’m posting this above my monitor to review daily.


10   chuck ~ 26 July 2004 at 10:25 AM

right on, Cameron! I’m definitely bookmarking this for future reference … great stuff - point #4 especially!

hey, anything you have to say about contracts, I’m all ears! :)


11   Blake Scarbrough ~ 26 July 2004 at 10:36 AM

Good points to consider.
I would also add an addendum to point 5.
In addition to using firefox, use the Web Developer extension. It will save you many headaches in de-bugging a site.


12   Caleb ~ 26 July 2004 at 12:53 PM

Great article. I can relate, especially to the part about having time or budget to do something. The budget I work on is extremely tight. Plus we don’t have much time to do what we do. Sometimes I try to hard though. It’s good to know others believe in keeping it simple so the message gets across.


13   Joel ~ 26 July 2004 at 02:07 PM

Thank you for sharing these points with the rest of the world! ;D

Yet another page I need to print off and staple to a wall or something near my desk.


14   Joen ~ 26 July 2004 at 02:13 PM

Hi, first post here.

There are a lot of good tips in this article, and I agree with the most of it. On my part, however, I put a little less emphasis on actual skills in XHTML/CSS and the likes. “If you can dream it, you can do it”, I think Disney said. And with this in mind, I truly believe that software can be a creative barrier rather than a great tool.

There’s a list of simplicity principles I found on a site that is now unfortunately dead. The site was called “lifewithus.com” but is now in limbo. The list was entitled “DeBono’s simplicity principles”:

1.You need to put a high value on simplicity.

To get simplicity you have to want to get it. To want to get simplicity you have to put a high value on simplicity.

2. You must be determined to seek simplicity.

People quite like simplicity if it does not cost anything but are usually unwilling to invest resources in making something more simple.

3. You need to understand the matter very well.

If you do not seek to understand a situation or process, your efforts will be ‘simplistic’ rather than simple. Simplicity before understanding is worthless.

4. You need to design alternatives.

It is not a matter of designing the ‘one right way’. It is more a matter of designing alternatives and possibilities, and then selecting one of them.

5. You need to challenge and discard existing elements.

Everything needs to justify its continued existence. If you wish to retain something for the sake of tradition let that be a conscious decision.

6. You need to be prepared to start over again.

In the search for Simplicity, modify if you can - start afresh if you cannot.

7. You need to use concepts.

Concepts are the human mind’s way of simplifying the world around. Warning: If you do not use concepts, then you are working with detail.

8. You may need to break things down into smaller units.

The organisation of a smaller unit is obviously simpler than the organisation of a large unit. The smaller units are themselves organised to serve the larger purpose.

9. You need to be prepared to trade off other values for simplicity.

A system that seeks to be totally comprehensive may be very complex. You may need to trade off that comprehensiveness for simplicity.

10. You need to know for whose sake the simplicity is being designed.

A shift of complexity may mean that a system is made easier for the customer but much more complicated for the operator.

—-

While this list is fairly centered on achieving simplicity, I find that it applies to almost all designs I work with, even those that are not “simple”, because at the core, (as you also mention in your article), it’s about communicating the message in a clear and simple way.


15   Keith ~ 26 July 2004 at 03:14 PM

Great points Cameron! You and I (and many others I’d bet) have been in a similar mindset lately. I’ve been thinking some of these very things. I had a post early this morning all about details and more to come soon.

These thoughts might mean changes are on the way….? ;)


16   Jason G ~ 26 July 2004 at 03:44 PM

Hey! Everybody who uses Firefox should listen to Blake Scarbrough and go get the Web Developer extension. I use it also and it rocks!

Of course, if you need to develop for IE or any other browser, do the border-thingy I told you about earlier! LOL!


17   Stefan Hayden ~ 27 July 2004 at 06:19 AM

I have to say that web developer thing is amazing. I really can’t live with out it and I haven’t even had it for that long. IE needs one bad.


18   Kieran Guckian ~ 27 July 2004 at 09:03 AM

Great list! Just on the Web Developer for Firefox, there is an absolutely fabulous toolbar developed by the National Information Library Service. It only works in IE and is an accessibility testing suite. However it can be used for all types of debuggin, I find it essential now. You can download it at their download page.


19   Cameron Moll ~ 27 July 2004 at 09:42 AM

Wow, nice find, Kieran.


20   Caleb ~ 27 July 2004 at 10:42 AM

Now if only that tool bar would show me what my CSS looks like in IE 5. Heck Cameron do you know how I can do that? I’m just getting into CSS and don’t have a spare machine to put IE 5 on to test my styles. Any way you know of I can test this?


21   Jack Brewster ~ 27 July 2004 at 10:50 AM

As yet another extension to #5, I suggest iterative browser testing. What I mean is, test in as many browsers as possible, frequently during the development process. Make a change? Test, test, test.

Yes, it helps to have a multiple monitor/computer set up to do this. But it’s still doable even on single display systems.

And since it’s so easy to run multiple versions of IE on the same computer, you can check agains versions, as well as vendors.


22   Anthony ~ 27 July 2004 at 12:57 PM

Hey, I must be on the right track. I based my last resume web site around number 4 because I was looking for a place that had similar design values. My tag line, “Graphic Design is about Communication, not Decoration” is still on my site.


23   Allan White ~ 27 July 2004 at 01:11 PM

I, too, would be interested in a post devoted to the Eight Things C.M. Should Have Known About Contracts. Do tell!


24   Mark Wyner ~ 27 July 2004 at 02:38 PM

Number three! Number three! You hit the mark on this one, Cameron.

The most important thing I’ve ever learned as a Web designer was how to author HTML, CSS, etcetera. Fortunately, I learned this early and immediately elevated my visual design to new heights.

When I’m approached by a new Web designer, this is the first thing I lay out for him/her.

Amen, brother.


25   Sharad ~ 28 July 2004 at 04:52 AM

For many designers (and customers) website design is about decoration and communication is secondary. Some good points in there.


26   Robert W ~ 30 July 2004 at 01:59 AM

Great list, I like to think that I struggle with these concepts every time I design a site. I find it extremely easy at times to get drawn away from what I should be concentrating on, and reading things like this helps me get back on track. Cheers!.


27   Mitchell ~ 08 August 2004 at 04:41 AM

Great points everyone…I feel a deep “Kindred Spirit” with you people….especially after a long and weary journey online researching xhtml and css, and all the differring perspectives.

Yes, Simplicity is grande….as someone mentioned…. So very important in this increasingly complex and infomation-laden world!

Yes,3,4,5,7 all important to me too, as its about organization, planning, simplifying, clear code and clear direction, etc. etc.

My bit of wisdom to all…
The web is going to be one huge database and xml file. Thats where we are heading. Every page as xhtml is data now, organized by tags. Thats all it is. The challenge will not be to design systems to make us better designers, but to built an architecture or “environment” where we can manage all this data, all our designs, versions, content, real-time events and schedules, site updates, and all the numerous ways we change not only the images and design makeovers, but the content, the news feeds, the structural web site additions, and the way content is added and managed overall. We will see less redesigns and more makeovers, if that makes sense, with xhtml. Its going to get pretty crazy as content repurposing increases. Who will be the guy or gal who has the vision to develop the next great system that can manage all that? It wont be Visual Studio or Dreamweaver…..just a thought!
-MS


28   Jana ~ 13 August 2004 at 06:07 PM

re: typography…

I remember reading an article (in CA, I think), when I was in college, 20-ish years ago; the author asked several well-known designers “If you were stranded on a desert island and could only have five typefaces, what would they be?” As a student new to (and enthralled by) the vast variety of fonts, I thought, “How could you possibly live with only five?!!” I tried out a new one every chance I got! Now I usually have two or three workhorses that I use for about 95% of my work. But I’d still like to leave one or two slots open for something new!
P.S. to Cameron - love your site; inspired by the visuals and the verbage. Thanks for sharing!


29   Cameron Moll ~ 13 August 2004 at 09:41 PM

Yes, the progression from too many typefaces to two typefaces seems natural for all designers.




About

Authentic Boredom is the platitudinous web home of Cameron Moll, freelance new media designer, author, and speaker. More…


Jobs
Come in, we're hiring

Full-time and freelance job opportunities. Post a job...

...view all jobs »


Recently

A selection of fine reading, available for a limited time only:


In Print

CSS Mastery CSS Mastery: Advanced Web Standard Solutions A solid round-up of indispensable CSS design techniques by Andy Budd, Simon Collison, and Cameron Moll.

Mobile Web Design Mobile Web Design A guide to publishing web content beyond the desktop. Tips, methodology, and resources. Now available.


Recommended

Letterpress Posters Letterpress Posters The unassuming beauty of a freshly letterpressed print.

Wicked Worn That Wicked Worn Look. Techniques for that worn, aged, distressed look.

Mister Retro Mister Retro Machine Wash Filters Turn the dial to “Instaworn” with these filters.

Blinksale Blinksale Dive in and enjoy shamelessly easy invoicing from Firewheel Design.

Basecamp Basecamp My preferred web app for internal and client project collaboration.


Speaking

HOW Conference HOW Conference Austin, June 24–27. Pentagram, Adobe, P&G, et al.

Web Design World Web Design World Seattle, July 20–22. Practical sessions on web design.

An Event Apart Stimulate Salt Lake City, September 2009. Entrepreneurship and design conference.


Feed Me
Articles: RSS
Linkage: RSS

Follow me: Twitter