writes on June 8, 2011
Your NameYour EmailRecipient EmailEnter a MessageI read this article and found it very interesting, thought it might be something for you. The article is called Art and the Web: Line and is located at /line-2.CaptchaWe are excited to announce Carsonified’s first book called ‘Art and the Web: Line, Shape & Form’ written by . 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 usu 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)
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 ca 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 lines are as essential as it gets. They should be used sparingly, only for explicit boundaries between two elements.
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 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)
Stay current
Sign up for our newsletter, and we'll send you news and tutorials on web design, coding, business, and more!
Stay current
Sign up for our newsletter, and we'll send you news and tutorials on web design, coding, business, and more!工具类服务
编辑部专用服务
作者专用服务
学科核心素养与“点·线·面”的艺术教学
美术是美育的组成部分之一.美术是一门由内容和技术的发展组成的独立学科,是通过想像力、创造性活动、艺术创作和美学评价来发展个人独特潜能的一种途径;是创造性思维,新构想,新发明,原创性,出人意料的反应,独立性.是一种沟通的方式以及口头交换或非口头交换意见的方法,更是了解当今社会的一种方式;也是了解艺术如何成为社会生活和环境组成部分的一种方式;是人类为自我实现,自我满足所进行的努力,是人一生的生活态度;是鉴赏不同历史和文化的途径;所以,我们是否可以理解或者说:综上,便是美术学科的核心价值.
MU Yungang
DUAN Junqiang
作者单位：
吉林省教育学院,吉林长春,130022
东北师范大学 附属中学 净月实验校区,吉林长春,130117
年，卷(期)：
在线出版日期：
基金项目：
吉林省教育科学规划课题成果
本文读者也读过
相关检索词
万方数据知识服务平台--国家科技支撑计划资助项目（编号：2006BAH03B01）(C)北京万方数据股份有限公司
万方数据电子出版社}