\n<\/p>\n
Step 1 : Finding an idea for an app<\/h2>\n
First, you need an idea \u2013 a good idea. There are a lot applications in App Stores so making an app that already exists is almost always useless.\u00a0Finally, we choose an app which allows people to compare the fees of a car that runs on gas versus owning an electric car.<\/p>\n
We needed a server that accepts Rest calls from a database to chose the brands of the cars. The app is very simple and so is the server because our objective is more to prove our expertise in the Business Intelligence behind the app. However, if you create a server or connect to another server, Appel emphasizes security. In iOS10, you have to make changes in the \u00ab\u00a0info.plist\u00a0\u00bb file to access an http server.<\/p>\n
Step 2 : Make a prototype (GUI)<\/h2>\n
Before you begin to design the application with a mockup tool, it is a good idea to make some quick models by hand to test the logic of how the app will run. Here, we can already begin to give a style or look to the idea and can start to elaborate the storyboard. These sketches should be really quick (30 seconds to 2 minutes). Once we are satisfied, we go to the computer.<\/p>\n
Step 3 : Creating the interface<\/h2>\n
Once the requirements are set and the conceptual design is complete, it is time to create the interface. We use Sketch3<\/a>, but you can also use Adobe XD<\/a>. We don\u2019t recommend Photoshop or Illustrator because it will take longer to export the images.<\/p>\n In iOS applications, you\u2019ll find mention of 1x, 2x, and 3x images. Since the iPhone 4, screen quality has improved, so to prevent blurred images, you need high-resolution images. The \u00ab\u00a0x\u00a0\u00bb is used to classify images\u00a0: 1 x equals a resolution of 72 dpi, 2x is 144 dpi and 3x is 326 dpi. You don\u2019t need to remember the dpi, just remember that 2x will be two times larger than 1x and 3x is three times larger than 1 x (hence the advantage of using vector graphics).<\/p>\n Sketch has plug-ins such as \u00ab\u00a0constraint<\/a>\u00ab\u00a0; to quickly create other versions of our design. \u00ab\u00a0Aeiconizer<\/a>\u00a0\u00bb to copy and to make different dimensions for the icons. It is also possible to export the vector images 1x, 2x, and 3x in a way that is native to the software.<\/p>\n We begin with the icon. We insert an artboard of 1024px by 1024px and we draw the drawing in vector (recommended) inside. Next, we run \u00ab\u00a0Aeiconizer\u00a0\u00bb\u00a0and it generates all sizes for icons (1x, 2x, 3x) iPhone 4, 5, 6, iPad, iTunes, etc.<\/p>\n Simply select all of the icons, click on \u00ab\u00a0make exportable\u00a0\u00bb in the lower right corner and export all in 1x.<\/p>\n Since the different sizes (2x, 3x) are already created, it is unnecessary to generate a version other than 1x. Everything is already there\u00a0!<\/p>\n Xcode works with a storyboard (or multiple storyboards) for the course of your app. We just made one size, but you have to do all of the size. As well as the \u00ab\u00a0splash screen\u00a0\u00bb. Also, don\u2019t forget that it has to work in the landscape format.<\/p>\n Normally, the iPhone SE is the smallest format.<\/p>\n First, we create a new document with the template \u00a0\u00bb iOS UI design \u00a0\u00bb (File -> New Form Template -> iOS UI design). There are tons of symbols included and we can already see them on the screen.<\/p>\n We insert an artboard the size of a phone with the menu on the right and we make our various designs.<\/p>\n We can insert symbols that are the default items in Xcode so we don\u2019t need to export them. Note that the default margins are 20 px in Xcode, but you can decide to ignore them.<\/p>\n Finally, once our design has been created, we export the images individually in 1x, 2x, and 3x. We click on \u00ab\u00a0make exportable\u00a0\u00bb and on \u00ab\u00a0+\u00a0\u00bb to add sizes. The PNG format will do the job, but make sure that the layer you export has an easily identifiable name for later.<\/p>\n If you want to learn more about Sketch and all its functions, check out LevelUpTuts<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"The x\u2019s<\/h3>\n
The application icon<\/h3>\n
\n![\"Choisir](\"http:\/\/www.analystik.ca\/blogue\/wp-content\/uploads\/2016\/06\/mac-icon.png\"){kind=icon}
<\/a><\/p>\n![\"une](\"http:\/\/www.analystik.ca\/blogue\/wp-content\/uploads\/2016\/06\/icon-series-300x181.png\"){kind=icon}
\n![\"make](\"http:\/\/www.analystik.ca\/blogue\/wp-content\/uploads\/2016\/06\/make-exportable.png\")
\n![\"exportation](\"http:\/\/www.analystik.ca\/blogue\/wp-content\/uploads\/2016\/06\/export1x.png\")
<\/a>\nThe story-board<\/h3>\n
![\"s\u00e9rie](\"http:\/\/www.analystik.ca\/blogue\/wp-content\/uploads\/2016\/06\/series-se-300x123.png\")
<\/a>\n![\"cr\u00e9er](\"http:\/\/www.analystik.ca\/blogue\/wp-content\/uploads\/2016\/06\/iostemplate-300x124.png\")
<\/a>\n![\"iOS](\"http:\/\/www.analystik.ca\/blogue\/wp-content\/uploads\/2016\/06\/ui-design-sketch-300x212.png\")
<\/a>\n![\"iPhone6](\"http:\/\/www.analystik.ca\/blogue\/wp-content\/uploads\/2016\/06\/iphone6blank.png\")
<\/a>\n![\"s\u00e9lection](\"http:\/\/www.analystik.ca\/blogue\/wp-content\/uploads\/2016\/06\/symbol-select-295x300.png\")
<\/a>\n![\"exportation](\"http:\/\/www.analystik.ca\/blogue\/wp-content\/uploads\/2016\/06\/export-setting.png\")
<\/a>\n