Mobile Design: Considerations Throughout the UI Design Process
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:
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:
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.
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:
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.
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.
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 .
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.