iOS Design Philosophy
We’ve been using mobile apps for quite a while now, so we have a set of expectations and often take many things for granted as if they’ve always been there. However, the evolution of mobile and tablet apps has been happening thanks to the vibrant community of developers who are constantly studying users’ needs and preferences. The crucial role in this process has been played by Apple and its dedicated followers who have developed a profound philosophy based on the principles of clarity, deference and depth. In this article we’re not trying to reiterate all the core standards behind it again, but rather try to explain how you could use it to make your app for iOS perfect. Also, our designers and developers have agreed to reveal some tricks that we hope will facilitate communication between all the parties involved in the process of building an iOS app.
[announce]
Designing an iOS app is presumably easier than creating an app for Android, due to a limited number of Apple devices, so it’s more predictable and easier to test than in the case of Android. Moreover, the guidelines for iOS are very clear and implementable reflecting the philosophy that stands behind them. So what can you do to make sure there is clarity, deference and depth in the UI and UX of your app?
Clarity
According to Mike Stern, a lead designer at Apple, UI design is a form of communication. The user communicates with an app and vice versa. And the best form of communication is an easy and clear one, so make your app intuitive and easy to comprehend. To achieve it follow this checklist:
- things should be obvious
- use words and grammar that people understand
- your app should barely needs any instructions
- good readable typography
- understandable icons
- specific texts
- the screen should explain what it does
- colours have unambiguous meaning
Deference
- content is king, it’s big and central; it takes the whole screen
- visuals and navigation shouldn’t compete with your content
- UI shouldn’t attract much attention
- think if the element is necessary, you don’t need heavy textures or multiple shadows
- use beautiful font, as typography will take 50-90% of your screen
Depth
- it should be a lifelike experience, which is impossible without context, so add contextuality
- implement transitional screens, i.e. everything transits from 1 screen to another
- use a blurred background
- it should be easy for users to stay oriented between different layers
- people shouldn’t be lost or confused, they understand where they are and where they need to go
- animations and sounds should reinforce contextuality
- don’t try to make your app unusual and trendy. These are temporary things and you want your app to last
Screen Resolutions
You need to have resolutions and display specifications handy. iPhone and iPad UX is not the same, and as a rule, users use smartphones on the go, and the span of interaction with content is shorter than with tablets. Thus, you need an individual approach to each type of these two devices. Also, you often have to place the elements differently depending on the screen resolution not to make your app experience clumsy or unnatural.
Retina
Retina screen resolution, introduced by Apple to make pixels not visible to the naked eye, significantly improves the design. At the same time, mistakes become more visible and obvious. We suggest designing everything for Retina resolution. You aim at better quality and then it is automatically scaled down to lower quality.
Portrait and Landscape Orientation
Don’t forget to export everything into 2 different resolutions, which are portrait and landscape. Think why users reorient the screen, take into account the consequences and the situation in which they interact with your app (depth principle). Apparently, they need it for better usability, so you need to think in advance and try to predict their behaviour. Launching an app in portrait orientation is more typical for iPhone as it matches the home screen. However, there are apps for which landscape is more suitable. There are many ways in which you can adjust the app layout, such as changing the position of the icons, adding or subtracting the elements to suit the mode.
Custom UI and Standard UI
You should definitely follow Human Interface Guidelines for iOS but sometimes deviations from the guidelines are necessary and you need to use custom controls. Use the default interface unless your users have a specific need for a customised interface. Mostly, the pros of using the standard interface greatly outweigh the cons. If you go with the default OS skin only to gain some small benefit, you might need to design a new interface from scratch to achieve that effect. Moreover, default UI decreases the cost of development by around 20%. However, once you have established a strong need for a custom UI, don’t hesitate to go for it. Just remember that if you do a custom UI, you have to be really good at it as a bad user interface solution might just confuse and lose the users.
Layers
A good designer knows that virtually all the layers and elements should be vector based. Vector images can be scaled repeatedly without losing resolution or looking pixelated. Another benefit is that vector files are smaller than in raster, which makes them easy to transmit.
Bitmap or Raster images are made of pixels. You can even see them if you look at the image very closely. Photos are only available in this format, so you should always choose those which have the best quality.
Images
- Images should be inserted as smart objects to keep them scalable without losing any quality.
- If a certain style is applied to photos, a designer can either tell the developer that some filter must be applied to it or the filters may be linked right on the photo. Just don’t forget to let the developer know about it.
Testing
After following all these tips for improving your iOS design, you still need to do thorough testing. It often happens that a designer simply forgets to include some screens for secondary functions, especially when an app is very complicated and big. Test it to identify and fix the possible problem. Such a problem usually occurs when there is no analytic in the team. When the design is created without analytics, some elements may ultimately turn out to be missing, because a designer just forgets about them in his workflow. So make sure it doesn’t happen.
And, of course, if you have any further questions feel free to contact our iOS team.
