Creating Mobile Applications For Iphone 6
Application Design Development
For 50% of users, application design is a key quality factor. Creating an interface design for an application is not an easy task. To help create quality, user-friendly interfaces, Apple has released and is updating the manual for creating interfaces (iOS Human Interface Guidlines (HIG)). We made a brief overview of the features of creating application interface design on iOS and briefly described the process of creating an application design.
Application Design Stages
A good, beautiful, and user-friendly application design for iOS is almost half the success of your development. It all starts with an idea.
After that, it is worthwhile to analyze the existing applications in the store, take the best from them and solve their main problems. This stage is necessary when prototyping applications: it allows not to reinvent the wheel and avoid possible errors.
The application must solve some problem. Excessive, blurry, or insufficient functionality translates into huge problems at the implementation stage. Most of these problems can be avoided during the design phase.
When compiling a script, a goal is identified that users will achieve on each of the application screens. In what situations will the application be needed and how can it make life easier for the user?
Creating a user-friendly structure is critical to creating intuitive navigation. Which button leads to? Are there any steps you can skip? It’s important to use exactly the navigation elements that are best suited for the structure of your application.
Immediately after the navigation, the question arises: how should the elements be arranged on the screen? How to make buttons convenient, screens informative, and user behavior natural? Designing an application includes work on planning navigation and functionality. Once it is finished, it is time to create a prototype design for the interface, followed by the development phase.
Get a design proposal
After the approval of the prototypes, the next step: the design of the application, you need it to be beautiful, functional. Bringing gloss and gloss, polishing all the elements is one of the last stages of the development of a mobile application. Here, you can let go of creativity and come up with a design thanks to which the application in the app will receive recognition.
After creating a design, it can be made more compact. The purpose of testing usability of a design is to create a more streamlined, convenient, and minimalistic application. Good applications imperceptibly help users to solve their tasks, for this in the application you need to develop the mechanics of providing hidden assistance.
IOS Interface Guide
Points and pixels
Pixels. these are the smallest physical elements that can be controlled on a digital screen. The more pixels there are on a screen of a certain size, the higher the number of pixels per inch (PPI) and the image on the screen will be better.
Points. These are permission-independent elements. Depending on the density of pixels, a point may contain several pixels, for example, 1 point contains 2×2 pixels on a standard retina screen.
When creating a design for different screen sizes, you should think in points and draw in pixels. That is, you still have to export the design elements in 3 different sizes:
- @ 1x. for devices younger than iPhone 4;
- twice as much @ 2x. for iPhone 4, 4s, 5, 5s, 6;
- three times more @ 3x. for iPhone 6 Plus), regardless of the resolution in which you design your application.
Video: Creating Mobile Applications For Iphone 6
Processed pixels and physical pixels are equal on all iOS devices except iPhone 6 Plus. Here the screen has a lower pixel resolution than it should be at real @ 3x resolution. Therefore, the size of the processed content is automatically reduced to 87% of the actual size from 2208 x 1242 pixels to 1920 x 1080 pixels.
Icons are usually saved as square PNG files in various resolutions. The designer does not need to apply any additional effects. iOS itself applies all the necessary effects. The same goes for the radius of the corners of the icons. On iOS devices and in the AppStore, we see rounded corners (corners with a radius). You do not need to create these rounds yourself and save them in the final file. Apple will crop your icon with the required radius on its own. Therefore, the result of your work should be just a square image in PNG format. An important aspect to consider is transparency. Transparency is not supported for application icons in general. Therefore, all transparent areas will be filled in black. If the icon has a white background, then a gray 1px stroke will be applied to it to make it more prominent. This will be done only for the icons that will be located in the "Settings" section of the device, if your application is presented there.
The standard system font in all versions of iOS is Helvetica Neue. Starting with iOS7, Apple uses a slightly modified version of this font, but you can safely use the original Helvetica to create the design. In addition to the standard font, quite a lot of other standard fonts are available, or it is possible to connect any third-party font. It is always necessary to use fonts wisely and do not forget about licenses, especially for using third-party fonts.
Starting with iOS 7, vibrant colors have become the face of iOS. You can use any, but do not get involved in the use of a large number of variegated colors, because this can confuse the user. It will optimally use 1-2 two primary colors and 1-2 auxiliary colors, excluding black / white for text and headings.
Pictograms (icons) are an important component of the design of any application. It can harmoniously supplement the text or even replace it, while the icon should be clear to users. Typically, the icons are used in the Tab Bar. the navigation bar located at the bottom of the screen and the Nav Bar. navigation bar located at the top of the screen. However, pictograms can be used where appropriate. To create icons, you can use auxiliary informal templates that use the grid system developed by Apple for their icons. This can facilitate the design process of the application.
Commonly Used Items
iOS offers an excellent collection of ready-to-use elements that make life easier for developers and allow you to quickly create interfaces. Many of the elements can be customized and change the look. If standard elements do not cover the needs of the developer, then you can write your own elements or add existing ones with functionality.
When creating your own interface elements, you need to be extremely careful, as the user may have problems understanding new, unfamiliar objects. Therefore, before introducing these elements, you need to think carefully, analyze and, if possible, test these elements on users. Also, you need to consider the procedure for introducing a user to non-standard interface elements.
Transfer of the finished design of the mobile application into development
The application design is considered complete only when the following materials are transferred to the developer:
- Map of application screens. contains all application screens and all possible transitions between them. For each of the transitions, the action that initiates it, for example, pressing a button or a specific user gesture, must be strictly indicated. Each of the screens should be indicated in a certain way, for example, serial number, name, code. This designation is used as a link to the screen, for example, when naming folders containing resource slicing;
- The color map used in the application is an image containing a list of all the colors used in the application;
- List of fonts used in the application. a text document that lists all the fonts used in the application;
- Marked states of each of the screens. each of the screens can be in different states. Each of these states, including the main one, should be presented in a separate file;
- Cutting elements for all screens. icons, buttons, indicators, arrows. Resources are provided in three sizes. standard (corresponds to the size indicated on the screen layout in points), @ 2x and @ 3x. All interchangeable resources must be strictly the same size and located in folders whose names correspond to the name of the current screen;
- Video / gif with all non-standard animations. all non-standard animations are accompanied by explanatory videos or text descriptions of what is happening: what parameter is animated, for how long and at which object;
- Application icons.
We are engaged in the visual design of all designed systems and carry out all the work related to this: creating design layouts for pages, illustrations, logos, icons and navigation elements, taking into account work under high loads and further development. You can always contact us to solve the problem of creating the design of your application.