Recently I was handed a great opportunity to be involved with the Colorway product line at The Foundry. The experience has had a positive impact on my outlook with many interesting ideas, open conversation, creative thinking, passionate and dedicated professionals. Overall it has reinforced my belief that such qualities hold value and are personally fulfilling .
Any hoot, back to the real world and talk of work because I am very proud of the app I implemented while there. Although iPad was the only target requirement for the original project I’ve compiled on iPhone 6 Plus and included a demonstration film to showcase the features which will probably have the greatest impact on UX. Although a little detail is lost in translation.
The various preview docks and HUD palettes utilise a common abstracted DataSource protocol. Implemented as a scalable inheritance model, it adopts common control interfaces like UITableView and UICollectionView and exposes utility initialisers to populate custom DataSourceSection item(s). This proved to be a very adaptive approach, as the physical control interface was decoupled from the driving data interface, allowing a controller to interchange between instances. Tasks like reloading and selection tracking became automated. Sweet.
The Foundry’s rendering technology was included as static library, written in C++ and making use of QT this meant the Xcode project became a Objective-C/C++ hybrid. The library exposed an OpenGL frame buffer object which I used to construct a GCD block based system to buffer preview images, which were offloaded into an NSCache for management. Isolating the QT code this way later became necessary so the decision proved to have many benefits, for example the system was also utilised as a filtering channel for the all the dock palettes content.
From the start the product manager Matt and I agreed Colorway for iPad should have a gesture presence, moving away from any historical desktop clutter, hinting at a natural discovery space. Swipe-to-share on the main canvas is a small example of this idea, a new expression adopting a common UX language and its also interesting how this appears to introduce a new relationship. A vital and important element of the app was the inclusion of a HSV colour control for editing light properties. During the early weeks of development I sketched a number concepts, see Figure 1, hoping to discover an intuitive solution to a surprisingly complex design paradigm.
When it comes down to the actual implementation my natural approach is usually to reduce the challenge, then stack complexity. Developed as a scalable and dynamic UIControl subclass, its constructed from a number of components:
The segment cells exposed obvious properties like corner radius, line width and arc length. The sample is constructed using two curves one above the other then applying a transformation matrix to obtain the user focused rotation.
Slider bars are drawn using clipping against a stroked copy of a dynamically calculated radial path, a linear gradient fill is then applied perpendicular to the original curved. The effect was very convincing with up to 2 or 3 colours but lost quality as more were added, the control was extended to support generated images. I wrote a small Mac utility app to export a slider bar image. Depending on the cell offset dozens of segments could be supported, the final version was actually scaled down for a simplified interface. Slider bars also adapt to the users previous rotation offset.
On a number of occasions I observed and became interested to learn how new relationships develop and evolve. So for example it was always the intention to add a droplet effect on the colour control, after completing first stage prototyping it appeared to fill an ‘experience space’ or void between: initiating and utilising the control. Bringing all the parts together helped complete the narrative, bridging the journey. Really awesome.
I very much enjoyed my time at The Foundry, the Colorway team were friendly people, we had burgers with cheese on my final day which were very tasty.
Colorway for iPad was scheduled for release November 2014.