iOS Design (1) — Core Philosophies
Core Philosophies
iOS8 is driven by 3 core philosophies: deference, clarity and depth.
Inspired by those design principles, I’ve broken down their meanings into actionable items that are much deeper than those explained in the guidelines.
Deference
Your content should be the hero, everything else is secondary. Use elements that complements it and avoid distracting visuals that compete with your content.
Simplify
Your user interface should be stripped down to the core aesthetic. Every time you add an element, ask yourself “is this necessary?”. Unless your app is a game or a specific theme, temper your use of heavy textures, 3D effects and multiple shadows. Instead, focus on functional colors, harmonious gradients, and beautiful typography.
Maximize Content
The content should take the whole screen, giving maximum space to its inner elements. Avoid multiple containers and maximize the scrolling areas, which will allow more room for interactions.
Colors
Use a prominent color to show that an element is tappable or that it’s highlighted. Picking the right colors and neutral tones can make or break your design. It is an aspect of iOS 8 design that will be explained in great depth in an upcoming post.
Typography is Content
Because of the simplification of the user interface and the focus on content, your typography will occupy from 50% to 90% of the screen. Therefore, it is paramount to pick a beautiful font and set it’s weight, line-height and color to be visually pleasing and optimal for reading. This particular aspect will be explained in greater detail in an upcoming Typography post.
Negative Space
Use negative space to bring focus to the content. The less you see, the more you can focus on few things at once. Negative spacing gives breathing room. Don’t overwhelm your screen with too much structure or unneeded visual elements.
Icon States
The icons for navigation have 2 states: outline and fill mode. The reason for the outline is to distract less. When an icon is filled, it grabs more attention. It also means that the current page is active.
Clarity
Make things obvious. Buttons should be self-explanatory and typography should be big and readable at a comfortable distance. Your content should clearly indicate what your app is about. For example, if it is a coffee app, then you should be reminded of the coffee beans, expressos and brown colros of coffee.
Make the text readable
In Retina, typography should have a minimum size of 22px. The optimal size for reading is around 32px.
Use obvious icons
Icons should not be ambiguous, they should clearly indicate what the symbol means. Whenever possible, use text to accompany the icon. Once you use an icon, don’t reuse another variation of the same icon elsewhere. That will confuse your users. Likewise, don’t use generic texts such as “Back” or “Submit”, instead be specific and write “Back To Home” and “Sign up a new account”. For more detail, read the upcoming icons post.
Descriptive Screens
Each page should clearly explain what it does. There should be minimal branding, which should be replaced by a clear title of the screen and highlighted state from the tab bar, if any.
Meaning in Colors
Colors have meaning. Use red, green, blue and neutral tones wisely to indicate destructive actions, affirmative actions, links and inactive states respectively. Avoid confusing your users by using these colors for different purposes. For example, don’t use green on a button that says “Delete this page”.
Depth
Perhaps the hardest part to understand is depth. It’s a very abstract concept, but at the same time very powerful and unique. Depth is the idea that everything should be contextual and transitional. In real life, when you walk from a room to another, you get a sense of progression and distance. That way you don’t get lost. That same concept should be applied to user interface.
“Indifference towards people and the reality in which they live is actually the one and only cardinal sin in design.” — Dieter Rams
Transitional Interface
Personally, I find this to be the most exciting and unique aspect of iOS 8. Every screen transitions from one to another. The home screen zooms into a folder, then zooms into an app. Traditionally, such technique is hard to execute, but thanks to Xcode 5, they are made more accessible than ever. The techniques will be explained in an upcoming animations post.
https://designcode.io/images/mp4/transitional.mp4
Blurred Background
Keeping context of the background UI shouldn’t compromise the clarity of your content. Blurring the background not only allows you to keep its natural colors, but also brings focus to the foreground. Blurring isn’t an invention, it’s something that already exists in real life; as you focus on something, everything else become blurry.
https://designcode.io/images/mp4/blur.mp4
“What you think people want, multiplied by ten is what you should create. Anything less won’t last longer than a day in people’s mind. Do it right and it’ll last a lifetime.”
Make it Delightful
What’s not really mentioned in the guidelines are 3 things that can make your app really stand out: animations, gestures and sounds. It’s really easy to go overboard with them, so use with moderation.
Animations
Animation not only serves to transition from one screen to another, it also adds playfulness and excitement to your design. It also brings importance to an element that would otherwise be ignored.
https://designcode.io/images/mp4/animations.mp4
Gestures
https://designcode.io/images/mp4/uikit.mp4
With the introduction of the iPhone 5's tall screen, the back button was too high for the thumb to easily reach. So, while less obvious than a visible button, a gesture can be an extension to an already visible interaction. It makes it easier for power users. We’re all becoming power users, that’s why we require less visual cues and more useful functions.
https://designcode.io/images/mp4/gestures.mp4
Sounds
Sounds are minimally used in apps, but when they’re played, they can transform a mundane task into a truly rewarding experience. People can recognize your app without even seeing it. When the sound gives the right impression, you win a lot with a minimal amount of effort.
https://designcode.io/images/mp4/sounds.mp4
“Good design is universal. You don’t need to explain or overcompensate it with big words. People just get it.”
Three Rules
If you are to ignore all else, you must at least consider these 3 important rules to iOS design: consider the touch interface, make the text readable and optimize for the iPhone 5, 6 and 6 Plus.
Design for Touch
Buttons should be easily tappable. In Retina, their sizes should be between 60–120px tall. The optimal height is88px. On rare occasions, set 44px for links inside texts, but use cautiously — they’re hard to tap. Even text buttons have a tappable zone of at least 60px. Width should be at least that of the height.
Readability
In Retina, typography should have a minimum of 22px. The optimal font-size for reading is around 32px. Use a line-height of around 120–140% to make the reading experience even better.
Adaptive Layout
You should now respect 3 resolutions: 320X480pt, 375X667pt and 414X736pt. Make sure to use the extra space, and understand how your content can expand based on screen size.
Starting Templates
The best way to learn a new craft is to reverse-engineer works from others. These templates are not only useful for study but also to re-use and customize, so you don’t have to start from scratch and open the possibility for errors. As you’ll get more comfortable with design, you will be able to go crazy.
iOS8 template for Sketch
An excellent starting point is to download iOS 8 template for Sketch. It will give you most of the UI elements found in iOS 8 that you can freely use in your designs. As you use this, it is important to get comfortable with the size of each element such as the header, buttons, dialogs, etc.
iOS8 Illustrator Vector Kit
http://mercury.io/blog/ios-8-illustrator-vector-ui-kit-update
Resources for iOS8 and iPhone 6
Designing for iOS 8 and the iPhone 6 and 6 Plus sizes is a relatively new topic, so this will be continuously updated.
