Differences between revisions 37 and 38
Revision 37 as of 2010-11-30 21:54:44
Size: 4168
Editor: eberkman
Comment:
Revision 38 as of 2010-11-30 22:46:43
Size: 4194
Editor: eberkman
Comment:
Deletions are marked like this. Additions are marked like this.
Line 18: Line 18:
 * The technological requirements and constraints.  * The technological, functional, and business requirements and constraints.

A Revolution Has Begun

Who would have thought a global revolution was about to begin in a small German city called Mainz in the year 1440? It was here a goldsmith by the name of Johannes Gutenberg was the first to invent one of the most important industrial machines of the modern period. Such a device would lead to the Printing Revolution. This device was the printing press. Gutenberg’s invention of the printing press used a process of movable type consisting of individual casted types (letters) arranged in type-cases. These type-cases were inked and used to stamp paper. This process was the birth of modern day typography and mass printing production. It allowed for replication and standardization.

Template

The invention of the letterpress not only allowed for mass production, but it created an opening of common position that was once held by talented scribes. As more people became trained in this practice, a typographic revolution emerged allowing for creative customization of glyph size, font families, styles, kerning, leading, and position.

In addition to individual letter stylization, specified page layouts were produced using standardized templates. Margins, Titles, Headings, and Paragraphs became measurable. Today, templates are ubiquitous. We use templates in word processing, web design, information architecture, and documentation.

Using templates is essential in mobile design. As designers, we want to create our layouts based on cultural norms of reading conventions and how people process information. We also want to create information that is easily accessed, and easy to locate. Our users are not stationary, or focused entirely on the screen. They’re everywhere and they want information quickly and easy to manipulate.

Wrapper

Throughout this book, we discuss these templates as patterns. In this chapter, we are discussing patterns that make up essential parts to the page within an organized layout. A page’s organized layout will be referred to as a “wrapper.” A wrapper is an overlayed template that organizes components of information based on their context of use.

Context is Key

Wrappers that are used in mobile phones will layout information quite differently than a wrapper at kiosk station. When determining which information belongs in the wrapper you must decide on a multitude of things regarding context of use:

  • The technological, functional, and business requirements and constraints.
  • Where the context of use is occurring.
  • The goals of my users.
  • Which tasks are needed to achieve those goals.
  • What types of information must be displayed to achieve that goal or task.

Consider the following design scenario. You are to design the UI for a mobile phone Yearbook application for young adults running on Apple iOS. This application allows students to capture, tag, store, and share images of their school year. Because the application will be free to download, it must contain strategically placed free advertising on the main screen that won’t interfere with user tasks. Users must be able to directly access features such as Pictures, Share, Camera, Notifications, and More on all screens.

So, the technological requirements and constraints that you need to consider are the iOS, the screen size, and touch screen interactions. The context of use is everywhere, both indoors and outside. The application’s experience is both personal and shared. The tasks of the users involves taking pictures, uploading images, tagging photos, adding commenting, sharing, viewing, and editing. Advertisements and fixed menus must be displayed on all screens.

Patterns

Within this wrapper chapter, the following patterns will be discussed: Scroll, Annunciator Row, Notifications, Titles, Revealable Menu, Fixed Menu, Home & Idle Screens, Lock Screen, Interstitial Screen, and Advertising.

Composition (last edited 2013-04-10 23:51:26 by localhost)