~ 16 January 2008 ~
I love rappelling. I don’t go that often, but when I do, I’m like a kid in a candy store — I can’t get enough.
Funny thing is, I’m scared to death of heights. Merely the thought of standing atop a cliff looking down makes my palms sweat. (And they already sweat profusely as it is.)
Staring at a blank canvas in Photoshop (or your preferred graphics program) feels the same way as standing at the edge of a cliff waiting to go over. You’re safely strapped in, but the idea of going from standing upright to lying on your back with feet planted on the side of a rock incline is terribly daunting. But once you’ve gone from vertical to horizontal, the rest is easy, and even thoroughly enjoyable.
With that in mind, following are a few pointers for getting over the design ledge, or as I phrase it for the sake of this article, overcoming “blankcanvasphobia.”
1. Familiarize yourself with how others have solved the same problem you’re solving. In his book How Designers Think, Bryan Lawson observes the following:
[D]esign is as much a matter of finding problems as it is solving them.
What you’re ultimately trying to accomplish when filling a canvas is the exercise of solving a problem. In my experience, rarely have I designed an interface for the likes of which someone else hadn’t already designed something similar. I find solace in scrutinizing how others have solved their design problems, and I also find it lends guidance for solving mine. Note that I’m not talking about finding influence among the litany of gallery sites on the web, but instead learning from the mistakes and successes of others.
2. Draw from previous work. In reality, if you’re at least a semi-experienced designer, you never actually begin with a totally “blank” canvas. You’ve stored plenty of style, typography, interaction, and other design elements not only in memory but in the archives of your portfolio work. Don’t hesitate to revisit elements that worked well in previous projects, as chances some of these same elements may work well in your new project.
3. Sketch it out. Fundamentally, a blank sketchbook page and a blank Photoshop canvas are equals: both are blank, and both can be intimidating. But in my mind, the difference between Photoshop and sketchbook is the difference between tool and creative space. When I’m in Photoshop, I feel obligated to act like a designer, as I’m surrounded by shapes, colors, guides, and so forth. In contrast, when I’m in a sketchbook, no tools are present, aside from the writing instrument in my hand. There’s less pressure to design, more room to be creative.
4. Begin with a grid. Part of the reason a blank canvas can be menacing is, well, because it’s blank — it’s empty, sans restrictions, no rules. One would think this freedom yields endless opportunities, but in my experience, it yields chaos more often than not. As ironic as it sounds, having a few rules in place can be incredibly liberating. Grids make beautiful design rules, as they force one to make conscious decisions about how the content should be honored long before worrying about the minutia of aesthetics, and they encourage creativity within given boundaries. For the record, I prefer a 960 px width grid for web work, but there are countless ways to utilize grids on the web. (Note that this recommendation somewhat contradicts the previous one about sketching. However, keep in mind this is not a sequential list, but instead a brief compilation of suggestions for getting over the edge.)
5. Begin in grayscale. I’ve done this several times lately, enough to validate the recommendation. Beginning a design monochromatically forces one to focus on three things: hierarchy, typography and the content these two design principles represent. I’m certainly not advocating color plays an insignificant design role, but that it is often supplementary rather than dictatorial. Pierre Bonnard, French painter in the early 20th century, describes it better than I:
Color does not add a pleasant quality to design, it reinforces it.
The easiest way to begin in grayscale is, not surprisingly, to set the image mode to grayscale (Image > Mode in Photoshop). From there, keep things low-fidelity, ignoring many of the design details you may add in later. Jason Santa Maria describes this approach in greater detail in his article, Grey Box Methodology.
6. Start with the “core.” I’ve written before on designing the core actions of an interface first, as have 37signals. For example, note that this comp has no design in place for the masthead and some of the sidebar elements, as these are secondary to the “core” actions for the site (which, in this case, is the act of interacting with recipes).
7. If nothing sticks, come back later. I’ve also written before on the topic of unplugging one’s self when faced with creative block. This especially holds true when wrestling a blank canvas. Of course, some argue walking away is merely avoiding the issue, but I find it hard to force myself to design something if I’m not mentally prepared to do so.
Hope this advice helps as you go from the figurative design vertical to the horizontal.
Stock photography, type, and killer tees. Genuinely recommended by Authentic Boredom.
Authentic Boredom is the platitudinous web home of Cameron Moll, designer, author, and speaker. More…
Full-time and freelance job opportunities. Post a job...
A selection of fine reading, available for a limited time only:
- Recent job listings, testimonials, and 100th Kiva loan
- The ISO50 Field Guide to Color Management
- Upgrading the hard drive and memory in a refurbished 13" MacBook Pro
- Inspiring type: Libro di M. Giovambattista Palatino
- Randomness, vol. IX
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 A guide to publishing web content beyond the desktop. Tips, methodology, and resources. Now available.
Letterpress Posters The unassuming beauty of a freshly letterpressed print.
That Wicked Worn Look. Techniques for that worn, aged, distressed look.
Mister Retro Machine Wash Filters Turn the dial to “Instaworn” with these filters.
Blinksale Dive in and enjoy shamelessly easy invoicing from Firewheel Design.
Basecamp My preferred web app for internal and client project collaboration.
HOW Conference Austin, June 24–27. Pentagram, Adobe, P&G, et al.
Web Design World Seattle, July 20–22. Practical sessions on web design.
Stimulate Salt Lake City, September 2009. Entrepreneurship and design conference.