You don’t need a lot of complicated software to deliver a high quality web design to your clients. Here are my notes from the breakout session, “Designing in the Browser” presented by Andrew Searles from the 2014 Wordcamp.
There have been many industry leaders talking about their ideas for how web design is changing. Most of the talks center around the idea of getting out of Photoshop and designing in the browser. Over the last year, I’ve made a considerable effort to put this into practice. As of right now, I’ve designed 8 websites fully in browser. There’s been lots of problems, but there’s been even more rewards. Hopefully, I can show you some of the pros and cons of designing in the browser as well as giving you some tips that I’ve learned along the way.
Steps:
- Site Map: List everything you want on a page
- Sketch your wireframes
- Design in browser instead of using Photoshop
Tips:
- Have a basic theme site created for the client to load client. You can move this file afterwards into your finished design.
- Don’t make your first design responsive. You can add this once the design is approved by the client.
- Use a “style tile” – include fonts, hex colors, etc. (think of this like a Pinterest board for the website design inspiration)
- Work in steps (get the home page approved first)
- The client can use chrome extensions to make notes on the mock up html site and send changes back to you
Tools and Plug-ins:
