Confessions of a Bad iOS Designer

Having designed iOS interfaces and now learning to code them, I can see the bigger picture of creating an app.

I can see just how easy it is to over-design an interface and how darn tricky it is to implement those designs in code.

Simple + lots of images + lots of bright colors = mess

Just over a year ago I was given the task to design the interface for a macronutrients calculator. I needed to design a couple of things:

  • Main view to display calorie, protein, fat, and carb counts
  • Settings view to enter current & desired weight/body fat

Now I see the problem my developer had with me when I was designing this ‘simple’ Macronutrients calculator for iOS. It was far too complicated.

I ended up designing things which just didn’t need to be designed.

Wow, such color.

I’d turned something which should’ve been uncomplicated into a siege of images upon images upon more images. The colors were striking (I don’t mean that in a good way) and I insisted on some sort of odd transparency.

Maybe it was cool to do that a year ago, but I don’t think it was.

If you’re looking for a macronutrients calculator, we’ll actually be releasing a new version very soon. Send me a note if you’re interested in downloading it.

Use stock as much as you can

Turns out Apple gives you some handy stock elements you can use and change the color of to suit your app. Instead of making absolutely everything custom, try using these elements in your design first.

If those don’t work for you try taking a look to see if there are any existing open-source libraries your developer can install with CocoaPods. Here’s a handy list:

Being a good iOS designer doesn’t just mean designing something beautiful. It means making the job quicker, easier, and better for your developer when you hand off your designs.

I took my developer for granted and they managed to pull off my design in code. But it shouldn’t have taken been such a struggle. It was time-consuming and sucked out all the fun.

Specify the size

I use Sketch to design my interfaces. There’s a super useful feature which comes in handy when exporting your designs.

At some point your developer will need to make sure the app looks great on all screen sizes. This means some images will need to be exported at different sizes.

Use the export tool to export your images at 1x, 2x, and 3x.

Make sure you give the files a sensible name (e.g. amazingtable@2x.png) so they can be used and implemented quickly.

It was a really annoying for my developer to have to ask what size each of the elements were. I should’ve made it obvious by naming them sensible things.

Have fun designing & developing

The most important thing is to have fun designing, but also keep in mind someone has to code it.

Having smooth transitions, custom boxes, and awesome gradients can all come later on in separate releases.

Just give your developer the bare bones and get your app on the store as soon as you can.

I’m writing about something that interests me every day for a year. This is day 94 of 365. ✌️