The student will gain a better understanding of The Element of Design called Shape, and explore how repeating shapes can help to unify elements in a web design.
- [Presenter] The fourth of the eight elements of design is shape. Like the other elements, shape is an integral part of any design, and when used effectively, can 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 curve or linear 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 the 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 help 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.
- Understanding aesthetics
- Picking harmonious colors
- Structuring your layout
- Using space to organize your design
- Communicating with the right fonts
- Aligning objects to achieve balance
- Adding movement with scrolling and animation
- Achieving proportion by scaling objects and text
- Creating CSS for different devices