Build Conference 2010

The second edition of Build Conference has just ended. Mr. Andy McMillan had set up a whole week of events with the conference in the middle. And it was absolutely amazing.

From cocktails renamed to awful old school HTML tags, to the most stressful pub quiz in the world, to great, outgoing speakers that gave us ample time and opportunity for a chat with them. I could write at length about this, but I’ll restrain myself to the conference talks and try to keep it under a thousand words.

From Click to Tap

The duo that has brought along the most-recent designs of Gowalla, Keegan Jones and Tim van Damme, kicked off the day talking about designing for mobile and whats different when designing for touch-based devices.

An interesting analysis was that with a good app, you don’t feel obligated to stay inside the app. If your app is optimized to get a very specific set of tasks done very effectively, people will incorporate your app into the way they use their iPhone. So, when creating an app, focus on the core action, and tuck the rest away.

More perfect typography

After a proper kick-off, Tim Brown got me into a zen-like state with the way he did his talk. About two-thirds into the talk, he absolutely blew my mind with the Modular Scale of type.

First off, a small sidestep into font selection. When selecting a font, be intentional, write down a general description of the message you are trying to convey and then look for typefaces that embody those qualities. Tim also stressed the importance of testing with real copy.

Type works best when the ideal text size and proportions have been used for that situation. The question then is: “Why are we looking at physical dimensions of viewports that we use today?” To follow that up; “Why not have the overall layout relative to our text?”

Tim introduced us to the Modular Scale, a tool for calculating harmonious type sizes. To use it, you enter the ideal text size you’d prefer for body text, as well as an important number (eg. the width of your main column). Choose a scale, which is the Golden Section by default. The web-app then returns a list of size increments that work very well together. In short: “Wondering what size to set the heading in? Look at the scale. Wondering how wide to make a column? Look at the scale.” etc. This, as grids and baseline heights, is not a science. It is a tool, and therefore you should use it as that.

The Shape of Design

Frank talked about the perception of design and what we can do with this. Clients see value in execution, whilst designers see the value in Design Thinking. This creates a gap between what we think we do, and what is perceived that we do. How do we bridge this gap?

Stories can be a good solution to this. Everyone loves stories. It’s the reason people blaze through books and billions get made in the box office every year. In practice, stories are a way to frame something. We can use a story to frame our design process.

Another thing is that people are illogical. As Frank puts it: “We are emotional and squishy.” If logic mattered in design, every designer would come up with almost exactly the same solution. Yet our squishiness is where the creativity lies, and where we, as designers, gain the opportunity to delight.

To delight someone is to give a small lesson in how to see the world as something good.

Within this story, we can – and should – delight people. Delight is the superpower of design. By giving someone the gift of “Ooh, shiny!” or “Amazing!” or just having a face that nerds would describe as O_O. In design, most of us are pretty good at being slick, but being squishy is more important than that. We should create things that send out the messages we believe in, to the people we care about.

The Power of the Pause

I usually write short notes when listening to a talk. This way I can recall the talk more easily. With Liz, this was different. She was able to make me not touch my iPad once, until she was almost done. My mind went full circle and I manically started pressing those non-tactile keys on the screen.

Most of us are chained to our desk. There is a general feeling of being ‘at work’ when you take a seat at your screen. A feeling of ‘being productive’, because your location validates that for you.

But in a lot of cases, you stare yourself blind at that screen. Still, it’s hard to let go of the position, because logic then dictates that you are not ‘working’. But when we take the time to pause, we can restart our creative process, while being kickstarted by the work we have already done before the pause.

Sometimes the little times you don’t think are anything while they’re happening turn out to be what marks a whole period of your life.

The Blank Canvas

Meagan Fisher gave us a run-through about her design and build process.

She starts out by meeting the client. She interrogates them to find out “Who?”, “What?” and “Why?”. Then goes to the second phase: strategy. This is where wireframes and an inspiration board get made. These are all to create a general guideline and a feeling of the project. Here, Meagan also writes mark-up. This early-stage mark-up is something I like to do a lot myself, because it forces you to focus on content, without having done much of the layout work yet.

After Strategy comes Life. This is where Type, Color and Shape come into play. Start with type, but keep it elegant. Implement and guard the sites’ color scheme. When you have the general outline of your layout set up, try to find places where you can play with shapes, not every button should be a (rounded) rectangle. Then Meagan makes it shine by adding Lighting and Texture to the canvas. This is where the site gets its ‘feeling’ from. But whatever you do, be subtle.

Handcrafted CSS

First off, Dan Cederholm looks like my dentist. Now that we have that out of the way, Dan talked about ‘Handcrafted CSS’. Mr. Cederholm is an icon on the web, especially regarding forwards thinking and creating bleeding-edge web design work.

Because I have read his book, much of his talk was already lodged in the back of my brain. Yet when he started speaking, a couple of things from the book did come to life better. Squishiness, eh? Because Dan has a foot in making websites bulletproof, as well as making them use bleeding edge new technologies while degrading gracefully, his message resonates very well.

A couple of points Dan addressed were;

  1. Images off. What happens? The feature set of the site can fade, but it should never be completely unreadable / unusable.
  2. Evaluate text size and length. what haooens when the user increases text size? What happens when you put a long word in a button?
  3. With some common sense, you’ll be able to see if your site’s structure is logical by turning CSS off.
  4. Know when to validate. Validation is not the Holy Grail, it’s one of your handiest tools. Use it wisely.
  5. (… totally forgot this one, anyone?)
  6. Hover-craft the experience layer. Carefully craft an interactive experience layer to your site. But make sure the basics work for everybody. So if you make fluffy hovers, make them feel as normal hovers in older browsers.
  7. Use multiple backgrounds
  8. Be subtle.
  9. And a small extra to get the design more consistent; Create a custom text-selection CSS selector. (::selection)

All fall in line with the philosophy that will always have relevance:

Don’t make something unless it is both necessary and useful; but if it is both necessary and useful, don’t hesitate to make it beautiful.

Concluding …

I know, I didn’t keep it under a thousand words. But that was just because there is so much to say about it. Build 2010 might be the conference that has resonated the most with me up until now. Now I know that this is a big statement, so I’ll try to explain.

The single thing I have taken away from Build 2010 is that we should all take our time. And with that I do not mean we should stop putting in all the effort we do now. Because that is where all the amazing stuff comes from at a supersonic pace. What I mean, is that when I look back at ever since I got really into working on the web, I hardly took any moments to pause and reflect. And I believe most of us, who are really passionate about it, have this problem.

We can fix this, and I am going to try. Be intentional in taking a good shower. Get a cup of coffee (or tea) three blocks away. Remove your face from facing the screen.

And last, but not least. Thanks to Andy for setting up an epic conference. Thanks to Frank, Jessica and Keegan for the great, (late-night) conversations. It was great to see a lot of familiar faces, as well as meet Graham, Ferdinand, Nathan and many other great folks!

See you at Build 2011.