10 Tips for Troubleshooting a Lackluster Design

by on 16th March 2011 with 24 Comments

One of the biggest problems that designers struggle with is how to improve a design that didn’t quite hit the mark. Sometimes we’re on our game and can bust out a beautiful design in minutes, other times we struggle to complete something that should be simple.

Today’s post is a checklist that you can bookmark and refer back to for those times when you need a fresh perspective. Browse through the list for inspiration on how to improve a design that’s lacking in an area that you can’t quite identify.

1. Add Contrast

screenshot

One of the strongest ways to make any design more interesting is to introduce some contrast. Our eyes are drawn to areas of extreme difference and the proper wielding of this knowledge can lead to stunning designs.

We’ve discussed this before on Design Shack but here’s a quick refresher. Contrast is typically applied using any or all of three different methods. The first is color. Color contrast is easy to understand, but not always easy to execute. Use you color wheel theory here to make sure you’re adding contrast, not conflict.

Some of the highest contrast combinations possible are shown in the image above: black, white and yellow. Both white and yellow contrast beautifully with black and are quite often used together for selective emphasis.

The other two ways to add contrast are related: size and boldness. When too many objects on the page are the same size, it can make for a bad case of visual redundancy. This applies especially to typography. Make sure your headlines (or any other areas that you want to stand out) are significantly bigger and/or bolder than the rest of the items on the page.

Practical Application

Go through your design and look for areas that stand out visually. Are these the areas you want getting the most attention? If not, use selective contrast to liven up the page and add interest to the elements that deserve it.

2. Do Something Unexpected

screenshot

You instinctively know how to really get someone’s attention: you surprise them. This can be applied to web design in both good and evil ways. Having a loud music player surprise your visitors is evil. Doing something graphically pleasant but untraditional is good.

As an example, consider the image above. The name of the graphic design studio sort of sinks into the ground. I’m not entirely sure why the designer did this, but it certainly makes me spend a few extra seconds looking at the page. The designer hasn’t gone all out to sneak up on you or deliver a strong punchline, he/she simply put a twist on what you expect to see here.

Little touches like this allow you to really personalize a site with your own particular brand of creativity. Those touches go a long way towards adding that finished feeling that your design may currently be lacking.

Practical Application

Try to identify the most boring, run of the mill aspects of your design. What changes can you make to these areas that aren’t typical of what someone would expect? Remember, it’s not about adding confusion but rather infusing interest!

3. Simplify, Simplify, Simplify

screenshot

If I could only say one word to designers who consistently produce lackluster designs, it would be “simplify”. Too often we think the solution to good design is adding more. More icons, more text, more photos. Sometimes these things can genuinely help but more often designers are simply trying too hard.

When you over-think a layout you cram so much into it that it loses its effectiveness. As a viewer, there’s only so much that I’m able to and/or willing to process. The less content you cram into a single page the less work I feel like I have to do to view it.

The site shown above is a perfect example. This page is gorgeous and effective. The main goal is to communicate that Paul is a graphic designer with an emphasis in typography, the design definitely communicates this loud and clear!

Now contrast this with the website below. These guys probably aren’t bad designers, but the page that they’ve created for their design business is super busy. The result is a cluttered look with no clear emphasis. Remember, when everything on the page screams out for attention, nothing gets it.

screenshot

Practical Application

Take a good hard look at your design and identify the essential elements. You might be tempted to instead hunt for the non-essential elements but that will lead to a much less dramatic change. Find the items that absolutely must be present for the page to have any meaning and usefulness. Now strip out everything else. Throw it all out and move it to other pages or kill it completely.

Now give your page a new, simpler layout and see if the result doesn’t look better than when you started. If you’ve gone overboard you can always start to reintroduce a few of the deleted elements slowly while maintaining the strong new design that you’ve created. Be careful though, it’s a slippery slope and you might just end up back where you started!

4. Add Repetition

screenshot

Repetition is a really tricky concept that few designers grasp properly. It starts off simply enough: use the same few fonts and colors throughout your design for a consistent look. However, good implementation of repetition goes far beyond this.

The best way to learn is through identifying repetition in the designs of others. Consider the example above, can you spot the repetition? Check out the Facebook icon in the lower left corner. Did this have to mirror the shape of the floating island element? Certainly not, a normal Facebook icon would’ve worked just fine. However, this designer went the extra mile by inserting a subtle nod back to the main graphic.

Notice that the designer didn’t go overboard with this idea. There aren’t twenty little floating island icons scattered throughout the page, just one.

Practical Application

Take a look at your design and try to identify something unique and interesting. It can be anything from a shape to a color. Now think about how you can repeat this element in a clever way.

Take a bold color like red and insert it only in a few places that you want to draw attention to. Take the subject of a photograph, cut it out and place it elsewhere on the page. Write one word of your headline in a script and then repeat this trick in one or two other places. These are just a few ideas to get your brain started in the right direction, repetition can be anything you want it to be!

5. Break Up Your Content with Lines

screenshot

This is a really weird little trick that can go a long way. Sometimes your design is filled with awkward whitespace. Other times, you don’t have enough space and need a way to keep things closely crammed in while remaining visually distinct.

These and a million other problems can be solved with the simplest of design elements: a line. Sounds too good to be true right? Well check out the sites both above and below this paragraph and how they use lines to both organize and add interest to their content.

screenshot

As with many of these tips, this one is really easy to take too far. Wield lines with intention and reserve. Make sure they’re actually improving your design rather than simply adding clutter.

Practical Application

If you want to learn all about how to successfully implement lines in your design, check out our article dedicated to the topic! You’ll find all kinds of ideas and examples for spicing up your designs with a few simple strokes.

6. Make it Dynamic

screenshot

Remember that web design isn’t all about how everything looks! It’s about interaction with the user. A plain, static page can often feel boring, even if it’s fairly attractive on the surface.

Fortunately, this is one of the easiest problems to solve on the web. Add in an image slider, a slideshow, some unique hover effects or perhaps even a subtle animation.

The site shown above has an awesome little hover effect on the ribbons. When you mouse over, the mid-section raises up while the sides stick out further, giving it a really nice 3D effect. Also be sure to visit the site below and keep a close eye on that colorful logo. It has an animation that is so subtle that you can see the page a dozen times and never notice, but when you do you can’t stop looking!

screenshot

Practical Application

Does your site seem dead? The web is far too rich of a medium to not take advantage of amazing tools like dynamic CSS, jQuery and MooTools to add a little life to a boring page. You don’t have to go crazy, just be sure to leverage your available resources in a way that users find engaging.

7. Add Some Character

screenshot

When you first see the site above, you might wonder what on Earth possessed someone to stick a mustache on a bar graph! It’s a bit ridiculous isn’t it?

However, I think it’s a fantastic bit of design that makes me smile every time I see it. Why? Because bar graphs suck. Data is boring and lifeless and presenting it in an interesting way is always a challenge. This designer was tasked with making a website speed check feel friendly, what better way is there to accomplish this than to anthropomorphize a bar graph!?

Adding a human element is a great way to make any site feel more welcoming. If you’re a master illustrator, great, whip up a mascot or friendly character. However, even if you can’t draw you can easily implement this trick. The mustache above is no amazing feat of illustration, but it gets the job done!

Practical Application

Ask yourself what aspects of your design seem particularly boring or technical. Will non-techies identify with these areas in a meaningful way? Try introducing some humanity into the picture and see if that helps. Use smiles, faces, etc. to reduce the level of intimidation.

Bring It to Life With Texture

screenshot

It’s often a good idea to begin your designs in a very basic way. Don’t get too caught up on details in the initial stages, instead focus on what your content will be and how to organize it in a usable fashion.

Also make sure you’ve nailed down your color scheme. Use solid colors in your comps until everything looks pretty good without any extra superfluous gradients or textures. Then, if you think that something is still lacking, try introducing some interesting textures to add a little life to your design.

Keep in mind that texture doesn’t have to be relegated to a simple background, check out how the site below uses a layered texture effect in the header to create something that’s really attractive.

screenshot

Practical Application

This tip works in two ways. First, if you haven’t yet used any texture, think about how you can incorporate it while maintaining the integrity of the colors and layout that you currently have. Use texture to reinforce an already strong design, not as a band-aid to poor design.

Secondly, if you’ve already used significant amounts of texture, try stripping it all out and getting a feel for the site with just solid colors. Then gradually reintroduce texture while being extremely selective about where it is applied.

9. Take a Break

screenshot

Sometimes you just get stuck in a mental rut. No matter how much you try to climb out of it, you just keep recycling the same ideas and making the same mistakes.

If the suggestions above don’t help, try stepping away from the project for a while. Take a break, go for a walk or even work on another project for a while, the longer the better. If you have the time to spend an entire day focusing on something else, coming back after that extended break will give you a fresh perspective that is often just what you need to step back and identify the problematic areas.

Unfortunately, most projects that we work on don’t have enough lead time to waste a day skipping through the lilies of life without incurring the wrath of an angry client or the dread of a hard deadline. In these circumstances, short breaks are all that you’re going to get.

There’s actually an entire productivity system devoted to short breaks that lends itself perfectly to creative professions such as design. The Pomodoro method utilizes periods of uninterrupted work followed by brief breaks. Since creativity tends to come in bursts, trying this for a day might provide the perfect remedy for your lackluster design.

Practical Application

To learn how to apply these principles effectively in your own workflow, check out our article, How to Cut the Crap and Actually Be Productive as a Creative Person. It’s a straightforward and honest discussion about why designers struggle so much with the balance between creativity and productivity, why todo lists don’t work and how you can successfully get past it all and get something done!

10. Start Over

screenshot

After spending hours pursuing an idea, no one wants to hear that they need to go back to the drawing board. As designers, we tend to form emotional connections with our creations. It’s a perfectly natural reaction, but you should be aware that this tendency can really get in the way of moving on and improving upon our initial thoughts.

The bad news is that sometimes a design simply can’t be saved. Designers too often spend three hours tweaking a poor design when it would’ve taken them ninety minutes to start over from scratch and come up with something better.

Part of maturing in your skill as a designer is simply knowing when you’re wrong and pressing forward in a new direction. Sure, it looked great in your head but when it came out in Photoshop it looked like crap. Don’t whine and mope, hit Command+N and start fresh. Look around our design gallery for more great inspiration like that seen in this post and start over with something as completely different as you can come up with.

Practical Application

The most difficult part about this advice is knowing when you’re to that point where you need to start over. On the other hand, the most reassuring part is that your $1,200 iMac can in fact hold more than one PSD on its hard drive. Starting over doesn’t mean throwing away your original idea, it means saving it and filing it away so you have the option to come back to it later.

Sometimes you go through three more iterations only to realize that your first idea was indeed the best. Other times you move forward in another direction and stumble upon that old file months later and immediately see how those ideas could be incorporated successfully into your current project.

You might notice that this advice is a little two-faced. First, don’t be attached to your designs so much that you’re unwilling to scrap everything and start over from scratch. However, don’t be so unattached to your work that you throw away some genuinely promising concepts. Be a digital pack rat and never throw away a design that hasn’t yet reached its full potential. Create a folder of unfinished files and browse through it every few months for inspiration.

Conclusion

The point of this post is to get you to realize that, despite the fact that creative work is an unpredictable and abstract process, you can in fact apply logical steps towards reaching a solution in the event that you encounter problems.

The ten tips above should get your brain back in gear when you hit that creative wall and simply don’t know how to improve a design that needs an extra little boost. Some are hard and fast tricks that will only work a fraction of the time, others are steps that you should be taking on every design you produce. Experiment and find out which of these tips tends to work best for you. This is a great way to identify potential weaknesses that you need to improve upon.

Leave a comment below and let us know how you go about troubleshooting a lackluster design. Do you have any tricks up your sleeve for going that extra mile to refine your work or are you more prone to just scrap it all and start over? Let us know!

Comments & Discussion

24 Comments

  • http://www.sharawadgis.com Janesse

    Great trouble-shooting list with tips beautifully tied to examples. I’ll be using it!

  • https://www.blamestella.com/ Delano Mandelbaum

    “The mustache above is no amazing feat of illustration, but it gets the job done!”

    It’s true! I worked with a design team on Stella but the logo I actually drew myself: http://bit.ly/hmmdGU

    So just like you said, you don’t need to be an amazing illustrator to do this stuff.

  • http://digitalbeautydesigns.co.uk James Seymour-Lock

    Thanks for mentioning some of my work (Simple as Milk) the ribbon idea was when you hover over the badges the ribbons are pulled outwards, this was achieved in CSS3 with some subtle animations.

  • Pingback: Favorite Suggestions from “10 Tips for Troubleshooting a Lackluster Design” « CREATEive Intrigue()

  • Joshua Johnson

    Thanks guys! Your awesome work provided perfect examples.

  • steve

    This article is an absolute GEM!
    1st rate – short, insightful and very very useful.
    Bookmarked, printed, eaten, YUM!

  • Pingback: 10 Tips for Troubleshooting a Lackluster Design « Big Engine Media()

  • http://www.mothersdevotion.com Jason

    oh my goodness…something on your site is causing troubleshoot*[insert random number]*.jpg to keep downloading over and over. check your code because i’ve tried this on several machines

  • http://blog.ajcw.com John Catterfeld

    Very useful, interesting article – thank you. I still can’t see the Kaleidoscope animation though!

  • Chris

    Mobilezr needs a spellcheck. All that awesome design and they spell business “BUSINNES”

    sigh…

  • http://www.bad-spoon.com Kevin Moreau

    One of the best articles I red about webdesign. Thank you so much!

  • http://www.haleyconsultants.com Scott Haley

    Love it! People that agree with me that Clean, Simple, Elegant aren’t bad words. Love the examples. Especially love how Sumit Paul shows simple can be awesome.

  • http://eclectickle.wordpress.com Angelo Barovier

    Excellent article. I might have added a stronger caution in the dynamism section as it is often an overused element. Nonetheless, I appreciate the reminder of what we, as designers, should already know. Alas, alack…

  • Pingback: 10 Tips for Troubleshooting a Lackluster Design | Share Blog()

  • http://www.viapeople.com Yuriy Shikhanovich

    Great list. I esp. like #2. Will have to keep that in mind next time my design looks bland =c)

  • http://www.depcore.pl adam

    Great article. Nice examples and good descriptions. Very well put together.

  • Pingback: 10 Tips for Troubleshooting a Lackluster Design()

  • http://resource-spoon.com kgainez

    Wonderful list. I been trying to tell folks about the ‘line trick’ for years now. Takes designs to a whole new level. Thanks!

  • Pingback: Social Media at Work: An Introduction | Gillespie Associates Blog()

  • http://www.brettwidmann.com Brett Widmann

    These were some really helpful tips! Thanks for sharing.

  • Pingback: » Daily Interests » podq live()

  • Rohit

    Nice Article really informative.

  • Pingback: Four Useful Websites and Posts for Website Owners and Creators()

  • http://www.modred.co.uk Scott

    Brilliant article. I’ve just hit a wall on a project… this really helped me out, thanks.

Subscribe

Membership
About the Author