We are excited to announce Carsonified’s first book called ‘Art and the Web: Line, Shape & Form’ written by Nick Pettit. This book is part of a larger series that Nick is writing about the elements and principles of art, as they relate to the web. We are releasing each chapter as a blog post on Think Vitamin and at the end, you will be able to download the entire book for free. — Ryan Carson.

Introduction to Line

The first time you learn about each element and principle of art, they might seem so elementary that they’re hardly even worth consideration. However, it’s important to spend time pondering each one carefully. What is a line? What is a line capable of communicating?

These are the types of fundamental questions to ask yourself when learning about the elements and principles. Think about how you can integrate them into your creative thinking and how you can pragmatically apply them to your own real-world web projects. So back to that first question: What is line?

Line is simply a point that moves continuously, like the edge of a shape or the motion of a single brush stroke.

Line interacts with lots of other elements and principles, so we should focus on line very intensely. Every line has a thickness, a length, and a quality. In addition to these three properties, lines also have a direction, and each direction is capable of eliciting a different emotional response. Direction has the most dramatic effect on the overall aesthetic of a line, so let’s start there.

Egon Schiele, Mother with Child (1910)

Horizontal Lines

Of all lines, a horizontal line feels the most peaceful. Horizontal lines appear calm and at rest, because they are parallel to the surface of the Earth. Indeed, horizontal lines are similar to the familiar sight of a horizon line in the distance allowing them to convey a sense of wide-open space.

In the 1885 painting by Cézanne, “The Bay of Marseilles, view from L’Estaque”, notice how the horizon line brings structural stability to the image. The succession of horizontal lines along the rooftops and landscape also helps to convey a sense of depth. Additionally, when a horizontal line touches the sides of the canvas (or web page), the space feels large, continuing beyond what’s visible. We can look at this image and easily visualize the horizon line and the buildings stretching past the left and right edges, almost as if we’re looking through a window. Take a moment and imagine what this painting would look like if it were wider. This “windowing” effect can be amplified in a larger painting, or when a web page is viewed in a maximized browser on a large screen.

Horizontal lines also divide the space. For example, a horizontal bar stretching across the top or bottom of a web page is similar to the horizon line in Cézanne’s painting. In the case of a page header or footer, this division of space might be exactly what’s needed to visually break the page content into logical groups.

Paul Cézanne, The Bay of Marseilles, view from L’Estaque (1885)

Vertical Lines

If horizontal lines communicate peace and stability, then you might expect vertical lines to communicate chaos and instability. However, a vertical line sitting perpendicular to the top and bottom of the canvas has more of a tendency to convey a sense of height. In fact, tall lines running up and down the screen are similar to horizontal lines, in that they communicate stability, order, and give structure to the page.

Eugène Viollet-le-Duc, Pinacle of Notre-Dame de Reims, from the “Dictionary of French Architecture from 11th to 16th Century” (1856)

Vertical lines are used to great effect in Gothic architecture. Artists and architects of the era wanted to build structures that stretched towards the heavens, as they felt this literally brought them closer to God. Through the use of flying buttresses and towering spires, they created houses of worship that appear to touch the sky. The strong sense of height in a Gothic cathedral is also achieved via the careful use of proportion.

For example, the main chamber of the building, which is called the nave, is characteristically taller than it is wide. In some cases the ratio is even greater than 2:1, creating huge interior spaces that stretch towards the sky. Remember, these Gothic cathedrals were some of the tallest buildings of the time, so the massive building facade and gigantic interior was perhaps even more awe-inspiring back then. Unusually tall columns, flying buttresses, towering spires, and narrow windows, all create vertical lines that appear to jut out perpendicular to the surface of the Earth. These architectural features were all intended to incite to religious wonder.

When vertical lines touch the upper and lower edges of a web page, it often signals the user to scroll down and hunt for additional content. Additionally, fixed width layouts will sometimes place vertical lines (either literal lines or implied edges) on the left and right of the content, emulating the sensation of moving down a piece of paper. This visual effect is usually very subliminal; site visitors almost never focus on the left and right edges of a layout. However, the site visitor is able to pick up on these subtle signals in their peripheral vision.

Horizontal and Vertical Lines

Horizontal and vertical lines, when used in combination, communicate the same order and sense of calm that they evoke individually. While both horizontal and vertical lines also communicate stability, together they are more than the sum of their parts. The 90-degree angles formed by perpendicular lines have a tendency to create visual rigidity, which in turn suggests permanence and reliability. Web pages make liberal use of this visual construct through gridded layouts and rectangular boxes. The fundamentals behind CSS and layout engines make this difficult to avoid, which can be good or bad, depending on the desired effect.

The permanence and reliability of horizontal and vertical lines is also frequently leveraged in both classical and modern art. For example, ancient Greek temples juxtapose tall vertical columns and wide horizontal entablatures to create rigid perpendiculars. In addition, some classical temples exhibit horizontal and vertical proportions that map to the golden ratio. In the graphic on the following page, notice the aesthetically pleasing proportions of the rectangles and lines as your eye travels along the spiral. The page after features a popular work by Piet Mondrian, which represents a very pure use of horizontal and vertical lines.

A Fibonacci spiral, which is a close approximation of a golden spiral.

Piet Mondrian, Composition with Large Red Plane, Yellow, Black, Grey and Blue (1921)

Diagonal Lines

Diagonal lines tend to have the appearance of falling. Additionally, diagonals are more dynamic than horizontal or vertical lines, because they are not parallel to any one side of the canvas. These two properties of diagonal lines give them a lot of movement, making them useful in creating many different types of compositions.

Most web pages tend to be void of any strong diagonal compositions. While this is due in part to technical limitations, the largely informational and text-based nature of the web is most likely the reason for this. With developing standards like HTML5 and CSS3 offering new capabilities, particularly the canvas, more daring and dynamic compositions may emerge in the near future.

In the painting on the next page, the ropes coming off the mast of the ill-fated ship form a triangular shape. These strong diagonals lead your eye around the image, making it appear much more dynamic than a ship floating parallel to the horizon. This ship is clearly in motion, violently rocking against the waves of the sea. The most important thing to remember about diagonal lines are evidenced in this painting: they lead the eye, and convey movement.

Théodore Géricault, The Raft of the Medusa (1818)

Curves

Curved lines are generally used to depict energy. A curve looks like it’s “flowing” because our human inclination is to extract order from the world, even if there’s no real order at all. Our eyes follow lines from beginning to end in an attempt to see patterns. This is very similar to the effect that diagonals can have on the viewer; the instability and chaos makes our eyes move around, and this naturally imparts energy into an image. A less dramatic curve will still encourage the viewer to follow the flow of a line, but it will have less energy. This isn’t a bad thing, it’s just a different aesthetic.

Smooth curving lines often evoke the soft curves of the human body, whether the viewer is conscious of this effect or not. More pleasing, less chaotic curves can actually allow you to direct the viewer’s attention towards a particular element, although diagonals are usually better suited for this purpose. The work from Piet Mondrian on the next page predates his more popular imagery that we’ve already looked at. It’s very different from the colorful geometric lines he’s more well-known for, however both pieces of artwork have similar goals. In this piece, Mondrian is attempting to convey the energy of a tree through the use of chaotic curved lines. At the macro level, the dark lines crossing over one another make it difficult to follow any one individual line. At a more granular level, the smaller brush strokes have a similar effect. This tangled mess of curves is visually disruptive, and makes the tree appear as though it’s both expanding and contracting at the same time.

Piet Mondrian, Gray Tree (1911)

It has always been easier for computers to draw straight lines and more difficult to draw curves. While it’s much easier today to make curves on web pages using the canvas, CSS properties like border-radius, or just plain background images, it’s still not always trivial. Boxy, hard-edged block level elements with borders and solid colors define most of the web’s aesthetic. This aesthetic by itself isn’t a bad thing if it’s intentional, but it’s evidence of how people fall into the trap of designing for what the computer makes easy, rather than designing for the user. For better or worse, knowledge of the web’s technical limitations can sometimes inhibit creative thinking.

The medium favors hard 90-degree angles, but that shouldn’t stop us from including diagonals, zig-zags, and squiggly lines in our designs. It may be more challenging technically, but it can be very liberating to use more organic elements and design outside the box. Time and money are certainly real limitations, but creativity is only limited by what we let our minds allow.

Quality of Line

There’s more to line than just direction. You can also vary the thickness and style of a continuous stroke to achieve different visual aesthetics. The CSS border property roughly maps to this idea, so let’s use that as an example.

Solid

Solid lines are as essential as it gets. They should be used sparingly, only for explicit boundaries between two elements.

Dashed

Lines that are dashed or broken are known as implied lines because the viewer is expected to connect the fragments together to form a complete stroke. This is disruptive, which can be good for highlighting very important information.

Dotted

Dotted lines are slightly less disruptive than dashed lines because the rhythm of the fragments is uniform.

Of course, there are many other border styles and you can vary the thickness of a border to achieve different effects. More interestingly, a newer CSS property called border-image allows you to apply images directly to your borders. This means that not only can you break outside of using straight lines, but you can also apply texture to your lines to make them look more rough and organic. For example, it’s now possible to create a flowing stroke from a paint brush and then apply it to an element.

Another quality of line that’s more difficult to achieve is variation in the softness and hardness. From a technical perspective, CSS background-images are usually the only way to achieve this effect, but you might be able to get creative with the box-shadow and border-image properties as well. On the next page is an early work by the American artist Georgia O’Keeffe. Her paintings made wonderful use of line and are an excellent example of variation in line quality. If you follow the boundary between two colors, you’ll notice that some lines appear to be very hard and rigid, while other lines are soft and fuzzy. This subtle play between hard and soft lines is largely what makes O’Keeffe’s paintings so interesting to look at. There are plenty of examples of soft and hard edges on the web, but varying the softness mid-stroke is seen much less often.

Georgia O’Keeffe, Blue and Green Music (1921)