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 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 important part of any project is, of course, the user.
As a result, it is important to always 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.
When designing for mobile, don’t worry about having to create composed Adobe Photoshop or Adobe Illustrator examples of every single screen. You just 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 design.
Designers need to communicate with the developer of the app before they start developing 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 that I can test how they are appearing 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 very 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
Over 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.
In addition, there are some best practices on the iOS Human Interface Guidelines website that are very helpful to 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 various 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 pixelation, 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):
Also, development studio Oursky saves you 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.
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, there are four basic screen densities that are used. I have listed them below:
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 in size to generate the rest of the assets.
In addition, there are some best practices on Android’s Developer Guidelines website that are very helpful to creating specific assets.
Click here for list of books to get you started with mobile development. If you have any more questions, feel free to drop a line in the comments below. Or, if you want help developing a secure, custom app for your company, contact us at Float.
Latest posts by Heather Ford (see all)
- 5 Tips To Help Designers Create Assets for Mobile Development - January 19, 2015
- 10 Tips for Creating an EPUB for Mobile Learning - August 20, 2013
- 10 Benefits of EPUBs for Mobile Learning - August 15, 2013