I love my job. I live my job. For every project I do, I try to make it look special. I’ll be honest: I have a fetish for comments like “I never saw anything like that!” or, “I wish I thought of that!”. I know, I have an ego-problem. (Eleven I’s already)
But sometimes, you run out of inspiration. Happens to everybody, and everybody hates it. “I’m the worst designer in the world.” “Everything I designed before this was just pure luck!” No it wasn’t.
Countless articles about finding inspiration have already been written. Great, but they’re not the magic potion you’d expect them to be when you need it. Here’s a list of small tips that can have immediate effect when applying them/using them. Main theme: Liberate yourself from the designers’ block by restricting yourself.
Do’s
Grids
If you aren’t already using grids, you’re doing something wrong. Not only are they a great help for aligning your design, they also restrict you to certain widths and heights. (For more information about grids, I suggest you read Mark Boulton’s series on designing grid systems. Oh, he’s also publishing a book I think.)
So what’s the link between grids and restrictions? Instead of having the option to style a piece of layout with a width of 1 to 960 pixels, you have to choose from values like 60 pixels, 140, 220, 300, …
Start small
Having a hard time finding a style for the layout, why don’t you start with one small object? No, not that small object, I meant a piece of a form, or a link, or try styling your headers (h1 – h6).
Let’s take a submit button of a form: it’s small, but needs much attention. People will click it. People will hover it. Maybe sometimes it’s disabled? Also: a button needs to look like a button, so typically it requires more styling then a regular link. Once you’ve got the button, move on, following the button’s style.
Color palettes
There are lots of resources on the web for finding inspiration for color palettes. Some of the most famous are COLOURlovers, wear palettes and Adobe’s Kuler. Browse through them (or create your own from a picture), pick a color palette you like and which works with the subject you’re handling, and stick with it. 4-5 colors, maybe with some tonal variations, but that’s it.
Fonts
There aren’t many fonts available for the web (Richard Rutter has a great article on this subject), but you’d be surprised how long they go. A simple text-transform: uppercase; or font-style: italic; can change a dull looking font into something entirely fresh.
Play around with the fonts you want to use and the variations you’ll be using, and make a list. Pick five combinations of fonts and their variations, and stick with them throughout the layout.
Single-task
Most of us use multiple monitors. They’re great to increase productivity, but make it harder to focus on a single task. Here’s what you do: try using only your smallest monitor. Maybe it’s the one from your laptop, maybe it’s an old 1024×768 you found in the attic. Having Photoshop (or Fireworks or…) taking over your entire workspace blocks out all the other distractions on your screen, and works quite liberating.
Mute everything…
…but not entirely. I noticed I was way more focused when I set NetNewsWire to refresh it’s feeds only once every two hours. After two hours, I need a break anyway. Turning off Twitterrific was a mistake, as it’s my window to the world, and it’s the place where the people I like to call colleagues live. You can’t exactly ask them to bring you a cup of coffee when they go to the vending machine, but they do keep you fresh, and it stops you from going human-shy. Instead I changed the settings to not play a notification sound when new Tweets arrive so it doesn’t disturb me when I’m zoning.
Don’ts
CSS galleries
Don’t start browsing all kinds of CSS galleries. Either you’ll feel bad, or you just start using elements in a way you can’t call “inspired” anymore. Instead gather your own collection of inspiration. Example: I use LittleSnapper in which I dump everything I find inspiring. This goes from a smart layout idea, to a failed picture someone posted on Flickr. Everything is inspiring.
Panicking
Don’t panic. It’s the worst thing you could do. Instead, get away from the computer, and go to bed early. A good night of sleep combined with a hot/cold shower can give you a totally new perspective on a design. Got a deadline by tomorrow? Well, you should’ve started earlier. Got a good excuse to start on this design this late? Tell your client it was either that or a bad design.
120-hour work-week
Don’t work all day long, including evenings and early mornings. Write off that first hour, you don’t really think you’ll get anything productive done before 9AM?! I don’t even think you should work on one and the same design all day long. If you’re stuck, try working in blocks of 1 or 2 hours on a certain design. Mixing projects isn’t for everyone, but it might just do the trick for you.
Summary
- Use grids, not only for layout purposes.
- Pick a specific element to start with.
- Use a colour palette.
- Limit the amount of fonts and variations you’ll use.
- Search for the smallest monitor around, and restrict yourself to that one.
- Reduce the amount of noise.
- Don’t start looking on the internet for inspiration. Build your own little inspirarchive.
- Work in blocks.
Comments
Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.
Got something to add? You can leave a comment below.
14/12/2008
Good article and good advice about not browsing the css galleries. All it does is make my head spin and provides anything but direction.
I’m all about giving a plug for some software, but you should let people know that Realmac Software featured your interview as a case study to promote their product…even if it is cool software. ;)
Vote Helpful or Unhelpful
14/12/2008
Great write up, the CSS galleries don’t was a good shove away.
Vote Helpful or Unhelpful
14/12/2008
This is really the best one that works to me.
And also the “start small” and “mute everything” is one of my kind. For CSS Development, tough I like the philosophy of starting all markup naked (without CSS), and then adds a style later. But I do like more to start little by little, and wonder how things works in surprises.
Thanks for sharing.
Vote Helpful or Unhelpful
14/12/2008
I do agree with this: “Don’t start looking on the internet for inspiration. Build your own little inspirarchive.”
Thanks Tim.
Vote Helpful or Unhelpful
14/12/2008
Great article, Tim. I think this article suits you very well. There are many good designers but every time I see one of your websites I get a simile because it’s always something I haven’t seen before.
Vote Helpful or Unhelpful
14/12/2008
A great article, which lets a lot of people know that they don’t have to start a website with one particular thing.
Usually the brief dictates where I start a design, whether it is a colour scheme, typography or imagery.
But, the 1 biggest influence I have had recently has been to use grids.
Vote Helpful or Unhelpful
14/12/2008
This is by far, one of the most interesting/helpful articles I read these days!
CSS galleries are evil!
The “Write off that first hour” thing is a good point too!
Vote Helpful or Unhelpful
14/12/2008
Lovely read. The bit about starting with a single element is a very good one. Glad to see your writing published on 24ways.
Vote Helpful or Unhelpful
14/12/2008
Glad you all liked the article!
Robert: I know, should’ve included that. But it really really really is great software :)
Arif: You’re absolutely right about starting with a “naked” version of your markup. Great way of writing less code!
Razvan: Now you’re making me blush :)
Ahmed: I’m sure there are a lot better ones!
Wolf: Belgium represent!
Enjoy the rest of 24 ways, and, of course, the holidays :)
Vote Helpful or Unhelpful
15/12/2008
This is indeed the grand-daddy article about the “phenomenon” with the best advice. I heart 24 ways.
Vote Helpful or Unhelpful
15/12/2008
@Tim Van Damme That was seriously a great article. I needed to hear(read) this.
As for your point:
Here is a visual to your point!
Vote Helpful or Unhelpful
15/12/2008
Excellent points, Tim! And thanks for the linkie-poohs!
Vote Helpful or Unhelpful
15/12/2008
Great post Tim.
Vote Helpful or Unhelpful
15/12/2008
Certainly a useful and inspiring article. As most commenters above have said – forgetting CSS galleries is a good idea.
I think they’re great to gather general inspiration and to bookmark interesting sites, but I’ve found from experience that by grabbing ‘this little box graphic here’ and ‘that header style there’ and ‘this tidy menu bg’ and composing them alltogether; nothing works and you’ve created a mish-mash design with other people’s elements. Serious no-no.
Thanks Tim!
Vote Helpful or Unhelpful
15/12/2008
Great post, I normally just pick colors from my head (Mostly blues), but I just visited Adobe Kuler’s site and on the first page I fell in love with a pallet with earth tones. Thanks a lot, I actually found that site a few years ago but couldn’t remember the name.
I prefer it over COLOURlovers. I want to also start using grids as well. I’ve been doing some research into it as well as mixing in Phi and Fibonacci spiral.
Thanks
Vote Helpful or Unhelpful
16/12/2008
Excellent article Tim! Also, glad to see you’re using LittleSnapper ;)
Vote Helpful or Unhelpful
17/12/2008
Thanks a lot, not only for the very useful and insightful article, but also for the various links to other useful sites. I really liked reading this!
Vote Helpful or Unhelpful
21/12/2008
Insightful article.
The idea of focusing in I think is great. When I have designers’ block I always try to step way back and look at the project from a high level but I think doing the exact opposite and going from there could be very interesting.
Vote Helpful or Unhelpful
08/01/2009
This was a great article! Just what I needed. Especially about the part of not going to CSS galleries. I’ve found myself browsing those only to get a little discouraged seeing all the great designs and thinking, “why didn’t I come up with some of those designs?”
Vote Helpful or Unhelpful
23/02/2009
“Everything I designed before this was just pure luck!â€
Big relief to hear that I’m not the only one thinking those black and evil thoughts now and again.
Also, I agree with @Wolf: the “start with someting small” tip is one to remember.
Nice!
Vote Helpful or Unhelpful
Impress us