In search for a better web design workflow

I have been working as a web coder for a long time and what always bothered me is how inefficient a process of creating a frontend for website is. And there are two major reasons for that — code reusability / toolchain problems and flaws in typical web design workflow. I will leave code issues for some other time so we can focus on design for now.

Defining the problem

First let's outline a typical design workflow for a project:

  1. general brief about the project;
  2. UI prototyping;
  3. design in Adobe Photoshop (or similar);
  4. coding graphic files into HTML/CSS/JS;
  5. integrating html into the project;
  6. getting something else to design, so back to step 1.

It's relatively easy to see the problems here. Firstly, page gets created from scratch three times in different technologies and levels of details which is quite a waste of resources.

There's another problem too. Our web applications now start to deliver very rich and dynamic experience for the user. The essence of that experience can be captured and explored UI prototyping phase, but it is usually lost when transitioning into design stage because of the static nature most popular design apps.

Abstract solution

In abstract terms, the solution to this problem could be described as some universal tool for a whole workflow. This tool should work pretty much same way as progressive JPEG does. I've read about this approach on Art. Lebedev Studio website a few years ago and I think it captures the idea quite nicely (here's original page in Russian).

Such a tool would allow for defining use cases and high-level user interaction in the same way good prototyping tools do. Then it would provide a way to refine that experience by putting in visual feedback like pictures and animations. Finally you should be able to use this tool do define application logic.

So far it may sound like you already can and all that. Here's the catch though. Such an imaginary tool need to provide ability to jump back and forth between these detail levels and me even allow for simultaneous work on all of them.

What can we use right now

Of course a tool described in a previous section doesn't exist as of yet (and may be never will). But here are two things we can do right now.

Adobe Fireworks

While Adobe Photoshop doesn't allow for interactivity, Fireworks does. It certainly doesn't solve the whole problem but it provides a way of having semi-refined interactive prototypes at any stage of your project. And it's very similar to other design tools in it's interface or capabilities so transition should be pretty easy.

HTML / CSS / JS

Using common web technologies for entire web design pipeline actually comes pretty close to the ideal abstract tool I described in previous section.

When creating a prototype you can stick to some basic CSS for styling and simple inline onclick handlers for interactivity. Then, at any stage of prototyping you can go in just refine visual attributes of your HTML elements or add animation to some state transition or peel away those nasty onclick handlers and put in real business logic.

Thanks to distributed version control all of the above could be almost non-destructively and simultaneously which is pretty awesome.

But there is usually one major obstacle when adopting this approach and that is designers and interface people. They don't really like the idea of letting go of trusty old Photoshop and getting their hands dirty with some coding.

I don't know any antidote for that yet, but more and more people talk about that transition from Photoshop to HTML / CSS when designing website so hopefully this idea will catch on with general design crowd.

Afterword

What I want to leave you with is that I really do think that HTML / CSS / JS is the best way to go about designing websites, at least for now. And if you are a web designer or UI/UX person and thinking of diving into the coding world, there is a nice talk from SmashingConf on what comes after Photoshop for the web which has some great thoughts in it and offers some more persuasion for the cause.

Social comments Cackle