I’m not sure the particular use-case outlined here is going to apply much outside of AirBnB (just because the direction of code-to-Sketch feels inverted from most processes) but the underlying idea of treating visual design assets and code as two manifestations of the same process …that’s very powerful.
Wednesday, April 26th, 2017
A plug-in for Sketch that allows you to simulate colour blindnesses and check colour contrasts.
Wednesday, April 19th, 2017
Designing the Patterns Day site
You can probably tell from looking at the Patterns Day website that it wasn’t made by a crack team of designers and developers—it’s something I threw together over the course of a few days. I had a lot of fun doing it.
I like designing in the browser. That’s how I ended up designing Resilient Web Design, The Session, and Huffduffer back in the day. But there’s always the initial problem of the blank page. I mean, I had content to work with (the information about the event), but I had no design direction.
My designery colleagues at Clearleft were all busy on client projects so I couldn’t ask any of them to design a website, but I thought perhaps they’d enjoy a little time-limited side exercise in producing ideas for a design direction. Initially I was thinking they could all get together for a couple of hours, lock themselves in a room, and bash out some ideas as though it were a mini hack farm. Coordinating calendars proved too tricky for that. So Jon came up with an alternative: a baton relay.
Anyway, Jon suggested something kind of like that, but instead of a file being batted back and forth between two designers, the file would passed along from designer to designer. Each designer gets one art board in a Sketch file. You get to see what the previous designers have done, leaving you to either riff on that or strike off in a new direction.
The only material I supplied was an early draft of text for the website, some photos of the first confirmed speakers, and some photos I took of repeating tiles when I was in Porto (patterns, see?). I made it clear that I wasn’t looking for pages or layouts—I was interested in colour, typography, texture and “feel.” Style tiles, yes; comps, no.
Jon kicks things off and immediately sets the tone with bright, vibrant colours. You can already see some elements that made it into the final site like the tiling background image of shapes, and the green-bordered text block. There are some interesting logo ideas in there too, some of them riffing on LEGO, others riffing on illustrations from Christopher Alexander’s book, A Pattern Language. Then there’s the typeface: Avenir Next. I like it.
Jimmy G is up next. He concentrates on the tiles idea. You can see some of the original photos from Porto in the art board, alongside his abstracted versions. I think they look great, and I tried really hard to incorporate them into the site, but I couldn’t quite get them to sit with the other design elements. Looking at them now, I still want to get them into the site …maybe I’ll tinker with the speaker portraits to get something more like what James shows here.
Ed picks up the baton and immediately iterates through a bunch of logo ideas. There’s something about the overlapping text that I like, but I’m not sure it fits for this particular site. I really like the effect of the multiple borders though. With a bit more time, I’d like to work this into the site.
Batesy is the final participant. He has some other nice ideas in there, like the really subtle tiling background that also made its way into the final site (but I’ll pass on the completely illegible text on the block of bright green). James works through two very different ideas for the logo. One of them feels a bit too busy and chaotic for me, but the other one …I like it a lot.
I immediately start thinking “Hmm …how could I make this work in a responsive way?” This is exactly the impetus I needed. At this point I start diving into CSS. Not only did I have some design direction, I’m champing at the bit to play with some of these ideas. The exercise was a success!
Feel free to poke around the Patterns Day site. And while you’re there, pick up a ticket for the event too.
Tuesday, April 4th, 2017
Wednesday, March 22nd, 2017
Sunday, March 5th, 2017
An interview with Batesy that gives a nice insight into life at Clearleft.
He’s sketching mad, that one!
Monday, February 29th, 2016
Myself and Batesy spent last week in Ipswich doing an intense design sprint with Suffolk Libraries. Leon has written up process from his perspective as the client—I’ll try to get a case study up on the Clearleft website soon.
This is really great write-up; it captures the sense of organised chaos:
I can’t recommend this kind of research sprint enough. We got a report, detailed technical validation of an idea, mock ups and a plan for how to proceed, while getting staff and stakeholders involved in the project — all in the space of 5 days.
Tuesday, December 1st, 2015
Wednesday, April 30th, 2014
A lovely little profile of Paul and his sketches.
The Web Is Agreement! The URI Is The Thing!
Friday, August 16th, 2013
Molly Crabapple talks about her experiences sketching at Guantanamo Bay.
America, out of fear after September 11th, imprisoned many innocent men under the most brutal conditions, set up a Kafka-esque legal process that made it very, very hard for them to get their freedom, and is still keeping them there because of fear and political grandstanding.
Tuesday, September 11th, 2012
Eva-Lotta’s sketchnotes from this year’s dConstruct.
Friday, June 8th, 2012
A great article on the importance of sketching for mobile-first responsive designs, complete with practical ideas for workshopping.
Sunday, February 26th, 2012
I love these sketchnotes from my presentation at Webstock.
Wednesday, June 15th, 2011
Rejoice! For Kevin Cornell’s new book is available to you through the power of print on demand. I’ve ordered mine. And should you.
Tuesday, October 19th, 2010
I like this idea: stencils for common interface elements to be used with good ol' pen and paper.
Wednesday, August 4th, 2010
An excellent way to document a journey.
Tuesday, June 1st, 2010
It was conferences-a-go-go in London the week before last. As Future of Web Design—which was, by all accounts, excellent—was winding down, UX London was kicking off. Fears of ashcloud disruption to both events remained happily unrealised.
I went along for the first day of UX London. All the speakers were excellent but it was a particular thrill to see the amazing Scott McCloud speak. I had high expectations and they were duly surpassed.
It was very informative and a lot of fun. Dave is a superb teacher and by the end of the two days, we were all feeling a lot more confident in our abilities to communicate through drawings. I expect there’s going to be lots of future activity on display in the Sketchleft pool on Flickr.
Wednesday, April 28th, 2010
Why are you wearing that stupid man suit?
Saturday, January 17th, 2009
Follow the adventure of this group of artists from around the world, in a Japanese fold Moleskine sketchbook exchange.
Sunday, October 19th, 2008
A comprehensive set of sketches, diagrams and screenshots from Soxiam showing the evolution and iteration of interfaces on Vimeo and other sites.