Reflow Today

Reflow is a design tool for the web. It offers traditional, visual tools for laying things out on a fluid canvas. Its canvas just happens to be the browser.

Reflow, like most apps, started as a sketch. It started as a nights and weekends project between myself and a few fellow designerds.

Paper Sketch
“How, in Adobe’s whole suite of tools, is there no notion of a fluid canvas — one that could adapt to different devices and screen sizes?”

I asked this question often in my first few months at Adobe. What ultimately inspired me to work for Adobe was the opportunity to build tools that didn’t exist yet. During this same time, responsive design had just been coined by Ethan Marcotte. Soon after, I’d converted my portfolio to be a simple responsive, fluid layout. It was painful. I couldn’t imagine having to do this while managing the overhead of working at a magazine publisher, or having to do this for websites in an agency setting. I felt the pain of having to mock up all the layout variations with InDesign or Photoshop, having to build something in HTML and CSS just to be able to mock it up. These problems became an itch I needed to scratch — an itch shared by potentially millions of like-minded creatives.

A Mess

What a mess. It was clear to me that this tool needed to be built.

Calendar

Within the corporate world, I was very green. I’d just come from being the senior designer at a 6 person shop. If I wanted to share an idea, I’d simply walk over to them or shoot them with a nerf gun. Inside a company of 11,000, I had no way of facilitating the creation of something like this. I didn’t even know whom I’d talk to. I’d sent out a calendar invite to the few people that I’d met in Adobe’s experience design group, asking if anyone was interested in brainstorming and hacking on a prototype with me. Responding to my restlessness, Bradee Evans, a manager within the group, put me in touch with engineers Kristofer Joseph and Tara Feener.

Wireframe An original wireframe

During these first meetings I shared the responsive ruler. I drew the ability to drag and drop arbitrary breakpoints. It spawned a conversation defining the need for a tool whose canvas is the web, with all its peculiarities. We wanted to build a design tool that didn’t coddle ex-print designers. We weren’t building the next Dreamweaver or a product like Muse. This was a design surface true to its medium. CSS selectors would replace layer styles. Web-based font services would replace unruly lists of local typefaces. We set off to build a prototype while I explored what this product might actually look like.

Reflow Draft
An early draft of Reflow in the Photoshop aesthetic

We’d build the prototype in HTML and Javascript. I would spend time designing and coding the front-end in HTML & CSS while Tara and Kristofer would build everything else in JS and Backbone. It was the fastest way we could share our vision for what ultimately became Reflow. It was also the most disciplined way we could ensure the canvas itself was true to the web. Along the way Bob Walton joined in on the prototype hacking. Bradee kept our efforts to a schedule. Tara, Bob, and Kristofer kept it working. I kept it usable, pretty, and most importantly, focused.

Original Prototype
I know I said I kept it pretty. It can take a while.

Within a few short weeks we had a proof of concept. It made its rounds at Adobe and eventually received a green light. The five of us were now able to work full time on Reflow. Soon, more engineers joined in building out my vision — A tool whose design surface was true to the web. Warts and all.

A new suite?

While building Reflow’s prototype, others at Adobe were building Brackets, an open source code editor. It was in a similar space as Reflow, conceptually. So was an app named Shadow that allowed you to test your site on all kinds of devices remotely with a single click. The new suite would be called Edge. It would include Edge Reflow, Edge Code (Brackets), and Edge Inspect (Shadow).

Edge Icons

These apps all needed a common design language. We pulled our inspiration from Adobe’s efforts in the Creative Cloud. It’d include middle grays that allowed for focus on the user’s content instead of the application itself.

Edge Code
Edge Code was designed to share Reflow’s aesthetic.

Features

The product is still very young. We’re still marching toward 1.0. We’ve published a few public previews, allowing me to share some of the thinking behind its features.

The Ruler

I’m most proud of the central hook of the app, its responsive ruler. Adding breakpoints is simple. At a glance, you can tell where breakpoints are. They’re simple to tweak, add, or remove, all while feeling familiar.

The Ruler

Properties Panel

Reflow’s interface bridges the gap between design tool and coding environment. Normal design inputs are replaced by CSS rules that are prioritized by how often they’re used. Width and height, for example, are higher in the hierarchy than margins or padding.

Uncommon declarations are hidden in favor of a sensible defaults.

Fields are laid out in your standard CSS shorthand model of Top, Right, Left, Bottom, so users that are accustomed to writing CSS by hand are comfortable with their layout. In fact, if users are comfortable, they can type their values like they would their shorthand.

Properties Panel

Chained Effects

In Reflow, designers aren’t limited to single shadows or backgrounds. Designers can chain effects, building complex shadows. Semi-transparent layers can be rearranged to build composite backgrounds.

Multiple Backgrounds and Shadows

Color Pickers

Reflow improves on Adobe’s color picker, a feature that’s gone untouched for years. I landed on a solution that improves color selection while maintaining familiarity with current color pickers. It allows for full control of a single hue from white to black on a single slider.

Color Pickers

Selections & Alignment

Adobe’s users have often acquired years of muscle memory when using its creative tools. Many times in testing, users would use keyboard shortcuts that we hadn’t included yet. It was obvious that if this product said Adobe on it, users would be expecting things, for better or worse — Selection models, keyboard shortcuts, and similar tooling.

Selection

Cursors

Reflow removes custom cursors found in other Creative Suite products. Wherever possible, I want Reflow to be a good OS citizen. Photoshop is made to look like a cocoa app, but often times it’s anything but.

Cursors

Typekit

After Adobe’s acquisition of Typekit, we now had the ability to include webfonts natively in Reflow. Instead of unruly lists of local fonts that may or may not work on the web, our font browser would be populated by the newly created Edge Web Fonts. Without visiting the website, users can view and try hosted fonts directly in their designs.

Typekit

Odds & Ends

Most of Reflow’s features are displayed in popovers. It allows the user to get in and out of their task without taking them too far from their design.

Various Panels

* * *

Though I was the sole designer on Reflow, I still occasionally needed to share my work. Regardless of any disparate comps that may float around on wikis and elsewhere, a single document needed to collect every asset within Reflow. In a single action one could re-skin the entirety of the app using these slices and modifying CSS.

Sprites

Reflow took 18 months to get to its current, usable point. You can download the Public Preview for free with a Creative Cloud membership.

Timelapse
A weekly snapshot of Reflow’s progress.

Home