Tutorials

>

COSMOS

>

Prelude To Design

V0.1

We started out in early 2014 by rebuilding the guts of C4, and when that was done we thought an app that showed all the examples would be great.

After trying out some of the designs we had we realized that the example content simply wasn’t designed for being in an app. ¹

So we scuttled that idea.

V0.2

The second idea was to build an experimental dynamic logo for C4, wrap that in an app an give it some nice interactivity. In late 2014² we put our heads down on the design of a new dynamic logo.³ The logos looked like this:

We started out designing the logo, tossing back and forth a bunch of ideas about branding, design, meaning, and so on… In the end, we wanted to experiment with an isometric logo whose lines would constantly shift, creating strange visual distortions and effects.

Designing the logo in Illustrator was a pain because of the dynamic nature we were going for, and Illustrator just doesn’t cut it for generative visual output. Also, the main part of the difficulty wasn’t in constructing the logo,⁴ rather it was in translating the concept into one that I could render dynamically. Jake (jakemakes.com) would make a couple of comps, then pass them off to me, and I’d say things like “okay, which lines are moving where and when… and how long do they take” and so on…

So, I built a little app for Jake that he could play around with in Xcode. Essentially, he’d be able to look at the designs he’d created in Illustrator and trace them on an isometric grid using simple function calls like this:

ln(4,10,6,12)
ln(0,10,10,10)
ln(8,8,10,8)
ln(8,8,8,10)

After laying out a couple of designs, Jake would pass them off to me and I would know exactly which lines were moving between different versions of the logo.

Here’s a sample of one version of the software I wrote for him.

We ended up leaving this idea in the dust, for two reasons. First, we weren’t happy with the branding concept. Second, it was going to take a very long time to get the balance of movement right, and we were being sidetracked by that rather than focusing on making something productive.

V0.3

The third idea was a riff on the first, we were going to rebuild the examples for the Swift version of C4 and introduce a new brand at the same time. Instead of recreating all the old examples we were going to create new ones. On top of that, we were going to build some more complicated components into the app itself that we could write about.

The focus for this was to “show” what C4 can do, while at the same time building out some nice pieces that people would want to learn how to build with C4. For example, we were focusing on the transitions between views, as well as the menu itself.

We also started to build out a Twitter feed that would use C4 components for the animations and interactions of the interface. We had some pretty nice sliding features on the title bars of UITableViewCell elements, and were bringing in feeds very easily. We thought that if we built “components” that people could drop into their projects, this would be a great feature.⁵

After sitting with this concept for a while we felt it wasn’t going in the right direction. The experience felt more like a solution than an app or an experience, like we were ticking off requirements… Featuritis.

V0.4

Finally, I had some time to play around with the new version of C4 that Alejandro and I worked through the end of December and all of January. I wanted to generate some new ideas for writing tutorials and site content that looked really great. So, we started looking at a lot of animation-heavy styles that have been in movies and experimental interfaces.

C4 is a perfect engine for this kind of work because it’s very powerful when it comes to animation control, and it’s inherently interactive: you can design futuristic interfaces for tablets.

Eventually, Jake came up with a really great idea of basing the concept on constellations and moving through the universe. We started to gather technical and aesthetic pieces to help generate ideas.

After a couple of hours, Jake started pulling together the first visual concepts for what would become COSMOS.

Postamble

COSMOS would have a unique menu that let the user navigate between a bunch of different constellations, packed with tons of nice animations and with everything sitting on top of a complex parallax background. The idea was simple and elegant enough to move forward.

Moreover, the app satisfied a ton of things we wanted to achieve. Primarily:

1. Shows off C4’s animation and interaction capabilities
2. Has some unique elements like the menu, and the background parallax
3. The design workflow includes the use of some cutting edge software like PaintCode
4. There would be a lot of nice finishing touches, like the little bars at the bottom of the screen
5. Isn’t overly complex: only a single view with a popover.
6. Despite its simplicity, there’s actually a lot to build and it provides a ton of tutorial material
7. Is shippable, and not just an example.

This whole process covered a year, but rarely did we spend focused time on the project. Had we compressed all the time we spent designing and building, we probably would have come out shy of three weeks…

The amount of time in between bursts of effort gave us the perspective we needed to abandon ideas, which is incredibly important for making sure you’re on the right path.