HTML and CSS Reference
In-Depth Information
Problem Solving: Principles of Design
Good Web page design is based on the same common principles found in other areas
of art, which include balance, unity, contrast, rhythm, and emphasis. A pleasing layout
involves the application of most, if not all, of these principles, which are detailed below:
•
Balance
is the distribution of elements. It's common to think of balance in terms of
symmetrical balance
, in which similar objects offset each other like items on a balance
scale; but you often can achieve more interesting layouts through
asymmetrical balance
,
in which one large page object is balanced against two or more smaller objects.
•
Unity
is the ability to combine different design elements into a cohesive whole. This is
accomplished by having different elements share common colors, font styles, and sizes.
One way to achieve unity in a layout is to place different objects close to each other, forc-
ing your viewers' eyes to see these items as belonging to a single unified object.
•
Contrast
consists of the differences among all of the page elements. To create an effec-
tive design, you need to vary the placement, size, color, and general appearance of the
objects in the page so that your viewers' eyes aren't bored by the constant repetition of a
single theme.
•
Rhythm
is the repetition or alternation of a design element in order to provide a sense of
movement, flow, and progress. You can create rhythm by tiling the same image horizon-
tally or vertically across the page, by repeating a series of elements that progressively
increase or decrease in size or spacing, or by using elements with background colors of
the same hue but that gradually vary in saturation or lightness.
•
Emphasis
involves working with the focal point of a design. Readers need a few key
areas to focus on. It's a common design mistake to assign equal emphasis to all page
elements. Without a focal point, there is nothing for your viewers' eyes to latch onto. You
can give a page element emphasis by increasing its size, by giving it a contrasting color,
or by assigning it a prominent position in the page.
We usually have an intuitive sense of what works and what doesn't in page design,
though often we can't say why. These design principles are important because they provide
a context in which to discuss and compare designs. If your page design doesn't feel like it's
working, evaluate it in light of these principles to identify where it might be lacking.
Working with Overfl ow and Clipping
The
aside
element is as long as it is because it must display several upcoming events.
You can set a smaller height using the
height
property, but what would that do to the
content that wouldn't fi t under the reduced size?
When you force an element into a specifi ed height and width, you can defi ne how
browsers should handle content that overfl ows allotted space using the style
CSS3 also includes
the
overflow-x
and
overflow-y
properties
to specify how to handle
overflow content in the
horizontal and vertical
directions, respectively.
overflow:
type
;
where
type
is
visible
(the default),
hidden
,
scroll
, or
auto
. A value of
visible
instructs browsers to increase the height of an element to fi t the overfl ow content, which
is what browsers normally do. The
hidden
value keeps the element at the specifi ed
height and width, but cuts off excess content. The
scroll
value keeps the element at the
specifi ed dimensions, but adds horizontal and vertical scroll bars to allow users to scroll
through the overfl ow. Finally, the
auto
value keeps the element at the specifi ed size,
adding scroll bars only as they are needed. Figure 4-69 shows examples of the effects of
each overfl ow value on content that is too large for its space.
