Thinking Small, by Jason Santa Maria, My Thoughts on An Event Apart (part III)
Jason Santa Maria (@jasonsantamaria)is a designer who used to work for Happy Cog but has set out on his own trailblazing mission. He is also the Creative Director for A List Apart, which is “an online magazine for people who make websites”. He is also on the board of directors for AIGA/NY.
Jason gave a presentation on “Thinking Small”. He started the session by talking about one of the first Christmases he remembers as a child. Typical Christmases involved him getting some sweet toys like Castle Grayskull but for some reason, this particular year, his parents decided to get him the choose-your-own-adventure books. At first he thought this was gonna be the lamest Christmas ever, but then he started reading them. “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,” says Jason.
This illustration is the perfect segue into what he says we should all be doing when we are deciding the outcome of a finished website, and goes on to outline seven points that we should all be thinking about as we design and develop websites for our clients and/or employers.
Point 1: Be A Thinker
As people who work with the web, we need to know how to sketch things out on paper. Don’t just dive into Photoshop and start hacking away at things, but take a step back and sketch. It’s not about being able to draw, it’s about being able to think about the project and get ideas out.
Point 2: Find the Message/Know the Content
The beginning of the project is probably one of the most crucial steps of the entire design process: knowing the content and finding the message.
The difference between good design and great design is intelligence.
Every website has a message. Think about it as if you’re introducing a friend at a party…what’s important? everything on the site should communicate that message. Jason gave two examples of websites that do exactly this: The White House and A Working Library.
We need to know our tools, know our process and solve problems with ideas.
Point 3: Be a (Reverse) Engineer
Jason recently played a round of layer tennis with fellow designer Derek Powazek, where they decided to play the round by following the rules of “three truths and a lie”. This prompted new ways of thinking about what they were producing.
The lesson to take away from this section is simply this: when you’re in a brainstorming session, play the ‘yes’ game…take what other people are saying, and add to it – you never know what may come of it.
Point 4: Plot it out
In this section, Jason talked about how he came from a traditional graphic design background of grids and systems with questions like, “But how big should your grid be?”. Every website is different, and you shouldn’t take browser size into account (necessarily) when building out your layouts. Just because the end-user can view the site in a full 960 pixels doesn’t mean the design HAS to be 960px wide. Consider the content, don’t just blindly approach grids from a set size. The space you leave on the screen can be a valuable design tool. You can use this area for your design, but you could also use this area for whitespace, a very important tool in the designer’s toolbox.
The grid system is an aid not a guarantee
There are many types of grids in the world, columns aren’t your only choice. Life is full of choices and so is web design. How you choose to fill that space is what makes up your grid. 960 pixels doesn’t fit everyone’s needs. Find the grid that fits the message.
Grids also don’t have to be uniform and the unfortunate thing is that most grid tools start from this assumption. This affects things like what if you want to display large images AND small images within the same grid? A small decision of making your content fit the grid can have unfortunate effects further down the line.
Point 5: Think Horizontally, Then Vertically
The main point here is to ‘design systems, not pages’. Jason used his own site as an example of “website parfait”. His grid is simple horizontal strips of content. The different sections can work together, or stand alone. Then within each of the separate layers, there’s sub-layers. Only now is when he starts thinking about how things line up vertically. The very nature of the web allows for flexibility and what is ‘designed in photoshop’ does not always translate to HTML due to that very nature. Text flows longer, images aren’t always going to be the same size and various other issues arise.
Point 6: Stop, Modulate & Listen
Jason recently wrote a 24 Ways article on “modular layout systems”. Most page elements can be narrowed down to three things, “identifier” (what it is), “size” (how big it is) and “placement” (where it goes). Once you’ve figured out what these elements are, you can start to apply classes to them to start defining the grid. (e.g. class="pic two left" or class="pic seven right"). The great thing about this is it’s very human-readable and easy for clients to understand.
Point 7: Be A Matchmaker
This point is about what type-faces to use. Jason things that within the next six months to a year, there is going to be more of a push for understanding type and how to use it. A few rules of thumb from Jason when choosing your typefaces:
- don’t use two script faces together, or two sans-serif/serif fonts together. One of each is a good rule of thumb.
- Pair fonts from the same designer as they will most likely share some common shapes (Perpetua and Gill Sans go great together because they were both made by Eric Gill).
- Find harmony and structure. Bedoni (serif) and Futura (sans-serif) are very different, yet they share geometric forms.
- 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 realize it at the time.”
(editorial note: I heavily relied on Jeremy Keith’s liveblog of the even as filler/explanation of some of my notes. You can read the post here: http://adactio.com/journal/1588/)