Liveblogging a presentation at @media2007 London by Jason Santa Maria
(Shows an ad for Captain Noah, an event by the host of kids’ show on a Philadelphia TV station whose flyer he designed.) I haven’t even shown this to my parents. The reason this is bad is the details. Nothing here adds up. I didn’t even get the order of the rainbow right. It really gets down to art direction: What is the message you are trying to convey when you’re designing something?
Design is intent. There’s a message we’re trying to communicate. If the details aren’t in order or the details don’t add up, our message is lost. (Today will talk about the details he’s learned over the years.)
Colour: Usage of colour, specifically for emphasis, and how that plays into the hierarchy of design. Not necessarily something that stands out, but does so in away that helps deliver the design. Storytelling and delivering that message in everything you design. Something I always look for when I’m composing photos is that bit of colour to draw someone in and help move their eye around the image. It could be something really small, like a shirtsleeve, or something very bright and vibrant. Sometimes it’s unexpected colour, like neon or something abrasive. That colour is meant to grab the viewer.
- FaithIncubators: Aside from the design in general, what’s the colour that’s drawing you in? Where’s your eye going, and why is it going there? It’s the purple.
- EllisLab, the people who make ExpressionEngine: Very, very vibrant tones, deep passionate reds. But what’s the thing that’s really getting down to the information? The blue (in the links).
- Veerle: Links.
- VisitCopenhagen: The reds. A-Film: A site that looks like it should be flash, but it’s not: Really simple usage of lime electric green. Pops you around to the logo and other bits.
- GoodMagazine: Those green buttons bring your eye right down the page in addition to the green block over there.
- Unexpected colour: Greens and reds and this pink just out of nowhere. It’s so vibrant it changes the mood of the entire page. Orange-juice colours and then this electric blue. If you were laying out this palette and these swatches of colours, you probably shouldn’t say “That’s the colour I want.”
- Times Online: Who would have thought that this abrasive green would work? but it does. It has this energetic tone to it.
Palettes: How do we get these colours? From fine art; from photography. I do that something myself.
- On Absenter, every time he publishes a photo, he draws one colour out of that photo and re-skins the site.
- When Dan Cederholm was designing Cork’d, where did his inspiration come from? Those deep tones of wine, the rustic wine labels.
- Butterflies. This is fantastic – deriving palettes from nature.
Every two weeks, we come out with a new issue of A List Apart, and I have to come up with a new palette every time, and it’s based around whatever I’m feeling like at the moment. We have this very muted design, but we have this colour for emphasis. (Andy Clarke walks in: “Morning.”) Every issue, I try to bring something new to the table and make that issue apart and seem like a new thing.
Hierarchy: I’m specifically talking about the right information on a page, stuff that has to follow a certain order. There’s usually a certain process to a message – something you want to say first in a message. This is a quote from Chip Kidd in The Cheese Monkeys, probably the only novel about graphic design: “Left to right, top to bottom, big and small” – Winter Sorbeck. These seem like really simple things, but they are some of the most powerful things you have as a designer. We can basically guarantee that people are going to be coming from to our design from left to right, going from top to bottom, and larger elements are going to stand out more than small ones.
Hierarchy is all around us. (Shows food pyramid, Italian road signs.) If we do this (clutter) in any of our Web designs, we risk losing our viewer.
(Shows text examples with coloured and larger headlines.) And this isn’t really any different from the way we structure our pages (h1 through h6). You’re assigning hierarchies to your items; you’re ranking items in your code.
Focal point: A main area of interest in your design, the spot you want people to be looking at first. It could be as simple as having something that’s bigger than everything else. (Shows examples with large text block in middle, a blue one at bottom right. Shows Coudal homepage.) You can’t bet that people are always going to follow this path very time, but you’re providing a visual language and structure to your page, but you’re showing the users there is a way I’m trying to talk to you, and it makes your communication that much more effective.
Variety: (Shows corporate sites like IBM, MSNBC.) Where’s the variety? Look at this – it’s just noise. It’s tons of type. What’s it telling me? It’s telling me to go away. They don’t communicate much. They’re just faceless. I’m not trying to pick on these people or out them, since all of us are probably guilty of some of these things. But where’s the story? What are they trying to communicate? Why am I going to your site? There has to be some kind of delivery, some kind of payoff.
Whitespace: A very convenient bedfellow to hierarchy and focal point. Not necessarily the colour white: Space between letters, lines; padding, margins. Also “negative space.” (Shows Man with the Golden Arm titles by Bass.) This is something that really takes a long time and a lot of understanding to figure out how to do effectively. Can be even more important than the places where you do have type. Type designers will often say the shape of the letters isn’t most important, it’s the shape in between the letters that’s important; that’s what you read.
(Shows NYT homepage.) Type butting up against every margin. Maybe this is the reason why we don’t think people read so much online. But if we scroll down below the fold, there’s a lot more whitespace. It doesn’t seem so hectic and it seems easier to digest. (Shows NASDAQ.) How is anyone supposed to digest this? I don’t even know what’s an ad and what is real content.
Did a 30-second redesign of Eli Lilly. Adds more space in gutters, better heds.
(Runs quote, perhaps inevitably, by Bringhurst.)
Wired redesign: 115 characters at 100%, but 66 characters (the Bringhurst claimed ideal) when bumped up three sizes. (Mentions having to sweep the eye back from end of one line to beginning of next.)
Organization: Mainly grids, but having some sort of visual system. Whenever we design something, we’re presenting them with a visual language. (Runs quote by Müller-Brockman.)
(Shows early illustration of Philly city grid.) It’s almost impossible to get lost in Philadelphia – numbered and named streets, City Hall in the middle. Down here is where all of our sports teams lose every chance at a championship. I’m thinking about this as I’m riding my bike around and seeing where we’ve come, and I’m thinking, where else are grids used and used differently?
Let’s compare London (with wavy streets). London is requiring the user/pedestrian/driver to invest a lot more time to figure out what that message is. Luckily, if you live here, you’re going to invest that time, because your livelihood depends on it. But are people going to do that (on your Web site)?
Grids systems are not a way to restrict your design but to order it. And when this comes onto the Web, we can see how this can help order our information, too.
- UX Magazine: Breaking out of the boxes a little.
- AIGA L.A.: Not everything has to look the same and everyone is annoyed that nothing looks different.
- Leftloft, with broken-up grid via background elements.
- Trout, an Australian agency: Broken up by replacing four squares with one big one as you click. Provides a lot of variety, but they’re setting up this visual language so you understand what’s going on.
Recently I redesigned the AIGA site. I knew I wanted to have a very structured grid. This site is very heavy on editorial content. So I came up with a uniform 12-column grid, which can be broken own into six, four, or three columns, or just some supercolumns breaking out. [Not all his columns line up with his column guides.] Even if it isn’t entirely apparent to the viewer, it’s subliminal – just carrying the eye down the page.
Shows Wired redesign. Why are those images off (the column grid)? It doesn’t seem like the grid is so rigidly created that something like that would fall out. These are the details that keep a design together, details you need to be looking at.
Planning: Our medium has a very low barrier to entry. It is easy to jump into a finished product right away. This could be the very worst thing to do; you haven’t done any planning. I’m a big believer in keeping a sketchbook. It’s your repository. I forget things all the time; that’s why I have to write them down. (Shows doodles for A List Apart and Magnolia redesigns. WordPress.) And from that, I can then go to the computer. Understanding that there’s an iterative process to a design, not just “I have an idea. I’m making it,” is a very important topic here.
Greyboxes: Somewhere in between a wireframe and an actual finished like PSD design. (Shows Happy Cog.) This might look like a wireframe to you, but there’s something else I’m trying to convey here – the relationships of the type and the elements on the page. Trying to figure out where everything fits in terms of actual pixels. (Shows later version that he and Zeldman hated.) This was the final design (wider top columns and cream background.) (Did the same for AIGA.)
What we’re really striving for here is clarity – in design, in our message. We have to have a way to stand out, for our message to rise to the top and be delivered clearly. I can tell you a story, and if it’s devoid of those details, I’m not really telling you what’s important there; there’s no real emphasis, no clarity. Design has an intention; there’s a plan behind everything we do.
Points to Bringhurst, Lupton’s Thinking with Type; Grid Systems and Making and Breaking the Grid.
(Ends 2007.06.07 11:34.)
Q&A
Q. from Andy Budd: Do you show the greybox designs to client?
A. No, not usually. It’s part of my process. I realized that if I try to jump straight into a finished design, I start obsessing about the type details. I get away from the original message; I’m dealing with these really polished items too soon. Figure out some sort of coherent order to the design first. They might think that it’s still a wireframe or something.
Q. from woman: How much time do you give yourself to actually do a design?
A. It depends, because sometimes in the Happy Cog office, we might have three designers working on something. Sometimes when I work on my own, I might do all three of those designs. Typically about two weeks to do one direction, I would say, and that goes from greyboxes to planning to research to finding imagery, and then getting into the final PSD design. Then we refine it two more times based on client feedback. Maybe a month to two months depending on the size of the job.
Q. from man: Interesting to see IBM as a bad example. Was demonstrating the greybox equivalent to the CEO. Went back to his computer to show him sites that he thought were good corporate sites – Cisco, BT. How do you approach sites that are from the corporate mindset? I couldn’t actually disagree with him, since that is the kind of site that our customers are expecting.
A. Is it that they think that it’s a good site or they’ve learned how to use it because they have to? That they understand whatever this clusterfuck is that they can use it?
— Maybe it’s just expectations and something that deviates is just entirely alien to them.
— I don’t know if I agree with them. It seems as though they are so afraid of conveying the wrong message that they convey no message. You see that with the excessive uses of blue, which is such watered-down colour that it’s emotionless. I mean, what does blue convey to you these days?
Q. from man: I tend to agree with the speaker that there’s no escaping that corporate design or desire to be similar. Do you not accept that inevitably they’re going to expect you to produce something that is bland? What do you do when faced with that?
MAN: Take another client.
A. I think Paula Scher calls that blanding instead of branding. The problem is not designing. We can all design. The problem is getting people onboard with that. It’s more of an art-direction/creative-direction/speaking-to-the-client problem. Just because they sit in a cubicle all day doesn’t mean that’s the only way things can look. Why can’t something be beautiful in their life? There are plenty of corporations that have really strong identities. It’s more of a people problem than a pixel problem.
Q. from woman: I’m really impressed with your grid systems. We did grid design for a CMS, and we find it hard, because the designer gives us PSDs where everything is lined up perfectly, but it never works out with client content. I like the idea of a horizontal grid, but how do you work with a vertical grid?
A. It’s more about rhythm than anything, a spatial ratio than, say, 20 pixels down. Set up breakpoints where certain content breaks and new content starts. That’s about the best you can really plan for. You’re giving your Web site options – if you have different-sized images, it’s not going to break the layout.
Q. from man: Do you have any tips for adapting to flexible-width designs that don’t fit into the print (style)?
A. All that grids really get to are ratios – relationships between columns. You can break down a page by percentages as well; that’s the way fluid sites are going to be working. There still is not are really decent way to work in a grid with images in a fluid design.
Q. from man: Your thought process on deciding on a font?
A. If we’re just talking about default Web fonts, you can see it in my Web designs, but I think the sturdiest fonts we have at our disposal are Georgia and Verdana. Arial is just a mess, particularly at small sizes. Trebuchet is kind of all right. Decorative fonts? Type and imagery? sIFR? I like to try and find something that helps deliver the message, not just something that looks pretty or has nice letterforms, but has some sort of meaning. In a historical site, I might look for typefaces that were designed at that same period.
Q. from man: We’re looking at giving the user more control of leading, font sizing, spacing, to make our site more accessible. how does that impact on how thing have to be designed?
A. Can I ask why? Is that a real accessibility concern?
— Yeah.
— Outside of the browser?
— No, this is within the browser. Giving basically stylesheets.
— Hmm. That’s interesting. I’m a big believer that you design a site well the first time, you’re going to minimize the needs for those. Obviously people are inevitably going to be low-vision users, who need to resize the type or resize the layout, but I’m actually a bigger fan of putting less control in readers’ hands for specific design things – not when it impacts accessibility. I put it a certain way because it’s helping to deliver that message. I wouldn’t tell my mechanic that he can do half the job and I’ll do the other half when I get home. There needs to be this separation, and design is really an industry of expertise. Certain decisions are made for certain reasons. That’s always been the way I’ve felt about that.
Q. from (gingery) Mark Wallis: Is there any one of your designs that best sums up what you’ve talked about today?
A. Recently? Probably Happy Cog or AIGA. Definitely proud of those. When AIGA was released, it was both loved and hated, and that’s usually a very good sign. A lot of people thought it wasn’t designerly enough or representative enough of their industry. It had to look inspirational, but that couldn’t be the overpowering thing; it’s a publication, an editorial site. The gird system I’ve designed for that has proven to be very flexible and they’re having a lot of fun with that.
Q. from Simon Willison: Creating a visual language of design. How? Do you give them a style guide or CSS classes?
A. Those are actually two different things. It does play into how people are going to maintain it as well. Typically we’ll provide a style guide, and on the AIGA site, I created an article page and I dumped in all the possible image sizes they could have. That was more useful than a style guide can be. I just gave them the visual; the code’s right there if they want to copy that. Simple style guides, 10 pages or less. Show important things, like the 80/20 rule, with links to the other 20%.
Q. from woman: How much do you allow the customer to interfere with the design?
A. Those are good words – “interfere with the design” and “how much do you allow them to?” In the kickoff meeting with the client, we set up the expectation that we are the leaders of the design; we’re in charge of the design. They need to understand that you are the expert. It’s something I know a lot of people don’t do or don’t feel comfortable with. They need to understand that they are not the ones designing the site.
After that, it is about collaboration. It is their site at the end of the day. Their needs are more important than your needs; it’s not for your portfolio, it’s to convey their message. Your job is to combine those things. Doing a lot of that legwork, like wireframes, greyboxes, user testing, is what gives you ammunition to combat when they come back to you with “I don’t like green.”
Sort of documentation to fall back on, too. There are certain rounds of revisions; you sign off on these things, and setting these expectations on where certain thing happen will help to alleviate through documentation and contracts that, legally, they can’t go back and constantly interfere with the process.
(Ends 2007.06.07 11:54.)