Move in style with Guidelines

How to use animation, branding and colour in iOS 11 app design in accordance with the Human Interface Guidelines.


iOS 11 is all for micro-interaction and main state animation. The guide lines in fact promote animation use greatly, however they do state quite clearly to use it wisely as too much can deter a user from continuing to use the app. On the other hand, don’t utilise its potential and you could easily not gain a users interest and fail to build a strong relationship between people and your onscreen content. iOS uses motion effects, such as a parallax effect, to create the perception of depth on the Home screen of their apps and in other areas. These effects can increase understanding and enjoyment, convey status, provide feedback to users and enhance the overall experience of an app. But overusing them can make an app feel disorienting and difficult to control. If you implement motion effects, always test the results to make sure they work well.

With animation, you must strive for realism in what you create. Break boundaries and cross the lines of what was done before, but always aim to stick to the possible. For example, if you layer up a design, use shadows and depth perception correctly. Have things pass over each other that comply with the laws of physics. Have things appear and disappear in the same motion, i.e if a modal view comes from the bottom, if dismissed it should return to the bottom.
Consistency is key. In my opinion, for two main reasons. Firstly, It keeps the user familiar with the behavioural aspects of the design — how they transition between screens and the speed of movement within the app. Secondly, for the development team. Repeating animation states means development can re-use code in various parts of the app without having to write new custom animations. 
 For accessibility, animation may become optional. A user can reduce motion in the accessibility settings, this should be reflected in our app designs in either a reduction of animation or remove them.

Branding & Colour

Subtle use of brand components creates a strong uniform branding. iOS state in their guidelines “For the best experience, subtly incorporate your brand through your app’s design” and therefore encourage removing the use of branding elements such as logos and names from title views! “Avoid displaying a logo throughout your app unless it’s necessary for providing context. This is especially important in navigation bars, where a title is more helpful.” — make content and labelling the priority.

Colour as we all know is a nice way to keep an app looking constant and adhere to a projects brand. However, over use of colour can do more harm than good especially when it comes to accessibility. Colours should be contrasting, but constantly compliment each other to avoid distraction.

Use a limited colour pallete. Start with the brands main accent colour, and stray carefully to create secondary colours. Apple encourage using 4 colours in one scheme to keep the app appearance simple and not visually jarring. With the accent colour or key colour, use it sparingly and for indiction of interactive elements such as CTA’s or hyper-texts. However, ensure that other interactive elements that don’t use the accent/key colour are not competing with it. For example, if a blue accent colour for the button text “next” (a progressive call) is used, the secondary button text for “back” should be different and non competing such as black.

Source — Apple Human Interface Guidelines