With the recent launch of iOS7, designers are scrambling to understand what it means to create in this new “flat-centric” creative world. With over 200 million devices upgraded to iOS7 in just 5 days it’s clear apple’s redesign has real staying power. This release represents Apple’s final design break from skeuomorphism, to a minimalism that simplifies design and pushes the user experience to the forefront. So how do you design for it?
Put your UX thinking cap on
The conversation about iOS7 tends to focus on visual design, what’s really happening is bigger than moving away from glossy buttons: we are moving away from being spoon-fed usability. Since the release of the iPhone in 2007, users have evolved to anticipate user patterns and no longer need the skeumorphic borders and buttons that helped guide them through their first couple of smart phones.
iOS7 design pushes UX to the forefront of design, while simplifying obvious interactions. No longer can bad UX hide behind overly complicated interactions and glossy buttons. It is the responsibility of UX/visual designers to simplify known UX patterns to help users complete tasks faster.
The new flat design style doesn’t mean gradients and drop shadows are a thing of the past. Rather designers are thinking “flatter.” Take the keyboard for example; every letter contained in the keyboard contains a very simple 1pixel lower drop shadow. This separates the letters from the transparency of the background, while giving a tactile feel to the keyboard.
This same flatter design thinking can be seen in messages.
A bright blue gradient behind the primary user’s message visually separates the light grey background of the sender’s message. The gradient serves the alternative purpose by appearing in a darker gradient towards the most recent message, vs. gradually appearing lighter as older messages move towards the top of the screen.
Helvetica, Helvetica, Helvetica
Type is the key to iOS7design, and the reigning king of Apple’s typography kingdom is Helvetica Neue. This doesn’t mean your designs need to be constrained by this sans-serif heavy weight. Rather, choose typefaces with a variety of weights, giving design flexibility to vary type weights to define UX elements.
Some great free sans-serif, non-Helvetica alternatives include:
Source Sans Pro: http://www.fontsquirrel.com/fonts/source-sans-pro
PT Sans: http://www.fontsquirrel.com/fonts/PT-Sans
Serif options: when choosing a serif font keep weights in mind while looking for fonts with a slight retro edge to them.
Roboto Slab: http://www.google.com/fonts/specimen/Roboto+Slab
Serif fonts will differentiate your designs from apples Helvetica overload while still keeping a minimalistic character to your typography.
The movement of Flat design, as a trend tends to rely on on muted retro colors and subtle color differentiators. (http://www.webdesignerdepot.com/2013/09/the-ultimate-guide-to-flat-design/). iOS7 took a bolder approach to color. The new bold neon color palette differentiates design from the muted colors created with the new blurry transparency effect.
Consider a broad palette and test your hues across a spectrum to be sure they behave in lighter and darker versions. Ensure you have enough range for both subtle and high contrast elements. Be brave, try pairing colors like neon yellow, green and red might sound crazy but place them into a simple flat icon on a users dashboard and watch how they interact with it.
Build Depth By Using Layers
One of the new tools apple has given designers is a new way to create depth of field in iOS7. For a UX example take a look at safari– when shifting through tabs you now have multiple levels of layers to help users switch tabs or close windows.
This layering effect also includes transparency.
If you open menus from the bottom of your device you can see through it. The colors blur to create a shallow depth of field, but you can see through it. Consider how to incorporate these effects into your app design. If your looking for a way to recreate this effect in Photoshop – a 10pixel Gaussian blur seems to do the trick, but play with exaggerating this effect , or decreasing transparency to increase the feel of depth.
Design without borders
The new iOS7 styling means there are no longer black bars breaking the top of your design to tell you what time it is. Rather photos now go full frame – opening the ux and design for a seamless mobile experience. What has replaced the original iOS6 grid base is white space, meaning, for example, there are no longer borders around buttons rather “hit areas” for users are defined by plain text and simple arrows.
The lack of lines throughout the design creates more visual space harsh outlines on buttons to define “hit space.” This adds to the overall minimalist clean and simple design aesthetic that defines iOS7. In the calendar app, gone are the harsh gradients and tight typography. Instead the design flows right to the edge of the screen, giving visual space for users to move though the app.
See what you’re doing – design on your device
Whether you’re designing for mobile or tablet it’s important to see the proportions of the design in context. Especially with the new iOS7 simplistic & flat style, it’s never been more important to be particular about the kinds of design decisions you make.
The primary thing to keep in mind when designing for a device, no matter what tool you choose to create in, are the proportions of your design in context to the device. Enter LiveView for iPhone & iPad http://zambetti.com/projects/liveview/ – and https://itunes.apple.com/us/app/liveview/id301069270?mt=8
Live view is a free app that lets you see your canvas in real time on your iOS device. It will help put your design in context as your working.
I also found resoures like http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/ incredibly useful for everything from resolution & display specifics to free links to GUI’s and starter guides.
Icons have changed
Designing your app icon is as important as the app itself. The old simple radii values for rounded corners are gone. Apple introduced a new shape, which got named “superellipse” by Michael Flarup. The new shape has a slightly rounded edge and focuses on symmetry in design. One of the best templates I have found to create icons is http://appicontemplate.com/ios7
There are no hard and fast rules in design. Just like fashion, design trends change. What’s out today will make a come back 10 years from now. With that in mind, creating clean and simple interfaces is never out of style. In our overly connected, information at your fingertips world; minimal design’s resurgence is a refreshing visual approach that when applied thoughtfully can make digital experience highly usable and enjoyable.
Already have an app, and looking to refresh it using our talented design expertise? Check out Have you updated your app for iOS7, by Matt Crist.