Mobile

6 Tips on Designing Graphics for Mobile Devices

Designing graphics for mobile devices is a challenge compared to desktop devices. Designers need to understand the complexities of working with mobile technology. Here are six ways to make your graphics work well on mobile devices.

1. Design for Multiple Resolutions

mobile-tip-1_min

When you design graphics for a mobile device, you have to consider that the screens are smaller than the large desktop monitors you’re used to designing for. Those large monitors usually display graphics at 1920 x 1200 and higher.

Mobile devices are a whole new world. You’ll need to remember that each mobile device has a different resolution and size. You can no longer design for one size and resolution. Instead, create multiple graphics to show how they will look on different mobile devices.

2. Use a Fluid Layout

 mobile-tip-2_min

Most smartphones come with G-sensor. This sensor understands how the phone is oriented and then displays the information correctly. That means images will show up in portrait or landscape setting depending on how the user is holding the device. It’s important to understand this as you design.

You should apply a fluid layout for your designs on mobile devices. If you’re using background images in your application, you’ll want to stretch or tile them. You’ll need to create a portrait and landscape layout for your app so that the graphics fit each screen orientation.

3. Keep Your Files Small

mobile-tip-3_min

When you design for mobile websites, you’ll need to pay closer attention to the user’s connection. Try to optimize images for a faster load time because not everyone has 4G speed. This necessity comes from the way mobile devices work. Though service providers continue to bring out faster speeds, in some areas, coverage stays spotty at best.

At the same time, there are users out there who don’t have unlimited data plans. Put simply, these folks have to pay for their data downloads. As a result, you’ll want to cut down on code and take away unneeded comments and tags. Keep your files and images small and compressed to bring down time for downloads.

If you create an app, you need to remember the file size restrictions. If an app is over 50 MB, the user will need a Wi-Fi connection to download it. If you create an app designed for on-the-go, it’d make sense to keep it under 50 MB.

4. Use PNG Image Format

mobile-tip-4_min

The image format you choose goes a long way when it comes to creating usable graphics for mobile devices. Instead of .gif, use .png as your preferred format. This format gives you greater color depth. With variable transparency, it’s also fully lossless.

The .gif format has either fully transparent or opaque pixels. The .png format, however, comes with up to 254 levels of partly transparent pixels, which allows you to take advantage of alpha transparency.

5. Optimize Your Colors

mobile-tip-5_min

Smartphones vary in their color support, so you need to design your graphics for this. Phones like Blackberry and HTV support 65,000 colors. On the other hand, smartphones from Nokia and the iPhone support 16 million colors. That makes a big difference, as with 16 million colors, you’ll show better graphics that have sharper and brighter images.

If you’re working on a Windows PC to create graphics for iPhones, you’ll want to go to the View menu to set “Proof Setup” to “Macintosh RBG.” Doing this helps correct your colors. You’ll get a soft proof of the colors to stand in for the standard color palette for Mac OS, and that will help you to pick your colors and contrast.

6. Use Relative Pixel Sizes

mobile-tip-6_min

When you’re creating designs for smaller screens, you need to stay away from defining dimensions in absolute pixels. For example, if you set a width of 200 pixels, it may turn out to take up most of the screen on certain phones. Instead of setting absolute sizes, use relative sizes. Use attributes like percentages and ems. This will help make sure that the size automatically adjusts to fit the screen it’s displayed on.

There are many ins and outs to designing graphics for mobile devices. Learning the little details of how mobile technology works is crucial for making mobile apps and websites that wow your users.


Book

Affiliate

elegant wordpress themes

This Post Has 8 Comments

  1. Noumenon72 Reply

    > Use things like percentages and ems.

    It seems this article is implicitly targeting web page designers, but anyway, on Android you have dp (device-independent pixels) and they’re super handy.

    • Calvin Sellers Reply

      Noumenon72, thanks for your feedback. That’s a good point about the Android device-independent pixels. I did write this with more of a focus on people that already design standard web pages but are moving more to the mobile arena.

  2. Gary Nichols Reply

    Design does make a huge difference when designing for mobile. As someone in the mobile app world myself I know how important this can be. If you are as interested in apps as I am than I recommend that they register for The App Show 2014, January 30 – February 1, 2014 at The San Diego Convention Center (www.theappshow.org). With 3 full days of exhibitions, multiple tracks of need-to-know sessions and meetings, high-level keynote speakers, high-octane networking receptions, business development opportunities, 100’s of showcased apps, 1,000s of new contacts, speed meetings and app competitions. Register today!

  3. Karan Sharma Reply

    Good work Calvin….Amazing tips for designing graphics on mobile devices, I’ve gained a lot from this and i’ll try to start taking these steps asap. Thanks for sharing.

  4. JF Reply

    Interesting! Thanks for sharing. Mobile is becoming a commodity, something that everyone takes from granted but the whole industry need to realize it and make things easier.
    Best

  5. Caryl Anne Reply

    Great article! I’m sure this post will help those developing and designing concepts on their phone, especially since doing business on your phone or mobile is becoming increasingly popular. Thanks for sharing!

  6. Catherine Marshall Reply

    I always wondered about how to design with keeping a G-sensor in mind. Using a fluid layout is a great tip. Thanks!

  7. Great Idea Reply

    What great points about mobile website design. I especially found it interesting that you had mentioned that png files are better for mobile phones even though sometimes the counterpart files are smaller.

Leave a Reply

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