At Magora, iOS development company, we focus on both sides of the process - design and programming. And we know that sometimes it can be hard to switch to user interface design and get an understanding of all the different processes of native iPhone and iPad devices. Our iOS app development experts have prepared this guide to introduce you to iOS app design fundamentals, outline its specifics, benefits, and limits and describe the main aspects of the user interface (UI) 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.

Resolution Measurements

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:


Many designer find it very convenient to create storyboards to help them develop the screen flow of the iOS app. Typically, they draw the first storyboard on paper, which consists of boxes and words combined together. Actually this practice is very handy because once the storyboard is drawn on paper, it will be much easier to recreate it into a full-fledged interface on your computer. Visualising the designs you will immediately see all its drawbacks and downsides. There will be moments when you will want to add an extra element to the screen, but suddenly find out that there is not enough space to put it.

Laying the Foundation for Interface Design

Or you can use the initial hand drawn storyboard as a groundwork for a full-fledged design concept. A detailed storyboard that is drawn on paper is very easy for people to understand, therefore, they will help you get initial feedback and see what works and what does not. Testing the design concepts with real people is a great experience that helps designers optimise their interfaces and hone their skills. Here are a couple of materials on storyboards that you may find useful:

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 organised on the screen. Creating a design layout is the middle stage between the initial storyboard and the end product. That is why you do not need to create a high resolution design with many details - you need a simplified version that you will be able to easily modify whenever it is necessary.

Design Hierarchies

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 bottom there may be a grid column menu or a hamburger slide menu. At the top level, the user navigates via the navigation bar, and can also perform actions that are relevant to the screen they are currently on.

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 loosing too much time on designing custom elements. However, you can confuse the client who may think that these are the final design of the elements and they will look exactly the same in the end product. That is why many designers make their mockups and wireframes feel more like hand-drawn pictures rather than a final product. On the other hand, using pre-made UI elements, there is no chance to customise and create a unique design that stands out from thousands of other interfaces built within certain programs.  

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, optimise a legacy system or develop complex bespoke software to increase the productivity of business or look for an experienced designer, we are ready for any challenge and guarantee you the highest quality of our products.

Contact Us

Together with the clients, our designers get into the details of your business processes, reveal the things that need optimisation and help the client crystallize our ideas into a comprehensive software requirement specification that lays the groundwork for the entire project. Our expert will keep you informed about our progress, discuss with you any changes to the iOS software and welcome the client’s feedback to ensure that the end product perfectly meets expectations and keeps within budget and timeframes. Get in touch to discuss your digital ideas and create a full-fledged plan of bringing them to life. 

iOS development
Hire an app developer | Top Mobile Programmers | Contact us - Magora
iPhone app Development UK Based - Mobile App Development Company
App developers UK|Magora app development company London
How to Design an App
Mobile app design
App designer
Mobile Application Marketing Company: Magora UK
How to Simplify an App Making
How to create iPhone apps?
Magora: Mobile app development company in London, UK
Software development services, provided by Magora team
Magora UK: Website Designers London | Web App Developers
Magora agency: Web Design London | Web App Development London
Magora UK: Designing Engaging Business Software
Website Design & Web Development in London: Magora agency
Web Application Development Company - Magora
Smartphones Applications Development in London | Magora
Business Application Development Services - Magora
Magora systems: The ideal platform for iPad app programmers
Magora Systems is one of the leading iOS App Development Companies
Magora Android app developers Android development: cover 80% of users with Android bespoke app
Magora UK - web developer company London Magora: Bespoke Web Development Company in London, UK
You message has been successfully sent

Still have questions? We are ready to help

Please fill in at least one field!