Tags: logo

30

sparkline

Wednesday, April 19th, 2017

Designing the Patterns Day site

Patterns Day is not one of Clearleft’s slick’n’smooth conferences like dConstruct or UX London. It’s more of a spit’n’sawdust affair, like Responsive Day Out.

You can probably tell from looking at the Patterns Day website that it wasn’t made by a crack team of designers and developers—it’s something I threw together over the course of a few days. I had a lot of fun doing it.

I like designing in the browser. That’s how I ended up designing Resilient Web Design, The Session, and Huffduffer back in the day. But there’s always the initial problem of the blank page. I mean, I had content to work with (the information about the event), but I had no design direction.

My designery colleagues at Clearleft were all busy on client projects so I couldn’t ask any of them to design a website, but I thought perhaps they’d enjoy a little time-limited side exercise in producing ideas for a design direction. Initially I was thinking they could all get together for a couple of hours, lock themselves in a room, and bash out some ideas as though it were a mini hack farm. Coordinating calendars proved too tricky for that. So Jon came up with an alternative: a baton relay.

Remember Layer Tennis? I once did the commentary for a Layer Tennis match and it was a riot—simultaneously terrifying and rewarding.

Anyway, Jon suggested something kind of like that, but instead of a file being batted back and forth between two designers, the file would passed along from designer to designer. Each designer gets one art board in a Sketch file. You get to see what the previous designers have done, leaving you to either riff on that or strike off in a new direction.

The only material I supplied was an early draft of text for the website, some photos of the first confirmed speakers, and some photos I took of repeating tiles when I was in Porto (patterns, see?). I made it clear that I wasn’t looking for pages or layouts—I was interested in colour, typography, texture and “feel.” Style tiles, yes; comps, no.

Jon

Jon’s art board.

Jon kicks things off and immediately sets the tone with bright, vibrant colours. You can already see some elements that made it into the final site like the tiling background image of shapes, and the green-bordered text block. There are some interesting logo ideas in there too, some of them riffing on LEGO, others riffing on illustrations from Christopher Alexander’s book, A Pattern Language. Then there’s the typeface: Avenir Next. I like it.

James G

James G’s art board.

Jimmy G is up next. He concentrates on the tiles idea. You can see some of the original photos from Porto in the art board, alongside his abstracted versions. I think they look great, and I tried really hard to incorporate them into the site, but I couldn’t quite get them to sit with the other design elements. Looking at them now, I still want to get them into the site …maybe I’ll tinker with the speaker portraits to get something more like what James shows here.

Ed

Ed’s art board.

Ed picks up the baton and immediately iterates through a bunch of logo ideas. There’s something about the overlapping text that I like, but I’m not sure it fits for this particular site. I really like the effect of the multiple borders though. With a bit more time, I’d like to work this into the site.

James B

Batesy’s art board.

Batesy is the final participant. He has some other nice ideas in there, like the really subtle tiling background that also made its way into the final site (but I’ll pass on the completely illegible text on the block of bright green). James works through two very different ideas for the logo. One of them feels a bit too busy and chaotic for me, but the other one …I like it a lot.

I immediately start thinking “Hmm …how could I make this work in a responsive way?” This is exactly the impetus I needed. At this point I start diving into CSS. Not only did I have some design direction, I’m champing at the bit to play with some of these ideas. The exercise was a success!

Feel free to poke around the Patterns Day site. And while you’re there, pick up a ticket for the event too.

Wednesday, March 22nd, 2017

It’s Nice That | A new national identity: Smörgåsbord Studio rebrands Wales

Smörgåsbord Studio created a design system for the Welsh government, including the typeface Cymru Wales Sans from Colophon.

The accompanying video lists the design principles:

  • Elevate our status
  • Surprise & inspire
  • Change perceptions
  • Do good things
  • Be unmistakably Wales

Sunday, March 19th, 2017

Re: Brand | Happy Cog

After Clearleft’s recent rebranding, I’m really interested in Happy Cog’s redesign process:

In the near future we’ll be rolling out a new website, followed by a rebrand of Cognition, our blog. As the identity is tested against applications, much of what’s here may change. Nothing is set in stone.

Thursday, January 19th, 2017

Arrival – Mozilla Open Design

Mozilla’s audacious rebranding in the open that I linked to a while back has come to fruition.

I like it. But even if I didn’t, congratulations to everyone involved in getting agreement across an organisation of this size—never an easy task.

Friday, October 28th, 2016

jwz: They Live and the secret history of the Mozilla logo

Jamie Zawinski tells the story of how John Carpenter’s They Live led to Shepard Fairey’s Obey Giant which led to Mozilla’s logo.

So that was the time that I somehow convinced a multi-billion dollar corporation to give away the source code to their flagship product and re-brand it using propaganda art by the world’s most notorious graffiti artist.

Monday, July 25th, 2016

Sci Hack Day Dublin on Twitter

When I designed the Science Hack Day logo, I never expected to one day see it recreated with florescent E. coli.

Wednesday, March 9th, 2016

Why I like the new Met logo (and why you should give it a chance): Design Observer

Michael Bierut on that logo …and graphic design in general.

Graphic designers, whether we admit it or not, are trained for the short term. Most of the things we design have to discharge their function immediately, whether it’s a design for a book or a poster, a website or an infographic, a sign system, or a business card. In school critiques, architecture and industrial design students produce models. Graphic designers produce finished prototypes. As a result, the idea that we create things that are unfinished, that can only accrue value over time, is foreign to us. It’s so easy for us to visualize the future, and so hard to admit that we really can’t. That’s what we face every time we unveil a new logo.

Monday, July 16th, 2012

Your Logo Is Not Hardcore

Quadrants created by two crossed lines in an X formation. Hardcore.

Monday, January 30th, 2012

Fresh Impressions on Brandmarks (from my 5-year-old) - YouTube

A five year old provides a few remarks on some popular logos. Cute!

Sunday, August 21st, 2011

FAUXGO

Fictional logos.

Wednesday, January 19th, 2011

Marklar Malkovich Smurf

  • Webmonkey: HTML5 Gains Logo, Loses Meaning

    It doesn’t really matter if the New York Times thinks CSS 3 or SVG are HTML5, but we’d like to think that at least the organization in charge of describing what is, and is not, HTML5 would make some effort to distinguish between tools. Lumping everything together is as silly as a carpenter referring to every tool in their toolkit as “a hammer.”

  • CNET News: W3C’s new logo promotes HTML5—and more

    Curiously, though, the standards group—the very people one might expect to have the narrowest interpretation of what exactly HTML5 means—instead say it stands for a swath of new Web technologies extending well beyond the next version of Hypertext Markup Language.

  • GigaOM: The Truth Behind HTML5′s New Logo Fiasco

    It’s as if the government suddenly announced that from today, all vegetables will be called potatoes, just because some vegetables are potatoes.

  • The Register: W3C tackles HTML5 confusion with, um, more confusion

    And much like Apple, Google, and Microsoft before it, the organization that oversees HTML5 has confused it with all sorts of other web standards.

  • The Web Standards Project: HTML5 logo: be proud, but don’t muddy the waters!

    Now the W3C has come out and essentially condoned the branding of everything from CSS to actual HTML5 to WOFF as “HTML5”. We can’t imagine a single action that will cause more confusion than this misguided decision (and the W3C has produced some pretty impenetrable specs in its time)

  • Roger Johansson: HTML5 now includes CSS3, SVG and WOFF?

    This move from the W3C will not help people differentiate between very different technologies.

  • CSS Squirrel: HTML5 Super Friends Assemble!

    The logo is pretty, but the intentional use of HTML5 as a blanket term for other modern web technologies is a crock. Newspapers making merry with the term is one thing, but a web standards organization?

Tuesday, January 18th, 2011

W3C’s new logo promotes HTML5—and more | Deep Tech - CNET News

Curiously, though, the standards group—the very people one might expect to have the narrowest interpretation of what exactly HTML5 means—instead say it stands for a swath of new Web technologies extending well beyond the next version of Hypertext Markup Language.

HTML5 Gains Logo, Loses Meaning | Webmonkey | Wired.com

Lumping everything together is as silly as a carpenter referring to every tool in their toolkit as “a hammer.”

Wednesday, November 25th, 2009

"It's like twitter. Except we charge people to use it."

This is just wonderful. "Please design a logo for me. With pie charts. For free."

Thursday, June 11th, 2009

YourLogoMakesMeBarf.com

The ugliest logos in history.

Monday, April 6th, 2009

Accused! - Jon Engle

A logo designer accused of ripping off his own work — kind of like what happened to Dan.

Monday, August 25th, 2008

iphone login screens - a set on Flickr

Screenshots of various log in screens on the iPhone. I think Cindy has been hanging out with Luke W.

Flickr login mobile

Thursday, November 1st, 2007

Sign up, get your free BragBucks and start betting in less than a minute on bragster.com

Another sign up form that features hCard input (like Satisfaction). Choose a service (e.g. Flickr, Last.fm, Twitter) or enter your own URL.

Tuesday, October 30th, 2007

Make My Logo Bigger Cream

Just rub it on and watch it grow. Gauranteed to satisfy your client.