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