Fundamentals of iOS Native Design
Understanding the Screens
If someone wants to become an outstanding designer, they should know the advantages and limits of the medium. Without a doubt, you have all seen terrible designs and horribly pixelated print materials delivered by incompetent designers, which are the result of a poor understanding of print media. Consequently, if the knowledge of the display you use is not enough for work as a designer, one may make the same mistakes and create horrible graphics with huge pixels.
The Advantages and Disadvantages of Retina Display
There are two major iOS devices for iOS app designers - the iPhone smartphone and the iPad tablet. Yes, it is not a wide range of choice like in the case of Android devices, but there are different variants of these two devices: the iPhone 5 and the later models, the iPad mini and devices with Retina displays. Of course, the difference that matters most is between the models of smartphones and tablets that have Retina displays and those without them.
The Specifics of Retina Screens
Retina screens have higher pixel density making any graphic images and other materials look gorgeous and highly detailed. The downside of such a high resolutions is that it is easier to spot mistakes on Retina screens. Designing for Retina screens is not easy, so designers need to pay extra attention to this part of the tutorial and read extra materials to make sure that you perfectly understand its specifics.
What Is a Pixel?
A pixel (abbreviated as px) is the smallest elements of the image represented on the screen. It has a form of a square that is part of the device’s screen. Looking very closely at a non-retina display, you will be able to see pixels separated by small gaps between them. A pixel is a minimal addressable measure, which means that it is not possible to draw a line thinner than 1 px. For instance, you cannot create a 0.5px line, because the program you will try to create it with will interpret this as a somewhat fainter line with a width of 1 px. Moreover, most designers will most likely find the final result ugly.
What is a Point?
Points (abbreviated as pt) are alternative units of resolution measure. A point can be represented by a number of pixels, typically one or two in height or in width. For instance, all iPhone smartphones have an equal resolution in point and all iPads have the same width in points. Most designers prefer to use points instead of pixels. Either way, keep in mind that one point can contain many pixels, making room for more details.
To ensure that you understand the difference between various resolutions, we have prepared this example for you. Looking at the figures, it is clear how the difference in resolution between iPhone 4 and iPhone 3GS changes the appearance of elements but does not change their size represented by points. Moreover, this comparison of sizes will be useful if you will need to consider how on-screen elements such as controllers correlate to the physical objects like a user’s fingers in size.
iOS Device Resolutions in Portrait Mode
- iPhone 3GS and earlier models: non-retina, point resolution of 320 x 480;
- iPhone 4 and 4S: retina, point resolution of 320 x 480; pixel resolution of 640 x 960;
- iPhone 5: retina, point resolution of 320 x 568; pixel resolution of 640 x 1136;
- iPad 1, 2 and Mini: non-retina; point resolution of 768 x 1024; pixel resolution of 768 x 1024;
- iPad 3 and 4: retina, point resolution of 768 x 1024; pixel resolution of 1536 x 2048.
Helpful Tutorials on Retina Design
If you want to know more about design for Retina display, check out these tutorials:
- Designing for Retina Display by Marc Edwards, Bjango
- The iOS Design Cheat Sheet by Ivo Mynttinen
- Designing for iPhone 4 Retina Display: Techniques and Workflow By Marc Edwards, Smashing Magazine
Laying the Foundation for Interface Design
Or you can use the initial
- From Wayfinding to Interaction Design by Matt Cooper-Wright;
- Free Printable Sketching, Wireframing and Note-Taking PDF Templates by Paul Andrew, Smashing Magazine.
Creating a Template
Layouting is the second step towards the iOS app’s interface, so it is best to keep it simple and restrain from too many decorative details. Focus on the key elements of the user interface instead. In other words, define how these elements will be
Designing a layout hierarchy you give the users an opportunity to experience the navigation within the iOS app and see the interactions behind every element. The base level of an iOS app typically consists of a number of functions that are specified on a tab bar at the bottom fo the screen. However, instead of a tab bar at the
UI Building Tools for Designers
There is a way to easily and quickly create iOS application mockups using various UI templates and tools for designers. For example, you can create a native user interface with pre-built templates in line with the Apple’s guidelines without
Rely on the Professional iOS App Designer Team
If you are not confident in your design skills, let professional bring creative ideas to life. Over more than 10 years in iOS app development, Magora team of iOS app designers, developers, business analysts, quality assurance specialists and other experts have delivered hundreds of iOS software solutions for large enterprises and small to mid-sized businesses across various industries. Whether you want to create a brand-new website for your company from scratch,
Together with the clients, our designers get into the details of your business processes, reveal the things that need