Principles of Design
What is Balance in Design:
Balance in design is the distribution of elements across the design. Balance is a visual interpretation of gravity in the design. Large, dense elements appear to be heavier while smaller elements appear to be lighter. You can balance designs in three ways:
discordant or off-balance
Use of Balance in Design:
Balance in Web design is found in the layout. The position of elements on the page determines how balanced the page appears. One big challenge with achieving visual balance in Web design is the fold. You may design a layout that is perfectly balanced in the initial view, but when the reader scrolls the page, it can come out of balance.
How to Include Balance in Web Designs:
The most common way to incorporate balance into Web designs is in the layout. But you can also use the float style property to position elements and balance them across the page. A very common way to balance a layout symmetrically is to center the text or other elements on the page.
Most Web pages are built on a grid system, and this creates a form of balance for the page right away. Customers can see the grid, even if there aren't any visible lines. And Web pages are well suited to grid designs because of the square nature of Web shapes.
Symmetrical balance is achieved by placing elements in a very even fashion in the design. If you have a large, heavy element on the right side, you'll have a matching heavy element on the left. Centering is the easiest way to get a symmetrically balanced page. But be careful, as it can be difficult to create a centered design that doesn't look flat or boring. If you want a symmetrically balanced design, it's better to create the balance with different elements - such as an image on the left and a large block of heavier text to the right of it.
Asymmetrically balanced pages can be more challenging to design - as they don't have elements matched across the centerline of the design. For example, you might have a large element placed very close to the centerline of the design. To balance it asymmetrically, you might have a small element farther away from the centerline. If you think of your design as being on a teeter-totter or seesaw, a lighter element can balance a heavier one by being further away from the center of gravity. You can also use color or texture to balance an asymmetrical design.
Discordant or Off-Balance:
Sometimes the purpose of the design makes an off-balance or discordant design work well. Designs that are off-balance suggest motion and action. They make people uncomfortable or uneasy. If the content of your design is also intended to be uncomfortable or make people think, a discordantly balanced design can work well.
What is Contrast in Design:
Contrast in design is an accentuation of the differences between elements in a design. Most people think of contrast only as it applies to colors, but contrast can work with any design element. For example, if you have a group of lines that are all the same size, there is no contrast. But if one is a lot longer than the others, it contrasts with them.
Use of Contrast in Design:
When applying contrast to Web designs, think beyond color. Color contrast can easily be overdone. But by using more subtle differences in contrastin font sizes, layout shapes, images, and text styles (like lists versus long blocks of prose) you can take advantage of contrast without blasting your readers with a loud contrasting color scheme.
How to Include Contrast in Web Designs:
Contrast in Web design can be implemented in many ways:
Change the fonts. The font size, font weight, or font family can all provide contrast to your text. Headlines provide a lot of contrast to surrounding text.
Links provide great contrast in text. The color change and the addition of an underline work well to contrast from the surrounding text.
Use different sized images and elements. If you have a section of text that is the primary focus of a page, you might make it large and all the surrounding elements and images small.
Use contrasting colors or change the darkness and lightness of your colors.
What is Emphasis in Design:
Emphasis in design provides the focal point for the piece. It is a way of making the element that is most important stand out in the design. Emphasis is sometimes called dominance.
Use of Emphasis in Design:
One of the biggest mistakes designers can make is trying to make everything in the design stand out. When everything has equal emphasis at best it can make the piece appear busy, and at worst the design will be boring and unappealing.
Instead, focus on creating a visual hierarchy in your designs. If you've worked to create a semantic flow to your HTML markup, that will be easier. Because your Web page will already have a hierarchy, all your design needs to do is put the emphasis on the correct elements - such as the H1 element for the most emphasis and so on.
How to Include Emphasis in Web Designs:
Emphasis in Web design can be implemented in many ways:
Using semantic markup will provide some emphasis, even without any styles.
Change the size of fonts or images to emphasize or de-emphasize them in the design.
Using contrasting colors can provide emphasis.
What is Rhythm in Design:
Rhythm in design is also called repetition. Rhythm allows your designs to develop an internal consistency that makes it easier for your customers to understand. Once the brain recognizes the pattern in the rhythm it can relax and understand the whole design. Repetition rarely occurs on its own and so it embues a sense of order onto the design. And because of this, repetition attracts attention and prompts customers to investigate further.
Use of Rhythm in Design:
Nearly anything in a Web design can be repeated to create a rhythm to your designs. You can repeat a headline multiple times for emphasis, repeat an image across the top of your design, create a patterned background with repetitive elements, or repeat a style throughout the pages of your site to provide consistency.
How to Include Rhythm in Web Designs:
Rhythm in Web design can be implemented in many ways:
Repeat the actual text in your HTML.
Add images mulitple times.
Use the background-repeat property to repeat a background image horizontally or vertically.
Repeat the navigation elements of your design across the pages of your site.
What is Unity in Design:
Unity in design is also called proximity. Unity provides cohesiveness to your designs. It is what pulls the elements together. Elements that are positioned close to one another are related while elements that are farther apart are less related.
Unity looks at how close or far apart various elements on the page are to one another. The closer two elements are, the stronger the relationship is between the two elements.
Using the design principle of unity, you can assign your content into logical groups that make it easier for your readers to navigate through your designs.
Use of Unity in Design:
Unity in design is achieved primarily through placement in your layout. But it can also be achieved through margin and padding changes to the elements.
Another way to use unity in web design is to separate your text into groups using headlines. The headline adds some visual contrast, and by grouping it with the text below it, it is clearly related to that content.
How to Include Unity in Web Designs:
Unity in Web design can be implemented in many ways:
Adjust the layout of elements to place them close or far away.
Change the spacing around text.
Play with the box properties to affect margins and padding.