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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
These 1px borders really do add dept, nice examples.
Wow.. I liked ther post. I will consider these factors when I design my next web layout 🙂
Thanks for the post
Great article, I love pixel perfect highlights and shadows, really add depth to a design.
Nice article! Another step to pixel perfection =)
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!
thank you for this, Great Article
OOo, I smell a trend…
Wow, impressive, will use it on my next project.
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
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. 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.
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)
Super slick and gorgeous details that just make a design pop. Trendy and for a reason.
Big fan of this stuff 🙂
Also used with text-shadow.
That’s great article. I think it’s useful and you picked up perfect examples.
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!
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?
Nevermind, I just answered my own question. I had border-collapse set to “collapse”…
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.
this is the pixel extra which makes it perfect!
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?
I also wanted to know how they do these lines, the different techniques available!
Thanks for showcasing my website and adding the kind words!
wow !!! thts gr8. Its just add more beauty to design….
thnx for sharing it
Can anyone direct me to some tutorials on this? Would love to add this to my work..
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.
Great article, its these little things that truly set designers apart from the rest.
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.