The current state of things
You draw up some wireframes, maybe on paper or using one of the many available tools on the market. This is presented to the client, where you tell them how things will work, how the user can navigate the content, what elements go where, and maybe even how it will render on different devices.
That’s great. The client loved it. Time to start doing visual design sketches. You jump in to Photoshop, get your grid set up and start laying it all out with wonderful typefaces, colors and images. It’s going to look fantastic.
This is a simple example, I know. But it’s still the reality for many companies out there when starting a new web project. Heck, I’ve been doing it myself for the last 12+ years. The problem occurs when you show the client those wonderful images of what the website will (hopefully) look like when completed. What we’re doing is essentially creating an artists painting of a website. It’s a flat, static and dead image file. That’s not good.
What we’re doing is essentially creating an artists painting of a website.
It’s a flat, static and dead image file.
Photoshop needs to go
How the hell can these images justify what the end result will look, behave and feel like? And on all those different devices and resolutions? It can’t. That’s why we need to change the process.
We need to move from designing flat comps to real working HTML documents. You might argue that you’ve been designing in the browser for years already. Well, good for you — no need to continue reading. But this is not the case for all designers out there. Fear of HTML, CSS and JS, or lack of interest, or other issues. Maybe you feel like it’s not your job — you focus on the finer details of the typographic grid, correct use of white space and cropping of the photography. You are a designer, dammit! Right?
Modern days
Now, I’m not saying designers should need to become developers. That’s the beauty of all this — the reason I’m writing this article. Technology has finally come to a point where it’s possible for every designer to do this. Tools like Macaw, Webflow, Adobe Edge Reflow, and many more coming will let you design responsive layouts with the browser as your canvas. Finally!
Benefits
There are tons of benefits by doing it this way. The first being responsiveness, like I mentioned. You can set up a fluid grid and work out how things will scale on the fly. That’s huge. Then you have font rendering. No more guessing with Photoshops “smooth” or “sharp” modes. Test it directly on any device, right away.
Hover states for all those buttons and links? Create them on the fly, no need to write documents telling the developer what to do with each element. Same for type styles. All these new tools are made with web and UI design in mind. It all just makes so much more sense.
Of course we still need the developers to make it all work in the end, but they too will love you for delivering a working HTML prototype with lovely CSS ready to use, in stead of messy PSD files.
The client will love this
Imagine being the client on a project where you use this process. They get to see, feel and touch the results much sooner. And there will be no confusion about what they are looking at. You can work together iteratively from the start and watch the project progress as you go. All clickable and usable from the first draft. You could even do the wire framing with these tools, and add depth and style as you go.
Reality
So, this sounds great and I sure am excited about this shift that we’re witnessing now (finally). But we all know every project is not this straight forward, and there will be scenarios where it just won’t work. That’s OK.
The point is the process, not the tool. I have done similar things before where we use simple HTML mockups and code up parts of the site early on to get a feel for it. Whatever works for you, just find a way to move away from those old static comps to something dynamic, scalable and modern!
Godspeed.
