With the release of iOS 7 design guidelines, app designers and developers will have to adjust the language to match the new “flat” design of iOS. In addition to the grid system, the dimensions of icons and commonly used elements, typography and iconography has been updated by Apple in many ways.
Here are the changes to the way you present your content.
Deference. UI should not compete with content. It should help the user to understand the content.
Clarity. Legible text in anysize, precise and lucid icons, subtle adornments, and functionality focused design.
Depth. Visual layers and realistic motion guiding user understanding.
Whether you are creating a new app or redesigning an existing one, follow how iOS 7 design guidelines approached the redesign of the built-in apps:
- First, strip away the UI to expose the app’s core functionality and reaffirm its relevance.
- Next, use the themes of iOS 7 to inform the design of the UI and the user experience. Restore details and embellishments with care and never gratuitously.
- Throughout, be prepared to defy precedent, question assumptions, and let a focus on content and functionality motivate every design decision.
1. The Grid System
Icons need a revisit and redraw around the new grid system. This grid works as a template helping you to align shapes of your icon.
2. Tables /Lists
Tables, no longer have a container and uses the full width of the display now. Only the table headers are different from the context with different color highlighting the heading.Table items have a padding of 15pt eitehr side,separated by a 1px line, margin 15pt to the left side and connects directly with the right side of the screen.
The new translucent UI layout consists of several different layers in one screen. allowing you to align navigation and tab bar views with a custom view hierarchy to create a new interface. .
4. Navigation, Status Bars & Menus
Navigation bar includes a title, basic navigation and action buttons. The height of the navigation bar is shrunk to 32pt in landscape orientation to show more content below.
Icons have gone borderless. They are resizable for different screen sizes for example landscape vs portrait. iPad vs iPhone.
Take advantage of the whole screen in your design
With the new transparent status bar, and the removal of insets and visual frames revealing more room, now you can extend the content to the edges of the screen. On screen keyboard, which hides part of the screen has been removed, and the hierarchical elements displayed in an translucent manner, conveying content awareness.
Realism and visual indicators or Skeuomorphism is discouraged
Apple discourages the use of bevelled elements, gradients, and drop shadows. Skeuomorphism leads to “heavier UI elements that can overpower or compete with the content”. Apple encourages to focus on the content with the UI playing a supporting role.
Depth to communicate hierarchy
More white space
More white space helps to reduce the clutter and improve the clarity by exposing content and functionality. Apple iOS 7 design guidelines emphasize on creating apps with simplicity and plenty of negative space.
Meaningful Colors for the UI
A theme of system colors, that work well with dark and light backgrounds, provide a meaningful visual cue for the built-in apps like yellow in Notes.
Dynamic system fonts
iOS 7 dynamic system fonts adjust letter spacing, font-weight and line height, enhancing readability at any size. For system or custom fonts, choose Dynamic Type so the app will respond to any text size.
The updated Weather app for iOS 7 has the all new dynamic type system with full-screen view.
In iOS 7, buttons have been simplified to look simple with one color, borderless and explaining context to indicate interactivity. All bar buttons are borderless. And when it makes sense, a content-area button can display a thin border or tinted background that makes it distinctive.
In the Messages app, the navigation bar, contact and send buttons have been replaced with text labels.