|
|
Basic Principles of Design
The basic principles of design are true for Web design as well as other
design. They show you how to put together design elements in an effective
manner. Design is more than just slapping HTML tags up onto a page, and
using these principles will help you build more pleasing and useful designs.
- Balance
Balance is the distribution of heavy and light elements on the page. Larger,
darker elements appear heavier in the design than smaller, lighter elements.
The principle of balance shows you how to lay out your pages so that they
work.
- Contrast
When most people think of contrast, they typically think of colors or black
and white. But there is more to contrast than color. You can have
contrasting shapes (square vs.
circle), or contrasting sizes (large vs. small), or contrasting textures
(smooth vs. rough).
- Emphasis
Emphasis is what the eye is drawn to in a design. It's tempting to give
everything equal emphasis or try to emphasize everything in a design, but
this ends up making the design bland and flat. Instead, as a designer you
should determine the hierarchy of the page and then apply the emphasis to
the elements based on that hierarchy.
- Rhythm
Rhythm is also called repetition. Rhythm brings an internal consistency to
your Web designs. Patterns are easy for humans to comprehend, and repetition
provides patterns that make your site easier to comprehend.
- Unity
Unity is also called proximity. It is the principle of keeping like elements
together and diverse elements further apart. Unity pulls elements together.
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:
* symmetrical balance
* asymmetrical balance
* 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.
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:
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.
Asymmetrical Balance:
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.
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.
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.
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.
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.
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.
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 in design is achieved primarily through placement in your layout. But
it can also be achieved through margin and padding changes to the elements.
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.
From Jennifer Kyrnin,
Your Guide to Web Design / HTML.
Contact WingsDove for effective web design solutions,
including
search engine optimization.
|
|
|
|
|
