{"id":17918,"date":"2022-06-06T11:27:35","date_gmt":"2022-06-06T11:27:35","guid":{"rendered":"https:\/\/techmaina.com\/?p=17918"},"modified":"2022-06-06T11:27:35","modified_gmt":"2022-06-06T11:27:35","slug":"keys-to-design-a-good-mobile-app","status":"publish","type":"post","link":"https:\/\/techmaina.com\/keys-to-design-a-good-mobile-app\/","title":{"rendered":"10 Keys to Design a Good Mobile App"},"content":{"rendered":"<p>When a UI designer faces the design of an App, the first point to face is the design of the wireframes, being possibly the most fun part of the design but, at the same time, the most complicated since at this point the creative part is decided where the different elements of the app will go so that the usability is coherent and simple and the information is displayed in the best possible way.<\/p>\n<p>With the sketches of our app decided, is when we go to shape it and it is at this point when we must take into account these tips to develop the structure and the final appearance that our application needs.<\/p>\n<p>They will also be helpful to students who are writing a research paper on this topic, and before <a href=\"https:\/\/essayassistant.net\/buy-research-paper\/\" target=\"_blank\" rel=\"noopener\">buying research paper<\/a> online, we advise you to pay attention to the tips below.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-17923 size-full\" title=\"Keys to Design a Good Mobile App\" src=\"https:\/\/techmaina.com\/wp-content\/uploads\/2022\/06\/Keys-to-Design-a-Good-Mobile-App.png\" alt=\"Keys to Design a Good Mobile App\" width=\"700\" height=\"370\" srcset=\"https:\/\/techmaina.com\/wp-content\/uploads\/2022\/06\/Keys-to-Design-a-Good-Mobile-App.png 700w, https:\/\/techmaina.com\/wp-content\/uploads\/2022\/06\/Keys-to-Design-a-Good-Mobile-App-300x159.png 300w, https:\/\/techmaina.com\/wp-content\/uploads\/2022\/06\/Keys-to-Design-a-Good-Mobile-App-150x79.png 150w, https:\/\/techmaina.com\/wp-content\/uploads\/2022\/06\/Keys-to-Design-a-Good-Mobile-App-696x368.png 696w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_65 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<p class=\"ez-toc-title\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-66383c921e0b0\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-66383c921e0b0\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/techmaina.com\/keys-to-design-a-good-mobile-app\/#The_Interface\" title=\"The Interface\">The Interface<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/techmaina.com\/keys-to-design-a-good-mobile-app\/#Choosing_Between_Native_and_Customized_Interfaces\" title=\"Choosing Between Native and Customized Interfaces\">Choosing Between Native and Customized Interfaces<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/techmaina.com\/keys-to-design-a-good-mobile-app\/#Corporate_Identity\" title=\"Corporate Identity\">Corporate Identity<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/techmaina.com\/keys-to-design-a-good-mobile-app\/#Icons_and_Splash\" title=\"Icons and Splash\">Icons and Splash<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/techmaina.com\/keys-to-design-a-good-mobile-app\/#Grid\" title=\"Grid\">Grid<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/techmaina.com\/keys-to-design-a-good-mobile-app\/#Typography\" title=\"Typography\">Typography<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/techmaina.com\/keys-to-design-a-good-mobile-app\/#Color\" title=\"Color\">Color<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/techmaina.com\/keys-to-design-a-good-mobile-app\/#The_Language\" title=\"The Language\">The Language<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/techmaina.com\/keys-to-design-a-good-mobile-app\/#The_Details\" title=\"The Details\">The Details<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/techmaina.com\/keys-to-design-a-good-mobile-app\/#Animations\" title=\"Animations\">Animations<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"The_Interface\"><\/span><strong>The Interface<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The interface is the global aspect of our application, it is where the user interacts and what separates it from the internal organs of our app.<\/p>\n<p>It consists of many elements (graphics, buttons, backgrounds, etc..) which vary depending on the operating system in which we are (Android, IOS, Windows Phone, etc..).<\/p>\n<p>An <a href=\"https:\/\/www.wikihow.com\/Become-a-UI-Designer\" target=\"_blank\" rel=\"noopener\">UI designer<\/a> must know well the aesthetic preferences of each of them and try to adapt an application to the different aspects depending on the place where it will be hosted.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Choosing_Between_Native_and_Customized_Interfaces\"><\/span><strong>Choosing Between Native and Customized Interfaces<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Another very important point when starting to implement our design is to see what kind of interface we want, a native interface, where almost all the design elements are given according to each platform, or a customized one, where we will create all the elements under our own criteria.<\/p>\n<p>It is a decision that must be taken conscientiously since this will depend on the work to be done later by the programmer, also a native interface is composed of elements that the user already knows so he is familiar with its use, otherwise, we must be quite intuitive, and we can do work that the user does not understand and does not know how to handle.<\/p>\n<p>Even with a very customized design, you can get to the abuse of images that give the look we want, and this can slow down the use of our app.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-17921 size-full\" title=\"How to Design a Good Mobile App\" src=\"https:\/\/techmaina.com\/wp-content\/uploads\/2022\/06\/How-to-Design-a-Good-Mobile-App.jpg\" alt=\"How to Design a Good Mobile App\" width=\"700\" height=\"369\" srcset=\"https:\/\/techmaina.com\/wp-content\/uploads\/2022\/06\/How-to-Design-a-Good-Mobile-App.jpg 700w, https:\/\/techmaina.com\/wp-content\/uploads\/2022\/06\/How-to-Design-a-Good-Mobile-App-300x158.jpg 300w, https:\/\/techmaina.com\/wp-content\/uploads\/2022\/06\/How-to-Design-a-Good-Mobile-App-150x79.jpg 150w, https:\/\/techmaina.com\/wp-content\/uploads\/2022\/06\/How-to-Design-a-Good-Mobile-App-696x367.jpg 696w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Corporate_Identity\"><\/span><strong>Corporate Identity<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>When designing our application, it is vital that we take into account the corporate manual of our client, therefore, we must try to combine as much as possible the visual style of the platform where our app will be, with the image of our client, as it is another showcase to reinforce the brand.<\/p>\n<p>Of course, we should not overdo it, the logo and other corporate elements should appear, but they should never hinder or worsen the user experience.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Icons_and_Splash\"><\/span><strong>Icons and Splash<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>These are two fundamental aspects of the design of an app. On the one hand, we have our main icon, which must be very clear and striking enough to stand out in a showcase full of applications with many similar icons.<\/p>\n<p>In addition, we must take into account the design specifications within each operating system, since, while in Android they can have different shapes and transparencies, in IOS or Windows they will always be embedded in a square frame, in the specific case of IOS with rounded edges.<\/p>\n<p>As for the interior icons of the app, we must know that they must be of universal use, and understandable by the user at a glance since many times they will be used to reduce the use of text and if it is not clear what the image reflects, they could hinder the user experience.<\/p>\n<p>Finally, we have the splash or loading screen, it is the first view we have of our application while it is loading (always or the first time we use it). It is a very ephemeral screen that can be on screen for less than a second, but it is necessary to take into account its design since it is the first reflection that the user will have of our application. We usually make a background equal to that of our home but without content to give the feeling that the content arrives as it loads.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Grid\"><\/span><strong>Grid<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Our <a href=\"https:\/\/www.creatisimo.net\/the-graphic-designers-guide-to-grid-theory\/\" target=\"_blank\" rel=\"noopener\">grid<\/a> will be the distribution in space of all the elements of the app, we must always design respecting the grid that we have established in our wireframes so that the app always maintains a harmonious appearance respecting the white spaces and content.<\/p>\n<p>In addition, it is very important to take into account the technical specifications given by each operating system, to ensure that the spaces we leave are adequate to easily interact with the different buttons and elements of our application.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Typography\"><\/span><strong>Typography<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>As in any design, it is very important to make good use of typography, but in the case of mobile applications, it is even more important because on a small screen and where light conditions can be very variable, the readability and contrast are the best possible should be paramount.<\/p>\n<p>It is very important to be able to choose a good typeface, for this we must also take into account the libraries recommended by each operating system, and if we do not select any of the proposed fonts, we must make sure that the one we choose is perfectly legible at lower resolutions.<\/p>\n<p>On the other hand, the hierarchy system is vital for a good user experience.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Color\"><\/span><strong>Color<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Like typography, it is very important, since we must know how to use it to obtain a good contrast, as well as to be able to establish hierarchies in the information, etc.<\/p>\n<p>The color will often be given by the corporate colors of the company for which the app is made, but even so, we must be well informed of the particularities of each color code that will have the operating system for which the application is developed.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"The_Language\"><\/span><strong>The Language<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The way we communicate with our users is very important, so that the texts are clear and explanatory, that if the user is lost have help, warnings or alerts, are added value for our app, which will be a great added value for our UX.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"The_Details\"><\/span><strong>The Details<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>This is one of the last points. To take into account, it is clear that its use makes the difference. We refer to those details that are mostly ephemeral but make a difference to the user experience, we mean that you see when an image has not been loaded, as a message tray is displayed when it is empty, etc. They are small details that normally are not seen, but when they occur, if they are not there, they can spoil the rest of our design.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Animations\"><\/span><strong>Animations<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>As with the details, they are elements that are not constantly visible but their presence can brighten or even change the mood of the user at the time they use our application. They fill the application with life and influence the way the user interacts with it.<\/p>\n<p>So, are you ready to design your first app?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When a UI designer faces the design of an App, the first point to face is the design of the wireframes, being possibly the most fun part of the design but, at the same time, the most complicated since at this point the creative part is decided where the different elements of the app will [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":17923,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"tdm_status":"","tdm_grid_status":"","footnotes":""},"categories":[8],"tags":[3251,3252],"_links":{"self":[{"href":"https:\/\/techmaina.com\/wp-json\/wp\/v2\/posts\/17918"}],"collection":[{"href":"https:\/\/techmaina.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/techmaina.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/techmaina.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/techmaina.com\/wp-json\/wp\/v2\/comments?post=17918"}],"version-history":[{"count":4,"href":"https:\/\/techmaina.com\/wp-json\/wp\/v2\/posts\/17918\/revisions"}],"predecessor-version":[{"id":17924,"href":"https:\/\/techmaina.com\/wp-json\/wp\/v2\/posts\/17918\/revisions\/17924"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/techmaina.com\/wp-json\/wp\/v2\/media\/17923"}],"wp:attachment":[{"href":"https:\/\/techmaina.com\/wp-json\/wp\/v2\/media?parent=17918"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/techmaina.com\/wp-json\/wp\/v2\/categories?post=17918"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/techmaina.com\/wp-json\/wp\/v2\/tags?post=17918"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}