iOS 7 Design Case Study
Adapting designs from iOS 6 to iOS 7
When iOS 7 was announced, we were in the middle of creating a new app (in conjunction with our talented partners at Two Toasters) for iPhone and iPad and refining our brand and visual strategy. With the announcement, we saw a unique opportunity to accelerate our visual updates which echoed the best themes of iOS 7. Keeping the themes of deference, clarity, and depth in mind we went back to the drawing board and let those themes guide the design and UI of the user experience.
Aesthetically, the iOS 6 version of the Luvocracy app was already pretty flat with a lot of simple usable elements that were brand-centric, yet satisfied many of the iOS 7 themes. We were mindful to keep those important elements, while adjusting and sometimes altogether changing certain aspects of the app to better align with iOS 7 best practices. In this post, we’ll take a look at the changes that we made.
“Good Design is as little design as possible—
Less, but better – because it concentrates on the essential aspects, and the products are not burdened with non-essentials.
Back to purity, back to simplicity.”
— Dieter Rams
Quick Action Cards
Following a custom card layout that’s brand centric to Luvocracy, we implemented a 1 horizontal and 2 vertical pattern for all product cards. We also implemented quick actions for each product card making it easy for users to Luv, Follow, and Share items. The use of quick actions lets users focus on the content, rather than being bogged down by extra UI.
Indented Table Style
For the iOS 7 version we reconsidered how we utilized insets and visual frames. By embracing the use of a 15 pt indention we are able to let more of the content reach to the edges, thus utilizing more available screen space than was seen in iOS 6.
“Good Design makes a product understandable — It clarifies the product’s structure. Better still, it can make the product clearly express its function by making use of the user’s intuition. At best, it is self-explanatory.”
—Dieter Rams
Key Colors
As seen in iOS 7, the use of a key color helps guide users through the experience without cluttering the interface or distracting from content. As part of our visual, we moved our palette from warm tones and textures with a teal highlight color to a flat, neutral palette of whites + grays with a primary accent of red. The use of red as our new highlight color not only strengthens our brand, it makes it globally recognized it as an actionable color for the app.
Thinner, Lighter Weight Icons and Font
To keep the focus on the content we reduced the weight of our icons to produce a thinner, lighter weight appearance overall. As part of our brand refinements, we also decided to move away from our use of two fonts (Proxima Nova and Arvo) to a single type, Gotham, which also simplifies the design. We were thrilled that Hoefler and Frere-Jones launched Cloud Typography, making this font not only accessible on the web, but also optimizing it for crisp, beautiful rendering at any type size.
and iOS 7 (right)
Elimination of Textures and Heavy Elements
While textures are used heavily in numerous iOS 6 apps, iOS 7 accomplishes clarity by removing texture throughout. In iOS 7 the textured backgrounds are replaced by a solid or blurred background. We also got rid of any gradients or drop shadows that distract from the content.
and iOS 6 (right)
“Good design is aesthetic —
The aesthetic quality of a product is integral to its usefulness because products are used every day and have an effect on people and their well-being. Only well-executed objects can be beautiful.”
—Dieter Rams
New Navigation Paradigm
The sidebar is a common UI paradigm used by app developers everywhere. Though, without a clear example on how to execute on that on iOS 7, we decided to re-imagine it in the spirit of the platform. In doing so, we abstracted, prototyped, and then iterated on a production version of a concept floating around in the design community.
Rather than relying on shadowing, we decided to layer up the sidebar and app views using blurring. The entire sidebar view sits on top of a highly blurred background image that the user sets as part of their profile. This brings a degree of customization and familiarity in the app experience by mimicking the iOS home screen and new control center. Moreover, the main views from which the user is accessing the sidebar shrink down in a fluid, springy animation reminiscent of the new app switcher rather than just transitioning to the right.
In iOS 7, developers are encouraged to use the whole screen and not rely on the status bar to be outside of the context of the app. This breaks the existing sidebar implementations in that the status bar now lives over both the side menu and the main view with a single visual style. To remedy the problem we created side menu navigation where the viewport focusing on the main content view zooms out and away revealing the menu — instead of simply sliding to the left (or right) as seen in many pre-iOS 7 apps including Path and Facebook. Below is the video of the side menu in action.
To learn more about how the sidebar navigation works, check out the technical blog post and side menu library authored by the Two Toasters’ Senior iOS Developers.
Blurring and Layers
In iOS 6 much of the depth was accomplished using heavy gradients and drop shadowing. Alternatively, to achieve depth in iOS 7 we relied on the use of layers and blurring as seen in the navigation bar and the background of the list view.
Additional Images
Wanna see more of the redesign? See the side-by-side comparison of iOS 6 and iOS 7 screenshots below or download the app in the App Store.
