The Fundamentals of Web and Print Layout

Graphic designers often specialize in one genre, either print or web. However, it is important to be familiar with both areas of design. While both genres incorporate elements of typography, images, and navigation, each uses them in different ways.

Print Layout

Printed materials offer a static appearance; the size, fonts, colors, and navigation will look the same for every user. Thus printed materials like magazines, books, and brochures offer greater control over the user’s viewing experience, since they ensure consistently identical results. When designing materials for print, it is necessary to keep several factors in mind:

• All images, along with custom fonts, should be rendered in vector (EPS) format, because this format allows flawless resizing.
• Colors for print materials must be in CMYK, rather than HTML or RGB.
• To create a bleed, which is often used on postcards or other direct mailing materials, the image should be larger than the item it will be printed on.
• Navigation for longer print materials generally takes the form of a table of contents. Unlike web layout, print layout favors linear viewing.
• In the absence of hyperlinks, URL’s must be written out on the page. They can be included in the text body or listed in footnotes.
• Eye movement plays an important role in how users process printed materials. Headlines, photos, and other notable text features are the first items viewed, and afterward the eye moves from left to right across the page.

Web Layout

On the web, elements of layout like page width, colors, and fonts are fluid, because they depend on the settings of each viewer’s web browser. While web layout borrows many principles from print practices, it also has its own limitations and capabilities. Designing layout for the web requires awareness of several web-specific guidelines:

• Most modern web browsers will display colors beyond the “Web safe” color list. However, individual variations in monitor settings mean that colors may not look the same on every screen.
• Custom fonts may not show up exactly as intended, because browsers can be set with automatic font preferences. To ensure the integrity of font appearance, it is necessary to convert these fonts to images.
• Images intended for use on the web must be compressed for easy loading. Images should be used with purpose, since overuse of images will delay loading, decreasing usability.
• Navigation must appear consistent on every page, in addition to internal linking. Web navigation requires extra attention, since users can easily feel lost after several clicks.
• Web viewers generally look at the page in an “F” pattern: they look across the top, down the left side, and then across the middle, before reading.

In addition to the time saved on internal and external tracking, barcodes provide a valuable opportunity to improve operations in ways that translate into significant savings and increased income over time.

Although print and web layout share many layout commonalities, each medium has its own idiosyncrasies. Paying attention to these factors will drastically improve the layout quality of both print and web documents.