Ever struggled with the RWD process and Photoshop vs designing in the browser?

Ever struggled with PSD’s and responsive design?

There is no perfect solution to this as the tools hinder us.

Advantages of Photoshop

• Quickly design pages
• Creative freedom
• Quick edits

Advantages of Designing in the browser

• Responsive and can show client multiple ‘versions’
• Shows interaction / rollovers / menus etc
• CSS is now ready for gradients, shadows and a lot of the detail work
• A browser is cheap (Photoshop is expensive)
• Shows fonts well - what you see is what you really get

The problems with each?

• Designing solely in the browser is time consuming. Some agencies show the client 3 different designs. Are you going to code up 3 complete web pages and scrap 2 of them? Your time is better spent concentrating on one
• Whatever your process it’s quicker to design and NOT code
• Photoshop produces flat designs, there is no RWD in PS
• The browser restricts creative freedom. It gets you into a boxy and component way of thinking which isn’t that bad a thing in some situations but there is more to design than boxes. What about textures, shapes, patterns and cut out imagery?

Best of both worlds?

A lot of people that are sunk and solely believe in either camp.

Why not use both?

1. Use the creative freedom of Photoshop
2. 2.) Explain to the client that this will be very similar to what it will look like. Not complete but with strong visuals, layout and colours
3. 3.) Get good and strong feedback and adjust
4. 4.) Code in the browser and then show them half way product in different devices if need be
5. 5.) Proceed into full development

Often forgotten?

Paper.

Show, Show, Show!

The grand reveal can end in tears. Involve clients even at a paper level. Show them your prototypes early and in code.

The perfect process?

• Always start with paper - super quick to get design ideas and layouts out there. Stuck for ideas? Just start with a few words which define the project
• Always with wireframes
• Design in Photoshop taken from paper + wireframes but with high fidelity
• Once your client has a good idea of what is going to be live then go into code and show them a prototype like product - even with placeholder graphics in places
• Proceed to happiness

That said

• It depends, if you are working on a more app like product with little consideration for aesthetics ( i always think to think visuals however) then designing in the browser may work for you
• You can always flow back and forth from the process, it doesn't need to be a rigid process
• browser > paper > psd > html
• There is also Style Tiles approach which i like but it doesn't give the client much idea of what the actual site will look like
• Your milage may vary!