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