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?

unilever
yandex
danone
cisco
trivago
mandara
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.

You message has been successfully sent

Still have questions? We are ready to help

Please fill in at least one field!