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:
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.
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.
Apple iOS: 1024×1024, 512×512, 114×114, 72×72, 57×57
Android: 512×512, 96×96, 72×72, 48×48, 36×36
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).
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!
You must be logged in to post a comment.
Per a report from Inside Asian Gaming, which cite[...]
Pennsylvania is considered as the second gambling [...]
Driving the speed of technological innovation are [...]
You can play for REAL Money in Kash Karnival Sept [...]
“I just forced myself into a relationship with P[...]
Thank you for your continued informative posts on the social games industry. I had the chance to meet you at the social games conference and think you have the best looking HTML5 slots I have ever seen. Best of Luck.
I've always wanted to learn how to card count and really love how simple your online article is on it! Great site... it is clear you guys are passionate about the gaming world and know what you are talking about.
Your poker advice helped me cash the last 2 local poker tournaments at Tulalip Casino! Would love for you to do a review of our casino here as we always have an amazing time when we visit. Will check out some of your other game advice now so I can win more!
Very cool site! I've always been a casino lover and never played slots online before, but tried it today and was very fun. Love the lucky lady slots and would love more free coins to play!