Fundamentals of iOS Native Design
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.
Case Studies
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
Whether you are an individual enthusiast like Jack, a company executive or a professional developer
wishing to design iPhone apps for in-house use, setting the goal of your project will ensure the success
of the whole process. What does a project goal look like?
1
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.
2
What Is A Pixel?
A pixel (abbreviated as px) is the smallest elements of the image.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.
3
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.
4
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.
5
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.
6
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
Our Achievements:
322 App Development Projects
413 Mobile Applications
75 Enterprise Software Solutions
StoryBoards
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:
- From Wayfinding to Interaction Design by Matt Cooper-Wright;
- Free Printable Sketching, Wireframing and Note-Taking PDF Templates by Paul Andrew, Smashing
Magazine.
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.
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.
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.
