Adobe Edge Reflow – First Look

Posted on: February 18th, 2013

Adobe Edge Reflow came out last week (at least to my knowledge the preview just came out last week) and I hopped on over to the Creative Cloud as soon as I heard on Twitter. I’d been talking about the program and waiting for it since I first found out it was in production around November 2012. From what I can tell, Reflow is attempting to revolutionize the web design field.

A mix of Photoshop an any wireframe program you’ve ever used, Adobe Edge Reflow gets a boost of steroids and becomes responsive. If you’re more of the reading type, instead of a video watching person, I’ve included my initial impressions of the program below, along with some implications.

Enter Adobe Edge Reflow

Responsive Breakpoints in Adobe Edge ReflowThe first thing I looked for in Reflow was how to make my layout responsive. The main button for doing this is in the top right corner, the plus(+) symbol with a tiny downward arrow next to it. By clicking the plus symbol, you can create new breakpoints. Holding down the plus symbol brings up an advanced panel, which lets you set exact pixel width and give your breakpoint a label.

From there you can switch between the two layout sizes fluidly by clicking on their descriptions. You can see the grid is flexible and changes along with the layout size.

In the top left, you can choose from Selection Tool, Add a Box, Add a Text Box, and Add an Image. To do that, simply click on the appropriate button and drag it into your layout. Before you do anything else, switch between your layouts. If you added it to the 640px layout, say all the way across the top of your page, it will be all the way across the top on the full desktop version. This is where it gets cool. If you want it to be half as wide on desktop, just adjust it with that tab open.

Switch between the two again and you can see that it is saving your changes for each separately. That’s the kicker for me. I didn’t get much farther in the program but will be diving further in this week to really get a good feel for it. Overall I’d say it is a game-changer. Laying out one design for different sizes, all without ever opening a different Photoshop file? I’m in.

Tags: , , ,

previous post: Public Service Announcement – Germs next post: Remove div and ul from wp_nav_menu