Code For America

We created digital brand consistency with a detailed front-end style guide.

Code For America is a non-profit organisation that envisions a government by the people, for the people, that works in the 21st century. Through initiatives like their Fellowship program and Civic Startups, they encourage innovation at the local government level.

Their website needs to be able to explain what’s on offer and have the ability to expand as more local governments get involved and more initiatives are rolled out. They approached Clearleft to help them in their redesign.

Designing Systems, Not Pages

It was very clear to everyone involved that simply designing and developing a set of pageswouldn’t scale well. What was really needed was a system of modular components from which many page types could be assembled.

Oh, and everything has to work on mobile devices as well as tablets, laptops and desktop computers.

This modular approach is exactly the kind of thing that we like getting stuck into at Clearleft, and we build responsively by default, so this was right up our alley.

We chose to work with Clearleft because they develop a pattern portfolio (a pattern/style library) which would allow us to scale our work to our Brigades. This unique approach has aligned perfectly with our work style and decentralized organizational structure.

Michal Migurski, CTO

Front-end Styleguide

The final deliverable for Code For America was a front-end styleguide: a well-documented collection of patterns and templates in HTML, CSS, and a little smattering of JavaScript.

From the smallest components like buttons and links, right up to a grid system for page layouts, everything retains the Code For America look’n’feel through consistent use of colour, typography and whitespace.

Armed with this arsenal of modular components, the Code For America team began to roll out their redesign step-by-step.

Constant Communication

Code For America are based in San Francisco. Clearleft are based in Brighton. Those awkward facts of geography didn’t stop us communicating constantly throughout the project.

Every day at 9:30am San Francisco time—5:30pm Brighton time—we had a quick “stand up” meeting via conference call. This ensured that there were never any unexpected surprises along the way—everyone involved knew exactly how things were going at all times.


Related Projects

Kew Gardens

Kew Gardens

Clearleft created a responsive pilot, helping bring information about visiting Kew Gardens to its rapidly growing mobile audience.

Matter

Matter

Ev Williams (cofounder of Twitter) loved this long-form content site so much, he bought it.

Channel 4 News

Channel 4 News

A marked increase in mobile traffic after our responsive re-design with Channel 4.

Wellcome Library

Wellcome Library

Clearleft helped the global medical charity Wellcome Trust bring its extensive collection to a digital audience.