#design

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 trying to find resources on the subject of User Experience and User Interface design in Virtual Reality a lot lately, as I’m thinking about Google Cardboard, and preparing demos for a talk about using JavaScript to build Google Cardboard experiences.

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.

I read an article on the subject of implementing a PSD design of a website perfectly in HTML/CSS, and without wanting to spend my time writing a lengthy response in the comment form of a blog for it to disappear in to the depths of a blog that I don’t visit very regularly, I figured I’d write my thoughts up as a blog post.

This post is mostly for my own benefit on the rare occasion that I have to convert SVG files to PNG. I always spend a large amount of time looking for an online SVG to PNG converter or a terminal one-liner to do this.

The latest update to Chrome (25.0.1364.99) seems to have brought some slight tweaks the interface. The tab bar has seen some tweaks to the spacing of the close button, as well as the hover/active/inactive states of tabs, and the infamous blank ‘new tab’ button has been stretched a little. The inactive state of tabs and the ‘new tab’ button seems to blend in to the background a bit more too.

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:

The Smashing Book #2 is a book about web design and development from the folks over at smashingmagazine.com. As the name implies, it’s their second Smashing Book. When the first Smashing Book was released in 2009, I jumped to the chance of buying a copy. I’ve always been a fan of Smashing Magazine, and figured Smashing Magazine in print form couldn’t be a bad thing (and it would be a nice book for reading on my bus commute to/from work each day). The first book talked a lot about coding best practice, usability and optimisation but was riddled with issues, from layout/editing issues (the justified text was unbearable, and it had numerous mistakes), to issues with the binding and over-all quality. On their end of the release I believe Smashing Magazine also had production delays too. The second book is cut from a different cloth in terms of production quality, and article subjects, this time talking more about the philosophies of graphical design, user experience, user behaviour and typography (amongst other topics). The issues of the first book are now gone, with a lot more time gone into editing/layout, and now contained in hard backing, the book feels like it’s a lot higher quality. At the start of each section there are illustrations by Yiying Lu (the creator of the Twitter “fail whale” illustration), which provide a good graphical representation of the subject of each section. This book is less code-heavy than the first, but features a lot of good quality reading material. Page layouts seem a lot nicer and the articles contain colourful screenshots and representations of what is being discussed, which do a good job of breaking the pages up - though from time to time you will find yourself facing a wall of text, which makes it not ideal for commute-reading in chunks. Overall I would say this is a much better book than the first Smashing Book. It’s a steal at the same price as the first, and a great resource for any web designer to have on their desk or book shelf. I look forward to the next Smashing Book when/if it’s released and I hope that Smashing Magazine consider re-releasing their first Smashing Book as a hardback second edition.

Safer than running with scissors, go and check out the Potatochop Battle section now!

Bear with me while i port it over to wordpress. Update: the design is pretty much done now, after much reiteration.

so the design is looking very different from when i put this up.. .. well, i decided to keep the roots of the old moglenstar.net, keeping with an old image and all.. i recycled the header! and now its all dark and stuff, looks good in IE too.