Tags: sketch

23

sparkline

Tuesday, May 2nd, 2017

Creating a pattern library in Sketch, Roobottom.com

A smart approach to creating patterns as symbols in Sketch. Sounds like diligence and vigilance is required to make it work, but then, that’s true of any pattern library.

Wednesday, April 26th, 2017

Painting with Code : Airbnb Design

Very clever stuff here from Jon in the tradition of Bret Victor—alter Sketch files by directly manipulating code (React, in this case).

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.

Stark

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

Patterns Day is not one of Clearleft’s slick’n’smooth conferences like dConstruct or UX London. It’s more of a spit’n’sawdust affair, like Responsive Day Out.

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.

Remember Layer Tennis? I once did the commentary for a Layer Tennis match and it was a riot—simultaneously terrifying and rewarding.

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

Jon’s art board.

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.

James G

James G’s art board.

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

Ed’s art board.

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.

James B

Batesy’s art board.

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

Sketchnotes from AEA Seattle | Krystal Higgins

I love Krystal’s sketchnotes from my talk at An Event Apart Seattle. Follows on nicely from Ethan’s too.

Wednesday, March 22nd, 2017

sketch-to-fractal-comp on Vimeo

Everyone in the Fractal Slack channel is currently freaking out about this. Veeeeery iiiiinteresting!

Sunday, March 5th, 2017

Sketching at Clearleft.

An interview with Batesy that gives a nice insight into life at Clearleft.

He’s sketching mad, that one!

Monday, February 29th, 2016

A 5 day sprint with Clear Left exploring library self-service machine software – Leon Paternoster

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

Learn Sketch 3 - Design+Code

A very handy introduction to Sketch from an iOS-specific book. See also the subsequent chapter, Mastering Sketch 3.

Wednesday, April 30th, 2014

Paul Downey - just doodling - YouTube

A lovely little profile of Paul and his sketches.

The Web Is Agreement! The URI Is The Thing!

Friday, August 16th, 2013

Guantanamo Bay Through The Eyes Of Artist Molly Crabapple

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

d.construct 2012 - a set on Flickr

Eva-Lotta’s sketchnotes from this year’s dConstruct.

Friday, June 8th, 2012

Sketching A New Mobile Web - Smashing Mobile | Smashing Mobile

A great article on the importance of sketching for mobile-first responsive designs, complete with practical ideas for workshopping.

Sunday, February 26th, 2012

Webstock: Jeremy Keith | Flickr - Photo Sharing!

I love these sketchnotes from my presentation at Webstock.

Webstock: Jeremy Keith

Wednesday, June 15th, 2011

“Six-Penny Anthems II” - A classic Bearskinrug Article.

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

UI Stencils - Welcome

I like this idea: stencils for common interface elements to be used with good ol' pen and paper.

Wednesday, August 4th, 2010

Red Eye - Abstract City Blog - NYTimes.com

An excellent way to document a journey.

Tuesday, June 1st, 2010

Sketchleft

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.

I didn’t attend any of the workshops on the subsequent two days. Instead, Clearleft kidnapped Dave Gray and whisked him off to Brighton. There we spent two days learning sketching-fu from the master.

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

sketchy bunnies

Why are you wearing that stupid man suit?

Saturday, January 17th, 2009

moly_x_12

Follow the adventure of this group of artists from around the world, in a Japanese fold Moleskine sketchbook exchange.