Your online social casino games portal for free play slots, casino bonuses and gaming news.
LoginCreate an Account
BETA   •   SUNDAY, JULY 21ST, 2019

Designing for Mobile Screens – iPhone & Android Apps

May 10 admin

So you guys having trouble with designing mobile screens? The whole Density-independent pixel (dp) thing can get really confusing, especially if you are reading about it online so this article is to help you simplify the design speak. When I first started I was mostly confused if designing at 72dpi made sense when higher-density screens are 160dpi. As we all know 72dpi is a web res. and this is what we will be using as our baseline. I’ve seen some app developers design at 96dpi… but I have yet to come across that need for quality and not sure how it effects things on the developer side. So for simplicity sake, let’s keep it at 72dpi.

Here is a simplified process on how to design graphics for mobile screens from a my point of view. For more elaborate designs with many moving elements, the basics of this post still apply, but you just have to think more ‘responsively’ and create assets in multiple dimensions along with screens to ensure fit. Actual dimensions will depend on what you are creating, but my advice is to keep the dimension divisible by 2 or 5 to not drive your app developer crazy.

The Mobile Design Process Simplified

First off, as a graphic designer for over a decade, I have no idea why the Android developer guide would ever tell you to start at in the middle ground of your resolution / quality for your relative artwork that you need to facilitate multiple screen support. (One reason may be if you have a very intensive style app and do not want to increase the app size and time for download, but then again, I don’t like trading quality for ‘quantity’. Simplify the design if that is the case).

So now you know I disagree with lowering the quality of your graphics, this is how I suggest that you get the best mobile app graphics ‘responsive’ to screens:

  1. Make a list of all the sizes you need so when you are in your design program you can just bang them off and cross off as you do them. (I made your life easy by making a list of them below so feel free to steal mine. This generally stays the same every time anyhow) 
  2. Set your Design at 72DPI, regular screen resolution. Changing DPI for your PSDs will just drive you crazy.
  3. Make your splash screen backgrounds with one of the highest resolution background images that you need. I like to start at 1024×1024 & adjust from there. I also like to have ‘extra’ background outside of the actual dimensions, so my BG might be 1600×1600 res. for example.
  4. Make sure your logo is vector (smart layer in Photoshop) or high-res. enough
  5. When resizing in Photoshop, use the Image > Canvas Size option to adjust your canvas dimensions. (Using Canvas size won’t crop your BG)
  6. For direct half sizing of dimensions you can use Image > Image size
  7. Look over each OS style guides for specific specs. such as don’t use tranparency for your launcher icons (refer to native OS styleguides for recommended color, icon styles, shapes etc. Links posted below)
  8. Save files as 24 bit .png files.

That’s pretty much it!

Your asset folder should look something like this when done:

23 different graphics total when designing for both current Apple & Android devices.

Designer Notes:
My naming conventions here are not the best, so you might want to chat with your developer specs for this. I just did this quickly to show the resize factors.

Dimensions List

App icon
Apple iOS: 1024×1024, 512×512, 114×114, 72×72, 57×57
Android: 512×512, 96×96, 72×72, 48×48, 36×36

Splash Screens
Android: 800×480, 400×420, 240×400, 480×320, 480×800, 240×320, 320×480
Apple: 320×480, 640×960, 640×1136, 768×1004 (iPad), 1024×748 (iPad)

Logo (both): 100×100 200×200
Android Featured graphic: 1024×500

To sum it up: When the graphic is on that screen, it will just use a graphic of a different size ratio and we simply just have to design different image dimensions for it.

More Resources & Style Guides, you can read:

iOS Human Interface Guidelines

Custom Icon and Image Creation Guidelines

Android Graphic and Image Assets Support

Icongraphy Launcher Graphics

Android Asset Studio – Auto-create android icons

So what is Density-independent pixel (dp)?

According to developer.android.com, a density-independent pixel (dp) is a virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way.

The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a “medium” density screen. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels. You should always use dp units when defining your application’s UI, to ensure proper display of your UI on screens with different densities.

There attempt to simplify the way that you design your user interfaces for multiple screens, Android divides the range of actual screen sizes and densities into a set of four generalized sizes: small, normal, large, and xlarge. But beginning with Android 3.2 (API level 13), the set of four generalized densities are now ldpi (low), mdpi (medium), hdpi (high), and xhdpi (extra high).

  • xlarge screens are at least 960dp x 720dp
  • large screens are at least 640dp x 480dp
  • normal screens are at least 470dp x 320dp
  • small screens are at least 426dp x 320dp

To create alternative bitmap drawables for different densities, you should follow the 3:4:6:8 scaling ratio between the four generalized densities. For example, if you have a bitmap drawable that’s 48×48 pixels for medium-density screen, all the different sizes should be:

36×36 for low-density
48×48 for medium-density
72×72 for high-density
96×96 for extra high-density

Hope this helped clarify things!

-s-

 
Leave a Reply

You must be logged in to post a comment.

Copyright 2013-2014 Lucky Lady Games - All Rights Reserved.
Facebook twitter Blog Linkedin youtube