Published on | Prototyping: From UX to Front End — Medium Flow

About a year ago we launched an alpha called C4 Studio with the tag line:

Import Sketch Designs. Animate in C4 Studio. Export Dev-ready Code.

Today, we’re launching a new version of the same software and… That tag line still rings true.

So, what’s the difference? A lot, really. But, before we get into those details, we’d like to let you know where the idea behind Flow came from.

C4 — Creative Coding for Artists (and Designers)

Years ago we released an open-source creative coding framework that focused on giving creatives the ability to explore, create, and produce interactive components that could be used 1:1 in an iOS application. Today, that API is called C4 which in and of itself has a bit of history.

Cocoa For Artists (2010) – We created a new creative coding framework for OSX, whose goal was similar to Processing and OpenFrameworks: give artists a powerful medium for creative exploration. The name was an homage to Cocoa for Scientists, a brilliant set of articles on using Objective-C / Cocoa frameworks for scientific research written by Drew McCormack.
C4A (2011) – A slight modification to the name occurred so that we could conform to the 2-letter prefix style when producing APIs in Objective-C.
C4 (2012) – Dropped the “A” when we realized that the API would be awesome for designers who want to create interface components for real, shippable applications.

The current C4 icon.

For more on C4, check out www.c4ios.com and have a read:

A Brief History of C4

C4 Studio

We used C4 for years in our production work, creating applications for companies like SAP. Check out the McLaren data-vis project we produced:

The F1 Project — Data Viz

Despite how far we pushed the framework, we found that a pure coding API just wasn’t getting the user-base that we hoped.

So, in 2015, we applied for funding to create a new design tool that would be based on the philosophies behind our open-source framework. We wanted this tool to be easy to use, and allow designers to explore in the same medium they were producing for — i.e. if they created something it would be easy to put it directly into an iOS app.

For our funding application, we needed a title, so we slapped a Studio onto C4 and never really thought twice about the branding.

Thanks to Jake Lim, it was a solid brand / logo and really served us well for a long time.

App Icon for C4 Studio (2015)

The Brand — Issues.

Even though the logo is great, making reference to our open-source project, there are some fundamental issues with its associations:

C4 is an explosive.
The reference to Cocoa is outdated.
It’s not actually a studio or a suite of tools.
It doesn’t describe what it does or give a sense or emotion of what problems it solves.
The logo was really close to that of C4, making it a bit confusing.

So, this summer we decided to put the brand to rest.

The New Brand – Process.

What we really wanted was a brand that was modern, and reflected the spirit behind the tool we’ve been developing for the last couple of years. So we put the team on it to question what the principles and values of the tool were:

What is our product really?

It’s a tool that let’s a designer create in the same medium they’re designing for. If they create an animation it will look 1:1 with the final product. In doing so, it solves many handoff problems, increasing the flow from design to development while allowing teams to work better together .

How we got to Flow.

Our process for getting to Flow was:

Generate a massive list of names.
Vote.
Discuss.
Eliminate.
Discuss.

After isolating a name that reflected our ideals and the product, we applied the same process to a look and feel.

Generate a massive list of potential brand/logo styles.
Vote.
Discuss.
Eliminate.
Discuss.

After isolating a couple of styles, we handed the process off to Nicolas Prieto, whose task it was to come up with solid brand directions based on the three names and three styles we had all discussed and chosen.

Some early sketches.

After a ton of concepting, then flying to Vancouver from Mendoza, Nick presented us with a single brand concept… we didn’t need to see any more.

The New Brand – Concept.

The name and the visual concept reflected the ideals of all our team members, and much more:

Basic, geometric shapes were something that everyone really liked – somehow we’re all math nerds at heart.
The forms used were simple, clear, elegant and communicative – like we hope the experience is with using FLOW.
The brand colours riffed on C4 Studio, so we preserve a bit of the history behind the project – and, the choice of colors were distinct compared to other products.
We could use the iconography as actual elements in our app as play buttons, keyvalue handles, etc. – this part really sold the whole concept.

Brand name, in icons.The app icon.

Here we Flow!

So now we have FLOW and we hope it helps teams make animations for mobile that generate dev ready code!

Our Features

Check out our features article for an overview of the newest release:

Flow Beta

Our Site

If you want to know more about the product, just visit our website:

www.createwithflow.com

Get a Copy

If you want to try it out, grab a copy from:

download.createwithflow.com

…where you can get a license and a .dmg with all our love and hard work bundled within.

Get in Touch

Have some more questions? Connect with us at:

info@createwithflow.com

Or, Slack Us…

join-createwithflow-on-slack

❤︎

A Brand History of FLOW was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

A Brand History of FLOW

Cool stuff, every week

More Articles