Liveblogging a presentation at An Event Apart San Francisco by Jason Santa Maria
When I was in college, I learned a lot about typography and colour and layout, and by the time I graduated I was pretty cocky. I knew how to throw stuff on a page; this stuff was easy. I got a job in Philadelphia, and one of the first projects I worked on was this (Captain Noah, a children’s show). I didn’t even get the order of the colours right in the rainbow. Best of all, this was a six-foot-tall poster inside the store.
This made me realize there is an art-direction component. It’s all of the pieces that add up to make a design. And not only that, it’s the concept. Captain Noah’s dead now anyway, so it’s not that big of a deal to see this.
This is about taking good design and making it something better – not necessarily perfect. These are the things that I go through in my process when I’m designing.
Discovery: Getting informed about your client and trying to figure out the message they want to convey and what their customers expect them to convey. But before that, you need a creative environment, a place you feel you can be creative. (Shows office in his old house in Philly.) Surround myself with things that make me feel inspired – books, skulls, sock monkeys. Part of this is also, for me, keeping a sketchbook. I know that there are a lot of you out there that don’t keep sketchbooks. That’s one of the reasons why we gave you sketchbooks today (in the schwag bag). Whenever you have that spark of information, just write it down. My mind is a complete sieve, and a sketchbook allows me to keep these ideas, even a year from now, and reawaken that inspiration that I had.
I get a lot of inspiration from old printed materials, especially hand-set. The tools of this medium and the medium of the Web are so different, you don’t get much of this online. Some of this is very interesting design that can influence what we’re doing online as well. And the last thing, morgue files, sort of a traditional tool of design – in my office, I had filing cabinets with physical morgue files. Sort of like clippings, inspirational things from your day-to-day life – photos, matchbooks, textures. (Shows iPhoto screen) of just old advertisements, weird old photos, things you don’t see enough of and don’t see on a daily basis, but can inform the way you design things.
Research is the most important part of the design phase. Recently, the Philadelphia office of Happy Cog redesigned an Irish organization called Comhaltas (pronounced “Coltis”). Their old site is pretty outdated and doesn’t reflect the vibrancy of the culture. So we jumped at the chance of going over to Ireland and experiencing this firsthand (shows dudes playing fiddle, accordion, etc. in a pub). I wasn’t prepared for quite how moving this was going to be. We don’t have this kind of musical culture in the U.S., where people sit down and start playing even if they hadn’t met one another before. Half of them might not even be able to read music, but the memorize these songs and they lay as though they’d been playing together all their lives. We would sit there and soak it all in, and the old Web site wouldn’t convey any of this.
Because we’re designers, we go back looking through traditional motifs, no only from the culture but time periods. Celtic knotwork, lacking leaves and organic-looking textures, but also the colours are very sort of synonymous with this sort of faction of Irish culture. We design our first Web site. (Shows “Music Page” with spinning logs and marquee.) This is actually one of the branch sites from Comhaltas, given to us as an example of what not to do. We have these preconceived notions of what is “Irish” – leprechauns, shamrocks. (Page shows leprechauns. Dancing ones, in fact.) (Shows final design by Rob Weychert.) Colours form knotwork, some of the actual knotwork, plus bringing in the very personal feeling of the music. (Actually, it look like the Event Apart site.) Shows that they are a modern organization as well with a very deep history.
A List Apart: What it was always searching for was a visual identity (it had good content). Did not latch onto the same ideal the editorial was putting forth. So I started looking at things that had a lot of content (shows McSweeney’s, H.G. Wells), and things that are read religiously, not skimmed like we do online. Books have legibility; they get the typography just right. Hierarchy of the typography, the sort of tactile personal feel of holding someone’s book and actually reading it. Preservation. I don’t really know many people who throw books out; people give them away, donate them to organizations, because it’s knowledge. People don’t want to just gloss over that. These are the things I wanted to emphasize. (Shows sketchbook.)
Banners, stamps – very noticeable things from physical things, from books. The idea of things being numbered, because we produce these as issues, not just updating our blog. Laurel wreath. Bookish nature came across on the Web site. Feels kind of academic, like something you should pay attention to. People who have been telling us this is one of the only sites they read online religiously. Tried to make it not quite so templated, either. Each article has its own unique illustration by Kevin, and each issue has its own colour scheme. Each is a new issue; it’s something a little bit more important.
Happy COg: We’ve also recently redesigned our agency Web site. Didn’t really say anything about who we were visually. Felt more like a blog than an agency Web site. Noticed navigation and our tagline. Both basically saying the same thing. Why not just make it our navigation. Very much influenced by the simplicity of what we wanted to convey. It’s not necessarily a brand-new idea; people have done sentence-based navigation before [like me]. We’re not just about design. If we can showcase writers’ talent as well by walking the walk right there, fantastic.
Process of how to get to a comp: Mostly it means iterative design. If I go from a sketch right to Photoshop, I’m too caught up in the details already. So I do this step in between, with no colour and focussing on hierarchy and layout (“grey-box comp”).
Just recently we redesigned the AIGA Web site. Though they represent supposedly all these factions of design [recency effect], this is very dated, hokey, with JavaScript scroller, and disparate navigation styles. Though they’re a nonprofit organization, their Web site has a lot of editorial content. It runs more like a publication. So we present three designs that a client can choose from. These are typically broad strokes. Not all the screws are screwed down; this is just to put forth a concept, an idea, to narrow down a path to go forward on. This wasn’t a huge job; it wasn’t a million-dollar redesign. They came to us with the problem that they weren’t doing enough in the online community. Just to give them a nudge (in that direction).
(Shows three comps, one of which looks like An Event Apart.) I feel this is where they should already have been. (Second one) takes more of a designerly tone, uses the grid, looks more Swiss, uses two columns instead of three. (Third design:) THe AIGA Design Archives puts on a show every year. IT has a great interface on its site. These were relegated to little thumbnails. So what better way to put that in the forefront than to include that in the design? Maybe page design plays off that with red background. Once you get down the page, it’s pretty standard with the other ones. Different image, colour palette.
Because these were reached holistically,w e would say we don’t want to Frankenstein these comps. These all have individual ideas and they should stand on their own and revise them from there. But that doesn’t really happen. They liked 2 and 3. In the second round, what I like to do is focus more on the typography. We brought in the large image, navigation, but I started playing around with the hierarchy of the type in this one. We can focus on one. And how that goes into the third round. AIGA is not above making the logo bigger. I always say it’s much easier to revise than create. And all of this same out of a grey-box comp that I did.
(Shows original article page.) Very anemic page, small type, too much navigation. Do we need the word “Article”? As you go down the page, it’s sort of adrift in a sea of nothingness. We want to keep that design feeling full all the way down the page. Nice big reading column, nice big text, a drop cap to pull people in. It feels kind of academic; it feels like an article, like something you’re meant to read, not just supporting copy. Can actually have images inline. Let them support the content where they need to. And the design can feel full all the way down to the bottom.
Branding. Obviously this is a very big sticking point, kind of a buzzword too. Is it a logo or is it something different? (Shows test company, Double‡Dagger, which manufactures footnotes.) Maybe they want to go online and build some kind of community around footnotes – maybe people want to trade footnotes. (Shows DOUBLE‡DAGGR in blue with pink R.) We get farther and farther away from the essence. Are we piggybacking on an idea, or, worse yet, a trend? This makes us look like anybody else.
Recently I redesigned the WordPress logo. Really, what does WordPress mean, especially to me? Enabling people to publish, to write, and that’s a very personal thing. Different motifs like word balloons, sort of really campy, almost comic-book type. Metal type. (Shows slide with 30 variations.) Kind of newsy, comicbooky type again. Typewriter keys. Not only is this a personal message, but someone wrote it. Someone actually had their hands in doing this. This came from a person, from someone’s thoughts. Final logo didn’t actually get that far from where we were before. We’ve added this mark, implicative of a typewriter key.
(Shows Dictionary.com. )
Layout: Grids. What they’re good for. A visual language for framing the content and giving people sort of a language they can use to assume where content is going to be. (Shows Philly city plan that William Penn drew.) Very simplistic. City Hall in the middle. Bisected by Broad and Market Sts. Down here in the south is where all the sports teams lose; over on the east side there is where we have cheesesteaks and pretzels. (Shows London.) What if your Web site is like London? What if they have to learn some kind of strange navigation before they can even use your site? (Grids make the locations of things predictable.)
For AIGA, decided to use a 120-column grid, subdividable [“divisible”] into four, three, six. Plan for placement. (Don’t leave things behind.) (Shows style guide for image sizes at AIGA.)
Hierarchy and focal point. Hierarchy is like what we’re doing with code. We’ve given this content context. This is more important than this.
Details can make a design good. No design is too small, whether it’s a favicon or a line of text or a border or something. (Shows original comp for A List Apart. Zeldman loved it, but he saw too many things that had to be fixed.)
“Typographic interlude.” (Shows hideous signs with things like SOUTHERN COOK’IN”.) You should all care, too. We put a lot of time into our code, the semantics of our code. We don’t want to do things like this (br br). These are synonymous. These are not quotes and apostrophes; these are (shows dumb quotes, inch and foot marks, mentions my correcting him before). (Shows character entities for quote marks, unneeded of course.)
It’s all these details that add up to this larger piece. After a while, they affect the overall effectiveness of a design. (Shows type-book covers – Bringhurst, inevitably; Lupton; grids.)
Q&A
-
Q. from woman: Suggestions for those of us who don’t get to use a fixed-width page? Our entire site has to expand no matter how wide people make it. I work for the government (volcano-hazards program).
A. Line length and images. Those aren’t easy; they really aren’t. Is it that your page has to expand to your entire window?
— Everything.
— What a great experience. Wow. OK. Resize images dynamically using ems, or some pretty cool Flash methods. Ways you can use imagery with dynamic cropping with CSS. I’m probably thinking you’re dealing with more editorial content where the actual content has to be seen in total. What i usually end up doing is having thumbnails cropped and click to something larger. Slideshows or things you can have as supportive content. Line length is just never easy. As a line gets longer, you need more space between the lines. Could swap in a new stylesheet (for that case). Fluid sites are never easy, so fight the good fight.
-
Q. from man: What happens if the client still just doesn’t get it or se the importance of what you’re doing?
A. Expectations: We like to set them very early on, in the first meeting. We define the processes we’re going to take. Every step of the way, we reiterate what they’ve gold us but their feedback in every stage. And if they still don’t get it at the very end, sometimes we chalk it up to a loss. Not every client job can go as planned. It’s their site; it’s your job to steer them in a good direction visually. We do work that – it’s not that we don’t talk about it, like it’s the black sheep (of the family), but that people won’t necessarily learn from it if we showed it.
-
Q. from man: Ads.
— Awesome!
— The sites that you have don’t particularly have ads on them, but I work for a very large company, and ads just seem to get bigger and bigger.
— Oh, yeah.
— Page I’m working on has a 336 × 850 ad on it. Grid is based off the ad units. They’re taking away from the content. Designers actually design the ad units based on the content? Normally it’s vice-versa.
A. They don’t want to deal with proprietary sizes. The Deck started with our just putting up an ad of that size. These are known values, so you might as well just get ’em out of the way. (Some discussion of how it might detract in the long run.)
-
Q. from woman: Can you talk about the fold, and can I call my clients and you can talk to them about the fold too?
A. It’s a moving target. Everybody things that it’s very important and things need to be above it. I actually don’t really concern myself too much with the fold.
(Ends 2007.10.04 14:15.)