Design Is In The Details

By / Nov 17, 2008 / Tips
shares

Want to take your website design from good to great? Sweet! (I thought so!) Now go grab a magnifying glass and take a close look at some of your favorite websites. Chances are the things that make a site great are all those little details that you might not notice at first glance. Use these 10 design tips help you take your site to the next level!

Break The Plane: Think Outside The Box

Web design can get boxy with all this div div div business going on. One way to add interest is to make a visual element appear to extend outside a box or region of the page. Apple does this on the iPod classic section of their website.
http://www.apple.com/ipodclassic/

Go Organic

Another way to break out of the boxyness of web design is to integrate some organic elements into your site design. Organic (the design firm) does a good job of integrating rounded shapes into a grid based design.
http://www.organic.com/

Add Dimension: Make it Pop!

Lets face it – flat design is boring! You can easily add dimension to your site by using gradients and contrasting lines. Envato does a good job of adding dimension to their sites without going overboard. They utilize 1px contrast lines and subtle gradients to make things pop.
http://envato.com

Emphasis & Hierarchy: Make The Logo Headlines Bigger!

Hierarchy and emphasis demand attention and direct users to content. Your header tags should be sized according to importance. Huge Inc does a great job of adding emphasis and re-enforcing hierarchy within their site. Your eye immediately goes to the huge headline BOO-YAH text at the top of the page.
http://hugeinc.com

Make It Bleed!

The concept of a bleed is carried over from print design and simply means to make the image extend to the edge of the page or border in our case.  Bleeds give a sense of dimension and add visual interest.  Apple does a great job of this on their ipod section of their website.
http://www.apple.com/ipod/ipodyourlife/

Use A Grid

Using a grid adds order and structure to your design. A grid does not necessarily have to be a visible design element, although it is nice to see the bones of a website sometimes. Arc90′s site has a grid structure that is neat, clean, and organized.
http://lab.arc90.com/

Background Images

Having a great background image for your site is something that will add visual intrest, but not distract from the main content. The Styleshout Urban Artist template has a nice subtle wood background that adds color and contrast, but does not distract from the content.
http://www.styleshout.com/templates/preview/UrbanArtist1-0

Make It Move!

Since the web is a dynamic medium we might as well take advantage of it! Subtle animation is a great way to add impact to a website without being obnoxious. There are several java script libraries that make it easy to add simple animation to a website. CSS Tricks has some nice subtle jquery color fading going on in the navigation.
http://css-tricks.com

Branding

Branding should not be limited to the logo on your website. Your brand should influence your typography, image, and design choices. Pattern Tap does a great job of extending their brand by repeating an element of their logo in the category image thumbnails.
http://patterntap.com/

Icons, Icon, Icons

Icons are a great way to attract attention and to inform your visitors on what they are about to click on. External link icons, or icons for specific file types (.pdf .doc .xls ) are a good way to cue your visitors in on what they are about to get themselves into.
http://lab.arc90.com/tools/extlink/

Wrapping it all up

Need some more tips? Check out these other great resources and articles to help you continue to improve your designs:

About the Author

Hey there! I'm Niki - a graphic designer by day and blogger by night. When I'm not designing, I enjoy long walks on the beach, squirrels, bananas, and living in Boston.

21 Comments

  1. Aaron Irizarry
    November 17, 2008

    Great article Niki!
    There are definitely some great tips here… bleed, and breaking the plane are two of my favs.

    Thanks for the great links to the other resources!

    ~ Aaron I

    Reply
  2. liam
    November 17, 2008

    Wow, wow, wow. Very good write up, some super advice there. Nice one Niki!

    Reply
  3. Max
    November 17, 2008

    Good stuff Niki, hierachy of titles is definalty a factor to consider and often over looked.

    Reply
  4. Henry
    November 17, 2008

    Great Post Niki! I love the “Break The Plane” tip. It is so simple to achieve, but is a powerful effect.

    Reply
  5. liz
    November 17, 2008

    well done, Niki. This post is great – very inspirational!

    Reply
  6. meredith
    November 17, 2008

    agree with the others… my high school art teacher taught that artists see the details, and these are great examples of details that hold a great design together, but aren’t the major players. if that makes sense. anyway, good article.

    Reply
  7. Paddy
    November 17, 2008

    Great tips here!

    I also think it’s important to create a slightly different experience for your user each time they visit your site. Including little subtle random changes, such as rotating backgrounds, eliminates boredom and makes your site seem more vibrant.

    Reply
  8. frank
    November 17, 2008

    Niki,

    Thanks for such an informative post. You keep it short and sweet (satisfies my short attention span) but packed it with useful info!

    :)

    Reply
  9. Bob Pease
    November 17, 2008

    Excellent read, and I agree 100%. I love visiting a website that has elements you don’t notice off the cuff. Revisiting a website and noticing a subtle background image makes the experience better, and will bring me back again and again.

    Reply
  10. Jarryd
    November 17, 2008

    Some very good tips there. Another good one is adding print-style elements, like brush stroke roll-overs and such.

    @Paddy
    I very much agree with you about the subtle changes on refresh. Makes the site much more interesting to visit!

    Reply
  11. Sparky Firepants
    November 18, 2008

    Really impressive write-up. I especially enjoyed the breaking out of the box section. Looking forward to more!

    Reply
  12. Broken Link
    November 19, 2008

    The FamFamFam link under the [Wrapping it all up] section is broken.

    Reply
  13. Nathan Beck
    November 20, 2008

    Great post. Good points! Take this site (Web Design Ledger) for instance – some of the little things that really stand out to me are stuff like:

    - the dotted line around the edge, providing an alternate border than just a flat edge.
    - the cute sketches on the glossy background at the top, add some interest.
    - the crumpled logo background gives it a sense of texture.
    - Complimentary, easy-on-the-eye colour scheme.
    - Love the big buttons at the top!
    - The italic Serif headers over sans-serif content… just works!

    Yep – it’s all about the little bits that count. I wrote a related article a few months back on the Flame blog that might be of some interest:

    http://blog.flamedigital.com/?p=114

    Thanks Niki!

    Reply
  14. Mark
    November 23, 2008

    Hey Niki, awesome write. It’s posts like this that keep me on top of my game.

    Reply
  15. lance
    November 26, 2008

    hi this helps me a lot. Thanks

    Reply
  16. Mokokoma Mokhonoana
    November 27, 2008

    Sweet+Short but very informative.

    Reply
  17. Complete Designing solutions
    November 28, 2008

    Thank you very much for the very valuable tips and techniques and describing it briefly and concisely. Thanks for the informative post. You really did a great job. Thank you for it.

    Reply
  18. Ricks
    December 1, 2008

    Great tips. Will be using these techniques for when I update my site again in a few months!

    Reply
  19. Amber Weinberg
    December 2, 2008

    Great tips!

    Reply
  20. mjcpk
    January 1, 2009

    When I compare these examples to sites that I don’t like the big difference is breathing room. Your examples don’t have the cluttered feeling that so many others have.

    Here we have seen sparse and simple elements that are just right, so that there is no need to add anything more.

    Well, that’s the theory; the trick is always in the practice!

    Reply
  21. 25 Best Tech Interface Photoshop Brushes Ever Created | Web Design Ledger
    January 21, 2009

    [...] of Photoshop brushes that deserves it, it’s this one. A few weeks ago, Niki Brown told us how Design Is In The Details. The level of detail in these brushes is astonishing. According to the artist, well over 150 hours [...]

    Reply

Leave a Reply