Adding Depth with Pixel Perfect Line Work

By / Dec 30, 2009 / Tips
shares

A pixel is a single point in a raster image. Computer displays are capable of showing millions of these at a time. So how can one lone pixel have an impact on a web design? It probably can’t. However, if you extend that pixel in one direction, it becomes a line, and in the hands of a masterful designer with an attention for subtle detail, the 1px line is a powerful design element. It can be used in many different ways, but in this article we’re going to take a look at how pixel perfect line work can add depth to a design.

The Light from Above

To effectively create depth, one must understand light sources. A light source creates two things: highlights and shadows. The combination of these two things can make something appear as if it’s coming off the page, since lighter elements appear closer and darker elements appear further away.

A light source can come from any direction, but normally light comes from above. Our brains are even wired to expect this. That’s why it’s a typical practice in web design to use a 1px highlight on the top of an element to make it pop, and a darker 1px line on the bottom as a shadow.

Lines that Make Edges Pop

Icon Dock is a great example of how to effectively use subtle 1px lines to achieve depth. Nick La, the designer and owner of Icon Dock, uses 1px lines all over the place to make various design elements pop. Notice the 1px highlight that runs across the top of the main banner area. This pushes the top away from the background and gives the edge a slightly raised look.

line work

line work

Also notice the 1px highlight lining the bottom of the nav bar. This is a nice touch and amazing attention to detail. It gives the illusion of a slightly reflected highlight, but more importantly it helps separate the dark color of the nav bar from the shadow below. If the line was not there the bottom edge of the bar would blend with the shadow and be lost.

line work

If we look at the bottom of the Icon Dock design we will see that the highlight/shadow combination is completed with the use of a dark 1px shadow that runs along the bottom edge of the content box.

line work

line work

UXBooth uses the same technique to give the green bar separating the header form the content a slightly three dimensional look. Notice the light green line on top and the dark green line along the bottom.

line work

line work

Make Buttons Stand Out

Buttons are another element where this technique can work wonders. Since buttons are meant to be clicked, it helps if they look as if they are raised off the page a bit. The buttons on NOSOTROS use a slightly lighter color than the background that brings it closer to the eye, but it is the 1px border around the buttons that completes the effect and makes the buttons look very clickable.

line work

line work

Michael Dick’s portfolio also uses pixel perfect lines to highlight the edges of the main navigation buttons. What I really love about these lines is the fact that they are broken and worn looking to match the grungy style of the over all design. Whether he did or not, it appears that Michael painstakingly erased random portions of the lines to give it this tattered look. It’s this kind of attention to detail that sets some designs apart from the rest.

line work

line work

1px Lines Can Be Very Groovy

Another technique for creating depth with 1px lines is pairing one light and one dark line right next to one another. This creates the illusion of an inset groove, but the key is the placement of each. As mentioned earlier, our brains are wired to assume the light source is coming from above or the top. Notice here that the dark line on top is representing the shadow cast by the top edge of the groove. The light line represents the highlight created by the bottom edge.

line work

If we reverse the positions of the two lines, we loose our groove. Now it appears to be more of a lip that is casting a shadow.

line work

Now let’s get our groove back and take a look at some sites that use this technique to perfection. Atebits uses grooves to separate content and uses the same technique on the main navigation bar to separate the links. This type of line work looks as if it was laser etched into the surface of the design, which is a perfect fit for the over all style of the site.

line work

line work

Tim Van Damme’s portfolio has grooves everywhere. Along with some gradients, the 1px lines here that make up the grooves give this design lots of depth and makes the big buttons look very clickable.

line work

About the Author

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

28 Comments

  1. leon
    December 30, 2009

    These 1px borders really do add dept, nice examples.

    Reply
  2. SmashingWebs.com
    December 30, 2009

    Wow.. I liked ther post. I will consider these factors when I design my next web layout :)
    Thanks for the post

    Reply
  3. Sam Logan
    December 30, 2009

    Great article, I love pixel perfect highlights and shadows, really add depth to a design.

    Reply
  4. jonern
    December 30, 2009

    Nice article! Another step to pixel perfection =)

    Reply
  5. Angela
    December 30, 2009

    Details are so important in a design – even things as small as those one-pixel lines and how they are treated. It really shows if you skip the details. I love the examples you use. Great post Henry!

    Reply
  6. Arslan
    December 30, 2009

    thank you for this, Great Article

    Reply
  7. steve
    December 30, 2009

    OOo, I smell a trend…

    Reply
  8. Federico
    December 30, 2009

    Wow, impressive, will use it on my next project.

    Reply
  9. Blogger Den
    December 30, 2009

    You run a tight blog here. Amazing design, really incredible articles, I look forward to more of your work in the coming months! I have to recommend Web Design Ledger to all my friends who are interested in web design, your blog provides a hub for great design info

    Reply
  10. Badger
    December 30, 2009

    Great article. I actually read this one and didnt skim it. Thanks.

    One point however, you mention several times that our brains are wired to expect light from above. As a ‘normal’ person I agree, but would love to know where you got the fact from, if only to read it myself.

    Thanks again.

    Reply
    • Henry
      December 31, 2009

      Thanks. Glad you liked the article.

      To be honest, I didn’t actually read that anywhere. I just concluded that it had to be true from my own observations over the years of doing this kind of stuff. However, after reading your comment here, I did a little research and found this interesting page about optical illusions. Scroll down and look at the one with the dimples. The caption below it states pretty much the same thing that I’ve written here.

      Reply
    • Dorus
      December 31, 2009

      It is because of the sun and it’s position. Casting shadows for thausands of years. Kinda like the environmental factor that evolved our ability to distinguish many different shades of green. (Forests, leafs, foods, poisons)

      Reply
  11. Joanna
    December 31, 2009

    Super slick and gorgeous details that just make a design pop. Trendy and for a reason.

    Reply
  12. Liam McCabe
    December 31, 2009

    Big fan of this stuff :)

    Also used with text-shadow.

    Reply
  13. Vardas
    December 31, 2009

    That’s great article. I think it’s useful and you picked up perfect examples.

    Reply
  14. Matt Esau
    December 31, 2009

    This may seem like a dumb question, but I wonder if this style of luminosity and depth in web pages is a fad or if it is cemented into what good design looks like on the screen medium. It makes sense that if your medium is based on light, it would do the vibrant, luminous look very well.

    I’d say depth and luminosity are here to stay. The high contrast looks that are being created right now on cutting edge websites increase readability a great deal.

    with that said, what is the wheat and what is the chaff? If depth and luminosity are going to be the norm, what are the trends we can weed out?

    Just some thoughts…Happy New Year everybody!

    Reply
  15. Chris Renner
    December 31, 2009

    Love the article, thanks! I’m trying to implement the “groove” technique on table rows, and it doesn’t work. The border-bottom property of a cell or row appears to overwrite the border-top property. This behavior appears to be across browsers. Anybody have a suggestion?

    Reply
  16. Chris Renner
    December 31, 2009

    Nevermind, I just answered my own question. I had border-collapse set to “collapse”…

    Reply
  17. Paul Liversidge
    January 3, 2010

    Great article, it actually inspired me to re-work my business card site. Added a thin line here, some noise there, a little lighting everywhere and ended up with something that looked like a rendered image.

    Reply
  18. Jannis Gerlinger
    January 4, 2010

    this is the pixel extra which makes it perfect!

    Reply
  19. Paul Ehrenreich
    January 4, 2010

    I looked over some of the examples like icondock and uxboth to make lines pop. Are they adding those 1px lines to the images themselves? or they adding them via CSS?

    Reply
    • Gisela
      January 7, 2010

      I also wanted to know how they do these lines, the different techniques available!

      Reply
  20. Michael Dick
    January 15, 2010

    Thanks for showcasing my website and adding the kind words!

    Reply
  21. nikhil
    February 20, 2010

    wow !!! thts gr8. Its just add more beauty to design….

    thnx for sharing it

    Reply
  22. Kevin
    June 21, 2010

    Can anyone direct me to some tutorials on this? Would love to add this to my work..

    Reply
  23. Tim
    January 27, 2011

    I’ve been starting to add more and more detail into my web designs lately and really does add a whole new feel to it. It’s amazing how much of a change 1 pixel can do. Great article.

    Reply
  24. Gavin
    July 8, 2011

    Great article, its these little things that truly set designers apart from the rest.

    Reply
  25. Subash Pathak
    January 11, 2012

    Cool Dude.Nice post Thanks for making this public.Can you tell me how to make those groovy lines.If you have got the idea please mail me to my email address.

    Reply

Leave a Reply