Photoshop tutorial: iPad & iPhone app design techniques

Ustwo’s chief pixel-perfectionist reveals the best way to design phone and tablet

Intro


Pixels are the building blocks of all screen designs on digital devices – whether you’re creating the interface for a native or web app, or a mobile site. So you can get the most out of your pixels, Gyppsy, from leading interface design and UX house ustwo, has some simple-to-learn tips and tricks for you.

See also: 86 Best Photoshop tutorials

Following these steps will not only improve your output and save you time, but they also work across whatever graphics application you use from Photoshop, Illustrator and Fireworks to Sketch and Pixelmator.

You may ask yourself why you should bother with little details like this – especially when you’ve got bigger issues to deal with? Well, as with many things in life, when something’s done right it should become invisible to you, but when it’s done badly it soon becomes an annoyance. Blurred edges, objects that jump in position between pages, and colour mismatches are just a few things that a user will notice if your designs aren’t done properly, leaving them with a poor impression of the product or company behind the site. 

Getting these things right shows that you really care about what you’re making, so users will love your app – and/or the brand you’re promoting – even more.

For this Masterclass, Gyppsy has used ustwo’s Honk app as a ‘live example’ of his principles – though as mentioned above they’re just as appropriate for many types of digital design including mobile-focused web design. You can download Honk for free from here.

Time Saved

Loads

Tools

Any modern graphics software, such as Photoshop, Illustrator, Fireworks, Sketch or Pixelmator

Step 1

STEP 1

The first thing to do before you even start designing is to switch off any colour management in your software. This will ensure that colours remain consistent and prevents any jumps in their values when saving out of the app. It’s really important as it means image colours will match up with any that are code-specified in your app or website.

See also: 86 Best Photoshop tutorials


Step 2

STEP 2

Keep it looking sharp. One of the most important and often seen errors is keeping the pixels sharp in your designs. Straight edges that are off-pixel look messy and unprofessional.

See also: 86 Best Photoshop tutorials

Advertisement. Article continues below

Step 3

STEP 3

Once you’ve got your individual components looking sharp, the next step is to make sure when there’s a series of them they follow some sort of alignment on the page. Again, this creates a sharp, professional-looking piece of design. 

See also: 86 Best Photoshop tutorials

Don’t do this by eye, instead use your application’s built-in alignment tools to get it exact. In Photoshop, these are located in the Layer > Align menu.


Step 4

STEP 4

Following closely on from alignment, if you’ve got a series of components that are repeated, make sure they’re evenly spaced – this menu wouldn’t look nearly as good if some rows were thick and others thin. Again, most graphics apps should have these functions built in. For Photoshop it’s Layer > Distribute

See also: 86 Best Photoshop tutorials


Step 5

STEP 5

It’s a great idea to set up some sort of grid for your design. This is a way of ensuring your alignment and spacing are consistent across the entire screen, and that different sets of objects have some core underlying structure to them.

See also: 86 Best Photoshop tutorials

Advertisement. Article continues below

Step 6

STEP 6

The grid is vital to the final piece of the puzzle, ensuring that identical and similar components appear in the same positions across a series of screens. If they don’t, then the user will be faced with components that jump on the transition from one screen to another, which will create a jarring experience for them.

See also: 86 Best Photoshop tutorials


Step 7

STEP 7

With the vast range of screen sizes and resolutions in today’s phones, you need to consider how your assets can be scaled for those devices. For an iPhone this is relatively simple – where possible we’ll design everything at Retina resolution (640 x 960), making sure all the components have even dimensions, which we can quickly scale down by half to get non-Retina assets for older iPhones.

See also: 86 Best Photoshop tutorials


Step 8

STEP 8

To make scaling and alterations really easy, I use vectors wherever possible – these can be infinitely scaled and tweaked, and unlike bitmaps there’s no loss in quality at all. Photoshop’s implementation of these is called Shape Layers.

See also: 86 Best Photoshop tutorials

Advertisement. Article continues below

Step 9

STEP 9

Coupled with Shape Layers, Layer Effects offer styling versatility. Always editable – so you can go back and adjust any of the settings for things like drop shadows and strokes – they can also be scaled when an image is resized. So, for instance, when I make a Retina to non-Retina conversion, the shape and components scale down perfectly.

See also: 86 Best Photoshop tutorials


Step 10

STEP 10

At ustwo, we’re big fans of using HSB as a colour model, as a mental model it makes more sense than RGB. By picking your base colour – in this case orange – and altering the Saturation (S) and Brightness (B) values (keeping the Hue (H) the same), you can create various shades of that core colour that complement the original perfectly.

See also: 86 Best Photoshop tutorials


Step 11

STEP 11

When creating designs, it’s important to consider users with different levels and types of visual impairment, such as partial-sight or colour blindness. One of the simplest, and most useful steps that you can do on the visual front is to run your design through a colour contrast checker. 

See also: 86 Best Photoshop tutorials

By getting the right contrast between foreground and background, you ensure that users can see the important parts of your app.

Advertisement. Article continues below

Step 12

STEP 12

Touch targets are the minimum size you should make interactive components, so that they’re easy to use with fingers – Apple recommends 88px square (for Retina) which is a physical size of 7mm. You can make the visible area slightly smaller, but the actual area that’s pressable should meet that minimum size.

See also: 86 Best Photoshop tutorials


Step 13

STEP 13

When designing for any format, it’s vital to test out how your designs are looking on that platform, rather than basing it on your computer screen. This will show whether your designs work at a smaller size, for things like colours, type size and touch affordance. For the iPhone, we use Skala (bjango.com) to live preview straight from Photoshop onto the phone.

See also: 86 Best Photoshop tutorials


Step 14

STEP 14

A big time saver is getting into the habit of naming layers. We often share files between designers, and nothing is a bigger pain than having to navigate through a file looking at endless layers called Shape 23 copy 12.

See also: 86 Best Photoshop tutorials

Advertisement. Article continues below

Step 15

STEP 15

Once you’ve named your layers, it’s also helpful to order them logically. One of the best methods is to follow the structure of the design itself – so if an object appears at the top of the screen, such as the Status Bar, place that at the top of the layers panel.

See also: 86 Best Photoshop tutorials


Step 16

STEP 16

Once you’ve got everything designed, it’s time to export your files. For our workflow, we’ll place everything on an asset sheet, which serves a number of purposes. It’s a good resource for everyone, we can see where we haven’t got any states for a button, and it allows us to simply run a script on that file to export everything to a folder.

See also: 86 Best Photoshop tutorials