Although its presence is often overlooked visually, but for web designers and is pursuing a careful detail in his work, 1 pixel line can be very important. Sometimes, the use of 1 pixel precise line can be measured in distinguishing between good designers and the best designers.
I conclude that the most recent modern website design uses 1 pixel tricks. Its usefulness is very diverse, in addition to providing visual details that are not too excessive, it can also increase the comfort factor of its users (visitors) too. Here are some examples of the use of 1 pixel on website design.
To emphasize the borderline
Yup, that's right! 1 pixel line to emphasize the separation between content with one another, so that users get a more comfortable space for reading. This is usually used to separate groups of text / paragraph (example: Twitter Stream, News Feeds, etc.).
The trick to making the limiting effects as in the picture above is to use two lines (each 1 pixel). Then by creating a single line color brighter than other colors, then put the two lines to coincide.
To emphasize the size of the field
1 pixel thin line can also be used to polish the outer line of a field, so the end result will look more sharp and distinct. The resulting effect is not too significant, but it would be more comfortable in the eyes by using a 1 pixel line.
To provide visual detail
A button can be quite interesting if we use the 1 pixel lines with the right color. And of course, the button that works is one that is more 'inviting' the user to click.
Sample and inspiration
Conclusion
1 pixel line is very small indeed, but it plays an important role on the outcome of a website design. With proper use and tricks we can create the details that could provide a significant impact.
So, try to look back when you've finished designing a website, so that the result into a website design that 'mature'.
Do you often use this trick too? Or are there other tricks of detail? Please share in the comment:)
4 Comments
Never heard of 1px design. I have heard of 2px dividers though. Most the images you show have 2px work in them. 1px being the stroke and 1px being the inner glow if you will. Nice post though. Although I would recommend making your images a little higher quality when looking at pixel work like that. Otherwise the quality distorts the small details in the design.
ReplyYes, you are right actually they have 2 pixel work in them and the title was simply to 'dramatize' it. I also want to replace some of the samples above a higher resolution since the article still has some rough edges as I published it in a hurry. but anyway, thank you very much! You are very observant. Please come back anytime!
ReplyBecause I am just the beginning with web-design i want to say that i never tought that those small line between words can make so much difference. Good to know how to do, I'll document more about it.
ReplyHow effective is it (1pixel optimization)? Is it reliable and efficient? How many percentage assurance can you give about that?
Reply