Designing Filtron

by Drew Wilson

Yesterday I wrote about the history of Filtron and what it took to build it. If you haven't already, you should go check that out. Now I'd like to share the process behind designing Filtron.

Back in March of 2012 – in the days of iOS 6 – I tossed a few pixels on the screen and mocked up an idea for an iOS app that would let you easily edit your photos and apply stylized filters to them. It wasn't serious, it was just me getting an idea out of my head. My hard drive is full of Photoshop files like this. A couple months later in June I whipped up a photo editor Mac app and came up with the name Filter. That's as far as I got. I threw the idea of a photo editor in the pile of Things I'll Do One Day... Maybe. A couple months later I started my first design on what would become Footage, my video editing app (see my previous post for details). Some of the core functionality I wanted Footage to have came directly from these mockups for Filter.

As explained in my last post, I switched gears from building Footage to building a new app called Filtron in December of 2013. So it had been almost two years from when I first mocked up Filter until I started producing designs for Filtron. I started working on the iOS design for Filtron first. For a bit of perspective: iOS 7 had just been released a couple months earlier. Ya, it was that long ago.

We were in a hurry to get the Filtron app into development, so the iOS design for Filtron you see today was the only major iteration I ever did. The plan was to release a by March 2014, but that didn't happen obviously. So the design that Filtron just launched with is from December 2013. Hilarious.

A lot has changed since then and iOS has a lot of cool new aesthetics I'd love to use, but in the interest of actually shipping the app, I had to resist re-designing... and I've been resisting for a long time. Imaging having to release an app that has a two year old design; as a designer that doesn't feel very great. Fortunately the design works well for the feature set and that's what matters most.

Filtron enables you to create and share your own photo filters with the world. That means there is going to be a lot of filters to choose from. In order to help you visually see the difference between these filters there needs to be a control: an image that would be used for all filters added to Filtron. I needed to find an image that had a decent spectrum of color and a wide spectrum of blacks and whites. That way you can easily see how the filter affects color and contrast, etc. Being a photographer myself there was no way I'd use anyone else's photo for this 😊 So I went hunting through my photos. I eventually ended up on a photo I took of a Lotus in Egypt back in 2006. It worked great because it had bright whites, grays, and blacks. It also had strong blues, greens, reds and yellows in it; perfect. I made it the default image for all filters in Filtron. You'll see it everywhere in the apps and website.

Early on I decided to replicate the before/after control I designed for the app in the actual iOS and Mac app icons. The app icons look great together and are pretty unique considering they have a photo in them. It wasn't until probably a year later that I decided to re-draw the Lotus in vector and use it as the logo/icon for Filtron. Before that the logo was just the word "Filtron". So this seemingly random Lotus image I snapped back in 2006 ended up becoming the Filtron brand itself, wild.

A lot of Filtron's iOS design was put together with the overall thought of "how can I get this app out ASAP?" So I tried to make the interface something that would be super quick to implement in code. I prefer the approach of ship early and iterate. Well in this case I am shipping late, which means I am launching with a design that isn't very fancy. No splendid animations or any finely tuned delights. That's fine, its not what I planned but the interface works as is.

Anytime you deviate from Apple's stock UI things will take long and be hard. It doesn't matter if you only sightly deviate or you raise hell on the HIG and go full crazy mode with the design. Both will take just as long. So if you are going to do a custom UI, go as crazy as you want. Once you leave stock UI territory things will take much longer no matter how custom you make the UI. I sort of knew this when starting Filtron, but not really. If I had known it to the extent I do now I would have spent more time upfront on making the UI way better and not worrying about how long it would take my developers to implement. The reason I was in "launch ASAP" mode was because we near the end of our budget.

There are a bunch of different screens in the iOS app, each with their own challenges. A couple fun ones were creating the custom controls for the Filter Builder. In the Filter Builder you can pick and add any number of effect layers you want. One is a gradient layer. There is no stock Apple UI on iOS for handling gradients (nor on Mac). So I designed one that mimicked Photoshop's gradient behavior.

Many of the effect layers have blend modes. On the desktop these are listed out in a drop down select list. But that is a UI blocking two-step process on iOS. So I came up with a different way to handle large list selections: swipe. Swipe left or right between list items, or tap the arrows on either side to change your selection. Much faster and clearer than stock Apple UI.

Another custom control was for the Curves effect layer. I wanted to build a very simple Curves control. For example, you can't add/remove the number of handles given to you. That alone removes a good chunk of things on the screen. Also you can't toggle between Red/Blue/Green/All Colors. Again, that removes a lot of UI. What you're left with is a super simple Curves control that is super fast and still gives you a lot of control over your image.

Gradient Control
Multiple Select Control
Curves Control

Getting the default user avatars right was a challenge. I wanted something that was unisex, but I didn't want to do the normal outline of a generic human bust. I only wanted to show a face/head. The first draft didn't really flow well with the color theme of the app. My second draft worked much better. I also moved away from the flat look and added some depth. I liked it, but I never was totally satisfied. I posted it to Twitter and many people said it looked like a young boy. It totally does. That would be fine, but I wanted the avatar to be totally age/gender indistinct. I tried getting a hairstyle that could work for anyone. Adding a hairstyle made it feel more alive, but again I wasn't satisfied. I left it as it was and it became the default avatar for about a year or more. When I finally got a chance to work on it again I couldn't seem to get anything that worked better than a generic human bust lol! So I went with that, but I kept the depth and aesthetic from the previous version.

Immediately after designing the Filtron iOS app back in December of 2013 I took time to "re-skin" the Footage Composer app to be Filtron for Mac. I just had to remove some video specific UI and change the colors and aesthetic to be closer to what I did on the iOS app. It took me a day or so and I had a re-skin ready to go for whenever the day came to kickoff development on Filtron for Mac.

The Footage Composer app was designed to look just like the main Footage app. So even though I designed it in late 2013, it's design was taken from Footage that was originally designed in 2012. It looked dated. Re-skinning it to be Filtron for Mac was a great chance to say goodbye to that dated feel.

In December of 2014 – a year after designing the first version – the Mac app still wasn't finished. The UI in OS X had progressed a bunch and the new translucent look made its way from iOS to OS X (thats the translucent and blurred window look). Updating the UI on the OS X app was easier than on iOS for me at the time, so I felt it was within reason to make the Mac app feel more a part of the system than it did in its outdated state.

I did a version that used the standard Apple UI colors and moved away from the dark interface. I kind of liked it, but it didn't match what I did on iOS. I posted the new look to Twitter and people overwhelmingly liked the previous "outdated" look. So I kept the old look and just updated the icons and moved some UI elements around. I also added in the translucent look to the Mac app, it made the app look much better.

All the way back in October of 2013 I stirred a bunch of pixels together and made a design for the web interface. The web portion of Filtron is a bit different from the other apps, in that it is read-only. You can't create anything on the web, you can't even create an account. And only people who upgrade to get the Filter Builder get to have a profile page, so there wasn't too much to do for the web portion of Filtron compared to other web products I've made.

When I first designed it, I wasn't inspired nor did I give myself much time to do it. It looked and felt rushed. But I really didn't care. I just needed it to exist. I always told myself I'd update it before launch, and I did. In May of 2015 I re-styled the user profile page, filter profile page and other pages to make them look decent and inline with the aesthetic of the apps.

You can tell how much I didn't like the original versions of the profile pages because I never even saved those PSDs! So I don't even have them to show you a before/after comparison, oh well.

Even before Filtron – back in the days of Footage – I had planned to have pro photographers and creatives make awesome filter packs that anyone could buy. It's actually the entire reason I built Footage Composer (which turned into Filtron for Mac). So another part of the web product was the Pro Profiles. A page built specifically for each one of the Premium Filter Pack creators. The purpose of the page is to give a small glimpse into the creator and highlight their filters using their own photos. I always knew what I wanted to do on these pages, so my first iteration for this page ended up being the launch version.

What good would an app be without a homepage?! 😉 I started working on it in December of 2013 and have been adding to it every now and again since. The main structure and content of the homepage has remained the same since my first iteration. One cool element on the homepage is the Filtron Embed. Just like embedding Youtube videos you can embed Filtron filters around the web. This was designed along with the first iteration of the homepage and has been fully production ready since March of 2014! I even had to create a special Embed icon for the iOS share menu so you can quickly copy the embed code from the app. Heres an actual Filtron Embed:

Obviously I didn't cover everything related to designing Filtron here. There is just too much to go over! If you want to see the designs for Filtron up close, go download the apps for free 😊 Browse the many filters created by other Filtron users and use them to style your photos for free. If you want to get your own Filtron account and start making your own filters (and get a nifty profile page like mine) buy the Builder upgrade.

You can follow Filtron on Twitter for updates @filtron_app and follow us on Instagram too @filtron_app.

Hope you enjoyed this short glimpse into the very long process of designing Filtron!