The Page is the area that you will spend your time designing for any application or website. A part of it is visble in the viewport of the mobile screen during its current state. And there are states and modes and versions to be considered, as well as addressing what is fixed to the page, what can float, and what is locked to the viewport.

Based on cultural norms of reading conventions and how people process information, you have to design elements for the page, and and lay items out on it in ways your users will understand. You also want to create information that is easily accessed, and easy to locate. Your users are not stationary, or focused entirely on the screen. They’re everywhere and they want information quickly and easy to manipulate.

Unlike later sections, which cover broader topics, the Page patterns that will be discussed here are contained in only a single chapter:

Helpful Knowledge for this Section

Before you dive right into the patterns, we will be providing you some extra knowledge in the section introductions. This extra knowledge is in multi-disciplinary areas of human factors, engineering, psychology, art, or whatever else we feel relevant.

For this particular section, we will provide background knowledge for you in the following areas:

We have also included suggested further readings at the end of the Page Wrap Up section. These include reading the Introduction to Mobile Typography section found in the appendix which details characteristics of typography as well as mobile readability and legibility guidelines.

Digital Display Page Layout Principles

Developing a common grid and hierarchy of information for the entire application or site is key to a consistently usable and consistently-branded experience. After the grid like this is created, and wrapper elements are defined, a series of templates can be created, then individual pages and states.

Composition of a page is about the assembly of components, concepts, content and other elements to build up the final design. As we already know, consistency is important, so these are not placed arbitrarily on the page, or even just as the one page dictates, but on rules across the system, or even the whole OS.

At the highest level is the "grid." This is a regularized series of guides, defining the spacing and alignment of the main elements on the page. Some rules are inviolable, such as margins and some are specifically designed to offer options for special page layouts, or unexpected future changes.

From these are developed a series of templates, from which each page in the application, site or other process will be designed and built. This all encourages a consistent user and brand experience that supports content organization and layout, advertising requirements, navigation, and message display characteristics such as legibility and readability.

Patterns within the Composition chapter like Fixed Menu and Revealable Menu, Notifications, and Titles are repeated at the same place on each and every page, so reside in each template. A subsidiary concept is that of the "wrapper," which defines these common components -- and others, such as scrollbars -- so they are consistently designed and built for each and every page template.

Mobile users have specific tasks and goals. They require the information to be quickly located and effectively organized. Therefore, the page layouts need to reflect the mental models and schemas understood by the users. If these are ignored, users will become frustrated, unsatisfied with their experience, create miscues and errors, and might even give up!

Furthermore, using page layouts wisely, allows you to organize and place content effectively on valuable screen real estate where every pixel is important.

Page Layout Guidelines for Mobile Users

If you don’t follow the principles of a grid and templates, you will end up applying components in overly variable ways. Here, the title is far below the tab, separated by the banner ad. On the search page, there is a search dialogue above the title, pushing it down further. On the home page the addition of the “more” icon makes it not clear if “Top Stories” is the page title, section title or something else. And in settings, the new style of banner draws the eye so it seems, for a moment, that this is the title.

Getting Started

You now have a general understanding that a page is an area that occupies the viewport of a mobile display. Pages can use a wrapper template to organize information consistently across the OS that will allow for satisfying user experience. When making design decisions, everything in this page section must be considered, even if you don't have control (not building an OS). You must know what it might do to your design. Consider your user’s goals and cognitive abilities, page layout guidelines, and the importance of legibility and readability in message displays.

The following Composition chapter in this part will provide specific information on theory, tactics, and illustrate examples of appropriate design patterns. And always remember to read the anti-patterns, to make sure you don't misuse or over-use a pattern.