Art and the Web: Line

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.

Cover artwork for the book 'Art and the Web: Line, Shape, & Form'

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)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)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)"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.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)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)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)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.

A solid line.

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.

A dashed line.

Dotted

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

A dotted line.

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.

A painterly brush stroke.

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)Georgia O’Keeffe, Blue and Green Music (1921)

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from HTML, CSS or WordPress.

Start Learning

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

52 comments on “Art and the Web: Line

  1. This is a great first chapter, I’m really looking forward to the rest.

  2. Well done Nick! Great read. Its great to always have these techniques in the back of your mind when your looking at art and design. Also, its good to remember where present day techniques and theory come from.

    “It’s always good to remember where you come from and celebrate it. To remember where you come from is part of where you’re going.” – Anthony Burgess

    • Thanks for the kind words! I totally agree; I’m always looking at things and imagery in the world, wondering why they look a certain way and not some other way. Art history usually plays a key role.

  3. Great way to introduce the web design as a form of art. Digital media is the art of information throught visual design. Web is a modern canvas, a digital one, and is up to us, designers and developers to make it a great place to experience. 

    Great first part, looking foward the next chapters. Congrats Nick!

  4. Great to read a blog post on this subject that is well researched and written, rather than a mis-informed skim. I’m interested though, are you going to directly apply these principles to web design examples or case studies?

    • The upcoming chapter on shape includes some really great illustrations that help relate the concept a bit more directly to web design. I think you’ll like it. :)

  5. Holy crap Nick, that’s incredible! Stoked that Carsonified are right behind you and supporting this book, amazing that it’s to be given away free.. Well done, best of luck.

  6. Congrats your New Book! It looks Nice~ I will read this book Soon~ 
    새 책이 나와서 축하드려요~ 멋저보이는 책이네요~ 조만간 읽어보고 싶어요 

  7. Very interesting, esp. the part about the “Golden Ratio”.  I guess this means art majors are supposed to take math classes :-( 

  8. Hey Nick,

    It remains me of  the book & the groundbreaking TV Documentary of John Berger: “Ways of Seeing”.
    Think! What you see is not always what you see!

    Yvan Vande Velde

  9. This takes me back to my uni days, but it’s always good to take a step back and remember the grounding principles that all design should be formed from. Can’t believe you’re giving something this good this away for free!! :)

  10. “…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 author forgets to mention here that the time for design and creativity means more money for a project, and sometimes the client doesn’t have the money or doesn’t want to spend the money required for design and creativity.

  11. Woops, my bad … the author does mention time and money. This is obviously a well thought out article and deserved a more well thought out comment. Time and money is very important. Design and creativity takes time. Sometimes the client does not have time. For whatever reason. And operates on a shoestring budget. For whatever reason.

  12. This is great Nick, I truly feel most people cant see web designing / developing as an art. This book will differently explain that all the principle used to paint and draw are also required in web developing! Keep Rocking It!! 

     Ray Ureña

  13. This is fantastic Nick. It is refreshing to see someone looking a web design in the wider context of art. I really look forward to the book being available. Please carry on sharing some of it with us as you go. Thanks, Andrew

  14. Great Article Nick. Though provoking and I think these kind of articles are a must for a guy starting fresh or even seasoned guys who are in this business. Somewhere while working, we forget the basics of design theory and try to implement our own view whereas clients may need something different. If we stick to the points you have raised I am sure they will help in promoting a healthy design habit. This article is kind of ABC of graphic design and when clubbed together intelligently will lead to great Website or other graphic designs.

    Keep it up :)

    • Thanks for the kind words, Jay! It’s encouraging that the fundamentals are appealing to both beginners and seasoned professionals. The web design community is filled with so many intelligent, nice people. :)

  15. Izzat really your mom? How nice :)

    Great article. As an artist (traditional – drawing and painting) and relatively new web designer, I really appreciate this. There’s so much we can learn by studying art history and the basics of line, composition, balance and contrast etc. I’m looking forward to the next segment.

  16. Izzat really your mom? How nice :)

    Great article. As an artist (traditional – drawing and painting) and
    relatively new web designer, I really appreciate this. There’s so much
    we can learn by studying art history and the basics of line,
    composition, balance and contrast etc. I’m looking forward to the next
    segment and my future in web design.

  17. I wish more designers would start taking these things seriously and not treat a division by 1.6 as a complex, challenging mathematical problem. I’ll make sure to spread the word, great read. 

  18. Thanks for your marvelous work! I’m really looking forward to your next work. However, I have a tiny problem: where is the last painting in it —— an early work by the American artist Georgia O’Keeffe.

    • You are absolutely right, I can’t believe this hasn’t been brought up yet! I’ve edited the post and added the image back in. Thank you so much for pointing that out. :)

  19. Very nice, Nick!  Are you, by any chance, an Edward Tufte fan?  I’m sure I’m going to be grateful for this book in any case, but anything that builds on Tufte is on my A list. ;-)  This first chapter reminds me of him.