Tacks: Design: Conjuring a Style-Guide

Or: how to get started designing when you're a developer.

I recently [investigated, a, bunch, of, prototyping, tools] and, man were they all super involved. Great tools, but personally too much. What I was looking for was something akin to "Interface Builder on steroids" - some app with more design tools available for composing the UI (blur, border-radius, vector drawing etc), without dropping down to code, and yet still dragging-and-dropping live iOS native components.

Background

My strategy with Tacks thus far (version 1.x) has been "build the app, get the base functionality working, use all-native components, ship it, then circle back later to address the UI". Not ideal, but I had I not done it this way, the momentum required to build the functionality (in my spare time, between full-time office hours as well as travelling), would have evaporated away long before the app ever saw the light of day. Particularly so given I was building Tacks fully in the Functional Reactive paradigm using ReactiveKit, increasing the complexity (and also the awesomeness) quite a bit.

Solid Red colour scheme 😂

Solid Red colour scheme 😂

Now that the basic version is now in the App Store - and v2 is really gathering speed - it's become time to apply a decent design. The problem is, I'm no designer.

This guide is mostly aimed at developers who are working on their own apps. Here are some tips for getting started, based on what I did.

N.B. I still plan to stump up some cash to hire a freelance designer further down the line, but for now (whilst I'm still working on core functionality), I just want to keep following my vision for how it should look and work, and see how far I get.

--

v1.0. Well, it was a start..

v1.0. Well, it was a start..

Tacks UI: Version 2.0

The most daunting aspect of attempting UI design is establishing the overall "Look and Feel" of the app. It's quite a scary undertaking.

I suppose I did give up with the UI design of Tacks v1 - as you can see to the right, I arbitrarily chose a not-generally-respected "Solid Primary Red" colour scheme and just shipped it like that.

But now I needed to work out what my screens should look like for v2. They needed still to be native (a lone developer likes an easy life), but slick enough to be a recognisable iOS10 app, not easily mistaken for an iOS5-era app.

I came across this post at ThoughtBot advising designers to prototype directly in Interface Builder, which I initially disregarded but it gave me pause. Interface Builder? Hmm, maybe that could actually work.

Plan of attack

Colours

The first step is to choose a color scheme. There are tonnes of tools online to assist you with this: my favourite is ColourCode, but Coolors is also great. Pick a few colours, and then choose some different shades within that set to use for emphasis, selected-states, etc.

These are the colours that Apple use in iOS (presumably since the iOS7 flat-design refresh)

These are the colours that Apple use in iOS (presumably since the iOS7 flat-design refresh)

Side-note: I'm pretty excited for this:

Style Guide

Next, create for yourself a style guide. This will be your reference point when you're developing your app, and for all decisions about "what should this bit look like", you can relax and refer back to this document that you made for yourself at the start.

Our document will be a simple Storyboard, created in a separate "TacksStyleGuide" project.

Protip: even if you haven't ported your main project to Xcode 8 yet, the new beta does have a more powerful Interface Builder with extra (live) UI features such as blur effects, vibrancy etc, as well as editing at any zoom level. So, perfect for simply creating a Style Guide at least.

Open a new Storyboard StyleGuide.storyboard, add a new ViewController and just go to town. Create every control that you will need in your app, samples of text in the fonts you will use, buttons in different states, icons, etc. Just keep tweaking until it looks good. If you get to a certain point on the first attempt and decide (like I did) that you're heading in the wrong direction, duplicate the ViewController and start again - you can then compare your attempts later. Likewise, experiment using different colour swatches. After you've created a few of these, get some feedback from people you respect.

An early version of mine. When I asked around, the righthand colour scheme was much more popular. It's handy to create a colour swatch in Interface Builder as a reference point for each attempt - it's just a short View Controller with a horizontal UIStackView and a bunch of coloured UIViews.

An early version of mine. When I asked around, the righthand colour scheme was much more popular. It's handy to create a colour swatch in Interface Builder as a reference point for each attempt - it's just a short View Controller with a horizontal UIStackView and a bunch of coloured UIViews.

Doing it in this abstract way takes the pressure off. You're not even going to use this storyboard in the app, so it allows you to think about the app more generally rather obsessing specifically about one screen.

Preview as any simulated device

Preview as any simulated device

You can also preview any effects live on a simulated device in Interface Builder using the Preview Assistant Editor. Just add a device (by default it shows Localizations, but we want live effects).

You should also run this Style Guide app on a device to preview how it looks - it can be quite surprising the difference between how you think it looks on a big screen and the reality on a small one (especially in terms of font sizes).

Now go ahead and use this design language to sketch out some components which will appear in the app. For Tacks, this will be TableView cells showing locations:

Still a rough attempt, but helping us form an idea of how the real app will look.

Still a rough attempt, but helping us form an idea of how the real app will look.

Great. So, we have a fairly precise idea of how we want the app to look. But now we should somehow automate the process of styling all the components to look the way we want.

I believe that, beyond the most basic app, Interface Builder should be used for mostly setting up AutoLayout constraints and adaptive layout behaviours, rather than minutely pinning down exact fonts and colours.

Automated styling

I believe that, beyond the most basic app, Interface Builder should be used for mostly setting up AutoLayout constraints and adaptive layout behaviours, rather than minutely pinning down exact fonts and colours. The reason being the tedium of having to manually update all your XIBs or Storyboards later if you change your mind.

The aim is really to transfer all the UI decisions you made in Interface Builder into code, and then to use that to style a plain version of your StyleGuide view controller. If you can do this, the theming code you created can be used to automate the styling of all standard controls throughout your app.

Use UIAppearance and tinting as a broad tool, and create custom extensions on UIKit controls for more precise control (UIAppearance only gets you so far).

You should also create some kind of Theme protocol for your project. This will define the typesetting, groups of colours etc, and will be passed (via dependancy injection) to your ViewControllers to allow them to style themselves.

Here's what I came up with:

Here's where I'm at after applying my new style. It's not perfect (or finished) yet, but is quite a leap forward compared to what I had before. Tacks v2 coming soon.. 🐋

Here's where I'm at after applying my new style. It's not perfect (or finished) yet, but is quite a leap forward compared to what I had before. Tacks v2 coming soon.. 🐋

Further

You could take this one step further and implement any @IBDesignable controls in this separate workspace too. I've basically been treating it like a playground for UI design, so this would be the next logical step.

I definitely recommend using a tool like Reveal.app to customize controls on-the-fly.