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
- Public Indemnity Insurance: Protect yourself.
- Ask for 50% deposit up-front.