# Three dimensions to rule 'em all!
I’ve recently open sourced one of my 3-hour-apps, namely himbo.
This iOS App basically let’s you create a basic, single colored, background for your iPhone.
This is my story on how I integrated 3D Touch to improve its UX.
To create those backgrounds three essential values have to be modified to create the desired color.
Hue, Saturation and Brightness. By having a UIColor initialized with those HSB properties, we can create a blank wallpaper.
Now, the actual trick is to give the user a good experience and make it fun to create this color, rather than providing him with a bunch of sliders.
I’ve decided to use the display itself as the method of input, mapping the two available dimensions at three target values. The y-axis controls hue, when holding the device in portrait mode we have a high variety of possible values available and mapping all possible hue values onto the full height of you iPhone’s display just feels right.
The next step is to divide the x-axis into two equal parts, namely the upper and the lower part, the upper part is used to control saturation, the lower part is used to control brightness.
So again, to clarify this and make it easy to understand: Moving your finger up-/downwards to change hue, move left/right in the upper are to change saturation and in the lower area to change brightness.
When Apple released the iPhone 6s with it’s awesome 3D Touch capable display, I’ve mapped the third value, brightness to the intensity you push your finger onto the display. This no results in three values being mapped to three types of input: x, y, and z (3D Touch).
Go check it out yourself and spread the work.
The App will hopefully be soon out in the App Store.
P.S. If you’re interested in how the tutorial works, take a look into Tutorial.swift. Also there’ve been a couple of components refactored out of this projects, e.g. PulsingLayer or ShareView, take a look at ’em.
Cheers, Marcus