Tag Archive for 'Design'

FLOWing introduction animation for a better user experience

Most product websites will layout a bunch of images and text content on the page (maybe even a slick video if you’re lucky) and expect users to make sense of it all. Flow (by MetaLab) on the other hand uses some simple, fun, animation effects to facilitate a visual point of reference, narrating (or aptly: ‘flowing’) the user through the rest of their product experience; discovering more about this task management app – great stuff!


Some might argue that passive whitespace is the unconsidered space present within a composition. I disagree: if you don’t consider all your whitespace, that’s just bad design. Passive whitespace creates breathing room and balance. It’s important.

Mark Boulton

Design flourishes under constraints

[On the concept of design in general, regardless of what medium it’s in] Design really flourishes under constraints. The more known quantities that we have to deal with, the more creative solutions we can often apply. After all, design is all about creating order out of chaos.

Ethan Marcotte

HTML5 Priority of Constituencies

In case of conflict, consider users over authors over implementors over specifiers over theoretical purity. In other words costs or difficulties to the user should be given more weight than costs to authors; which in turn should be given more weight than costs to implementors; which should be given more weight than costs to authors of the spec itself, which should be given more weight than those proposing changes for theoretical reasons alone. Of course, it is preferred to make things better for multiple constituencies at once.


(Translated: “It’s all about the user baby!”)

Taming Adobe colour settings for your web browser

*Some artwork I'm working on*

*Some artwork I'm working on*


If you – like me – are having problems reproducing identical colours between Photoshop and your web browser this post provides a solution.

This post does not concern itself with best practices for printing techniques and managing CMYK colour palettes. I’m primarily a web designer, so settings for print don’t concern me. That said, if you are a print designer you’d still benefit from reading this article, especially if you haven’t come across the term sRGB before.

Reading and scanning on the web are not the same thing

Users read left-to-right. Users scan top-to-bottom. This is why it makes sense to left-justify menu labels (list items) and headings.

Jakob Nielsen

Web app personality is essential

Software is media today, particularly consumer software. When people use it [your software] they approach it in the same way they would approach media. When I say media I’m talking about a magazine, or a newspaper, or a TV show.

When you think about The New York Times vs. The Wall Street Journal, Vanity Fair vs. Vogue, or Fox News vs. CNN: each of these media properties have a voice; they have an attitude; they have a style, and it’s unique, and it’s different.


… borrowing of a style, typically used elsewhere, as the basis for a design. This may be done for purely aesthetic reasons as a method to present information in a certain way, but often it is done to borrow characteristics that are associated with the appropriate source. Establishing such a connection may add credibility to the design or cause it to be viewed in a certain way.

Gavin Ambrose & Paul Harris

All you need to know about web typography in two posts

I hand these links over to other designers and developers time, after time, after time:

  1. http://24ways.org/2006/compose-to-a-vertical-rhythm
  2. http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography-part-4

Essentially they contain all you need to know about web typography. Timeless articles.

99 (CSS) problems, but liquid ain’t one

Experiments with liquid CSS layouts

Experiments with liquid CSS layouts

We all know liquid is important, right? (Doctors recommend 1.5-3 litres per day :P)

Some of you may have been fooled into thinking liquid and elastic layouts died as soon as browsers deployed native zoom a few years back. I’ll assume you understand – with a fair degree of knowledge – the technical and usability ramifications of implementing fixed-width, liquid, and elastic web layouts. If not, then the following should briefly clear the haze:

Fixed-width layout

Dimensions have a fixed-width pixel (px) measurement.