Web Layout Design: The Structure of Web Pages

General Layout Assessment

General Layout
Assessment
 Typography and Color

• Avoid the over use of colored text (especially red text). Typically dark grey color is best, except where you need to bring attention to a “small”
section of copy, for which the color should compliment the design.
• Avoid the over use of capitalization, underlining, and bolding. Capitalization is viewed as shouting on the Web so should only be used in rare
instances, and while underlining or bolding a few words can be effective, much more than this just doesn’t work well.
• Ensure that the text copy color is easily read by providing enough visual contrast. For dark backgrounds use a white color value, and for light
colored backgrounds ensure that the text color is dark.
• And finally, ensure that the line height and vertical spacing between content blocks is ample enough that the copy avoids the “cramped” feel; this
also helps with readability.
Color for the Web

• Analogous colors are any three

colors which are side by side on
a 12 part color wheel, such as
yellow-green, yellow, and
yellow-orange. Usually one of
the three colors predominates
and the others are used as accent
colors.

• Complementary colors are any

two colors which are directly
opposite each other, such as red
and green, and blue and orange.
Opposing colors create
maximum contrast and a feeling
of stability.
Web-safe Colors
Website Layouts: Single Column Layout
Website Layouts: Content Focused Layout
Website Layouts: Magazine Layout
Website Layouts: Full-Screen Layout
Website Layouts:  Alternating Layout
Website Layouts:  Card-Based Layouts
Website Layouts:  Grid Breaking Layout