Five Minute Upgrade – Making Your Design Pop

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.

Brighten your colors

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.

Monochromatic Colors

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.

Align to a grid

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.

Add some polish!

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.

Defy Image Boundaries!

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.

Whitespace

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.

Use textures in your design

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.

Mmmm that's good stroke

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.

Posted Tuesday, June 30th, 2009 · Back to Top

SPONSOR

Add Comment

101 Comments 59 Mentions

  1. Jawaad Ahmad Khan Author Editor

    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 =-.

    ·

  2. Andrew Houle Author Editor

    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 =-.

    ·

  3. Stephen Parke Author Editor

    Great tips! All of them are so simple but make a huge difference.

    ·

  4. Gaurav Pant Author Editor

    Very useful tips. Simple but highly effective. Will try out some in next projects :)
    Thanks

    ·

  5. Kayla Author Editor

    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!

    ·

  6. Mahallo Media Author Editor

    Good tips, thanks for sharing!

    ·

  7. Robert Hartung Author Editor

    Great tips, thanks for those!

    ·

  8. Dan Marston Author Editor

    Some great tips, quick and easy! cheers
    .-= Dan Marston´s last blog ..Sunsets =-.

    ·

  9. Uwe Author Editor

    Cool. It’s that easy to add some eyecandy to a project. Thanks for advise, Sam.

    ·

  10. Quakeulf :3 Author Editor

    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 =-.

    ·

  11. Russell Bishop Author Editor

    7′s Before looks alot better than 8′s After

    ·

    • yula Author Editor

      agreed – there’s beauty in simplicity

      ·

  12. Ed Author Editor

    Really enjoyed these tips.
    Love the short and quick 5 min concept too.

    ·

  13. Tommy Author Editor

    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 =-.

    ·

  14. Libzar Author Editor

    Great tips, I’ll be coming back for more.

    ·

  15. Niels Wijers Author Editor

    Really nice article!

    ·

  16. sriganesh Author Editor

    nice one. really informative. thank you. !! ;)
    .-= sriganesh´s last blog ..demo =-.

    ·

  17. James McWhorter Author Editor

    Thanks! This gives me a few ideas. ;)
    .-= James McWhorter´s last blog ..Enable tethering shortcut found for iPhone 3.0 =-.

    ·

  18. Raymond Selda Author Editor

    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 =-.

    ·

  19. T-Law Author Editor

    I love these tips. Thanks.

    ·

  20. saurabh shah Author Editor

    wow! fantastic advices ..

    ·

  21. Ross Johnson Author Editor

    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… =-.

    ·

  22. Grover Author Editor

    @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.

    ·

  23. Brant Author Editor

    Nice post – great examples.
    .-= Brant´s last blog ..Online Productivity Tools =-.

    ·

  24. Heath Arild Orholm Author Editor

    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!

    ·

  25. sonichtml Author Editor

    very usefuly…thank you for shared

    ·

  26. Nicholas Z. Cardot Author Editor

    Awesome tips! Thanks.
    .-= Nicholas Z. Cardot´s last blog ..Independence Day – 233 Years of Freedom =-.

    ·

  27. Callum Chapman Author Editor

    Great tips, keep things like this coming!
    .-= Callum Chapman´s last blog ..Create A Super Grungy Texture in Photoshop =-.

    ·

  28. Tom Ross Author Editor

    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 =-.

    ·

  29. Quakeulf :3 Author Editor

    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 =-.

    ·

  30. Sam Dunn Author Editor

    @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.

    ·

  31. Montana Flynn Author Editor

    This is one of my favorite posts on buildinternet, thanks!
    .-= Montana Flynn´s last blog ..Why I used uPrinting.com =-.

    ·

  32. Carson Shold Author Editor

    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!

    ·

  33. NBK Author Editor

    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 =-.

    ·

  34. Rongen Author Editor

    Nice and simple.
    .-= Rongen´s last blog ..Infinite Wellness =-.

    ·

  35. Piyush Agarwal Author Editor

    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 =-.

    ·

  36. sravkum Author Editor

    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? =-.

    ·

  37. web design glossop Author Editor

    These are great tips and ones which I shall add to my next project!

    ·

  38. Calgary web design Author Editor

    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

    ·

  39. laurence Author Editor

    In nearly all of these examples it looked better before

    ·

  40. Robomaster @ CoolAppSite Author Editor

    It’s pretty amazing what a tiny bit of tweaking can do to a design!

    ·

  41. Carmen Author Editor

    There are some great tips, alittle tweak here and there and you’ve got eye catching stuff.

    ·

  42. Gianni Author Editor

    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!

    ·

  43. Ed Fry@List of Best Search Engines Author Editor

    It’s interesting to see the ‘montonous colours’ idea – although I can see it being abused by those with no colour co-ordination!

    ·

  44. Chaim Chaikin Author Editor

    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)

    ·

  45. MichaelT Author Editor

    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.

    ·

  46. Hameed Rahamathullah Author Editor

    Great ideas to improve visual quality of our work. It was really helpful!

    Hameed Rahamathullah
    Alpha Weblab

    ·

  47. Indrek Author Editor

    Really simple yet very effective methods of giving your design a fresh look. Thanks Sam!

    ·

  48. Becky Author Editor

    Great tips! I’ve tried to adopt a similar philosophy with most of these. I love sites that ignore image boundries.

    ·

  49. Robert van Hoesel Author Editor

    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.

    ·

  50. Tiago Author Editor

    whats the name of the fonts? are them free?

    ·

  51. Free Traffic Guy Author Editor

    Nice tips on making ones site even more polished.
    Look forward to seeing more :)

    ·

  52. Colin Author Editor

    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.

    ·

  53. Sam Dunn Author Editor

    @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.

    ·

  54. Asterhost Author Editor

    great blog and very good tips, keep up good work

    ·

  55. Keithb Author Editor

    seriously so much useful information here that I may have overlooked in the past, will put these tutorials into action!

    ·

  56. mushtaq Author Editor

    Thanks a 10000′s was searching for this kinda info wanna improve maa blog … will surly make some changes this week end.
    Thanks Again.

    ·

  57. gusse Author Editor

    nice tip and useful thanks !

    ·

  58. Andrea Austoni Author Editor

    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…

    ·

  59. Travis Author Editor

    Great tips, thanks… :)

    ·

  60. Bryan Author Editor

    Love these great tips! Keep them up BI :)

    ·

  61. nev Author Editor

    good tips well done

    ·

  62. Omer Greenwald Author Editor

    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

    ·

  63. jeff Author Editor

    Pretty useful tips. Thanks for the post guys…will definitely try some of those out

    ·

  64. Debra Author Editor

    This are nice tips- very simple to implement, and its a nice reminder that the littlest details can make a huge difference in any design. Very nice.

    ·

  65. ARTisani Author Editor

    Love these tips.
    Reminds me to keep learning webdesign.

    ·

  66. drummer Author Editor

    Great site and very nice info! Thanks!

    ·

  67. MajorSparrow Author Editor

    Great post, thanks for sharing, its the little things in life that make a difference when it comes to websites.

    ·

  68. Tim G Author Editor

    Thanks for these tips. They will come in handy.

    ·

  69. John Design Author Editor

    I like about interior design. This blog has information about the design. Thank you wants to share a tip with me. I look forward to posting about the design than you. Thanks

    ·

  70. Calgary Web Design Author Editor

    Good advice – think your note on Take the Time to Polish is right on the money — lots of folks tend to steam past the little details, but its those details which really push your design into a whole new level.

    ·

  71. njmehta Author Editor

    Some great tips on the little things that can make a big difference and turn a good design into a great one.

    ·

  72. Brett Widmann Author Editor

    These are great, fast, last-minute tips! Thanks for sharing.

    ·

  73. brad Author Editor

    thanks for the good tips, definitely somethig to keep in mind

    ·

  74. Web Designer Steve Author Editor

    Some great tips here, sometimes when looking at a new design it’s hard to point out a reason it doesn’t pop. Got this thread bookmarked, great checklist to go through before sending a client a mock up.

    ·

  75. Montessori Author Editor

    Awesome, thanks for the tips!

    ·

  76. Mike Richard Author Editor

    its just great.

    ·

  77. Carl – Web Courses Bangkok Author Editor

    Love it! this is what we teach in our Intermediate Web Design courses, how to make small changes that really help lift your design. I also like adding a 10% opacity gradient overlay to things to give them a nice rounded feel too.

    thanks for sharing!

    ·

  78. Stefan Petersen Author Editor

    Great advice! Thanks for sharing.

    ·

  79. Scott Simsa Author Editor

    Wow, great article. Very helpful tip indeed!

    ·

  80. Web Design Calgary Author Editor

    Good article, but I can see some of these points (especially 7 and 8) will increase page size and download speed and also tie in the design to a specific style, which will become outdated. Clear, clean web design will be faster, last longer and won’t cause any readability issues as with some textured backgrounds. I totally agree with 1, 3 and 4 since they are the basis for great design. One note on point 2 is that you don’t want to be changing the colors of a logo just to make it work on a website. The logo design is a core branding element and the web design that surrounds it should heighten and support its presence.

    ·

  81. Bettnässen Author Editor

    great blog and very good tips. I like this Blog

    ·

  82. GeekITDown Author Editor

    Some great tips here. The article has nice flow, thanks for sharing the info.

    ·

  83. Michelle Author Editor

    I’m not a designer by any means and have created a website out of necessity, but I love your site and appreciate the inspiration and tips.

    ·

  84. Martin Varesio Author Editor

    Will increase page size and download speed and also tie in the design to a specific style, which will become outdated..!

    ·

  85. DD Author Editor

    I like some of the tips.

    ·

  86. Tim Author Editor

    You might want to change the marketcircle-link: it’s all white without any of the mentioned tips.

    ·

  87. what is kush Author Editor

    Oh my goodness! an incredible article dude. Thanks However I am experiencing concern with ur rss . Don’t know why Unable to subscribe to it. Is there anyone getting an identical rss downside? Anybody who knows kindly respond. Thnkx

    ·

  88. Jenni Author Editor

    Looks awesome although I’m not a Designer guru.

    ·

  89. Eric Bieller Author Editor

    Hmm not bad tips.. These aren’t set in stone rules though.. sometimes you purposely want to remove white space or remove depth ;) thanks for sharing though!

    ·

  90. Andreas Author Editor

    These are valid points and the examples show clearly what you mean. Regarding textures though, these should be used VERY sparingly. Textures can instantly change a neat design into a dirty cluttered looking design.

    ·

  91. w32 blaster worm Author Editor

    I merely wanted to thank you once more for your amazing website you have built here. It can be full of useful tips for those who are really interested in this particular subject, particularly this very post. You really are all absolutely sweet and thoughtful of others as well as reading your site posts is an excellent delight with me. And what a generous treat! Mary and I are going to have pleasure making use of your points in what we have to do in the future. Our list is a mile long which means that your tips will certainly be put to good use.

    ·

  92. Beats by dr dre cheap Author Editor

    It may be too complicated and very broad for me. I am expecting for your another script, and I like to try to acquire it! Actually the publication is spreading its wings rapidly, trying to find it…

    ·

  93. Imgwebdesign Ltd Author Editor

    My favourite is easily the breaking image borders tip, that’s a great way to break up the lines of a designs and make it look more 3D and interesting. Textures are also really useful to stop designs looking flat.

    ·

  94. Motywacja Author Editor

    Motywacja to stan w którym jesteś gotowy do podjęcia wszystkich działań, które powinieneś podjąć, aby prowadzić jeszcze lepsze i bardziej dostatnie życie. Naukowcy nazywają motywacją stan gotowości człowieka do podjęcia ściśle określonego przez niego działania. Motywacja kieruje Tobą tak, abyś uzyskał jak najlepsze rezultaty poprzez wykonanie rzeczy, których wykonania powinieneś się podjąć. Na przykład po to, aby zmienić swoje położenie psychiczne czy fizyczne albo mentalne w celu zarobienia pieniędzy, nawiązania lepszych relacji z innymi ludźmi czy też poprawienia swojej kondycji fizycznej. Jeśli jesteś świadomy swojej motywacji i działasz w ściśle określonym kierunku, to kierunek ten nazywa się celem. Motywacja to nie jedna rzecz a cały proces, na który składają się nawet malutkie drobnostki, które mają Cię doprowadzić do ściśle określonego przez Ciebie celu. Niektóre z rzeczy, które mogą Tobą kierować, mogą Ci bardzo przeszkadzać w osiągnięciu przez Ciebie wyznaczonego sobie celu. Wejdź na stronę http://motywacja24.pl i przekonaj się na własnej skórze, czym jest prawdziwa motywacja, jak ją osiągnąć oraz nie dać się złemu, które przeszkadza Ci w osiągnięciu wymarzonego przez Ciebie celu.

    ·

  95. Louis Vuitton Damier Ebene Canvas Olav MM Ebony N41441 Australia Author Editor

    Keep working ,impressive job!

    ·

  96. Tomeka Grosser Author Editor

    Please let me know if you’re looking for a author for your blog. You have some really great articles and I think I would be a good asset. If you ever want to take some of the load off, I’d really like to write some material for your blog in exchange for a link back to mine. Please blast me an e-mail if interested. Thanks!

    ·

  97. In Home Computer Repair in Calgary Author Editor

    Some nice tips in there.

    ·

  98. Presell Author Editor

    This is getting a bit more subjective, but I much prefer the Zune Marketplace. The interface is colorful, has more flair, and some cool features like ‘Mixview’ that let you quickly see related albums, songs, or other users related to what you’re listening to. Clicking on one of those will center on that item, and another set of “neighbors” will come into view, allowing you to navigate around exploring by similar artists, songs, or users. Speaking of users, the Zune “Social” is also great fun, letting you find others with shared tastes and becoming friends with them. You then can listen to a playlist created based on an amalgamation of what all your friends are listening to, which is also enjoyable. Those concerned with privacy will be relieved to know you can prevent the public from seeing your personal listening habits if you so choose.

    ·

  99. richard Author Editor

    Thanks for the great tips! Its amazing how much better they all look by changing them justa a little bit. Thanks again.

    ·

  100. Suffolk Graphic Designer Author Editor

    Design 101. I don’t think any of these transform GOOD to GREAT but these are all things every designer should be aware of. They are all more likecheesy tricks than good design sense.

    ·

 

Build Internet by One Mighty Roar. Since 2008.