Blog

Mobile Design: Considerations Throughout the UI Design Process

Posted on Thu, Jan 30, 2014 @ 10:50 AM

Mobile UI Design Considerations in the UI process using Photoshop

Having organized files is really vital. In my experience as Mobile App UI Designer at iTexico, I’m concerned about the organization of files to avoid wasting time. I mean, if you can't get your files organized in a reasonable way, how can you call yourself a good designer? As creative designers, we tend to often get frustrated with mobile app developers when they take liberties with their work. But we have to understand they’re not guilty at all.

So here are some recommendations for  better working performance from my personal point of view.

Care about the layers in your files

1. Name Layers

Often, the biggest source of anguish amongst PSD files users, is messy and unnamed layers within the file. Take your time and make sure that the layers are named.  With this practice, you instantly decrease confusion and improve acclimation inside unfamiliar documents.

2. Organize layers by groups

This is really a good practice and by following this small and quick step you ensure an easier navigation inside the file besides faster editing.

3. Delete unnecessary layers

An excellent advice to avoid a big size file or future failures in Photoshop’s performance. If you have lots of invisible layers and you’re sure you won’t need it, then try “Delete Hidden Layers” by clicking on the little arrow in the upper right corner of the Layers Palette. Here’s the option:

hidden layers

4. Use Photoshop’s “Layer Comps”

With this tool, every time you activate or deactivate one hidden layer or a group of hidden layers in the Layers Palette (our regular palette), you'll be able to “record” this as a state within the "Layer Comps Palette" (our complementary palette) and by making different combinations when you're working with multiple layers files, storing every step in the progress and exporting every state as an image anytime you need it. Here’s a graphic in which you can see the difference between palettes:

layers comps final

Managing images can make the difference

The best practice is not to stretch or flatten images and this applies for button objects too. So, keep your shapes as vectors. In case you need to rasterize one of those objects, create a copy of the vector before.

1. Don’t abuse the use of masks

Apply masks only to groups of folders instead of using the same mask on individual layers.

2. Snap to pixel

Snap until there’s nothing left to snap to.

3. Use Blending moderately

Sometimes during the process of design, one or more colors are generated by the amalgamation of 2 overlays, 4 multiplies or so. Make sure the color you’re proposing can be easily reproduced.

blending modes

4. Use Masks, Smart Objects & Adjustment Layers to avoid deleting pixels

If a figure needs retouching, or a logo needs resizing, or you choose to go back to full color photos instead of black and white, it’s a lot easier when items aren’t erased, rasterized or flattened.

Shapes can be your allies (if you know how to use it)

Photoshop’s rounded rectangle vector tool appears like the ideal candidate for the task, until you realize that the edges created by default are blurry and inconsistent. Keeping your objects as vectors means that you’ll be able to resize your document and corners will take full advantage of any resolution.

Ensure to activate the snap to pixel option and constantly review increasing the zoom over and over.

There are many tricks to ensure perfect rounded corners for an item. I suggest using vector shape combinations, like in the example below:

Creating rounded shapes

According to this sequence, you can see how to build a rounded square by using different shapes for creating another one and gaining the aspect of pixels successfully.

Type has many ways too

1. Stop resizing text with the Free Transform tool

Give it a whole number value instead. The consistency of your text objects is the key. It doesn’t make sense to use fractions and decimals in Photoshop.

2. Sharing is also a good practice

Make the fonts you've used available for the designers or developers, and make sure these fonts are licensed to be shared. There’s nothing worse than needing to edit type and not being able just because you don’t have the fonts.

3. Don’t stretch or enlarge the type

Besides looking awful, there’s no easy way to do it via HTML or CSS.

4. Adjust your text boxes to the necessary text field

Longer than necessary text boxes can decrease the performance and cause trouble when selecting the layers behind text objects.

5. Use separate Text Boxes

If you have a set of paragraphs, give them their own text box. It takes more clicks (and time) to find the font family and size of multiple types of text within one text box than working with different boxes.

Effects: less is more

Every designer should use effects and filters in moderation. In this case, more filters doesn’t means a better design.

1. Tiles

If you’re going to use a texture, then make sure you know how to use and duplicate tiles without losing quality in the process of generating a tiled background.

2. Gradients

Gradients are a great way to add life and shading to surfaces. The best practice is to use vectors and adding gradients maintaining their properties as vectors. Also you must ensure that the UI elements can be scaled and reused.

Adding dithering (noise) to a gradient produces smoother results. Non-dithered gradients can often contain visible stripes. You can see the difference between both cases in the images below .

dithering

3. Strokes

Using outside strokes when you really meant to use inside strokes could affect the width of a shape. So, make sure you are adding this property in the right position.

As you can see, the recommendation for obtaining a better UI process are plenty and truly diverse, and it finally depends on the style of work for each designer. For now I’m covering the basic steps through the design tools of Photoshop which can be incorporated as a part of your own process of design.

Have something to add? Leave your comments below.

About the author

Christian Alatorre holds a degree as an Integral Designer. He’s been involved in Graphic and Visual Arts and he is an advertising expert and art director with many years of experience. 

Contact Us

Tags: Tools, Useful information, UI Design