-->
Designing for iOS7
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 its clear apple’s redesign has real staying power. This release represents Apple’s the final design
break from skeuomorphism, to 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 2000, 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
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.
Think Flat
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 tackle feel to the keyboard.
This same flatter design thinking
can be seen in messages.
A bright blue gradient behind the primary
users message visually separates the light grey background of the sender’s
message. The gradient serves 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 apples 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.
COLOR!
The movement of Flat design, as
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 boarders
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 no
longer borders around buttons rather “hit area’s” 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 your doing - Design on your Device
Whether your designing for mobile
or tablet its important to see the proportions of the design in context. Especially with the new iOS7 simplistic &
flat style, its 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 mater what tool you choose to create in
is - 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
Wrapping up
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 designs 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 some of our talented design expertise – check out Have you
updated your app for iOS7? By Matt Crist
No comments:
Post a Comment