Text Post

Designing in the browser and in Photoshop with Page Layers

The process of designing web pages changes a lot when you make responsive web sites. Making Photoshop comps for different screen sizes is very time-consuming and does not make much sense.

I tend to rely on style tiles to develop a visual identity for a new website, while sketches and wireframes help me define the structure and hierarchy of a webpage. I use Photoshop to experiment a bit with different layouts and develop a a visual style for the different modules on a webpage. Then I rather quickly go on to make a HTML prototype.

Developing a HTML prototype, rather than designing photoshop comps, makes for a more reliable end-result and allows me to test the prototype on different devices.

This is a great workflow. But while working in the browser is a great way to make a responsive prototype, I believe I need a graphics editor, like Photoshop, to stimulate the right side of my brain, so I can build a more creative design.

Fortunately I found a wonderful application that allows me to combine the best of both worlds. The mac app Page Layers lets you take screenshots of a webpage at different screen sizes and converts web pages to Photoshop files with separate layers for all page elements.

This magical piece of software is very helpful when switching back and forth between the browser and Photoshop. I can build a HTML prototype, capture it with Page Layers, tinker with it and iterate very quickly.

Since every page element is saved on a different layer, you can move things around, change the stacking order, replace some elements, etc. with ease. The following images show what can be achieved in a couple of minutes after capturing a website with Page Layers.

beforeafter

The application is also quite useful when discussing a design with clients. It lets you capture websites at different screen sizes and you can quickly show the result of some design tweaks.