4.2.8 Grid

Layouts based on an underlying grid are more likely to have an overall visual consistency than those without a grid. The grid system outlined here will help you establish hierarchies between graphics, imagery, and type. When applied consistently, the grid will help us achieve a powerful and cohesive print design presence.

Grid Construction

To create the print grid, divide both the vertical and horizontal trim size of your document by 10. This gives you a 10 × 10 grid. All of the layouts in this guide are based on this grid. Occasionally, it is helpful to split the units on the grid in half. This creates more options for the placement of various elements while still aligning with the overall grid.

Unlike print materials that have fixed measurements, digital products will be applied to a variety of devices and screen sizes. To allow for these variations, digital products are created using responsive web design and a fluid 12-column digital grid. This approach allows the same design to apply to both large and small screens.

Mobile First

Digital products should use a mobile-first strategy: designs should be tailored for easy reading, navigation, and access on a handheld device. These designs must:

• Identify the most important content.
• Be mindful of text and image size on small devices.
• Make navigation, links, and buttons easy to manipulate.

Although research shows a large proportion of Church digital product viewers use desktops and laptops, global mobile views continue to increase. By applying a mobile-first strategy, we help ensure a positive user experience now and in the future.

In responsive design, column measurements are determined not by a defined pixel count but by a percentage of the viewing screen. Responsively designed components will determine these measurements automatically.

Small Mobile Devices (Phones)

• Grid: Four columns
• Layout: One column. Use two-column layouts sparingly. Information should not be dense.
• User interaction: Finger touch. Design interaction points for easy manipulation.

Larger Mobile Devices (Tablets)

• Grid: 12 columns
• Layout: One- or two-column layouts in portrait orientation. Up to four columns in landscape. Medium to loose information density.
• User Interaction: Finger touch. Design interaction points for easy manipulation.

Monitors (Laptops, Desktops)

• Grid: 12 columns
• Layout: Accommodates a variety of column layouts. Dense information may be appropriate, but always consider readability.
• User Interaction: Keyboard, mouse, or trackpad allow for smaller interaction points.

Television or Projected Screens

• Grid: 12 columns with a 2-column margin on either side. Do not place content in the margins, even for full-bleed images.
• Layout: Treat as a tablet to accommodate lower resolutions. Loose information density.
• User Interaction: Use large interaction points for simple navigation by game controller, phone, or traditional remote control.