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 next principle of design we'll explore is balance. In design, balance can happen in several ways including paying special attention to the alignment, distribution, and placement of various shaped colored and sized objects in your layouts. In fact, we can say that balance occurs in a design when the elements as a whole have a feeling of equality of weight, attention or attraction. To illustrate this idea, let me tell you a personal story. I once had a student who showed me a very simple web-design mockup she had been working on that had several objects oddly and not pleasingly scattered willy-nilly in the center of the page somewhat like this.
Well the elements in the rest of her layout look mostly balanced, the objects at the center seemed really unresolved. When I asked her if she had deliberately placed these center objects as they were, or if she had used some kind of logic in considering their placement, she replied, no, I just put them in there. And then she said, why, does it matter? Yes, absolutely it matters, I told her. It matters very much. To achieve balance in a design, one must consider the placement and alignment of every single element in one's layout including text, photos, illustrations, patterns, backgrounds, and other decorative elements.
Often, people think of balance as having two same sized elements placed equidistantly from each other within a defined space. Contrary to popular belief, however, balance does not mean the same thing as symmetry. Rather, symmetry may be a component of balance, but balance can also be asymmetrical with objects in dissimilar size, shape, and color. In fact, what you're trying to achieve with balance is an overall sense of formal harmony.
Conceptually, it may help you to think of balance in terms of physics. For instance, a small shape close to the edge can balance a large shape closer to the center of a composition. Or think of the see saw analogy, two equally sized people on either side of this teeter-totter. That's one kind of balance. But you may also have balance with one large person on one side and two smaller people on the other. And you can have balance with one large and one small person on either side as long as the larger person is closer to the middle.
In terms of web design, the grid system makes it really easy for you to create a balance layout regardless of the actual number of columns there are in any one row. This is because the gutter space between each column is going to be the exactly same width. And that doesn't matter whether you have one 12 column cell or four 3 column cells or some other configuration like one 460 pixel column and two 220 pixel columns. Now this isn't to say that you must strictly follow the grid system to achieve balance in your web layouts.
There are many ways for you to create a balanced layout, especially if you're creative and willing to step out of the box a little bit. For example, you can use a photo along the bottom and place your text along the top or left to right edge. Or you can use a large photo in the background like this, and place your text and other content on top of it. What about your web navigation? Should your navigation link text be evenly spaced or approximately spaced? Should the words be center aligned, left aligned or right aligned on the page? Remember too, that balance also involves even or deliberate measurements in distribution of shapes within your layout.
Think of symmetry and asymmetry. Symmetry helps keep good balance but it's not necessarily the best solution for all designs. Remember also that dark can be balanced with light and a symmetrical balance creates an interesting tension that draws the viewer into your design. You can play several small shapes on one side balanced by one larger shape on another or even place a dark shape next to several light objects. Remember, darker shapes tend to appear heavier than lighter shapes so that, that fact alone will affect the placement of your objects as you strive for balance in your design.
Paying attention to the alignment and distribution of elements can really help your designs achieve balance. Don't feel compelled to fill all the spaces with information, leave some breathing room. Squint and see if the composition looks balanced. If not, keep moving things around or resizing your design's elements until you feel your layout is balanced. (BLANK_AUDIO). (BLANK_AUDIO)
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.