Design collaboration

Unexpected benefits come in many forms when you’ve perfected your workflow. Today I’d like to talk about keeping a designer’s interest when you show them stuff.

Livereload is probably my favourite invention for the web in the last few years. It still shocks me how few developers actually use it, even though the benefits are profound.

If you’re a node/express user and want to play and see what all the fuss is about, clicky here> https://github.com/scottbert/gulp-express-livereload

Anyway, in brief: Using sass, browserify, some kind of templating system is all good. Using gulp or grunt to create concatenated/minified files is also good. But if you do it right you can use watchers to regenerate parts of this workflow on change and serve everything from a local connect server — either proxying an existing app server or just serving static files. This means your Javascript or your CSS is recreated almost instantly and is in the same format as your deployed assets, which cuts down on crazy race condition bugs.

If combined with something like gulp-livereload, however, not only does this happen but any browser looking at your local dev server will also be refreshed automatically. Look above! That’s my development environment. I have

• iPhone 6S
• iPhone 5
• iPhone 4
• iPad Mini
• Nexus 7
• Safari
• Chrome

And a whole bunch of VMs I often have running too. I can check something works visually and easily without having to go back and bugfix mobile devices at the end of development. This is pretty awesome. It’s also pretty fast, less than half a second usually. Almost instant for CSS/JS.

And that, my friends, will speed your development up no end. However, I wasn’t really wanting to talk about any of this, but instead, an awesome side effect.

I first saw this video by Bret Victor when it came out 4 years ago. It struck me as an awesome thing. And now, one of the unintended side effects of the superfast workflow I describe above, is that you can work directly with others in a way that didn’t used to be possible. In a way very similar to Bret’s visual way.

I can tweak the code and instantly see the change. What’s more, I can sit with a designer and very quickly tweak the code and we both see the change. Or I can sit with a number of people, they can all pull the website up on their local machines from my laptop and we can all see changes. It’s an amazing way to develop and design all at once. Instead of describing in depth what they want I can just show them as they tell me what to tweak. Together we can craft - refining, honing. I can suggest and show, they can agree or disagree.

In a way it’s removing the risk from a lot of development. Things are fast. When things are fast, it’s easy to try a direction and then discard it if it doesn’t work.

I’m not saying work like this for the entire time, but it’s a great way to keep a designer interested. Big stuff you can make notes about and implement after, but smaller stuff/less complex stuff, for sure. Develop like a designer.