UX & Design

All too often on my computer, I’ll finish typing something, reach for my mouse, and have no idea where the cursor has got to. Not on the monitor I was looking at. Possibly on the laptop screen, but I’d have to turn my head and check. So I do what I always do, shake the mouse until macOS inflates the cursor to the size of a dinner plate, and carry on.

I was waiting for Claude to answer a token-heavy question at work the other day, the little “Thinking…” label flickering into “Wibbling…” and then “Moseying…”, and I caught myself doing the thing I always do when a spinner takes too long, staring at it, trying to divine meaning from the word choice. Is it nearly done? There’s no percentage, no bar, just a word standing in for “trust me, something is happening.” It sent me down a rabbit hole into where progress bars came from, and it turns out they were never really about progress at all.

GIMP has always had an interface problem. I’m not blaming the GIMP team (they’ve built something powerful on a shoestring). They’ve been clear they’re not interested in copying Photoshop wholesale; their FAQ argues that designing around actual user research beats imitating someone else’s interface decisions. Fair enough in principle, but coming from years as a Photoshop user, that design still feels hostile to me. I’m just one user story out of many they’ve had to design for, but it still expects me to learn its own way of doing things rather than offering a config closer to what I’m used to out of the box.

Icons work because they’re fast. One glance, immediate meaning, no reading required. The tradeoff is that they compress complex information into a single symbol, and compression always drops something.

I’ve spent the last five years reading picture books with my kids at bedtime. Hundreds of them - and I’m still going, even as my eldest moves on to chapter books. One thing has consistently driven me mad: I often can’t read the words.

I’ve been making use of Sketch a lot lately. One of the coolest features of Sketch is it’s plugin support. I’m using a tool called Sketch Toolbox to manage plugins in Sketch – this functions a lot like Package Control for Sublime Text, but it’s a stand-alone application.

I’ve recently been doing a lot of working designing an icon font that works well at small sizes for my day job. Here’s an overview of the process I’m using to go from a doodle on paper, to a functional icon font that can be used in most web browsers.

Somebody over on Designer News asked how to re-create the various z-height shadow effects from Google’s Material Design in Photoshop.

Recently it was pointed out to me that Pizza Express provide a nice fallback for photos on their picture-heavy emails. Take the following example, from a promotional email they sent out earlier this year:

Scrolling on the web is something that we take for granted when thinking about how users will interact with our website. There are two schools of thought on the subject: one that’s ingrained in how we interact with what we’re seeing on our screen, and the other ingrained in how we interact with the real world.

Enjoy Unable to recover the image :(

This is my second theme created for the R4DS nintendo DS flash cartridge. Unable to recover the image :(

This is the first of my themes created for the R4DS nintendo DS flash cartridge. Unable to recover the image :(

Another theme for the R4DS, this time Vista! Unable to recover the image :(

These buttons were requested by ‘ynnoj’ to match the Windows port of the great ‘human’ theme for linux. human-foo.zip

Somebody requested these over at hydrogen audio. rating hearts

After the great response to screenshots of my foobar setup, I have decided to post how to make you foobar look just like, or similar to, my foobar setup. Keep reading to find out how.

I made these to be used with foobar2000, but I guess you could use them anywhere that you need some media-control icons. 24bit PNG, 16x16, goes well with most colours.

Light colours and wet-looking highlights. Icecons are a 20x20 pixel 24bit alpha-blended PNG royalty free icon set created out of boredom (or desperation, I can’t decide).

I’ve been working on this for a while, on and off.. it’s not too complicated, and it comes with 5 colour schemes!

created some new buttons for foobar2000, based on the playback buttons in windows media player 11.

These were an experimental idea I had for some blog/CMS icons. I didn’t pursue the idea very far, but what I’ve done I’m making available.

Well, i’ve started putting together a tutorial for setting up foobar2000. I’ve seen plenty around, and there are plenty of cryptic foobar wiki’s, but none of them made it simple enough. so without the crap, here it is it’s still being written, but what’s down is good

I created this utorrent program icon from silk icons by Mark James. Merging three silk icons together, and with a little pixel tweakage from myself - it works as a nice utorrent icon.

I created these icons for a CMS I’m writing called CMOGS, but I figure if CMOGS is going to be free, why can’t these be?

It’s probably by fault of my monitor, or the size that I’m attempting to do this, but when pixelling icons, it’s hard to make distinguishable icons at less than 16x16 pixels. Take the following smiley icons I made, for example.. The “grinning” and “sad” smileys are almost indistinguishable.. Okay, so I’m using a small palette, but the pixel difference between the two of them is minor. I think I need to go back to the drawing board.