UI Design: 4 Important Tips for Better Mobile App and Web Design
When we start designing graphics for mobile app development or websites on mobile devices, some important elements we should keep in mind are things that make our work more effective and responsive in terms of design and time. The following tips will help you before you start working on a project and decide on the best practice to do it.
1. Design for Multiple Resolutions
When you design graphics for mobile apps, you have to consider that screens are smaller than the large desktop monitors you’re used to design for. Those large screens usually display graphics at 1920 x 1200 and higher resolutions. 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. For Web Design, Use a Fluid Layout
Smartphones come with a 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. Control the Sizes of Images
The image format you choose goes a long way when it comes to creating usable graphics in mobile app development. Instead of .gif, use .png as your preferred format. This format gives you greater color depth, with variable transparency and it’s also fully lossless; the .gif format has either fully transparent or opaque pixels while the .png format comes with up to 254 levels of partly transparent pixels, which allows you to take full advantage of alpha transparency.
4. Image Format
Smartphones also vary in their color support, so you need to design your graphics for color support. Phones like Blackberry and HDTV 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 from 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.
GIF
Graphics Interchange Format (GIF) is the file format commonly used to display indexed-color graphics and images in Hypertext Markup Language (HTML) documents over the World Wide Web and other online services. GIF is an LZW-compressed format designed to minimize file size and electronic transfer time. GIF format preserves transparency in indexed-color images; however, it does not support alpha channels.
JPEG format
Joint Photographic Experts Group (JPEG) format is commonly used to display photographs and other continuous-tone images in hypertext markup language (HTML) documents over the web for multiple online services. JPEG format supports CMYK, RGB, and Grayscale color modes, and does not support transparency. Unlike GIF format, JPEG retains all color information in an RGB image but compresses file size by selectively discarding data.
A JPEG image is automatically decompressed when opened. A higher level of compression results in lower image quality, and a lower level of compression results in better image quality. In most cases, the maximum quality option produces a result that is indistinguishable from the original.
PNG format
Developed as a patent-free alternative to GIF, Portable Network Graphics (PNG) format is used for lossless compression and for display of images on the web. Unlike GIF, PNG supports 24-bit images and produces background transparency without jagged edges; however, some web browsers do not support PNG images. PNG format supports RGB, Indexed Color, Grayscale, and Bitmap mode images without alpha channels. PNG preserves transparency in grayscale and RGB images.
SVG format
SVG is a language for describing two-dimensional vector graphics. SVG images can be created and edited with any text editor. SVG images can be searched, indexed, scripted, and compressed. SVG images can be printed with high quality at any resolution and is an open standard.
When it comes to design the iconography, some mobile developers specialized in Titanium studio ask for SVG files containing all the icons since they have the tools to extract all the elements from one file instead of giving him an image PNG file for each on the icons. Make sure to consult the developer working on the project so you can choose either to work with SVG or not.
WBMP format
WBMP format is the standard format for optimizing images for mobile devices, such as cell phones. WBMP supports 1-bit color, which means that WBMP images contain only black and white pixels. The are small sizes images, for the most basic (just to not say old) mobile devices.
As you can see there are multiple choices to decide what to work on, remember that final design will get in the hands of a mobile developer to do the magic, stay in touch with the developer to avoid the need to change the format and “do all over again”
About the Author
Rishwan Muneer Butt is an UX/UI Designer with 4 years of experience working in electronic media, print, web, desktop and mobile applications. He holds a degree in graphic design from Karachi University, Pakistan. He currently works as a UI/UX Designer at iTexico for web and mobile applications.
Post Your Comment Here