With the release of iOS 7, and with more and more app developers catching up, we have watched a market with formerly diverse and refined visual styles become blunt and boring. Everything’s just “white background, Helvetica, thin icons.” It seems like the release of a new platform causes everyone to fall back to the new system defaults at first, curiously exploring the new and exciting SDK, but with the outcome reflecting the same, plain old system style of the platform’s built-in apps.
While we here at Raureif understand the psychology behind this—it’s all about playing safe—it simply wasn’t an option for our own apps. We wanted to find out how to make an iOS 7 app “custom” and unique without relying on the visual techniques that we (and everyone else) had been using up until iOS 6, as well as without violating the core principles of the iOS 7 platform.
Our university students know best that we are platform standards evangelists: We consider it bad craft if designers don’t respect system standards “just because.” So, then, how do we approach custom app design if we do want to rely heavily on system standards, especially if textures and dimensional gradients are a no-go and if materials are absolutely verboten? How might we still create an experience that feels iOS-native and unique at the same time?
In this article, we would like to share with you the key findings from the design process of our latest app, Scantastic.
The first wireframes and explorations for the technical development of Scantastic started in December 2012. While there was clearly a new iOS style on the horizon for the summer WWDC (with Jony at the helm of user interface design), iOS 6 was still the way to go—and we had plenty of experience in crafting custom UIs in our signature Raureif style.
It’s always a tough process for us to arrive at something that everyone in our office finds excellent. When we finally decided on a design concept for Scantastic, we were all pretty happy with it. We incorporated triangles arranged in a circle so that it would feel right when sitting next to our successful Partly Cloudy weather app on the home screen.
We always use custom fonts in our apps. This time, we decided on Brandon Text, which is warmer and friendlier than Helvetica but still geometric enough to harmonize with our triangle concept.
That was in early June. Two days later (no kidding), iOS 7 was announced. We were shocked, excited, and desperate at the same time. It was clear that we had to heavily tweak our concept to make it feel right on that shiny new iOS version. The good thing is, if you have a bold design idea and a typographic concept, it will be robust enough to adapt to new visual trends and fashion. The concept of combining concentric triangles with the Brandon typeface does not rely on decorative textures to look unique.
So with this basic concept in our heads, we hit CMD+N and started over. It took us weeks to learn to resist the urge to add some subtle gradients, shadows, and materials. But once we got the hang of it, designing for iOS 7 was so much faster. There’s just…so much less clutter. Less stuff means fewer layers means faster tweaking means a happy designer.
1. Colorful is good
Try combining two colors! Or even more. At Raureif, we famously are suckers for colors. We like all colors of the rainbow, plus black and white. It does show in our work.
For Scantastic, we were looking for a way to balance the rather boring black and white of the scanned documents with a bold color choice. We believe that our round, colorful scan button and the big pink and blue triangles on the capture screen definitely achieve this.
Of course, using strong highlight colors is not always a good idea: When making a photo- or maps-heavy app, taking it easy on colors is probably the best option. Balancing colors and contrasts is, of course, paramount for any app’s design. For example, we quickly arrived at going with black for Scantastic’s backgrounds to make the mostly white documents pop.
2. 90° angles are boring
It’s easy for us to say, now that we have all these triangles in our latest app…but even if triangles are not the solution to every app design challenge, this still worth exploring: How could you break up that static, rectangular structure just a little bit?
Add a circle. Add an angle that’s not 90°. Add a triangle! Think in terms of classic poster design to make your flat screens look interesting and unconventional.
Round avatar images are a hot trend, and they also stem from this simple idea.
The way zoomed images that are flicked away in Tweetbot 3 are another great example of how to achieve a similar effect—with animation only.
3. Animation is key
It has been said so often in the past few months, but it is so important that we must bring it up—elegant and considerate animations are the new pixel perfect in contemporary UI design: If you don’t know or care about it, it will show.
Still, we believe that too many or too long animations can steal efficiency and frustrate users. Even some of iOS 7’s built-in animations take too long to complete.
Finding a natural way of communicating location and hierarchy change with animation—that should be the goal. And when we’re done with this, adding a little magic with superfluous but nice stuff that does not get in the way can never be wrong.
On Scantastic’s overview screen, the scan button’s gradient animates slowly. In the capture view, that same button rotates gradually on top of the gradient, and when you have set a fixed document size template, our take on the classic marching ants indicates how the scan will be cropped.
Most users won’t notice these subtleties, but they do add that little something: the feeling that one is not just looking at a static screenshot but also at a living interface that invites interaction.
4. Typography is crucial
With the requirement of reducing visual excess, we are left with only type on some screens. If we used Helvetica, these text-only screens would look the same in every other app. In contrast, by having a custom typeface that is as legible (or even more legible) than Helvetica, we can make our app look subtly different without drawing too much unnecessary attention.
If there is no material—no visual debris around your text—typographic mistakes and lack of a trained typographic eye become more obvious. Whitespace—giving the text room to breathe—has become more important than it used to be on the old iOS, where it was normal to cram many elements on visually heavy screens.
Of course, this list is neither exclusive nor complete, but it may help in creating more beautiful and unique apps.