10 Practical Ways to Bust Through Web Designer’s Block

Dec 9 2010 by Sacha Greif | 29 Comments

10 Practical Ways to Bust Through Web Designer's Block

As a web designer, is there any feeling worse than being creatively uninspired and not being able to complete or start your design projects? It’s frustrating, depressing, and costs us income.

Now imagine if there was a magical, surefire technique to make our creative block instantly disappear, giving us instant creativity and productivity.

That would be great, wouldn’t it? Well, too bad, because there’s no such thing. Designer’s block happens to all of us, and there’s no easy way out of it. However, if you feel you’re in a situation where you just feel unable to create, here are a few things you can try.

1. Start from the Inside Out

Every serious web designer will tell you that you start out your layout with a nice grid and do a few wireframes to see how the text flows through the boxes and columns. Then you settle on a color scheme and a design theme, and work towards the smaller details from there.

In other words, we’re taught to start from the big picture and work our way down to the details.

But we all know things don’t always (or, should I say, never) work out this way. Staring at a dull and empty grid all day is not helping you move forward an inch. Instead of inspirational site content that can give us ideas on what themes would work well with a company, the only text the client gives us to work with is "Lorem ipsum dolor sit amet" they copy-pasted from this ubiquitous site.

Why not break all the rules and start inside out? Design something as small as a form button or a "read more" link. Don’t worry about colors; you can always change them later. Or pick a palette from kuler or COLOURlovers, and make something that looks nice; something that gives you a glimpse of the website that should go around it.

Try designing a key detail first, and maybe the rest of the design will flow from it.Try designing a key detail first, and maybe the rest of the design will flow from it.

Dribbble, a site that features small parts of design projects, shows us that it’s possible to get inspired by small components of an entire design, even if we don’t get to see the big picture. You can make that principle work for you, and focus on the small stuff first.

2. Solve the Problems First

Sometimes there’s a very specific reason why you can’t find inspiration, and you just need to step back from browsing website galleries to find it. For example, maybe you can’t get inspired because your client hasn’t provided you with any content and you’re working off lorem ipsum text. Or maybe the client’s logo is so awful that you’re unable to design something decent around it.

In these cases, it’s best to acknowledge the problem and solve it first. A lot of the time, we want to see ourselves as design superheroes that can make anything look good. But there’s nothing wrong with admitting that the quality of our output depends on the quality of the input we get (also known as the garbage in, garbage out principle).

How would you design a website around this logo?How would you design a website around this logo?

So if the content’s quality is poor or non-existent, request your client to hire web copy writers; and if their existing logo looks awful, bring their attention to that and offer them additional services if you are able to also provide professional logo/brand design services.

If you don’t deal with the real problem first, you run the risk of producing sub-par work, and the process will be very frustrating.

3. Code First, Design Later

In the complex process of designing a website, design usually comes before code. Things such as navigation menus or JavaScript effects are often done after a design has been finished. But If you’re stuck, on the first part (the design), it might be time to change that paradigm, even if just for when you’re experience design block.

Reverse the process by starting from code, and then designing for that code. This might seem unconventional, but one argument for it is that this method will ensure that form fits function, since function comes first in usable web designs.

Code First, Design LaterLike solving a maze, design can sometimes be easier when you start from the end.

Some practical things you could do are:

4. Start from Design Elements

One of the most common ways of getting inspired is simply finding something cool to use in your design. A lot of designs start when a designer finds a beautiful new font, a special texture image, an interesting set of icons, or a new design technique they want to use. Again, this may sound counter-intuitive because the "right" way would be to find design elements that are suitable for your project, not the other way around.

Font choice can have a big impact on your design, and can also be a great source of inspiration.

But the truth is that we usually have a certain amount of freedom in our work, and we shouldn’t be afraid of following our gut instincts and going with the creative flow. Some of the best and most original designs happen when the creator is not afraid to follow his inspiration wherever it takes him.

So assemble a library of fonts, brushes, textures, and stock photos, and the next time you’re stuck, just take a look through all of them. This is one of the most effective ways of busting through designer’s block.  You can also check out one of my side projects, the Design Resources Search Engine, which lets you search through more than 150 design resources websites.

5. Think Outside the Box (Literally)

Most productivity/creativity guides will tell you that when you’re stuck, you should go look at pictures of sunsets and baby pandas on Flickr, or maybe go take a walk. While I love walking in the sunset hand in hand with baby pandas, I’ve found out the hard way that it does little for my productivity.

Instead, here’s some solid advice on something to look at: boxes.

Package design is a great place to get inspiration from. Packages have been around for centuries, and both the art and the science of packaging are years ahead of web design. Any cereal carton is competing with 50 other packages for the shopper’s attention, so you know that no detail, no matter how small, has been left to chance.

Think Outside the Box (Literally)Blogs like The Dieline have tons of great packaging examples.

So take a walk around your local supermarket, or maybe just browse these excellent sites, blogs, and blog posts:

6. Copy (But Don’t Steal!)

Now before you start writing a letter to your lawyer, let me make one thing very clear: I’m not advocating plagiarism at all. The key here is to understand what you are copying. Just copying isn’t enough; if you want to be successful, you need to analyze the small details that make things work.

Don't copy and paste, zoom down to pixel level to learn from the best.Don’t copy and paste, zoom down to pixel level to learn from the best.

Let’s say you want to copy a shiny, "Web 2.0" button (although I don’t suggest adding one more of these to the millions already in existence). Take a screenshot of the page, import it in Photoshop, then draw a blank rectangle and try to approximate the gradients, glow, and shadow used until you get the right look. Experiment with these parameters and your new button will have kept the original look and feel while looking nothing like the source. Recreate the principles that make something look the way it does, rather than the thing itself. Study the techniques, and you can learn something from your peers; or maybe even make it better than the original.

7. Switch to Another Project

Sometimes, no matter how hard you work on something, it just doesn’t click. This is the time when you should take a break and start something else.

This is the essence of structured procrastination: using that feeling of not wanting to do something as motivation to accomplish something else. And sometimes, the boost from accomplishing that second thing will even be enough to motivate you to do the original task!

8. Do Something That Makes You Feel Good

I promised I wouldn’t get into the new age, touchy-feely stuff in this article, but I have to mention this: Your frame of mind has a significant impact on your creativity.

A sunny white sand beach... can you get any more cliché than this? I challenge you to find a cheesier stock photo than this one.A sunny white sand beach… can you get any more cliché than this? I challenge you to find a cheesier stock photo than this one.

If you’re in a bad mood, go play sports, cook, watch a kung fu movie — anything that makes you happy. The risk here is that you might get more distracted instead of more focused, so I would only advise this as a last resort.

9. Get Feedback

This piece of advice doesn’t really apply to those cases where you’re starring at a blank screen. But if you find yourself stuck at a later stage in the design process, ask someone else what they think about the current state of the design. No matter what they say, it will help you move forward.

If they like it, use that positive feedback as motivation and as a sign that you’re going in the right direction.

If they hate it, ask them why. Welcome the criticism and use it to improve your work. Sometimes spending just 10 minutes fixing a key detail is enough to create a completely different impression and change somebody’s mind about the design.

10. Start Over

One of the biggest pitfalls of designers is that sometimes we become too attached and emotional when it comes to our designs.

Sometimes starting out fresh and feeling complete freedom for a few minutes is all you need to get unstuck, and you’ll find that you’re even able to use some or all of the work you’ve already done, whether it’s in this project or the next. So don’t be afraid to press Ctrl + N (or Command + N) and start anew. You can always go back to your previous design if the new one doesn’t move you forward — so what do you have to lose?

Related Content

About the Author

Sacha Greif is a web designer from Paris, France who specializes in user interfaces and theme design. Visit his personal site at sachagreif.com. He blogs about design at AttackOfDesign.com and his latest WordPress portfolio theme is Silverio. Follow him on Twitter: @SachaGreif

29 Comments

Lush Web

December 9th, 2010

Most of the time when I have web designer’s block I go out for a few hours and come back. Not thinking about work or design then coming back to it does the trick plus you feel refreshed.

Fred

December 9th, 2010

Sacha, great article and well thought out. I’ve been there many times and totally agree with your ideas and your final one of “Start Over” I have found to be extremely useful when you hit that brick wall.

Will Boling

December 9th, 2010

I can’t even begin to count the number of times I’ve gone to #7! That’s my go-to for getting around “design block”. Works very well for me. Also, #6 is spot on. That’s how most people learn, I think. Good post!

CSS Factory

December 9th, 2010

Very nice article! I didn’t think about starting from a very small element but I’m giving a try right now!

Sacha

December 9th, 2010

It’s funny to see that one of the related articles is called “Feedback. The creativity Killer” when one of my suggestions is precisely to get feedback. But getting feedback in itself is almost always beneficial. It’s the way you react to that feedback that can be good or bad.

So I suggest you read Francisco’s article after mine to know how to deal with feedback, but don’t let it scare you from asking other people what they think of your work.

Dave

December 9th, 2010

Awesome article Sacha, I think the second point is one of the most important ones. This scenario happens so often: designers are given weak or incomplete descriptions of what the client wishes to see(input). Then the final designs created are not what the client wanted (output).

Now that I have been on both sides (being a designer and a client), I understand how important the inputs can be for an effective design to be created.

Flavio

December 9th, 2010

Great article. Been there myself, of course. Some of your suggestions may seem very controversial — “3. Code First, Design Later” in particular — but I agree that sometimes that’s the way to go, depending on the project.

Ricky

December 9th, 2010

I would like to recommend an 11th solution. It’s not easy, or popular – start pushing out all the designs & layouts that you know will not work. And keep doing this. Create a selection of elimination. Take your frustration out with shitty art. And keep pushing. At some point, you’ll start making your way to a successful solution. Afterall, “failure is research” (http://www.getfinch.com/finch/entry/failure-design/).

Dustin Dyer

December 9th, 2010

this is awesome!

Sankar Datti

December 10th, 2010

Feed back matters a lot to make you design out standing. Nice article. Thanks Greif

angelee

December 10th, 2010

Excellent and very informative. Thinking outside the box is very applicable not just in web design but in the whole aspect of life itself. I also agree about finding inspiration from other people’s arts and designs, but one time somebody from a forum site quoted my line. He said “..the tendency is you might copy other people’s stuff”.. Should that guy think outside the box?

Ranjit

December 10th, 2010

Anyone can satisfy with my designs. But not my Team Leader :-(. Nice article. I like point #8. Thanks.

betina

December 10th, 2010

i’ve been using a lot of this suggestions and sometimes starting over fonts, icons, buttons and other details really works out – and, as mentioned, #7 is really helpful. great article!

Maria Malidaki

December 10th, 2010

Wonderfully written and presented, quite an ample list of things to help you get unstuck! Loved the package idea, didn’t know there existed so many nice websites for packaging!

Thanks for sharing. :)

Sacha

December 10th, 2010

I’m glad people are finding this article useful. When I wrote it I was really fed up with the classic “get inspired” articles which tell you to look at art, landscapes, or listen to music. We all know that none of this works when you’re short on time and have a deadline coming up, so I wanted to give some concrete ideas of specific things you can do.

Michael Tuck

December 10th, 2010

Good article, Sacha. I’ve bookmarked it for when I hit a wall and need some ideas on breaking through. It’s written from the viewpoint of the designer who relies on PS to create their designs, though; there are many, many successful designers who routinely design in the browser, and code before selecting design elements. #4 is a very good tip; I’ve watched some home design shows that feature the designer creating an entire design from a single relatively minor element such as a seashell or a pillow. It’s a springboard to creativity; you can design a site based on a brick if it triggers that spark in you. :)

Idil

December 11th, 2010

Great article, all the points highlighted are great and do work! I’m going to have to try starting from small elements.

#2 is so damn true!!

stephen murdoch

December 11th, 2010

This is very different from the usual advice that people give to those who are seeking inspiration :)

Sacha

December 11th, 2010

@Michael I guess if you usually start designing in the browser, then you should reverse my advice and try starting out in photoshop for a change!

Rakhitha Nimesh

December 11th, 2010

Great concepts.thanks a lot.

Shrikrishna Meena

December 11th, 2010

Well, Some of these points were useful and Some I already tried…
Thanks

Lukas

December 12th, 2010

I think that is a good advice too! When i have a design block it often helps me to draw/scatch a bit. Just stupid thinks what’s on your mind or even a little layout. Draw some lines, squares, scatch a little illustration, whatever and it will have magical affect! Drawing helped me out in a lot of things and gave me a flash of inspirations

Curtis Scott

December 13th, 2010

This is some great advice! When I feel designer’s block coming on I like to do the following…

1. Take a walk outside to clear my mind.

2. Bring a sketch book with me to draw images I see in the clouds – is it odd that I see user interfaces instead of bunnies and faces?

3. Upon returning home, watch some mindless movie/tv show for while then go back in a revisit the sketch book ideas prior to getting back into the project.

Drawing helps me to not be bogged down with the restraints of technology and allows those creative juices to flow.

Kevin

December 14th, 2010

For the first time someone actually writes soemthing that’s worthwhile reading:’on Designer’s Block ‘.Thanks for the article Sacha.

Sacha

December 14th, 2010

Taking a walk can help, but personally I have a hard time enjoying walks or watching TV when I know that my work is not moving forward. I know it’s not healthy to obsess over work, but sometimes you just can’t help it!

Guruh

December 15th, 2010

Good article. But in point no. 3 I found it really hard to do because I usually design first then code later. I did that to avoid changes :)

Matt

March 28th, 2011

Great article – thanks for the suggestions and resources! Recently have started code first, design later for some projects and it really helps in some cases.

Dustin

April 11th, 2011

Nice article, thanks for all of the information. Each of the suggestions you provided are great! It is extremely frustrating and when people only talk you up and tell you to get motivated it doesn’t help, that’s why I like that you chose legitimate techniques to resolve the situation.

Thanks again!
-Dustin

James

July 23rd, 2011

Yep, I’ve had to step away quite a few times as in #5. I keep thinking it does not help but when I get back to my project, I’ve got plenty of ideas.
Good stuff. Great writing. Thanks!

Leave a Comment

Subscribe to the comments on this article.