Workshop: From Photoshop to the Browser

In this, the second workshop I attended at WDS09, respected web designer Elliot Jay Stocks gave us a look into his design process, from go-to-whoa, sharing a bunch of helpful techniques along the way.

With Elliot Jay Stocks

The notes I took for this workshop were very ad-hoc and hard to follow. This is in no way a reflection on the workshop itself and more to do with having so much useful advice being given that all I could do was scribble down brief notes or keywords to Google later. Having said that, here are a sample of some of the best take-away tips from the workshop

  • Listen to the Boagworld Podcast. It's good!
  • Sketching out site maps into you notebook is fine for organising your thoughts, but when it comes to presenting your ideas to your clients, there are a few helpful tools out there to help you to create some pretty site maps. WriteMaps looks like a neat little product that provides a nice interface for not only creating your site maps, but also sharing them with your clients. Personally, I'm a fan of SlickMap CSS, a simple stylesheet for displaying a website's structure based on a simple unordered HTML list. It's limited to only four levels of nesting (including "Home") but it's come in hand for me a number of times, plus with some minor adjustments to styling, it can be re-used on the finished website's "Site Map" page.
  • Likewise, there are a number of good tools for developing wireframes to present layout and structure ideas to your clients. I've had a play with Balsamiq Mockups and found it to be a quick an easy way to throw together ideas and package them up in a rough-but-presentable format. If the $79 USD price is a bit too much for you, another tool I've used in the past is Pencil, a free and opensource Firefox add-on that leverages the Mozilla rendering engine to turn your browser into a powerful diagraming and GUI prototyping tool.
  • As much as I love rounding my pixel widths for elements to the nearest ten, it may also help to make use of traditional graphic design principles such as the Golden Ratio. There is a website (and also Mac desktop widget) to help you to calculate the proportions you need.
  • At the risk of being arrested by the cliché police, think outside the box. Bear with me. Just check out the website of Tyler Finck to get an idea of what I mean.
  • Feel free to design to a grid (such as the 960 Grid System), but don't be afraid to have elements break out of the grid.
  • As a rich primer for beginners Mark Boulton's new book is supposedly really good (although I can't vouch for it personally.)
  • Be aware of, and be influenced by what Elliot calls "Oooh, that's clever" monents such as the parallax scrolling backgrounds on the Silverback website.
  • CommandShift3.com — It's like "Hot or Not", but for websites. A great source of inspiration.
  • At the Future Of Web Design event, Elliot gave a talk entitled "Destroy the Web 2.0 look". Basically, it boils down to "don't blindly follow trends, but rather adapt them to your own style.
  • When presenting mockups, do it in the browser. Apply the background to the HTML element as well as the BODY element. Calicott.com
  • Set up your own project framework - Check the slides for Elliot's example.
  • Wordpress: Starkers theme, ThemeShaper.com - Thematic
  • BoagWorld.com/usability/bargain_basement_usability_testing
  • Public Indemnity Insurance: Protect yourself.
  • Ask for 50% deposit up-front.

No comments on ‘Workshop: From Photoshop to the Browser’

Comments are closed

Comments on this post have been closed. If you would like to contact me about this post or for any reason, please get in touch.