Five Minute Upgrade – Making Your Design Pop
1. Brighten Colors
If you have a design that you just feel isn’t anything special – stop – crank up the color intensity – then reevaluate. Saturation plays a big role as far as mood goes. If you ever feel like you’re lacking inspiration when it comes to color schemes there are some great online tools, not to mention our own color series.
2. Use Monochromatic Themes Sparingly
Monochromatic themes are great, there are some great black and white designs and sometimes using only a single color makes designing easier. The point is to explore other colors as well without getting too hung up on one in particular. Branching out to more than one color palette means you can provide emphasis with something other than the lightness/darkness of a shade of blue.
3. Layout on a Grid
Here’s the deal, align your text and things will look better, not to mention it will increase your scannability. There should be some rhyme or reason to how you have placed your text, if there isn’t you risk a clumsy look which gives the impression that little thought went into it.
4. Take the Time to Polish
This was discussed wonderfully over at PsdTuts a while back but there are a few key things to keep in mind.
- Don’t be afraid to use shadows sparingly, helps fight the flat and boring look.
- 1px lines are great at clearly defining edges.
- Using faint gradients over text and backgrounds gives a subtle 3D look.
5. Defy Image Boundaries
Overlap your images in ways that are out of the ordinary. Wrap around banners, pop-up images, anything that shakes the normal “color inside the lines” mentality websites are so often designed around. If you are fascinated as to how to go about doing this, check out Lee Munroe’s article on Designing Out Of The Box.
6. Add Whitespace
Give your user room to appreciate what you’ve done, it will help them focus on each element and not feel overwhelmed. Think of the padding as the frame for your work.
7. Textures
Adding noise to a background, including some rock pattern that fades into the backdrop, scribbles, whatever. Do something that makes your background a piece of artwork in its own right while complimenting the foreground.
8. Strokes
Don’t have them, use them. Strokes can be used in addition to the above effects to differentiate the foreground from the background. They can be a good substitute if you are trying to avoid gradients and maintain a more 2D look.
The Wrap Up
You’re now armed with a handful of tricks that can have an positive effect on your projects. Use your best judgment, not all of these adjustments are appropriate for every project. If you’re interested in a good example of all these steps put into play, check out Marketcircle’s website.
Got any other eye candy/tweaks you like to use? Let us know in the comments, share the wealth.
Discussion
June 30th, 2009 at 9:22 PM
Some good tips, will definitely use these, about to embark on my first real graphic design job (with $ and a contract, the whole deal).
.-= Jawaad Ahmad Khan´s last blog ..Site Currently Under Construction =-.
June 30th, 2009 at 9:31 PM
Fantastic advice! This is basically a cheat sheet for the young designer on what separates good design from great design. Not to mention… a reminder to designers who have been doing it for years
.-= Andrew Houle´s last blog ..20 Stunning Photoshop Brushes =-.
June 30th, 2009 at 9:35 PM
Great tips! All of them are so simple but make a huge difference.
June 30th, 2009 at 11:20 PM
Very useful tips. Simple but highly effective. Will try out some in next projects
Thanks
June 30th, 2009 at 11:25 PM
Really great tips. I was going to do a post similar to this when I had a chance, but I think this one covers everything! There are even a few things I hadn’t thought of, and haven’t put into practice before. Thanks Sam!
July 1st, 2009 at 3:36 AM
Good tips, thanks for sharing!
July 1st, 2009 at 4:07 AM
Great tips, thanks for those!
July 1st, 2009 at 4:58 AM
Some great tips, quick and easy! cheers
.-= Dan Marston´s last blog ..Sunsets =-.
July 1st, 2009 at 5:16 AM
Cool. It’s that easy to add some eyecandy to a project. Thanks for advise, Sam.
July 1st, 2009 at 6:28 AM
Too bad some these are only signs of the times. They’re disposable, easy to replace design-trends that shift as fast as the next big thing comes around, and besides, they can sometimes be a pain in the ass to maintain.
The grid, colours and whitespace are the three most essential part of any design at any time in any period of history and their importance cannot be stressed enough, but the rest just feels like one kind of style that’s popular right now.
.-= Quakeulf :3´s last blog ..Retro >:3 — MGM’s opening logo =-.
July 1st, 2009 at 7:53 AM
7’s Before looks alot better than 8’s After
July 1st, 2009 at 8:55 AM
Really enjoyed these tips.
Love the short and quick 5 min concept too.
July 1st, 2009 at 9:01 AM
This is quickly becoming my new favorite web design blog! Keep it up!
.-= Tommy´s last blog ..Bizarre TMNT Crossover Mixes the 1987 and 2003 Worlds =-.
July 1st, 2009 at 9:35 AM
Great tips, I’ll be coming back for more.
July 1st, 2009 at 9:37 AM
Really nice article!
July 1st, 2009 at 9:42 AM
nice one. really informative. thank you. !!
.-= sriganesh´s last blog ..demo =-.
July 1st, 2009 at 10:41 AM
Thanks! This gives me a few ideas.
.-= James McWhorter´s last blog ..Enable tethering shortcut found for iPhone 3.0 =-.
July 1st, 2009 at 12:01 PM
Very nice article! This could be my design checklist. These techniques really make designs pop out while being subtle. Thank you for sharing.
.-= Raymond Selda´s last blog ..Google Search Options =-.
July 1st, 2009 at 2:27 PM
I love these tips. Thanks.
July 1st, 2009 at 2:57 PM
wow! fantastic advices ..
July 1st, 2009 at 4:34 PM
I don’t know that adding decoration for the sake of “pop” is the best way to approach design. There are reason to use any of these techniques but I wouldn’t recommend using them to “add pop.”
.-= Ross Johnson´s last blog ..The rule of thirds and the golden ratio are not the same… =-.
July 1st, 2009 at 5:06 PM
@Quakeulf :3 et al
I would imagine that that the author isn’t suggesting that all good designs use all of these techniques, but rather that one of these techniques might help if (as the title implies) you find yourself stuck on a project that seems lacking.
July 1st, 2009 at 5:18 PM
Nice post – great examples.
.-= Brant´s last blog ..Online Productivity Tools =-.
July 1st, 2009 at 7:26 PM
It looks very nice, at the stage of 7 before. The texture does not fit this easy clean logo and mostly just draws away attention from the cleanliness. And the stroke on nr 8 is just poorly executed… But everything up to 7 before is what everyone should check their designs up against, the little details count very much!
July 3rd, 2009 at 3:18 AM
very usefuly…thank you for shared
July 4th, 2009 at 8:16 PM
Awesome tips! Thanks.
.-= Nicholas Z. Cardot´s last blog ..Independence Day – 233 Years of Freedom =-.
July 5th, 2009 at 5:07 AM
Great tips, keep things like this coming!
.-= Callum Chapman´s last blog ..Create A Super Grungy Texture in Photoshop =-.
July 5th, 2009 at 5:17 AM
Really great tips, I generally try to follow all of these, but it’s good to be reminded from time to time
.-= Tom Ross´s last blog ..Create a Fiery Face Explosion =-.
July 6th, 2009 at 9:28 AM
Grover:
The title clearly says “Making your design pop”, and this site itself uses those guidelines and the example linked to also does that, which should act as a good foundation for what the article arguements for. Just don’t go into the text and images before you have taken a good look at the surroundings first, which means that as an artist I can judge a book by its cover. :3~
.-= Quakeulf :3´s last blog ..Monkey-guy & nekojin from Kumatanchi =-.
July 6th, 2009 at 9:51 AM
@Quakeulf :3
I would actually have to agree with Grover on this one. My intention was to bring a few techniques to attention, not advocate each is used every time. In the same way your site uses anime, the above styles are not a sign of the times, but rather a style. Ultimately it comes down to the vision/artistic license of the creator.
July 13th, 2009 at 3:52 PM
This is one of my favorite posts on buildinternet, thanks!
.-= Montana Flynn´s last blog ..Why I used uPrinting.com =-.
July 22nd, 2009 at 9:08 PM
I saw this post not too long ago, and have taken these tips to heart. I rarely ever make a site that doesn’t take full advantage of white space and strokes, such a subtle change makes all the difference!
Keep the posts coming!
July 22nd, 2009 at 9:10 PM
Good stuff here. I think I saw this exact post before though. Basic stuff here, but definitely stuff that often goes overlooked.
.-= NBK´s last blog ..Class Pride 2010 T-Shirt Design Contest =-.
July 22nd, 2009 at 9:57 PM
Nice and simple.
.-= Rongen´s last blog ..Infinite Wellness =-.
July 22nd, 2009 at 11:09 PM
Very cool and handy tips. Have been practicing a couple of them and yup folks I gotta agree here, these minor tweaks can make a dry design as Sam says POP!!
.-= Piyush Agarwal´s last blog ..Aircel Ad-campaign – Innovative, Socially Resposible & BuddyInspiration =-.
August 1st, 2009 at 2:57 AM
really you work on some minute things which is worth to consider – good one
.-= sravkum´s last blog ..Rakhi ka Swayamwar.. marriage with a difference? =-.
August 12th, 2009 at 8:42 AM
These are great tips and ones which I shall add to my next project!
November 12th, 2009 at 10:58 AM
I do plan on using these great tips, and I will need to have another look at my own site to make some of designs pop
thanks
November 21st, 2009 at 6:44 AM
In nearly all of these examples it looked better before
December 4th, 2009 at 11:01 AM
It’s pretty amazing what a tiny bit of tweaking can do to a design!
December 4th, 2009 at 6:56 PM
There are some great tips, alittle tweak here and there and you’ve got eye catching stuff.
December 8th, 2009 at 3:46 AM
Great post, definitely brighter colors and contrast is what I needed to see. with so many sites today, it is important to make yours stick out from the rest!
December 8th, 2009 at 2:22 PM
It’s interesting to see the ‘montonous colours’ idea – although I can see it being abused by those with no colour co-ordination!
December 9th, 2009 at 7:28 AM
I laughed so hard when I saw this site because I had just read this website: http://theoatmeal.com/comics/design_hell (particularly the 4th one about “pop” and “edgy” websites)
December 10th, 2009 at 6:01 AM
Good examples and tips –
I would have liked a little more detail on how to achieve those effects. Maybe a link to an article on the site.
December 27th, 2009 at 1:46 PM
Great ideas to improve visual quality of our work. It was really helpful!
Hameed Rahamathullah
Alpha Weblab
December 30th, 2009 at 2:25 AM
Really simple yet very effective methods of giving your design a fresh look. Thanks Sam!
December 30th, 2009 at 2:32 AM
Great tips! I’ve tried to adopt a similar philosophy with most of these. I love sites that ignore image boundries.
December 30th, 2009 at 5:05 AM
Great and effective article. Sometimes I can’t sleep in the evening because I’m not satisfied with the design. Is start thinking and always come to these points.
January 3rd, 2010 at 5:38 AM
whats the name of the fonts? are them free?
January 3rd, 2010 at 7:28 PM
Nice tips on making ones site even more polished.
Look forward to seeing more
January 4th, 2010 at 11:41 AM
8 simple steps to the new bland… I’m not sure how useful it is for new designers to read something like this that totally skims on the fundamentals.
Design should be talked about in concrete terms–line, form, tension, contrast. Every single one of your before and afters could be flipped in certain contexts.
January 4th, 2010 at 12:18 PM
@Tiago
The font is called Archer.
@Colin
I think it’s important to note that I am not trying to teach an art class or advocate that each and every technique should be used in every design. It’s up to the designer to take some creative initiative.
January 21st, 2010 at 3:07 PM
great blog and very good tips, keep up good work
January 27th, 2010 at 2:35 PM
seriously so much useful information here that I may have overlooked in the past, will put these tutorials into action!
February 12th, 2010 at 7:31 AM
Thanks a 10000’s was searching for this kinda info wanna improve maa blog … will surly make some changes this week end.
Thanks Again.
February 19th, 2010 at 5:11 AM
nice tip and useful thanks !
February 19th, 2010 at 6:05 AM
Nice quick tips.
I loved the line about strokes “don’t have them, use them”.
Anyway textures usually complement backgrounds and very rarely do they compliment anything.
Yes, I’m the spelling police…
February 19th, 2010 at 11:34 PM
Great tips, thanks…
February 20th, 2010 at 8:39 PM
Love these great tips! Keep them up BI
February 26th, 2010 at 2:36 PM
good tips well done
February 28th, 2010 at 3:37 AM
Very useful tips. Some of these examples are the very basic doing web deisng the right way, and yet it’s an excellent refresher. thanks
March 10th, 2010 at 12:40 AM
Pretty useful tips. Thanks for the post guys…will definitely try some of those out
Join the Conversation!
Remember: Life's not all doom and gloom, so please keep it constructive. If we've made an error or missed something big, please let us know! Learning is revisions, after all.