Tags: sketch

26

sparkline

Designing With Code

How mucking about in HTML and CSS can lead to some happy accidents.

‘Sfunny, people often mention the constraints and limitations of “designing in the browser”, but don’t recognise that every tool—including Sketch and Photoshop—comes with constraints and limitations. It’s just that those are constraints and limitations that we’ve internalised; we no longer even realise they’re there.

Magic Paintbox – Illuminated – Medium

What we get from the pattern library is time and freedom to be creative. I’ve seen people claim pattern libraries are the death of creativity and innovation in design. For us, it’s the opposite of that.

Steve Jobs on Prototypes - Snook.ca

I’ve thought often of how our design and prototyping tools for the web are often not of the web. Tools like Photoshop and Sketch and Invision create approximations but need to walk the line between being a tool to build native apps and to build web apps. They do well in their ability to quickly validate designs but do little to validate technical approach.

5 ways having a shared design system has helped us ship our designs faster – Product at Canva

The steps that the Canva team took to turbocharge their design ops.

I’ll talk about why creating a shared design system has boosted our organizational productivity—and how you can help your teams improve product quality while reducing your company’s ‘design debt’.

Sketching in the Browser – SEEK blog – Medium

A step-by-step account of trying to find a way to keep Sketch files in sync with the code in a pattern library. The solution came from HTML Sketchapp, a more agnostic spiritual successor to AirBnB’s React Sketchapp.

The contract was incredibly straightforward—as long as you generated HTML, you could import it into Sketch.

After some tinkering, Mark Dalgleish came up with a command line tool to automate the creation of Sketch libraries from HTML elements with data-sketch- attributes.

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.

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.

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.

sketch-to-fractal-comp on Vimeo

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

sketch-to-fractal-comp

Sketching at Clearleft.

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

He’s sketching mad, that one!

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.

Learn Sketch 3 - Design+Code

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

Paul Downey - just doodling - YouTube

A lovely little profile of Paul and his sketches.

The Web Is Agreement! The URI Is The Thing!

Paul Downey - just doodling

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.

d.construct 2012 - a set on Flickr

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

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.

Webstock: Jeremy Keith | Flickr - Photo Sharing!

I love these sketchnotes from my presentation at Webstock.

Webstock: Jeremy Keith

“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.

UI Stencils - Welcome

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