May 27, 2020

Adding Depth with Pixel Perfect Line Work

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

Share

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. Angela Reply

    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!

  2. Blogger Den Reply

    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

  3. Badger Reply

    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.

    1. Henry Reply

      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.

    2. Dorus Reply

      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)

  4. Matt Esau Reply

    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!

  5. Chris Renner Reply

    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?

  6. Paul Liversidge Reply

    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.

  7. Paul Ehrenreich Reply

    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?

  8. Tim Reply

    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.

  9. Subash Pathak Reply

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *