Jason Santa Maria, AKA Stan, is the man. Here’s here at An Event Apart in Boston to talk about Thinking Small. He’s my warm-up man.
He begin in the 1980s; Christmas day in the Santa Maria household—Jason gets Castle Greyskull. One Christmas, his parents played a cruel joke on him. Instead of getting him toys, they got him books. But these books were better than regular books. They were choose-your-own-adventure books; classics like You Are A Shark
and War With the Evil Power Master.
The best part is that they are interactive. Of course you cheat. You go back and see what would have happened if you had made a different decision. Let’s look at the decisions we make when we are building website. Jason will show us seven small decisions that change the outcome of a finished website.
Be a thinker
Don’t just dive into moving shit around in Photoshop. Stop and figure out the problem before trying to come up with a solution. Take a look at the Enterprise car rental site. It’s not terrible but it’s also not exciting. It’s just bland.
Take a step back. Start with sketching. Sketching isn’t about being able to draw, it’s about being able to think. Jason started a Flickr group for people to upload one page from their sketch book, no matter how crappy it looks.
At the beginning of a project, get acquainted with it. Get a feel for the content.
Find the message
The difference between good design and great design is intelligence.
Sum up a website with a message, as if you were introducing a friend at a party—what’s important? Everything on the site should communicate that message. The White House website does this. So does A Working Library.
Be a reverse engineer
Come at things from a different angle. Jason played Layer Tennis recently with Derek Powazek. They decided to play around with the format by introducing three truths and a lie. This prompted new ways of thinking about what they were producing.
Take lessons from improv. Play the “yes” game in brainstorming sessions. Take what people are offering and add to it.
Plot it out
Jason comes from traditional graphic design background of grids and systems. Cue obligatory Vignelli quote. But how big should your grid be? Just because you can go to 960 pixels doesn’t mean you should. Don’t blindly approach grids from a set size. The space on the screen is a valuable design tool. You can use for your grid but you can also use it for whitespace. Brockman says:
The grid system is an aid not a guarantee.
There are other kinds of grids, not just columns. It’s about choice. How do you choose to fill that space? 960 pixels is not right for everyone. Stop and consider. Big Cartel feels small and approachable because it doesn’t go full width. That fits the message it wants to communicate.
Grids don’t necessarily have to be uniform. Yet most grid tools start from that assumption. It seems like a small decision but it effects everything further down the line.
Think horizontally, then vertically
Thing of the page as a delicious parfait. The design of Jason’s own site can adapt to the content. His grid is just some horizontal strips. The different sections can then work together or stand alone. Within each layer there are then sub-layers. Only then does Jason think about how things line up vertically.
Design systems, not pages.
Stop, modulate and listen
Jason wrote a 24 Ways article on modular layout systems. You can narrow page elements down to identifier, size and placement: what it is, how big it is and where it goes. You can then apply those things to class names. Have classes for identification, size and placement. Then combine those classes e.g. class="pic two left" or class="pic seven right". Clients like the self-documenting nature of this.
Be a matchmaker
The state of type on the web today is still questionable. The choice isn’t large. It’s as if Netflix only offered four films for you to choose from. But type on the web is going to change soon. The conversations are already happening. In the next six months to a year, you will see more of a push for understanding of type and how to use type. Jason has some rules of thumb when choosing typefaces:
- Don’t use two script typefaces together. Or two sans-serifs together (or two serifs together), for that matter. One of each is a good rule of thumb.
- Pair fonts from the same designer. Perpetua and Gill Sans go great together because they were both made by that loony Eric Gill.
- Find harmony and structure. Bedoni and Futura are very different; one is serif and one is sans-serif. And yet they share geometric forms.
- Conversely, look for contrast. Caslon and Garamond are too similar to use together.
Step by step, all those decisions add up. It’s like Stewart Brand says in How Buildings Learn. People don’t begin building a house and plan for adding an addition but over time, bit by bit, you add to the house. Buildings adapt over time. So do websites.
The small decisions add up even if you don’t realise it at the time.