Page Design Guidelines

The following guidelines and recommendations were developed as an aide to maintain a consistent visual and user experience design across all of Zebra's digital properties hosted within AEM. When designing and creating pages, please use the following concepts for general design direction.

Zig-Zag Pattern

Pages have a strong horizontal visual design with a zig-zag pattern to keep the flow of content moving from the left to right from the top of the page down. This layout is intended to make pages easily scannable, facilitate reading of the copy, encourage page scrolling and guide the user to the primary calls-to-action.

The page can be divided into a series of horizontal sections or rows to group closely related content together. Visual elements, including text, should be used to distinguish the sections of content

In general:

  • Pages should not be divided into vertical sections
  • Color blocks, horizontal rules, and/or text should be used to delineate content "rows"
  • Body copy should be left aligned

Reduce Visual Density

The overall design of the page should not be visually dense or heavy to maintain a steady page flow following the zig-zag pattern. There may be dense areas based on the content needs, but content relationships must be maintained and the movement created by the zig-zag pattern should not be disrupted.  Rows of single content elements can be centered to maintain a visual balance and guide the user down the page.  

In general:

  • Copy should be kept to a minimum
  • Keep CTAs to a minimum with a clear hierarchy
  • Adequate vertical and horizontal spacing should be used between elements
  • Create a visual balance

Minimalist Design Approach

The overall look and feel of Zebra's digital properties are based on minimalist design concepts to focus on the content, but does not stricly adhere to that aesthetic. The following are the general principles of minimalist design that are utilized:

Negative Space

  • Areas of white space helps draw the user's eye to a particular area

Simplified Designs

  • Simple lines and color blocks are used to separate content 
  • Design elements such as background textures are rarely used

Limited Color Palette

  • Maintains a simpler design and creates a focal point when color is used

Progressive Enhancement

The majority of users view the from larger (desktop) screens, but pages within AEM are responsive so users can have a similar experience when viewing the site on smaller (mobile or tablet) screens. Progressive enhancement allows for any page to be viewed regardless of the screen or device, and have the same basic experience.

Progressive enhancement places an emphasis on the most basic features and functionality of a page: content and interactions. When designing a page, the smallest screens should be considered first to guide content hierarchy and ensure the minimum functional requirements are met. Once the content and page interactions have been determined, additional features and functionality can be added as the screen size and/or device allows.