Adobe Edge Reflow – First Look

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.

Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Adam Foster
7 years ago

You can also add breakpoints by double clicking on the ruler. Handy as the plus (+) button only seems to add new points at the end of the others.

trackback

[…] code bloat, but nonetheless, for a preview version, I’m pretty excited. You can check out my “first look” video for a demo of how the program […]

John Hartley is a Director of Product Engineering at Beam Dental in Columbus, OH. With 5+ years of leadership experience he has worked in startups, agencies, and began his career as a freelance Front End Developer. Always looking to iterate, this blog is a place for him to share his knowledge as well as hone his craft, challenge assumptions, and build a strong base of leadership and management knowledge. Connect with him on LinkedIn

2
0
Would love your thoughts, please comment.x
()
x