Flixel for iOS
660
18
1
Add to Collection
About

About

UI Design and brand direction for the newest update to Flixel Cinemagraph and Flixel Cinemagraph Pro
Published:
Flixel iOS App
Lead Product Designer
Flixel is an iOS app that lets you create beautiful cinemagraphs. Since joining the team as Lead Product Designer I've had to overhaul everything with regards to the app and the brand. This includes a complete re-design of the iOS app, website, logo and assorted supporting documents. Below are the highlights of my work.
Universal!
Flixel is a universal app available for both the iPad and iPhone. Designing the app at 2x and making sure both landscape and portrait had designs that worked well and looked great.
I designed all of these...
Below is a selection of many of the screens I re-designed. Show here in portrait only. I also did most screens in landscape too. This increased our challenge since you can use Flixel in both portrait and landscape mode we worked on both portrait and landscape layouts in tandem.
App Icons
Since we were keeping the hummingbird as our brand mascot our app icons took a minor upgrade. What is new was the addition of Flixel Cinemagraph Pro. So I worked on developing two app icons that were both similar but colored to match their intended audiences. While Pro took the form of a darker and slightly more colorful direction to show off the seriousness and the multitude of tools inside. The free version of our app remains monotone to indicate a more limited feature set.
Flixel Logo
In updating our Flixel wordmark we wanted to keep some of the consistencies from our past wordmark but refresh just about everything with it. Our hummingbird gets an updated color treatment with out new purple and a hand crafted Flixel wordmark which was loosely based on the geometry of our app font of Avenir Next.
Custom Icons
From the start I knew that icons were going to play a crucial part of our toolset. Re-designing each icon in the app brought their look together. Additionally the tools icons all got a visual refresh.
Bloom Filter
Lets learn Quartz Composer
With years of experience creating different photographic "looks" over the years. Creating new filters for the new release of Flixel proved to be a great challenge. Mostly due to the workflow involved. Since I couldn't really just make a filter up in photoshop I learned to use Quartz Composer. Its said that QC is a dark art and while I managed to scratch the surface and not get totally lost in its noodle interface I think our first new generation of Flixel filters look great.
Cross Process Filter
Lomo Filter
Los Alamos Filter
Old School Filter
Pro Filter
Western filter