February 21, 2014

5 Ways to Use Lines to Bring Home the Point in Web Design

5 Ways to Use Lines to Bring Home the Point in Web Design

We go through our daily lives all the time without thinking of lines and how much presence they maintain within our existence: they divide lanes of traffic, form the blueprint of every building we enter, and are visible in the curving lines of the veins of our bodies. It’s interesting to think of lines in Web design and the ways in which they can impact user experience.

Johnny Cash made lines immortal and soul-stirring when he sang about “walking the line,” and for good reason. Lines separate concepts, lead us to new conclusions, and emphasize the differences between items or ideas. When we examine them more closely, it’s interesting to see how our brains (and emotions) interpret lines and the effects they can have on the user when interacting with your site.

1. Diagonals Add Dimension

We tend to think in terms of straight lines, and our analytical brains may err on the side of viewing the world in purely horizontal and vertical terms. This might be one reason diagonal lines can have a big impact on users when employed in dynamic website designs. Diagonal lines go against the grain; they capture the eye and can direct users to experience a site in a vibrant new way. Which is more interesting: a diamond or a square? Even the word “square” has a negative connotation! Try out diagonal lines as a design element when you want to encourage a more stimulating visual experience for your customers.

2. Single Pixel Lines to Create Depth

A pixel is the most finite and elemental unit of digital design. And yet, it can also be one of the most important elements of a design, especially when repeated multiple times in a pattern that forms a line. A single-pixel line can create depth, encourage interaction, and emphasize dimension. Even as we write this, single-pixel lines define the multiple open panes on our MacBook Pro. Employing this simplest of directional suggestion into your website encourages a more interactive experience: single-pixel lines encourage clicking, scrolling, and shifting from one page to the next.

3. Verticals Convey Status and Authority

A vertical line ascending to the heavens implies a direct connection to a higher power. The Washington Monument is the perfect example of this sentiment. Could there be a clearer symbol of strength, authority and… well, ahem, virility? Using strong verticals in your site can indicate to the user that content is both authoritative and continuous. On the opposite end of the spectrum, descending verticals can convey a sense of additional content to be found by scrolling downward.

4. Curved Lines Add an Ethereal, Emotional Edge

Curved lines are gentle and flowing. They seem to be simultaneously very much of nature and also possessed of an ethereal energy. Employing curved lines in Web designs encourages the user to experience a site in a more relaxed, responsive way. They can be indicative of femininity, sensuousness, and other earthly qualities. Incorporating curved lines into a design entices the user to keep reading because of their inherent “come hither” nature.

5. Horizontal Lines Separate Concepts

It starts in kindergarten when we first learn to write our names at the very top of the page, exactly on the provided line. Just as paper is scored with horizontal lines to separate content, a Web design can employ horizontal lines to divide sections and concepts. Less imposing than vertical lines, horizontal lines help to organize content and keep the user engaged in an easy-to-follow manner.

While lines will never have the flash and pizazz of a more dramatic Web design element, they nevertheless play an essential structural role in the overall look and feel of your site. Whether those lines will convey power, emotion or simply better organize your content is entirely up to you.


by Kevin Smith
SmashBrand helps brands create, optimize, and launch successful products, services, and customer experiences. Our data-driven process is the key to accelerating sales and minimizing risks.

We use a strategic combination of market research, design, and consumer testing to solve complex brand problems more effectively, create differentiation, and forge more meaningful connections with customers.

Let's work together.

Tell us a little about your project, and we'll be in touch right away.

Your Details

Don't worry, this is for our eyes only, but we want to be able to reach out to you and chat.


Your Project

We help brands solve complex problems to cut through retail clutter to accelerate their sales and growth while minimizing any risks. Tell us how we can help you.

What type of Project are you enquiring about?

What is your budget? $40 - 80k

What is your timeline 4 - 10 Weeks +

Submit Away

Thanks for taking the time to share your project. We'll take a close look and get back to you as soon as possible.

Prepare for a quick response!