When I started my career in Design at a web design agency back in 2007 I had a process which went:

  • Read the client brief.
  • Do a little research and look at other websites styles.
  • Draw a few ideas.
  • Photoshop some pages.
  • Show client for sign off.
  • Build pages.
  • Deadline looms, everyone gets stressed, I work the weekends, things get missed.
  • Launch website and hope some poor other sucker has to maintain it.

I have learnt a lot since then, and I couldn’t possibly document everything in my workflow in this post, because a lot of the different techniques that are needed for building a great product, design or experience depend greatly on what are the goals and outcomes of the project.

But what I want to talk about in this post, is in brief my process is now:

  • Help build the brief using user stories and tasks.
  • Sketch (using whatever tool is convenient, paper, whiteboards, stickies) sometimes collaboratively, sometimes individually.
  • Discover solutions with the entire team.
  • Using the sketches and user stories, build a HTML prototype which can be tested on different devices and with customers.
  • The prototype either gets transferred into production code, or becomes the production code.

Many iterations and tests go into the above process as in any good design.

In most cases, I have always found that PSD’s and wireframes end up in the bin (or an archive folder). Photoshop (or similar) is still an important tool. Elements, style tiles, graphical/image manipulation can and often should be done in these tools, but if it will just be binned why not create something that will be used and updated instead? Even if you are an advanced PS graphical designer, transfer it into a prototype before taking it for sign off. It will force you and your product owner/boss/client to think responsively, and who knows, you may even create a living style guide of modular code and design items, which will live far longer than the design artifacts that created it.