Omega Mobile: Mobile Experience Design Blog
We’re Passionate about Mobile User Interfaces, Experiences, Interactivity, and more!

 


If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

When designing mobile user interfaces, we always face the design challenge of pixel density on a mobile device. What you see on a computer screen is usually larger than what you will see on a mobile device and sometimes we don’t have access to the target device we are designing for.

Mobile UI Design Tip Pixel Density

There are a few ways to address this and make sure that a mobile user interface design is appropriate when smaller. One solution is simply shrink it down to the exact size of the mobile device we are targeting. This is fine to determine if the general layout works. However, it doesn’t work well with fonts as the text can get distorted and then you can’t determine whether you’ve chosen a good font size.

Many graphics applications (Photoshop, Flash and Illustrator to name a few) allow simultaneous views of the same visual document. This is an extremely helpful tool when designing mobile user interfaces.

In the above screenshot, two views of the same document are shown. The one on the left is at 100% and the one on the right has been reduced to match the exact size of the mobile device screen we’re targeting for this user interface. We can make any changes to the image on the left and manipulate the view in any way we want while keeping the right view open to see how our user interface will look on our target mobile device. To do this in Photoshop, with a document open, select WINDOW>ARRANGE>NEW WINDOW FOR…

Another way we use dual screenshots is to make sure the user interface controls for a touch screen UI are spaced correctly. We simply touch the design that has been sized on the monitor to match the mobile device to determine if the user interface elements are far enough apart.

The Mac has a tool we like called Screen Shrink that allows us to literally shrink a screen so we can see what part of it may look like on a mobile device. This also works well when you see an inspiring design on the web and wonder if it could work well at a smaller size.

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Leave a Reply