5 Tips To Help Designers Create Assets for Mobile Development

Save Designers and Developers Time With This How-To Guide

Mobile Development Comments (4)

It can feel overwhelming trying to track down resources, tools, and processes for designers to use and consider when creating assets for mobile development.

Why? Because they’re scattered throughout the Web.

After years of searching, however, I have narrowed it down these: keeping the user in mind throughout the process, working with your developers, creating accurate assets, plus streamlining the asset creation process in both iOS and Android.

1. Keep the end user in mind at all times.

The most crucial part of any project is the user.

As a result, it is important always to view your medium in its final format.

When designing for mobile, you need to consider the gestural feel and environment of the user.

So, before you prep, any assets during the development of the project, remember to always look at your designs on the device(s) for which you are designing.

There are native and/or custom design elements you use when designing for mobile.

iOS and Android have interface guidelines that designers need to review and use when developing and designing for mobile.

When designing for mobile, don’t worry about having to create composed Adobe Photoshop or Adobe Illustrator examples of every single screen. You need to show the client a large variety of patterns and screens that are used in the application.

2. Use Xcode to ensure developers implement your design correctly

Developers have different ways of implementing your plan.

Designers need to communicate with the developer of the app before they develop any graphics for the alpha of the project.

I have found that developers implement my designs with the greatest amount of accuracy by using Apple’s Xcode to place in the assets directly themselves so I can test how they appear on the device without having to work back and forth with the developer.

It is easy to set up, and you can work with the developer to set the GIT source you will need to place your assets into Xcode.

3. Accurate assets help developers

Assets need to be created accurately. Otherwise, the design will look like assets are jumping from screen to screen, for example, or they will be resized incorrectly for multiple platforms.

File naming is important for your assets.

The file extension of the assets needs to be accurate, and naming across various screen sizes needs to be consistent.

Otherwise, the application will not read the files accurately during the development process.

Below I have listed tools, processes, and/or resources for Android and iOS that will help you when prepping your assets for development.

4. Save time in iOS by creating sprites

iOS resolutions - November 2014Over the past several years, various screen dimensions for iOS tablets and phones have popped up, along with a slew of icon sizes. See our post on designing for multiple screen sizes for more information.

Ivo Mynttinen has iOS dimension “cheat sheets” that are very handy when prepping assets.

Also, there are some best practices on the iOS Human Interface Guidelines website that are very helpful in creating specific assets.

With iOS 8, app icons now need to be added to the application package as plain, squared PNG files in various dimensions. The rounded corners should not be included in the final exported assets. When rendered on a device, iOS applies multiple effects to app icons.

However, some developers now use a PDF file to generate all of the app icon sizes. You only need to provide a developer with a PDF file at 1024x1024px in size. See here for a simple shell script that we use to convert a PDF to all app icon sizes.

If you want to add an effect, such as a stroke, test it out on a device to see how wide you need the stroke to be on the outer edge of the square icon you provide the developer.

SVG sprites reduce pixilation, workload, and load times. As a result, I suggest prepping assets as an SVG sprite from Adobe Illustrator.

If you are making the sprite from Illustrator, I suggest using the settings listed below (note that disabling the “Responsive” option merely ensures that your image won’t be scaled to its container):

SVG from Illustrator

Also, development studio Oursky saves your time and helps you with accuracy thanks to their automatic app icon generator. This allows you to see how the icon will render on the device.

Making different icon sizes

5. Streamline your asset prep for Android, too

Android screen sizes vary dramatically, and saving assets out at various resolutions can be challenging.

To sum it down, four essential screen densities are used. I have listed them below:

Android resolutions

Many designers might have been creating the designs in these four sizes and then saving out the assets separately for the developer.

However, I have found a tool online called 9Patch Resizer.

It saves days of work and creates smoother production pipelines by taking an xhdpi PNG file – or a Draw Patch 9 PNG file – and generates ldpi, mdpi and hdpi PNG files automatically.

I also suggest creating Adobe Photoshop or Adobe Illustrator comps at the larger resolutions and then working downward to generate the rest of the assets.

Besides, there are some best practices on Android’s Developer Guidelines website that are very helpful in creating specific assets.

Image sizes for Android 9patch

Click here for a list of books to get you started with mobile development. If you have any more questions, drop a line in the comments below. Or, if you want help to develop a secure, custom app for your company, contact us at Float.

The following two tabs change content below.
Heather is a UI/UX specialist for Float. Heather takes the lead on all aspects of the user interface process including design and testing. She is responsible for providing the data layer design, resources and alternative paths in order to accomplish objectives using in-depth Web and application design and development experience.

» Mobile Development » 5 Tips To Help Designers...
On January 19, 2015
, ,

4 Responses to 5 Tips To Help Designers Create Assets for Mobile Development

  1. Jack says:

    Mobile development is the most important and necessary because today there are many people are interested to access internet using mobile and smartphones. Above listed assets are very helpful for developers to design a website mobile as well as user friendly.

  2. Mary_ M says:

    You can try using Mobile Assets Generator it’s a free tool can Generate Android (mdpi, hdpi, xhdpi, xxhdpi) , iOS (@x, @2x, @3x) for all of your mobile design in your browser, no uploads, no downloads.

  3. Ivy Baker says:

    I liked that you pointed should keep the user in mind. It does seem like a good thing to be aware of when you want to make a good app. I personally would want to make sure that anyone could use the app. Especially if you want to make a good amount of money off of it.

  4. iprism says:

    Thanks for sharing such a grate, very informative and useful article to mobile app UI designing tips.
    Keep it up.

Leave a Reply

Your email address will not be published. Required fields are marked *

« »