{"id":1537,"date":"2015-02-28T15:01:32","date_gmt":"2015-02-28T14:01:32","guid":{"rendered":"http:\/\/www.flagsoft.com\/cmswp\/?page_id=1537"},"modified":"2019-08-07T14:36:34","modified_gmt":"2019-08-07T12:36:34","slug":"how-to-design-an-app","status":"publish","type":"page","link":"https:\/\/www.flagsoft.com\/cmswp\/product-testing\/how-to-design-an-app\/","title":{"rendered":"How to Design an App"},"content":{"rendered":"

How to Design an App<\/h1>\n

What I have experienced designing Apps<\/h2>\n

Everything starts with a design, right? Maybe. Maybe not. It depends.
\nThe underlying design and the user interface works together to
\nform a design experience.<\/strong> Read here how I did design for some Apps.
\nWhat applications I used and what problems I had to solve.<\/p>\n

\"[cml_media_alt<\/p>\n

 <\/p>\n

What to display?<\/h2>\n

Well, this is a good question. If you have text on your design make sure it is readable also for very small sizes.<\/p>\n

I use a tool to display all icons in all different sizes just to make sure that the design is readable.<\/p>\n

\n

Tips<\/h2>\n

Size and form<\/h3>\n

The size I use is 1024 by 1024 pixels. I save it as PNG without transparency (alpha channel). No rounded corners needed. The device itself will round the corners.<\/p>\n

App Icon<\/h3>\n

This is the icon you will see on the screen. The first impression of your app.<\/p>\n

Launch Image<\/h3>\n

This is the image that will be displayed after you start the app. But more and more this image is getting not so important. For example Facebook and other apps don't use a launch image or the launch image is the same as a background of the app. This does in fact suggests that the app is already loaded - but it's not.<\/p>\n

TIP: Which Software should I use?<\/h3>\n

Well, this is totally up to you. I just use InkScape and GIMP very often. They work well. But also any other software or application will do it as well.<\/p>\n

Keynote maybe works also for launch images. But as far as I know Keynote limits you to store images less then X x Y pixels.<\/p>\n

TIP: How to remove transparency, alpha channel?<\/h3>\n

If you work with a Mac you can do it just with Preview as shown in the video tutorial.<\/p>\n

Choose File<\/strong> > Export<\/strong>. Then select PNG<\/strong> from the list. Unselect [ ] Alpha<\/strong>. Finally hit Save<\/strong>. Done!<\/p>\n