Art and the Web: Shape

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 Shape

In general, no element or principle of art is more important or noteworthy than another. A texture is just as important as a color, which is just as important as a line, and so on. However, as the elements and principles relate to the web, shape plays a key role. The web is absolutely brimming with geometric shapes. Similar to line, shapes are great for marking the boundaries of content areas, both small and large. In fact, so many sites make such heavy use of geometric shapes that the web tends to have a "boxy" aesthetic overall.

Paul Klee, Heitere Gebirgslandschaft or 'Joyful Mountain Landscape' (1929) Paul Klee, Heitere Gebirgslandschaft or "Joyful Mountain Landscape" (1929)

Shapes are incredibly useful when designing and discussing web pages in the abstract. It is much easier for us to think about a web page layout in terms of content blocks, or shapes, rather than thinking about granular bits of text and imagery. When a designer builds wireframes or low-fidelity mockups, the designs are made out of shapes. These shapes represent areas of the site where content will reside.

Similar to line, shape may seem so elementary that it’s hardly even worth consideration. However, it’s important that we spend time refreshing and challenging our basic understanding. In essence, shapes are are defined by the contrast between edges, so let’s explore this first.

Contrasting Elements

We start learning about shapes at a very young age, so they should already be very familiar to you. For example, when most people think of shapes, they think of colorful geometric surfaces.

A square, circle, triangle, and pentagon, all filled in with color.

The academic depictions above are definitely shapes. However, they’re very rigid and geometric. As we’ve learned, lines can be straight, but they can also be curvy and organic. As you might expect, organic lines make organic shapes. We can even mix geometric and organic lines together, for additional variety.

Three amorphous shapes created with just line.

The odd thing thing about shapes is that they are defined by contrast. While a line can serve as an edge, an edge doesn’t necessarily have to be a line. For example, an edge might be a contrast between values (the difference between light and dark), colors, textures, or even rhythms (repetition of imagery), without the use of line at all.

A chart containing six examples of triangles, each created with different element and principles of art.

Kazimir Malevich, Suprematist Composition: White on White (1918) Kazimir Malevich, Suprematist Composition: White on White (1918)

Shapes are even more abstract than lines, because they’re really just higher level constructs formed by perceived edges. These edges are created by a contrast between other elements and principles of art. True as that may be, it’s confusing, so let’s come up with a more tangible definition.

Shape is an area of two dimensional space that strongly contrasts with its surroundings.

This definition covers the majority of shapes we’re likely to encounter, but shapes are not always discreet entities. For example, are the illustrations below considered shapes? Perhaps, but the contrast is ambiguous and unclear.

Four examples of shapes that do not contrast well with their surrounding environment.

Charles Demuth, Aucassiu and Nicolette (1921) Charles Demuth, Aucassiu and Nicolette (1921)

Page Layout

Geometric shapes are easy to create on the web using border and background CSS properties. These blocky shapes are fantastic for creating flat areas of color that group content together. Add in some padding and margin, and voilà! Suddenly you have a portion of a webpage that is perceived as a "section" of content in a layout.

At the same time however, a complex layout can suffer from the overuse of shapes. If a page layout has too much content or too many abstract concepts shoved into one page, the designer might feel forced to assault the user with bold shapes. This usually isn’t very functional, and it certainly doesn’t look good. Similar to line, shapes should be used in moderation if we are to avoid visual friction and the "box-within-box" aesthetic.

Two wireframed page layouts. One features too many nested shapes. The second example features a more reserved use of shapes.

Contours

While shapes are mostly defined by a contrast between elements, they’re also defined by their contour, or edge. Thus far, the web has largely been confined to quadrilaterals, which are responsible for the classic "boxy" aesthetic that defines most of the web. Just a few years ago, curvy elements almost always meant slicing up highly customized imagery and adding extra markup. Fortunately, with the latest developments in HTML and CSS, it’s now slightly easier to create a wider variety of shape contours. Broad support for images with fully transparent alpha channels, in addition to the canvas and new border and background CSS properties, allow for our designs to feel a bit more organic.

A greater variety of contours is a wonderful thing, because shape is an incredibly powerful design tool. By varying the contour of a shape, you can easily make a page element stand out. Hypothetically, let’s say that we own a web app, but not many people are clicking the sign up button. Below is an illustration of our current sign up button. It’s a pretty standard looking button, residing inside another shape that separates it from the rest of the page content.

A basic example of a Sign Up button.

Assuming we know with relative certainty that a more prominent button will net more conversions, we have a few options for A/B testing. We might start by trying a variety of different colors.

Three examples of the same sign up button that utilize different colors, in an effort to contrast with their surrounding environment.

One color will likely perform better over the others, but we’re not far from where we started. Next, we might try varying the border thickness, color, and style.

Three examples of the same sign up button that utilize different border styles.

Similar to color, borders can be easily adjusted with CSS, but it can only take us so far. Finally, we can vary the actual contour of the shape. Most page elements have a boxy contour, so this variation will create some unique contrast.

Three examples of the same sign up button that make use of shape to differentiate themselves from their surrounding environment.

Theo van Doesburg, Arithmetic Composition (1930) Theo van Doesburg, Arithmetic Composition (1930)

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

5 comments on “Art and the Web: Shape

  1. Great article. It is written in everyday language, but does not seem like it has been dumbed down.

    Keep them coming Nick!

    When will the full book be available?