The Rand App

Concept

paulrand.design Website

My approach to the project was to create a mobile app that acted as a funnel to the paulrand.design website. On that site, we find a comprehensive archive of Rand’s life, work, and writings. For the purposes of this project, I designated this website as the “official” website for Paul Rand, which it is not.

In a bid to attract new audiences to Rand's work, a “mobile-first approach” made sense because, according to Pew Research, “Americans of all ages are increasingly likely to say they mostly go online using their smartphone" (2019, 1). Additionally, the younger a person is, the more likely it is that the smartphone will be their primary access point for the internet.

Considering these facts, this prototype aims to create an appealing, introductory experience for people unfamiliar with Rand's work and acts as a funnel to a more complex experience on the web. In doing so, the app prototype favors quick engagement and curiosity, while still creating some sense of depth through the implementation of case studies that cover all of Rand’s major design areas — advertisements, book and magazine covers, and logo design.

Design Approach

The design of the app was based on Paul Rand's belief that beauty and usefulness were mutually generative. The app aimed for beauty based on an homage to some of his stylistic techniques, many of them articulated in Rand's book Thoughts on Design (1947). The app aimed for utility based on the simplicity inherent in Steve Krug’s approach to web and mobile usability. In the next two sections, I will explain these approaches.

The Beautiful

Paul Rand was enamored with the modern art and design movements that emanated from Europe in the late 19th and early 20th centuries. And he was seen as one of the first graphic designers to popularize a modern style in an American context. Even so, his style never fit neatly into theories of European modern design. At its most constrictive, a modern design philosophy eschewed “personal expression and eccentric solutions were rejected, while a more universal and scientific approach to design problem solving was embraced” (Meggs & Purvis, 2012, 372).

Rand's design philosophy balanced a tension between the geometry of European graphic modernism and human playfulness; or, as Philip B. Meggs put it, the use of “sensual visual contrasts" (2012, 391). Overall, as Ned Drew and Paul Sternberge identify, Rand’s style might often be described as “informal playfulness" (2005, 63).

The design for the Rand app embodies this tension between a stricter European modernism and Rand's creatively playful interpretation. For instance, I worked within many guidelines of modernist graphic design, which included the use of grids, geometric abstraction, sans-serif typefaces, et cetera. In many ways, the “clarity and order” of modern design shouldn’t be difficult to approximate since most contemporary app design is grid-based and works with geometric shapes to create the condition for responsive designs.
‍

Onboarding GIF

You can see how I incorporated Rand's often whimsical, hand drawn style in the introductory onboarding process for the app (see Onboarding GIF). I did this through an homage to common Rand techniques—the whimsical placement of organic geometric shapes and undulating arrows as part of collages. These collages offer the “in-process” feel that trouble the otherwise orderly nature of the app. Rand often favored the way collages created active moments of synthesis and meaning-making for an audience (2014, 48).

I employed a modernist design tendency to use sans-serif fonts for their machine-like appearance. I used fonts from two sans-serif font families in this app—Futura and Inter. Futura Bold was used for titles and nav bars because, as Paul Rand says, Futura is “unique” and not recommended for large portions of text (Rampone, 1989, 1).
‍
Bright, vibrant colors were used to pique attention and  “pop” against the black and white organization of the rest of the app. These colors were not chosen at random; rather, they were drawn from the color palettes of the 4 case studies:

Rand App Color Styles

Further discussion of font and color usage will appear in the next section. Through the application of modern principles and an aesthetic that pays homage to Paul Rand, I created something beautiful within the context of his work. 

The Useful

Rand Case Studies

While Rand believed that design should be beautiful, he also thought that it needed to be in the “service of communication" (2014, 9). The prompt for this project asked students to not only explain their design decisions in light of Paul Rand’s thoughts on design, but also by the “rules of thumb” for good web and mobile design that Steve Krug laid out in Don’t Make Me Think, Revisited (2014). Krug's work is a great introduction to concepts that live under the umbrella of information architecture and interaction design.

The Rand app was designed to be usable in, as Krug would say, self-evident rather than self-explanatory ways. I designed the prototype for an iPhone X viewport (375 x 812), followed basic UI design principles, and worked with suggestions from the then current iOS Human Interface Guidelines.

Rand is made easily usable through (1) general conventions I followed and (2) the general organization strategies for accommodating findability and shaping user flow.

The general UI conventions I followed include:

• For consistency and usability, all tappable controls are larger than 44pt x 44pt. 
  
• I generally maintained 16pt gutters at the edge of the viewport; however, some images do go edge-to-edge for the aesthetic effect. 
  
• I used a font size hierarchy consistent with iOS recommendations and Krug’s views on information hierarchy (2014, 33-36).
  
• I used a line height of 24 in the body to help with readability on small screens. This was based on my observation of body text practices on such apps as Wikipedia, Reuters, and ESPN. As Krug says, conventions can be your friend (2014, 29-30).
  

Case Studies organized by hierarchy & color

The app was organized around the following concepts:

• Two main sections — an introductory section comprised of 7 screens that introduce readers to Paul Rand and 4 case studies that dive more deeply into specific works.
  
• A clear nav bar and local action bars are implemented to create a consistency of experience across all pages.
  
• This app introduces a flexible navigation strategy that includes the ability to tap buttons and drag (i.e., swipe) left and right on a screen. While drag functions are popular on mobile apps today, I still included tap functions on buttons in the nav bar, introductory progress bar, and action bars for those unfamiliar with drag. This creates two separate ways to navigate through the app without adding confusion.
  
• Considering the limited screen real estate on mobile, the goal was to design the introduction to not overwhelm to the audience. This is done by not allowing scrolling below the break in this section and the implementation of a progress bar nav to show users how many screens are left. Additionally, the progress bar affords the audience some agency by allowing them to either freely flow from one page to the next or jump around as they see fit.
  
• While the introduction was designed for people unsure about their curiosity level for Paul Rand, the case studies allowed for more engagement at depth. For instance, while full paragraphs and scrolling are implemented on case study pages, bullet points are used in the introduction. The introduction was, as Krug says, designed to be scanned and not read.
  
• Limited image galleries in the introduction are offered on pages 1, 3, 4, and 5 to entice more engagement with Paul Rand. These image galleries are simple to dip in-and-out of and don’t stress the cognitive demands of the audience (Krug, 2014, 15).
  
• Color was used as a visual organzing agent. The app was designed around a backbone of black (#000000) and white (#FFFFFF). I understand the logic behind not using pure black or white because of eye strain. However, pure black and white felt right in this particular app. Other colors discussed above were used to organize each case study and used elsewhere in the prototype to create a visually cohesive experience.
  
• I gave extra information in the intro to make people using the prototype more comfortable. This includes information on how to interact with the prototype and what to expect from the experience. This “over explanation" flies in the face of Krug's ideas of designing for self-evidence. Nevertheless, I think mobile app prototypes can be difficult to use, especially when viewed in an odd context (i.e., on a computer screen rather than in your hand). Furthermore, the affordances for a computer screen are different than the haptic surfaces of phones. Thus, I cannot assume that everything about a prototype is “self evident."
  

Through the application of Krug’s “rules of thumb” for mobile usability, I created something that is useful without compromising the beauty of Rand’s work.