Imported Apples: iPad Publication
Imported Apples is a conceptual iPad publication about 3 foreign designers who worked at Apple Computers.
Choose 3 designers
Research the designers, write content, and collect imagery
Design an interactive iPad Publication
Time: 3 weeks
- Week 1: Content & Design Directions
- Week 2: UX & Final Design (all screens)
- Week 3: Prototype
An interactive e-publication experience that communicates the work of 3 designers
Picture of Success
An interactive reading experience
An iPad-focused design
An easy-to-use, functional navigation
"Site" map & flow
To provide a layer in between the table of contents and the main content – and as a way to group all of the designer's sections together, I decided to have a "landing page" for each designer. From this landing page, the user could navigate to any of the designer's sub-sections.
The final section of every designer highlighted some of the designer's most famous designs. The content modal was added as a way to view additional info on these designs.
The main reading screens utilize a horizontal scrolling layout, allowing two-column text layouts to never get cut off by user scrolling.
After exploring various layouts, I arrived at two concepts – vertical scrolling and horizontal scrolling. When using two column text content with a vertical scrolling layout, there was potential for the text body to get cut off, potentially causing confusion.
The final design ensures that text never gets cut off vertically, as the height of the screen will always be the same.
The navigation (when collapsed) consists of a hamburger icon (global navigation), the designer's name (for context), and the subsection of the designer.
When expanded, the user can view all subsections of the current designer and access the reader settings.
Given the site map, the navigational needs were:
- Between designers (Ive, Newson, Esslinger)
- Between sections (Childhood, education, etc.)
- To and from the Table of Contents
- Accessing reader settings (Dark mode)
Thus, the navigation needed to be able to provide robust navigation functionality. However, the main purpose of the app was a publication – not a navigator. So the content needed to remain the focus.
The designer subsection also provides context, but additionally allow a way to navigate to other subsections within that designer as well as access the reader settings (dark mode).
Rich Media Content
To create a experience that goes past reading, additional media are found throughout the main text content such as videos and 3D models.
Since the purpose of the book was to talk about designers and highlight some of their most famous designs, the last thing I wanted to do was create an interface that competed with the content. Because of this, both initial directions were intended to be very open and spacious.
Concept 1: Dark
The first concept was a dark interface that featured large text hierarchy and abstract lines. The abstract lines were a way to break up the grid-like structure of the photo and text content.
The lines wouldn't be completely abstract as they would imitate the shapes of the designer's designs. The colors of these lines would also imitate the colors of the content.
San Fransisco was chosen as the typeface because of its simplicity and versatility. It also seemed appropriate being an publication about designers from Apple Computers.
Concept 2: Light
The second concept had a focus on imagery and utilized overlapping text and images as a way to break the grid.
Setting the headings in a Bodoni-style typeface was a stylistic choice. I felt the elegance and detail contrasted the clean lines of the images and text of the text and interface.
The final style was largely a result of taking the concepts of the 2nd concept and adding the abstract lines from the first. It's simple and image/content focused.
As part of communicating the final design, we were required to make site map posters highlighting the functionality of the interface.
A prototype was created to help communicate the interactivity of the design. The design largely relied on horizontal scrolling – which Invision does not support. Because of this, every screen that was originally intended to be horizontally scrolled had to be broken up into at least 3 parts.
Was the project successful?
By being minimalistic, the interface is very content-focused, which serves well to accomplish the goal of creating a publication that communicates the work of the designers. Also, by utilizing touch screen functionality – in horizontal scrolling and features like 3D rotating media – and taking advantage of the screen size, the design is iPad-focused. By these measures, I'd consider it successful.
1. User testing
While the timeline didn't allow for user testing, some decisions and assumptions could have been better validated by testing with users or creating a prototype.
2. Scroll direction decision
The UX decision of the scroll direction was largely a result of wanting to retain publication-like text formatting (2-column text). If I hadn't chosen this text formatting, the scroll decision might not have been as big of a deal.
There are many details that can influence how a user should experience an app. If a design could go in a number of different directions, constraints provided by user testing and/or user research can help direct the design.
To properly communicate and test the horizontal scrolling, a different prototyping tool would have needed to be chosen.
This project was individually completed, so I acted as the sole UI/UX designer. This included:
- Content planning, structure, and writing
- UX Design
- UI Design