As a photographer, I’ve got used to hearing that “the best camera is the one you have with you” and up to a point, I agree. For most things, capturing the moment is what’s important, and the quality or fidelity of the resulting shot is secondary.
Similarly, as a UX professional, I can sketch with whatever stylus and surface happens to be available at the time because communicating the idea is often more important than the aesthetic quality or fidelity of the resulting sketch.
Lately though, I’ve been thinking a bit about how I can improve my sketching ability and make life a bit easier for myself while improving my sketch-based communication.
Now, it’s no secret to anyone who’s ever worked with me (even for a very short time) that I have something of a stationery fetish, so it’s not like I ever need an excuse to buy more/different/better supplies, but I’ve been experimenting with different pens, to see which ones work best, and in which situation.
Making a Point
For a while, I’ve been using a set of Stabilo 88 Pens that I got from Sainsbury’s and they’re fine up to a point, partly because of their fine point.
They’re great for taking notes, sketching in Moleskines and for adding fine detail to larger sketches, but they’re not so good when you’ve got a whopping great expanse of Goldline Marker pad and you’re trying to quickly get an idea across.
Enter the Sharpie
If getting engaged was the most exciting bit of my trip to San Francisco last summer, browsing the stationery section of WalMart is definitely up there in the top five.
I was persuaded that 24 colours of Sharpie were more than enough and returned to the UK with more colours than are available on this side of the pond, and I’m really glad that I did, because they’ve got me through a couple of fairly sketch intensive projects.
The downside to this is that I’ve discovered that I like to sketch in grey/pastels rather than black/brights and I’ve completely knackered the two grey pens and now can’t get hold of replacements.
Fiddlesticks.
The Sharpies also start off nicely sharp and then get blunt, meaning if you’re doing a set of sketch based paper prototypes, the last sketches are often less detailed and neat than the first ones.
So, they’re not perfect either.
Double the Fun
Most recently, I was in a craft shop and wandered across Copic Ciao Markers, which are double pointed and bought a few, in the colours I thought would be most appropriate for the work I’ve been doing recently: black, two greys, two blues, a green, a red and a yellow.
Unfortunately, I didn’t realise the tip I thought was Sharpie-like was actually more of a brush. It’s not a huge deal-breaker, but it’s just not quite what I was hoping for. They’re still nice pens though.
Three’s a crowd?
After a bit of a conversation with m’colleague Fred I was reminded of Letraset Tria markets, which have three nibs.
I’d seen them before but always written them off as too expensive, but that was before I found Cowling & Wilcox and their better than half price sale.
Needless to say, I fell in love at first sight.
After a bit of dithering, I bought the Product Design set, because I felt like it would give me the best range of colours for sketching in greyscale as well as a decent range of colours for adding meaning, where appropriate.
I haven’t had much of a change to use these in anger yet, but I’m hoping with the double whammy of being able to a) refill them and b) get new nibs for them, they’ll last me for years and be worth the investment.
I’ve shown you mine, now show me yours
Of course, tools are a very personal thing, and while I think this might be the thing that works for me, I’m always interested in how other people work.
I’ve been in love with sketchnotes for ages, but I think the concept of creating abstract art based on talks is really interesting (though potentially less obviously useful).
When I first saw the pictures of this on engadget I wasn’t sure whether or not it was a hoax. I’m now pretty sure it’s real, but not entirely sure it was an accidental loss. I’m also slightly regretting upgrading my iPhone 3G to a 3GS in February. Ah well.
It’s an interesting thing for two reasons. Firstly, it’s the first photoblog design of this kind that I’ve seen (and there are some really lovely UX touches demonstrated in the video) and secondly, the site hasn’t gone live yet and only displays the video itself.
This is a text version (more or less) of the talk I gave at BarCampLondon 7, because I don’t think the slides will be of use to anyone who wasn’t there. It isn’t exactly what I said, because that was then, this is now, the talk wasn’t recorded and I can’t remember exactly what words I used.
There were 34 slides and I did the talk in around 20 minutes (although writing it up has taken exponentially longer, weirdly), so feel free to grab yourself a cup of tea (or other beverage of choice) before you start reading.
I wrote a post the other day sharing a tiny tip that makes testing websites easier (go read, it’s short, I’ll wait), and in that post, called out the first site that I found that had a missing body background colour.
Since then, I’ve spotted a quite surprising number of sites that have the same affliction and have (mostly for my own edification, and with half a mind on a blog post further down the road) been posting each site to twitter using the hash tag#missingbodybackgroundwatch and today, a couple of people asked what it was all about.
So. A bit of explanation.
Working with a changed colour scheme was, for the most part, not a problem… unless the site in question had specified the text colour to be a similar shade grey (or anything else that was quite light) at which point the entire thing became almost entirely unreadable as the colour contrast all but disappeared. Doh!
A better example would be a site that specified black for its text and neglected to set white as the background colour. If anyone visits using a browser set to the default colour scheme (or using Windows or Mac default colour schemes) that’d be fine, but if, for example, someone was using a high contrast reverse colour scheme, the default browser background colour would more than likely wind up being black, combine that with black text, and it just doesn’t work.
Since a picture is worth a thousand words, here are three screenshots that illustrate why it’s a problem.
The site in question is the New Statesman (I can’t remember why I was looking at it – probably followed a link from twitter).
Example 1: New Statesman viewed using the standard Firefox (cos that’s what I use) default colour scheme. Looks fine, right?
Example 2: Viewed using a different background colour (to imitate a different colour scheme). I chose pale green because it illustrates my point better than grey. It doesn’t look too good, but at least it’s still readable.
Example 3: Viewed as it would be if a user had chosen a high contrast reverse colour scheme. Some text is readable, but lots of it isn’t (which is a bit of a problem for a newspaper/magazine site.
It’s such a tiny thing, but the impact can be huge.
So, if you’re going to specify a text colour, make sure you’ve specified an appropriate background colour too. That doesn’t mean that you have to specify a background colour on every element. Provided that somewhere underneath your text you’ve specified a background colour that has sufficient contrast against the text colour, you can let the cascade do its thing.
Obviously, if you decide to change to using light text on a dark background in an area where the rest of the site is dark text on a light background then you’ll need to specify both.
Oh, and make sure that wherever you use background images that you back them up with an appropriate background colour as well. Otherwise, all that lovely contrast disappears if, for any reason, images are not available.
I’m going to keep collecting sites with a missing body background colour, do a bit of research and write a post about it in a wee while, so in the meantime, if you feel like it, change your background to something else (in Firefox, you’ll find it in Preferences, Content, Colours, then click on the box next to Background and just pick something else from the handily provided swatch) and if you spot any, it’d be ace if you’d post them to twitter using the #missingbodybackgroundwatch hash tag.
