10 Simple and Impressive Design Techniques

Advertisement

Complex design techniques are often time-consuming and, well, complex. Some of these advanced effects1 can add plenty of depth to designs, but when used in the wrong place, they do little more than distract viewers from the project’s intended focus. These effects may be precisely what a design needs to have the impact it requires, but even in these cases, they should be complemented by simpler effects.

Simple effects and techniques are the building blocks of today’s designs. For example, what good is a stellar lighting technique2 if you can’t decide which colors to use or which text-based effects to use in conjunction with the effect?

With a “less is more” mentality, we’ve selected 10 very simple and impressive design techniques that can drastically improve the performance and appearance of your designs.

For more techniques, you may want to look at our previous articles:

The basics first. Because you’ve got to crawl before you can walk, let’s start with the fundamental concepts of simple and effective design.

1. Add Contrast

Sadly, adding extra contrast is one of the most overlooked and under-used techniques.

Screenshot5

Joost de Valk6 makes great use of thin, high-contrast lines that make it easy for the user to distinguish between different section of the page. In the enlarged portion of the above screenshot, you can see that most of the time this contrast is just a lightly colored 1-pixel line next to a dark 1-pixel line.

On the other hand, the “More” and “Go” buttons on his home page have so little contrast that they’re easy to miss even when you’re looking for them.

Screenshot7

WordPress8 uses color to add contrast to its most popular link, “Download.” The red stands out among the calm palette of blues and grays but isn’t so bright that it hurts to look at it.

If you’re in doubt about whether you need more contrast, think of it a bit like applying makeup, strangely. The idea is not to get people to say, “Hey, look! Contrast!” You want to naturally draw their attention to important items on the page and highlight features that are already there.

2. Gradients

Developments in technology have brought tools for creating gradients to nearly anyone who wants them. But is that a good thing?

Screenshot9

Media Temple10 has gradients on nearly every page of its website, but moderation and subtlety are the keys to the design’s success. The logo, headlines, buttons and backgrounds all have subtle or minor gradients to emphasize their content. The most complex gradients on the website are found on simple 120 pixel-wide buttons that are intended to grab attention.

Screenshot11

Commission Junction12 not only uses gradients far less subtly than Media Temple, but implements a variety of different types of gradient:

  1. Horizontal, linear gradient from black to medium gray at the top of the page.
  2. Green radial gradient in the background of the green header.
  3. Faint diagonal gradient over the “CJ” logo in the log-in box
  4. Light vertical linear fade in each input box background
  5. Vertical gradient in navigation bar background
  6. Bright linear fade in Webinar banner
  7. Another vertical linear fade for headings

The design is a bit adventurous, and for the most part, it works, but it has a few major problems. Most importantly, there’s no consistency. Much like choosing a sensible color palette, designers should carefully choose only a few types of gradient for each project.

For example, the large horizontal gradient (1) pulls the eye along the width of the page. That’s not a problem in and of itself, but right below are both a radial gradient (2) pulling the eye towards the center of the page and another linear fade (3) pulling the eye down and across to the bottom-right corner of the log-in box. This makes the page a little confusing for the user, and the choppy visual flow makes it a little difficult to read.

When working with gradients, it is important to keep a nice visual flow: use gradients sparingly or subtly. And most importantly, use them only when they complement the overall feel of the project.

3. Color

Using color well can be a challenge. Between coming up with a perfect palette and knowing where to put each tone, it’s easy to spend too much time coloring your design.

Screenshot13

Realmac Software14 pulls off a very bold idea by inviting the entire spectrum of colors onto its 404 page. This works for a few reasons. First, Realmac has set the page against a neutral gray background. More importantly, it hasn’t used color anywhere else on the page, with the exception of the blue text links and the small splashes of color far below the fold.

Though the full-spectrum palette grabs attention right away, it’s still simple, and the use of gray keeps it from irritating the eye. Trying to use more than four or five colors in one design would usually overwhelm. Stick to simple four-color palettes unless you’re really confident the design calls for more.

Screenshot15

When you use color sparingly and intelligently in your design, it is so much easier to draw attention to important items. On Interspire16‘s “About Us” page, viewers are quickly drawn in turn to the dash of color in the logo at the top of the page, then straight to the headings and, lastly, to the logo at the right of the page content.

Working with fonts. Typography is an art far deeper than most of us realize. There’s certainly a place for details like ascenders and side bearings, but they’re not nearly as crucial to understand as the following techniques.

4. Letter Spacing

Letter spacing, or kerning, can make a huge difference in headlines, paragraphs, logos and anything else that involves text. It is nothing more than the distance between each pair of letters.

Screenshot17

Krop’s18 new portfolio builder doesn’t do anything too extravagant with the text here. Most of the website’s image-based text reduces letter spacing to make statements more concise and powerful.

Screenshot

The above illustration shows how letter spacing can have a negative effect on your designs. Small or non-anti-aliased text is most difficult to read with modified letter spacing.

If you haven’t before, tinker a bit with letter spacing in your designs, and you’ll be shocked by the difference it can make. A few good fonts to start with are “Myriad Pro” for images and “Trebuchet MS” for HTML text.

5. Case

… As in uppercase and lowercase. Changing case requires nothing more than pressing the Shift or Caps Lock key, and yet so few designers take advantage of this technique’s potential.

Screenshot19

Some of MSNBC’s20 use of case is obvious. Beyond the all-lowercase logo, however, the company makes subtle use of case in other areas. The large message bar at the top of the page usually says something like “WATCH LIVE” or “BREAKING NEWS.” Considering that the words usually highlight something very important, this is an excellent way to draw attention to these particular announcements.

Additionally, using only uppercase letters allows MSNBC to make its incredibly small buttons21 just clear enough to be legible. In this 5-pixel-tall application, lowercase letters such as a, m, x and z would be only 2 to 3 pixels tall and not readable at all.

Screenshot22

Sticking with news websites for the moment, CNN23 misses a lot of opportunities to use case to enhance its pages. To its credit, it uses an all-caps navigation menu, but the vast majority of the page is in traditional case, with only the first letter of each sentence capitalized.

6. Anti-Aliasing

Though technically a much more complicated process, anti-aliasing can be summarized as the smoothing out of edges, and it applies to all aspects of design. In the world of Web design, anti-aliasing is partially determined by whether the text will be in HTML or shown as an image. Complicating things a little more, some Web browsers and operating systems automatically smooth out HTML text a bit, but as a general rule, HTML text has no anti-aliasing.

Screenshot24

Stockxpert25 makes a conscious choice on its very simple landing page to anti-alias some lines of text and not others. Most of the text has a very smooth edge and does not appear choppy at all, but that’s not the case for the small text at the top and bottom of the page. Much like the small text on the MSNBC buttons mentioned above, the 5-pixel-tall text needs to have as sharp an edge as possible to be legible. Any blurring or anti-aliasing for text this small would have readers straining their eyes, only to give up.

Mess things up! Thing that look perfect often look fake or uninteresting. Leaves on trees are not exactly symmetrical; lighting of any kind provides uneven shadows and highlights; and camera lenses sometimes blur areas of the shot and produce lens flare. Some designs look great with clean and artificial-looking effects… some need something messier.

7. Imperfection

Anyone who has used a computer for more than 10 minutes will tell you they’re not perfect, but from a design perspective, they can produce perfect results. When you use the Line tool in your favorite design software, with the default settings, you get a perfectly straight line from point A to point B.

Screenshot26

This Antique Ace of Spades27 tutorial goes through about a dozen steps to make this card look imperfect, which is, admittedly, not very simple. The concept itself, however, is very simple. Make things look old, dirty or otherwise imperfect to give your work a unique touch.

Screenshot

This butterfly photo that looks like it was taken in the mid-1900s is another example of imperfection at its best. The photo was actually taken on a digital camera, then degraded using a few filters and some quick color changes to give it a vintage look.

Successfully adding artifacts and imperfections to a design is easier than you may think. Start by converting items to grayscale or sepia tones, and then go from there.

8. Blur

If you’ve ever been stumped with the predicament of how to make something stand out more, stand out less, or nearly disappear, take a look at using blurs in different ways. By blurring objects in the foreground, background or by blurring the entire design, you can dramatically increase the impact of your project. Focus is, at least in part, relative. By blurring one object, it brings focus to another.

Screenshot28

The Ios V229 wallpaper collection uses simple blurs to create a calm, organic view. There are only a few sharp lines to give the image focus, and the blurred background is crucial to the look of the wallpaper as a whole.

Screenshot

Blurs can also be used to give a sense of depth or layering. Windows Vista’s Aero theme blurs anything behind windows for a cool, diffused glass effect. A simple Gaussian Blur tool can create the same effect.

9. Alignment

Even while maintaining clean, straight lines, there are opportunities to give your project that “extra something” it needs.

Screenshot

This sample logo gets most of its character from the raised “logo” letters. Altering the alignment of design elements can make them more memorable, more talked about and, consequently, much more effective.

This technique applies not only to text either. Some designers fall back on templates or personal work habits when conceptualizing a design. This can greatly increase the speed with which concepts are turned over to clients; but all too often, it also restricts creativity — especially with regard to alignment.

Screenshot30

Icon Designer31 sets itself apart by rotating a few design components. The page would otherwise be fairly monotonous, but the simple rotations keep things interesting.

Most of today’s websites are 700 to 900 pixels wide, are centered vertically in the browser, and have straight edges down each side of the page that determine where content begins and ends. In a lot of cases, this kind of order and predictability is good, but a fair proportion of websites would benefit greatly by their designers’ thinking outside of the box… figuratively and literally.

And most importantly…

10. Trim Fat

Perhaps the most important and under-appreciated design technique, trimming unnecessary parts of a project, is also one of the hardest to do.

Screenshot32

By trimming all unnecessary components, CSS Remix33 is left with only the essentials and can display seven premium ads (128 by 96 pixels), 53 favicon ads (16 by 16 pixels) and a whopping 56 websites at one time — all in the top 1000 pixels of the page! Even the website’s logo has been trimmed to 53 by 7 pixels.

As with most things in life though, too much of a good thing isn’t always a great thing. The logo is so small that it is hardly recognizable, and the featured websites can be very difficult to distinguish from one another at times. The Twitter feed at the top of the page is, strangely, far more prominent than the website’s logo or navigation.

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/2008/04/03/adobe-photoshop-tutorials-rainbows-glows-and-light-effects/
  2. 2 http://www.computerarts.co.uk/tutorials/2d__and__photoshop/expressive_lighting_effects
  3. 3 http://www.smashingmagazine.com/2009/01/19/12-useful-techniques-for-good-user-interface-design-in-web-applications/
  4. 4 http://www.smashingmagazine.com/2008/03/26/grid-based-design-six-creative-column-techniques/
  5. 5 http://yoast.com/
  6. 6 http://yoast.com/
  7. 7 http://wordpress.org
  8. 8 http://wordpress.org
  9. 9 http://mediatemple.net
  10. 10 http://mediatemple.net
  11. 11 http://www.cj.com
  12. 12 http://www.cj.com
  13. 13 http://www.realmacsoftware.com/rapidweaver/overview/404
  14. 14 http://www.realmacsoftware.com/rapidweaver/overview/404
  15. 15 http://www.interspire.com/company/aboutus.php
  16. 16 http://www.interspire.com/company/aboutus.php
  17. 17 http://krop.com/creativedatabase/
  18. 18 http://krop.com/creativedatabase/
  19. 19 http://www.msnbc.com/
  20. 20 http://www.msnbc.com/
  21. 21 http://msnbcmedia.msn.com/i/msnbc/Components/ArtAndPhoto-Fronts/SITEWIDE/Icons/flag-updated2.gif
  22. 22 http://www.cnn.com/
  23. 23 http://www.cnn.com/
  24. 24 http://www.stockxpert.com/lpages/sxcbanner/
  25. 25 http://www.stockxpert.com/lpages/sxcbanner/
  26. 26 http://pshero.com/archives/antique-ace-of-spades
  27. 27 http://pshero.com/archives/antique-ace-of-spades
  28. 28 http://yt458.deviantart.com/art/iosV2-42790785
  29. 29 http://yt458.deviantart.com/art/iosV2-42790785
  30. 30 http://www.icondesigner.net/
  31. 31 http://www.icondesigner.net/
  32. 32 http://cssremix.com/
  33. 33 http://cssremix.com/

↑ Back to top Tweet itShare on Facebook

Mark Praschan is an entrepreneur and Web Designer at WebMagg, where he shares good (and bad) experiences from over 15 years on the web, so you can better launch and manage your online business. You can also follow WebMagg on Twitter and Facebook.

Advertising
  1. 1

    Melissa, you said:

    “does anyone know the browser / theme used for Link [88.198.60.17] the example under “blur” technique? it’s very pretty and simple”

    It’s Google Chrome on Vista (with Aero enabled).

    0
  2. 52

    Zuquirio Ámaur

    April 3, 2009 5:55 am

    Great article!

    0
  3. 103

    Nice and usefull tips.

    0
  4. 154

    Nate at Plasticprinters

    April 3, 2009 6:18 am

    Awesome post! I am going to have to fav this and try to use some of these tips in my designs.

    Take care!

    0
  5. 205

    Great post! I definitely lol’d at that first comment. Not sure if he’s serious, you never know. . .

    0
  6. 256

    I was about to say the same thing as Ryan Kirk. He explains it perfectly.

    0
  7. 307

    Great article thanks for the simple but VERY important ways to make your page standout.

    0
  8. 358

    Ooh… I like these kind of articles very much! More!!

    0
  9. 409

    Very excellent article on design techniques. I especially like the important information on gradients and Joost de Valks work.

    0
  10. 460

    any of you know for any website where i can REALLY see something new or learn something more than just basics?.. article is good, but for designer newbies.. i belive all can agree on that.

    0
  11. 511

    great idee from joost van der valk

    0
  12. 562
  13. 613

    good post

    0
  14. 664

    alfred devanesan samuel

    April 5, 2009 9:46 am

    really an useful post. useful for the designer community. great work dude.

    0
  15. 715

    Great article. Can someone please explain how the “Contrast” effect is created – particularly with the slightly inner displaced 1px contrasting stroke? is there a tutorial on this somewhere?

    0
  16. 766

    Nice Simple tips to Make a simple design look great. Thanks a Lot.

    0
  17. 817

    1 – Gradients

    You miss off the important point that althorugh different gradietns can lead the user in different ways you should always consider a light source. after variations in light are caused by the light source, and like a painting, every webstie should have one (in my eyes this is THE most important consideration)

    2 – Colours

    On the first example you say that it works due to the neutral grey background, I have news for you, its not grey, it’s blue. Think you need to sort out your monitors colour profile :)

    Apart from that it was an ok article!

    0
  18. 868

    I like this ‘ Imperfection ‘.

    0
  19. 919

    color, blur, contrast! my favorite :)

    thanks :D

    0
  20. 970

    very nice topic :) i love it :) thanks

    0
  21. 1021

    i agree with the following comments:
    – “call it what it is- graphic design 101.”
    – “you forgot shadows”
    – “you forgot gradients”

    smashing is a miag i really like to read, when i have the time. but using such a title and only showing off the same-blabla-content everybody who lookes at 5 newer/trendy homepages will know this by him-/herself. if not, then she/he is not doing pretty much with designing. not even as a hobby. some more indepth-knowledge would have been appreciated. too many “xynumber of whatever”-articles out there on too many blabla-sites. i thought smashing is on top and not following the croud…

    harsh, i know. but i still want to love smashing mag…

    -1
  22. 1072

    Valik from Web Design Ideas Blog

    April 7, 2009 7:43 am

    Sweet post!! Lots of great small ideas that make huge impact on the design. I re-blogged it on my blog. You guys rock!

    0
  23. 1123

    Uno de los mejores sitios para diseño y desarrollo que he visto ultimamente!
    estoy como 4hr seguidas aca ajjaj.

    great job

    0
  24. 1174

    Very good, if a developer/designer follow these precious ideas definately will do better in their field………

    0
  25. 1225

    I understand the article points basic principles but for all you out there saying “this is design 101″ …well, sometimes it is very useful to go back to the source that we often forget in the middle of all the cutting edge stuff.
    If you are so cutting edge yourself, write an article and share it with us ;)

    1
  26. 1276

    Thanks for the list~

    I looked at the Media Temple website and I’m curious to know how they did their menus. Any help would be appreciated. Thanks.

    0
  27. 1327

    @Ryan

    Late answer, so you probably won’t see this, but… it looks like:
    http://users.tpg.com.au/j_birch/plugins/superfish/#examples

    0
  28. 1378

    REALLY NICE Sweet Article

    – Good points for those who are not experts in graphic design.
    – Helpful illustrations
    – Nice variety

    0
  29. 1429

    Great Post. Some simple tips but very affective as well.

    -1
  30. 1480

    Some are calling this ‘basic’ blahblahblah.
    Yeah, it’s ‘basic’ alright. Though it also points out some good examples and ways of using these ‘basic’ techniques which we design professionals sometimes (gasp) overlook. Half of these people commenting remind me of second semester freshmen. :P

    0
  31. 1531

    well its good for adesigner knowledge thank u!

    0

↑ Back to top