Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The fourth of the eight elements of design is shape, like the other elements shape is the integral part of any design and when used effectively can help set the tone of your web graphics. What's more, repeating shapes within a design can often help unify all of the elements in a single layout. Let's start our discussion about shape by defining exactly what it is. For our purposes, shape is defined as any flat area bound by line, or outline, value or color.
Shapes are usually self contained defined areas, for instance, they can be geometric shapes like squares, circles, triangles, polygons, and stars, as well as curvilinear organic shapes that come from or resemble the natural world like blobs and swirls, leaves, amoebas, even frogs. Shapes can be positive and negative, like a star or a star cutout. Positive is when the shape occupies space, like the star on the left.
And negative space is the area around or in between positive shapes, as with the cutout of the star shape inside the positive circle shape on the right. In terms of web design, positive shapes can be things like buttons and navigation bars while negative shapes are often created in the space between two or more forms. Shapes can be used to carve up space, or organize, and to define different areas. Here's another example. Consider the positive and negative shapes of your backgrounds, decorative borders, and edge effects.
Another fantastic way to use shape in web design is with repetition. When you repeat similar shapes, it really helps create this sense of harmony, or unity in your designs. So you can use repeating shapes for your navigation, as decorative embellishment, and for the organization of the various elements within your design. It could be like a series of thumbnails for news items or images, or any set of buttons, banners, or widgets. Here, for example, I've got a few different examples of navigation bars and how you might space those repeating shapes evenly.
There's some buttons. Some little ribbon effects. And border effects, which can really hep create a sense of unity within your design. Shapes can be any flat area bound by line, outline value, or color. Shapes can be positive or negative. They can be geometric or organic. And in web design you can use your shapes effectively in pretty much every element of your layout. Repeating shapes too, can give an added sense of unity and cohesion to your designs.
Get unlimited access to all courses for just $25/month.Become a member
120 Video lessons · 58256 Viewers
119 Video lessons · 67554 Viewers
84 Video lessons · 16847 Viewers
125 Video lessons · 29743 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.