Show sidebar

Souped-up CSS

Categories: Our work, Useful/interesting

Since last writing about CSS we've developed our very own CSS framework – and we call it Soup.

Based upon Inuit.css (version 4.5.5) we've extended, adapted, and generally built-up a library of re-usable objects to form a framework that works well for us. Inuit is very lightweight and makes no design decisions whatsoever, so it made sense to start from there – as well as it coming from Harry Roberts (who gave us the talk on CSS).

So why not just use Inuit as a base for each project? Why make more stuff to sit on top of it?

Well, we found that as good as it is having Inuit not making any design decisions, there are some basics that we start with across many projects.

Forms are a good example here – we'll always want a certain set of base styles for all web forms across a site, and they'll have similar design functions – such as a 'normal' and a 'focussed' state – so it seemed sensible to extend Inuit's form setup; all it takes is colour and/or font changes (and any other specific alterations, if required) to quickly create a nicely designed form.

As we tend to use a similar typographical setup with respect to font sizes and vertical rhythm, we also added this into Soup – along with icons, buttons and a bunch of other helpers.

Another part of our extending Inuit to match our own needs is on the responsive side of things. We tend to use a mobile-first approach, initially including only the styles that a mobile device would need, then adding-in extra styling in a separate file for bigger devices (thanks Jeremy Keith).

Finally the other major aspect of Soup is the JavaScript; we include a few things from Twitter's Bootstrap as well as validation, some polyfills and a few other bits and bobs we use a lot of the time.

This approach of having a simple starting setup has saved us a lot of time over the past 6 months of using it. For example, combining this frontend Soup with our backend ExpressionEngine boilerplate helped us get dropletpay.com designed and built in under 2 weeks.

Here's to moving onwards and upwards with the recent release and stabilisation of Inuit version 5!

Design of the Year 2013

Categories: Inspiration, Learning things, Nice stuff, Useful/interesting



Image: Design Museum

Tomorrow, the Design Museum will announce the over-all winner of Design of the Year 2013 – a celebration of the past year's very best Architecture, Digital, Fashion, Furniture, Graphics, Product and Transport design.

The winner will be chosen from this shortlist of category winners:

Architecture: Tour Bois-Le-Prêtre, Paris / Designed by Frédéric Druot, Anne Lacaton and Jean-Philippe Vassal

Digital: gov.uk / Designed by Government Digital Service

Fashion: Diana Vreeland: The Eye Has to Travel / Directed by Lisa Immordino Vreeland

Furniture: Medici chair / Designed by Konstantin Grcic for Mattiazzi

Graphics: Venice Architecture Biennale identity / Designed by John Morgan Studio

Product: Kit Yamoyo / Designed by ColaLife and PI Global

Transport: Morph folding wheel / Designed by Vitamins for Maddak Inc.

As a graphic designer, I obviously have a particular interest in the Graphics and Digital categories. John Morgan Studio's brand identity for the Venice Architecture Biennale is just my sort of thing; simple, elegant, well-executed and, once you've seen it, there could be no other solution. It's perfect. And James big-upped (bigged-up?) the government's new website not so long ago in this blog post – and it is a fantastic example of simple, thoughtful, useful design. But neither of these would be my Design of the Year.

Although I'm a fan of Heatherwick Studio's Olympic Cauldron which was longlisted in the Product category, my personal choice for Design of the Year is the one which took the cauldron out of the running – ColaLife's Kit Yamoyo.

Image: Simon Berry

An exceptionally deserving and clever category winner, each Kit Yamoyo contains single-dose packs of oral rehydration salts (diarrhoea is the second-biggest killer of under-5s in sub-Saharan Africa), and the wedge-shaped pods also double as measuring cups for adding the correct amount of water to dilute each sachet.

So, what's the link with cola? And why the weird shape? The pods are wedge-shaped to fit into the spaces between Coke bottles in crates, enabling them to be transported and distributed using Coca-Cola's extensive networks across the region. Ingenious!


A Kit Yamoyo promoter hands out vouchers to mothers. Image: Simon Berry

The story of how the idea came about is a must-read and, as the ColaLife folks say, "It must be the first time that an anti-diarrhoea kit takes centre stage as a design icon."

Design for good at its very best.

(I'll update this post with the official winner once the announcement's been made.)

UPDATE

And the *actual* winner is … gov.uk. Congratulations! (And kudos for getting a press release about the win sorted so quickly an' all.)

I stick by my personal choice of Kit Yamoyo, but the Government's new website was always James' pick; and there is something rather nice about a website winning this gong, I reckon. Especially as many of the GDS Team's (award-winning) design principles run through the work that we do – it's sound stuff!

If you want a closer look at the nominees, they're being exhibited at the Design Museum until 7th July. Although the winner can obviously be seen on an internet connection near you.

Feeling a bit green

Categories: Silly, Useful/interesting

It's that time of year when Pantone reveal their 'Color [sic] of the Year', and in 2013 we should be looking out for up-and-coming hue PANTONE 17-5641 Emerald, apparently.

Why? Because, according to Pantone's website, the "vivid, verdant green, enhances our sense of well-being … by inspiring insight, as well as promoting balance and harmony."

I'm not that convinced by the whole thing really, but perhaps there is something useful about it, in that it helps folks to stop and think about colours and colour trends; which is a pretty fundamental part of what we deal with as designers.

So, get ready to witness rails of clothing resembling forests, and a glut of references to The Wizard of Oz's Emerald City in the coming year.

The current state of design

Categories: Events, Learning things, Nice stuff, Useful/interesting

Gov.uk was officially switched on yesterday, replacing direct.gov and Business Link. It's all part of the government's 'single domain strategy' – a move which will eventually bring all government sites into one place.

Gov.uk crown logo

As part of Supercool's 'Conference Tour 2012', Josh and I went to the Theory of (R)Evolution conference run by Shropgeek the other week. There were lots of good talks but the one that really stood out for me was by Paul Annett, Creative Lead at Government Digital Services (GDS).

GDS was set up in 2011 to revolutionise the way government carries out its digital projects, and how we interact with the government online. The idea has been to change the approach from large, lengthy (and pricey) outsourced IT contracts and move more in-house; to be more efficient and transparent.

Although GDS is a relatively new department, it already has some staggering stats:

  • They've closed down 1,500 government-run websites – so far. The plan is close down around half of the remaining 600 or so. 
  • Long-term contracts have meant that it has previously cost up to £50,000 to change one line of code on a live site. (Red tape is really expensive.)
  • Currently, 1 in 3 phonecalls to government agencies are about a failed online transaction. By eliminating these calls, it's hoped that call-centre costs will be reduced by £1 billion.
  • Despite now using Gmail and, what you might think would be prohibitively expensive, iPhones and Apple Macs, GDS's overall IT costs are already 80% less than those of direct.gov.

The most interesting part of the talk for me, however, was hearing about their approach to design. Just the idea of a government project using words like 'design', 'usability' and 'user-experience' is virtually unheard of in this country – but Gov.uk is showing some real innovation.

Paul took us through the GDS design principles; a brilliantly articulated guide for any large development project. Loosely it's about keeping projects small (as in cutting out any 'bloat'), simple, open and agile. 

An example of the design principles in action

The design principles also include a style guide for written content, which is something even small organisations can follow with regard to writing good web copy.

Of course whilst the Gov.uk site is all shiny and new, content will be tidy, and easy to both find and understand. It'll be interesting to see if, and how, that changes as more content is added over time.

But at the moment it feels a bit weird to be so proud of the government's website.