Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
A basic understanding of the principles of good design (such as contrast, unity, and balance) is the foundation for creating beautiful websites. In this course, Sue Jenkins explains design aesthetics in simple terms, and shows how to incorporate the principles of design in specific ways that improve your site. Learn how to adjust adjacent colors to add contrast, create depth with texture, incorporate movement, and use repeating shapes, patterns, and borders to unify your design. Then, in the final chapter, learn about special issues designers should address in their web layouts, such as responsive design for mobile devices, accessibility, and originality.
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.
There are currently no FAQs about Design Aesthetics for Web Design.
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.