Posts about design

How to design things properly

by

Not long ago I heard an otherwise talented designer complain that accessibility guidelines “impose more restrictions” on them.

I never heard that same designer complain that brand guidelines imposed restrictions on them. They rightly considered brand guidelines to be an essential parameter within which their designs needed to work.

A designer who begrudged having to work within brand guidelines would not be taken seriously as a designer. Yet a designer who begrudges working within accessibility guidelines barely raises an eyebrow amongst their peers.

Why is this?

In short, it is because accessibility is viewed as a minority need.

At worst, this manifests itself in outright prejudice – a resistance to “cater for a minority” in favour of a preferred solution for a majority.

At best, it manifests itself in a view that the disabled are a minority who don’t really care about design, and are happy to be accommodated separately.

But guess what? Disabled users don’t want an accessible version of your site – they simply want the sites they visit to be designed properly in the first place.

By ‘designed properly’ I simply mean this – a site that is designed well, that solves its problems with solutions that work for as many people as possible – a design which is inclusive. A solution that excludes people unneccesarily is not a solution at all, it is a failure.

It is not sufficient to have a list of bolt-on ‘accessibility enhancements’ to run through after you’ve designed for your idealised user. Because there is no ideal user – there are simply users, all of whom have different motivations, different feelings, and yes, abilities. Take that approach and you’ll end up compromising the experience for everyone.

Inclusivity should be embraced by designers because it is the socially responsible thing to do, and because it is fundamental to good design. Or as @SandiWassmer (who writes eloquently on these matters), summed it up nicely: “Inclusive design is about making a product fit for purpose. “

There is much debate amongst designers these days about how to design for the increasing range of devices being used – from mobile to desktop, and everything inbetween. New methods are emerging such as responsive web design, which attempts to allow sites to adapt effortlessly to device and context.

But to my mind, a more pressing problem is this – how do we design for such wide ranging people? There is no ‘normal’ user just as there is no ‘normal’ device. We have to embrace the fundamental principle of inclusivity, and ensure our sites are usable by all who wish to use them.

In short, we have to start designing things properly

Wizards, Rockets and Exploding Heads: why designers should code

by

There’s continual debate within the web design community as to whether designers should (or indeed can) write code.

The answer is that yes, designers can code, and yes, designers should.

Why you should code

Efficiency – You’ll work better with developers

If you know how websites are built, developers won’t send work back to you with an apologetic “sorry, we can’t build it quite like this”, because all those carefully considered decisions around typography and layout that you made will have been better informed.

You’ll have more control over the design

A Photoshop comp isn’t a design, its an artist’s impression. That italicised Georgia pull-quote may look beautiful in Photoshop, but it may be almost illegible rendered in Windows. Designs almost always need to be revised once they’re in the browser.

Additonally there are always dozens of pages, elements, fringe-case situations etc that aren’t covered by those Photoshop comps, and someone needs to design them. You might be lucky to be working with a developer with a good eye, but you might not, and micro-managing a less design-savvy developer is inefficient to say the least.

If you can build sites as well as visualise them in Photoshop you will be able to adopt far more flexible design processes. I routinely switch back and forth between designing in Fireworks and designing directly in the browser with CSS. Its a fluid process that works well for me, and I bet it would work well for you too.

Being able to build your own designs, and have full control over every nuance, is a great thing.

Be prepared for the future!

There’s a real momentum gathering around the idea of responsive web design – in a nutshell, websites that adapt themselves to a wide range of screen and device widths, with no fixed layout. For obvious reasons it is very hard to design such sites without taking the design into the browser, and playing directly with CSS.

You’ll be more employable

Being able to design and code means that you will be able to dive in to help out in a wider variety of situations. That makes you a greater asset to any team, and especially attractive to startups, who often don’t have the resources to employer both a designer and a developer. And if you’re freelance, you’ll have a wider choice of gigs.

Why you can code

Some designers feel they can’t code, or that they could but that it would somehow dilute their design skills. Many designers are discouraged from doing so.

All these barriers are based on two myths.

MYTH 1: You can’t do both – they’re a different mindset

There’s a widely believed myth that designers and developers have different mindsets, and that it simply isn’t possible to do both jobs well.

That simply isn’t true.

Contrary to popular belief, using both the left and right hand side of your brains doesn’t make your head explode. It can be done. Many great contributors to culture and science, like Leonardo da Vinci, have done it.

I think its true that some developers can’t design. Design requires an innate ability – without it, all the design principles in the world won’t make a developer a great designer.

And I think its true that there are few designers that can become equally great back-end developers (by which I mean all the really hardcore programming and database stuff).

But I’ll let you in on a secret…

CSS isn’t rocket science

This is rocket science:

rocket science

Pretty damn complicated, isn’t it? You’d have to be a rocket scientist to understand it.

This is CSS

rocket science

‘p’ stands for paragraph. You can guess what the rest of it does, I’m sure.

CSS is written in something approaching English. HTML is pretty straightforward once you’ve learnt it. There’s no logic involved, no calculations, nothing to make your brain explode. You just need to take the time to learn it. Trust me, it feels more like a craft than a science.

MYTH 2: Designing and Coding means you can’t become a specialist in either

When I was a kid I used to play Dungeons and Dragons. In that game, players would choose a profession – a fighter, a wizard, a priest etc. On their adventures players would gain experience points for using their profession’s skills. As they gained more experience, they would become more powerful. A Level 10 Wizard was far more formidable than a Level 1 Wizard, for example.

But you didn’t have to choose just one profession. You could become a fighter-wizard, for example. A fighter-wizard would take longer to progress through the levels, as experience points would be divided between the two professions. It would take a fighter-wizard twice as long to reach Level 10 than a fighter or wizard would. But crucially, they would have the exact same skills and proficiency as their single-profession counterparts when they got there.

If wizards can do it…

The analogy is obvious, and accurate.

Some would argue that if a designer concentrates purely on design for 10 years, rather than dividing their time between design and development, then they’re going to be a better designer.

But I would take issue with that. First, how much better would they be? The more experienced we become in something, the slower our skills grow – there’s a much greater difference in ability between someone with 1 years experience and someone with 10 years experience than there is between someone with 10 years experience and someone with 20 years experience.

I’d also argue that when it comes to web design, that an understanding of front-end development is itself crucial in making you a better designer.

A designer who codes is a specialist

Besides, what constitutes a specialist? I don’t do all aspects of design – I don’t do print design, and I don’t do campaign work – I design interfaces. Similarly, my development skills are concentrated on developing interfaces, not any of the ‘behind-the-scenes’ stuff. I am, in essence, a specialist in interfaces.

I’m at least as specialised as a designer who specialises in ‘design’, working in both print and digital, or a developer who writes both front and back-end code. The only difference is that my skillset overlaps two more generalised areas.

Summary

Being a designer who codes isn’t as hard as some people make it sound. Nor does it make you a worse designer. It makes you a better designer.

So why not give it a go? You may even enjoy it.

A pragmatic approach to responsive web design

by


There’s a lot of talk these days about ‘responsive web design’, and I believe that the techniques and approaches that it encompasses are going to prove invaluable as we design new sites for an ever widening range of different devices.

Retro-fitting responsiveness

But those techniques don’t need to be limited to new designs or major re-designs. They can be applied to existing fixed width sites to improve the experience for users on handheld devices. And though adapting an existing fixed width site so that it behaves more responsively can seem like a daunting task, it can actually be relatively painless.

I’m going to share my experience of doing so on a site I built for an artist’s portfolio, and highlight some of the techniques and decisions that were made.

The site

The site was initially prototyped in HTML. Layout, typography, colour palette etc were then explored within Fireworks mockups and then developed and refined within the prototype itself. A few markup tweaks later and the site was essentially done.

The problem

The site was fixed at 960px wide. It worked fine at desktop resolutions but was fiddly to use on mobile devices, requiring an awful lot of scrolling and zooming to look through the artwork.

screenshot of homepage on desktop

A pragmatic approach

In retrospect I should have taken a responsive approach from the outset, eg. allowing images to stretch/shrink to best serve the many resolutions they might be viewed on. But rather than try and retro-fit an ideal approach, I wanted to see how quickly and easily I could fix the biggest issue – the need for better presentation on mobile devices.

Setting up

First I added two media queries to my global stylesheet – one to target mobile devices (ie. device widths 480px and below), and one to target anything larger than mobile. Anything outside of these queries would be applied to all devices. It then became a simple process of moving existing styles into the second query if I didn’t want them to be applied to mobile devices, and adding new mobile-specfic styles to the first query.

The changes for mobile

Page widths

The site is currently fixed at 960px. I wanted it to be full width of devices up to 480px wide, so changed the page width to 90% for device widths 480px and below.

Navigation

The tabbed navigation simply doesn’t work. If shrunk down the fit a small screen it becomes impossibly fiddly to use. I’ve re-styled them completely, ensuring they have large hit areas, and allowing them to stretch, in a manner similar to that demonstrated by Ethan Marcotte’s ‘Responsive Web Design’.

Desktop

screenshot of navigation on desktop

Mobile

screenshot of navigation on mobile portrait mode

Mobile (landscape mode)

screenshot of navigation on mobile landscape mode

Title

The graphical title didn’t work well with the revised navigation, so I moved the image-replacement technique to the larger-than-mobile media query and re-styled for mobile devices using the Typekit styles used elsewhere on the site.

Desktop

screenshot of page title on desktop

Mobile

screenshot of page title on mobile

Line-height

There’s a generous 1.8em line-height on some passages of text on the desktop version that feels uncomfortable on the mobile version when those passages are reduced to less than 300px wide, so I reduced it accordingly.

Background imagery

The CV page has a large typographic background image that makes no sense when cropped on the mobile version, and looks fussy when scaled down to fit. It is simply removed from the mobile version (by moving the image out of the global styles and into the larger-than-mobile query).

Whitespace

The desktop version uses a generous amount of vertical whitespace in its compositions to group elements together, and to give the design an airiness. In the linear mobile version the whitespace breaks the flow of the page, and so I reduced it.

Desktop

screenshot of whitespace on desktop

Mobile

screenshot of whitespace on mobile

Hover states

Obviously hover states on links have no value on a touch-screen mobile device, so all hover states are moved into the larger-than-mobile query (though I could have left them for the benefit of some future hover-sensitive touch screen device). I then double-checked that there were enough visual cues for links after those hover-states had been removed.

Homepage Carousel

I’ve removed the carousel on the homepage entirely for mobile devices using a simple (albeit crude) “display: none”. The decision to do this is more of a hunch than anything – a feeling that users on a mobile are likely to be browsing quicker than desktop users, and won’t be lingering long enough on the homepage to enage with the carousel. I’m not sure its advisable to second-guess the context in which users are using their mobile device, but I’m comfortable with the decision.

Tweaks and fixes

There was a fair amount of kinks to iron out (eg. margins between floated columns caused alignment issues when linearised in the mobile version, and some larger images needed to be changed from fixed width to percentage-based to stop the layout breaking).

Conclusion

And that’s about it. I’m not suggesting that this retro-fitting approach is preferable to rebuilding a fully responsive layout from scratch – it isn’t. But this exercise hopefully shows that with just a couple of hours work you can get a previously fixed width site looking pretty respectable on a mobile, and far easier to use.

To learn more about responsive design techniques I can thoroughly recommend ‘Responsive Web Design’, and to see some properly responsive designs (as opposed to the hatchet job I’ve described above), check out the Media Queries website.

Design for the cover of Aldous Huxley’s ‘Island’

by

This is a personal project of mine to design a cover for Aldous Huxley’s novel “Island”.

The novel, written in 1962, is a utopian counterpart to the author’s own dystopian “Brave New World”. It tells the story of a cynical journalist who is transformed when he arrives at the fictitious island of Pala and is embraced by a society based on eastern mysticism and what could be described by the modern reader as “new age” philosophy.

Aldous Huxley's Island cover

Design for the cover of the Tones on Tail album ‘Pop’

by

This is a personal project to design a cover for the Tones on Tail album ‘Pop’.

Formed by ex-member of Bauhaus, Daniel Ash, Tones on Tail was a short-lived but creatively fertile project which resulted in a string of EPs and one terrific album. Combining many musical genres, ‘Pop’ plays like a weird dark bubble of psychedelic-electronic-goth. Idiosyncratic, inventive, and bursting with energy, it remains a highlight of Ash’s career.

Tones on Tail Pop album cover

Shortcuts to the Soul: review of ‘Photocopies’ by John Berger

by

There is an image reproduced at the beginning of this book. It looks at first glance to be a photocopy, so stark is its contrast and so unclear its details, though it is in fact an image taken with a pinhole camera. It shows the author John Berger standing beside the first of the many people he writes about in this book, an artist who lives alone in the countryside. Very little can be seen of their surroundings, just the hazy silhouettes of a tree and the artist’s house. The figures themselves are silhouetted also, their features and clothes indiscernible, their smiles unseen. And yet the tenderness that exists between the two people is clear. Her head leans towards his, his body supporting hers like a sturdy tree trunk. And you can just make out the unkemptness of the author’s hair, as though such trivialities as appearance have been thrown to the wind.

It is not only a wonderful portrait, but a carefully chosen one, it being the visual equivalent to the writing that follows. For the writing, like the photograph, conveys so much about its subjects with so little. There are around thirty ‘chapters’ here, each one just a few pages in length, and each one being about a person who touched Berger’s life in some way.

He writes about a particular memory of each person, a memory that in same way defines that person’s essence, in the way that a portrait can. It reminds me of the drawings of Rembrandt, or Maggi Hambling. Those artists capture the essence of their subjects often with just a few strokes of the pen, and Berger writes with a similar economy. There isn’t a single superfluous word in this book. Take one word out of any of these portraits and the likeness would be lost, yet if you were to add one word more, it would stick out like an ugly ink blot.

Take Berger’s description of a Parisian photographer, now begging in the Metro:

“His eyes are an intense pale blue, and from time to time they twitch, as a dog’s muzzle twitches when investigating a scent. Its hard to watch his eyes without feeling you’re being indelicate. They’re totally exposed – not through innocence, but through an addiction to observation. If eyes are windows on to the soul, his have neither panes nor curtains, and he stands in the window frame and you can’t see past his gaze.”

Or this, his description of a motorcyclist about to mount his bike during a race:

“[he] puts on his helmet and stands very still, waiting, small, a shearwater looking out to sea from a cliff edge.”

Berger’s own humanity shines through every page, as does his respect for those he writes about. One of the most moving of all these moments is the one in which he visits a prison and reads a story to one of the prisoners, a man he has never met before but whose predicament leaves a lifelong impression on the author:

“The aim of incarceration is to reduce all exchanges with the outside world to a minimum. And this has an effect on voices. Ours, as we read, were unlike prisoners’ voices. Our voices were volatile – like swallows in flight seen through a window. Maybe our voices were more interesting than the story we were reading.”

The book is full of such acutely observed insights. And of course, this being Berger, a lot of these insights are into the nature of Art, its relationship with the people he describes and also with himself.

“A wisp of grass is blown onto one drawing. Tiny fruit flies alight on another. A scrap of leaf, transparent like parchment, drifts from a nearby field of maize on to another sheet. If I did not see these things being wafted on to the paper I would have mistaken them for painted marks. I’m no longer at all sure where to draw the line between art and nature, Becoming and Origin. This is the mystery that keeps me peering even after the light has dimmed and the chickens have gone quiet.”

I like this passage particularly as it goes some way to describing his own writing. It is hard to draw the line between the people he describes and the nature that surrounds them. People are closer here to their animal cousins than in anything else I’ve read. The motorcyclist who is a shearwater on a cliff edge, the photographer whose eyes twitch like a dog’s muzzle, or the artist who learns about her nature through cuttlefish, octopus and molluscs. It feels like some kind of distilled astrology, but one based on observation and earthy truths rather than the muddled light of the stars above.

But above all, the collective whole of these portraits becomes a celebration of individuality, and of shared humanity. You feel you would love to meet every person in this book, and you’re left, invariably, with the feeling that you have had that pleasure. Insightful, tender and wise, it is one of the most life-affirming reads I can think of, and one to return to again and again.

“The two of us stood there facing the camera. We moved of course, but not more than the plum trees did in the wind. Minutes passed. While we stood there, we reflected the light, and what we reflected went through the black hole into the dark box.

‘It’ll be of us’, she said. And waited expectantly.”

Design for the cover of the novel ‘High Rise’

by

This was a personal project of mine to design a cover for the JG Ballard novel ‘High Rise’.

First published in 1975, ‘High Rise’ is sharp, witty, but undeniably apocalyptic story of a high rise block of luxury apartments, whose inhabitants descend into violent tribal conflict. Its message is simple – that modern life and architecture suppress the basest human instincts in such a way that they bubble dangerously beneath the surface, waiting for a trigger to set them violently free.

High Rise book cover

Design for Swans album ‘Filth’

by

This is a personal design project of mine to re-design the debut album of New York avant-garde industrial band Swans.

Released in 1983, ‘Filth’ is a brutal album that centers upon crude, half-formed, monolithic rhythms, punctuated by enormous swells of power. It is an album of extraordinary intensity, which seems to reduce both performer and listener to an almost infantile level of despair. Nevertheless, all that pain has an almost cathartic quality which makes the recording not only re-listenable, but utterly compelling.

Swans 'Filth' album cover

Design for Bauhaus album ‘Go Away White’

by

This was a personal project of mine to re-design the cover of the Bauhaus album ‘Go Away White’.

‘Go Away White’ was a one-off album recorded during the band’s brief reunion after over 22 years. I wanted the design to reflect the album’s light, playful approach to the band’s trademark, theatrically dark ‘gothic’ sound.

Go Away White album cover