Here at Use All Five, we design webpage comps with Photoshop — an app that was initially designed for photo editing. Since Photoshop isn’t made to design web pages, it actually gives us a lot of freedom to experiment and to try new things.
Photoshop comps are a great starting point, but once you start creating multiple pages, it becomes a tedious process to update all of the PSDs. What if you want to change what your H2s look like? Or how about throwing in a grid for a different sized device? These things can be accomplished by a few lines of CSS, however, they can take hours to update in Photoshop.
This is where I believe Edge Reflow is going to shine. We’re going to begin our work in Photoshop, and once we have a good idea of where things are going, we move onto Edge Reflow for production.
Reflow lets you create block and inline elements, mimicking how HTML actually works. These elements can also have children, and their children can have children — thus, you’re able to create generations of DOM elements.
As you can see from the above image, you’re able to freely move elements around the work-board. Layout values, such as margins and positions, are updated on the fly — you can then go to this layout panel and tweak the values.
Since this release is just a glimpse of what’s to come, I don’t want to point out problematic features in the app. The app gives you the ability to design for different screens sizes — which is it’s big selling point — however, I have yet to figure out how to use it. Once they figure these details out and start adding real DOM elements — like form fields — this app is going to be the future of web design.
For more info about Adobe Edge Reflow, check out the post by its designer — Aaron Shekey: http://www.aaronshekey.com/reflow/