A new edge to design thinking

When responsive design was first coined by Ethan Marcotte and hit the digital sphere, it became harder and harder for designers to follow our existing, pre-conceived ideas of pixel-perfect design.

Our processes and thinking when it came to building designs for the web were changing and they were changing rapidly.

Aaron Shekey, a product designer at GitHub and musician from Minneapolis, is well known for his development of a new addition to Adobe’s suite of products. A tool to bridge the relationship between developers and designers alike. He named it: Edge Reflow. It was born from one problem, that many designers were encountering as design for web was changing.

The Idea

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

We wanted to build a design tool that didn’t coddle ex-print designers. We weren’t building the next Dreamweaver or Muse. This is a design surface true to its medium. CSS selectors replace layer styles. Web-based font services replace unruly lists of local typefaces. Edge Reflow is a tool whose canvas is the web, with all its peculiarities

So what is Edge Reflow?

Edge Reflow is the latest from Adobe’s Creative suite and it is built specifically to address how responsive design changes over multiple web flows. Reflow takes static PSD files and adds a new layer of responsiveness and flexibility to them, but not just that, it challenges the way we think and perceive design for the web.

At the outset of a project, one the of the nightmares of creating new work is the dawning realization that I have to make twenty individual Photoshop files, one for each device and screen size. Reflow cuts out this speed hump allowing customisable breakpoints that bend and adapt a static file into outputted CSS and HTML, allowing a visual way to morph designs for multiple devices in multiple sizes.

How Does It fit Into the Process?

Edge Reflow works a lot like Adobe InDesign. Layouts are made up of a series of links, which can be populated directly through Photoshop and adjusted with web-based rules and restrictions. Moving elements around in Reflow is restricted and governed by the rules of the web, primarily HTML and CSS. For example, a lot of its behaviour follows absolute or relative positioning, z-indexes, and code based terminology that Photoshop just doesn’t address. Reflow provides a web-friendly fail-safe to any design, ensuring that what is created, has an output that is technically feasible.

Multiple Canvasses in one program

There are a number of ways to start a responsive design in Edge Reflow. The first port of call is to setup the page with the screen sizes needed. Most commonly, these are a large desktop, small desktop, tablet and mobile dimensions, but more can be added and changed as the design develops. Setting this criteria up using Edge Reflow’s ‘Responsive Rulers’ allows a set of parameters that creates hidden multiple canvases. As the designer starts building the elements of the page up one-by-one, those same elements automatically resize themselves for each breakpoint defined and can be manually edited. Pushing and pulling content directly from Photoshop allows the user to design and build on-the-fly.

Connectivity and Efficiency

If Photoshop CC is installed, it is possible to connect Edge Reflow and Photoshop together allowing changes to be made to a PSD file and updates automatically applied to the corresponding content in the Reflow project. If a developer and a designer are both working together on a project, there is no need to exchange a new set of assets. Those same assets can be re-used and re-sized across the breakpoints, keeping the file size of the project to a minimum. Multiple pages and templates can link to one another. What does this mean? Rather than create 100 separate PSD files, Reflow combines elements together to create templates than can be hot spotted, essentially transforming the idea of a static design into a fully working, visual and responsive prototype.

Demonstration

Edge reflow is a great way to demonstrate to clients how a design will change across the relevant devices needed and clients can physically resize layouts, watching the web’s behaviour change their designs, providing a sense of realism to any project. Reflow has add-ons. ‘Edge Inspect’ is an app that can be downloaded to tablet and mobile devices allowing changes to be made in real-time to Edge Reflow and refreshing on the corresponding device. For a designer, this means instant feedback on the feasibility of the project's responsiveness. It changes the way we think and perceive design for web. Gone are the days of static designs.

We must be encouraged to think: what happens when this title or stand first increases in size, what happens when it spans onto two or three lines, does the words get cut off, does the content below push down below the page fold?

Edge Reflow encourages us to think two or three steps down the road, and start thinking about design with the rules and restrictions of the web in mind. The more we learn about the behaviour of the web, the more useable our designs can become.

Moving Forward

Whilst an effective tool, Edge Reflow by far, does not eliminate the need of a developer. It wasn’t designed to speed up the process and cut out important members of the process. Its code outputted certainly doesn’t have the greatest mark-up, but the snippets of code that are generated from designs are definitely a useful resource for any developer needing to know the guidelines and features of a project.

I’ll leave this article with one thought in mind. If Photoshop could be compared to print design; then continually using the programme runs a risk of muscle memory. We are at risk of falling into habitual behaviour and producing designs that aren’t best fitted for the ever changing medium of the web. Edge Reflow provides a mechanism that forces us to reconsider the way our designs morph and behave. It is crucial to good practice.