Liveblogging a presentation at An Event Apart San Francisco by Jina Bolton
(Zeldman tells us we cannot mention or blog the fact that Jina was the one behind the increased standards compliance and accessibility of Apple sites, including the store.)
(Livéblogging may be slower on this one due to fatigue. I have realized I am only thoroughly livéblogging the stars I already know. And that I do that at all conferences. Most of them are boys, BTW.)
(Shows her incredibly hot “head shot.”) It makes me look awesome! (Later mentions she’s from Memphis, pronounces “Moleskine” as “Mohlaskeena.” And “Hoefler” as “Hohfler,” but he gave up long ago on getting his name pronounced correctly [“Heffler”].)
Interface cosmetology: Art school crammed into 45 minutes. Grid, typography, colour, finding inspiration. Really just adding flair or æsthetics or sexy style. I’m really, really into Web sites that are not just beautiful but sexy. Foundationally, you have to know the rules before you can break them. To do a dynamic layout that’s not really grid-based, you need to understand the fundamentals of the grid before you can break it.
Layout and composition. The almighty grid: You have to understand proportion and measurement and balance and how to get things to make sense. Grid can establish order in your work, almost a visual semantic: You can see “OK, this is content information or legal information just from the placement on the page.” It’s also a really important element in branding. I did some work for FedEx, and we had to make sure the logo was in the same place; you always got the feel that this was FedEx, this was the brand.
(Shows New York Times grid.) I don’t think I’ve ever been to a presentation where New York Times was not used as an example. One of the best examples of using a grid and creating order. Sort of a visual line created by these images.
Fracturing the grid: My design professor was affectionately called the grid Nazi, because he was always taking his pica ruler and checking that everything was right on the line, and if it wasn’t, you had to redo it. He also taught us how to fracture the grid: How to shift things, or move things or even tilt things, but still follow the basic rules so it makes order still. (Shows StuffandNonsense.) I like how not everything lines up but it still makes sense. You can actually fake (not having advanced CSS) with imagery. (Shows GNVPartners with laptop at an angle in photo.)
Or use organic abstraction, like Gaudí. It’s actually where the term “gaudy” came from. [I asked Grant Barrett: “False. From the New Oxford American Dictionary: ‘ORIGIN mid 16th cent. (in the sense [rejoicing, a celebration]): from Latin gaudium “joy,” or from gaude “rejoice!,” imperative of gaudere.’ ”] “Straight lines belong to Man; curves belong to God.” SylviaLoh. Don’t be afraid to shift things or tilt things, to use imagery to fake the effect of something.
Typography: This is the part I really enjoy. In fact, I’m a big fan of Joe Clark’s Flickr feed because of all the typography photos he posts. This was a big part of the grid Nazi, too. David Chaffee. Everybody who studied under him has this big passion for typography. Some people look at it as just choosing a great typeface, but it’s also how you typeset it, experiment with it. Choosing a typeface can be a little difficult because unless you’re working with a company where you’re required to use the same fonts on everything, you have to take a lot of things into account when choosing.
Nursery or daycare site: Punky, edgy font? Probably not. You want to give the feeling to your audience that you’re nurturing and you’re caring. Legal firm: Professional, good at what you do. Comic Sans will completely kill the image you’re trying to give. Hopefully you’re not using Comic Sans for anything. But hopefully you get the point: You have to chose at typeface that matches the feel.
Choose two to three. Anything beyond four is going to be chaotic and a good sign you’re unprofessional in what you do. Balance your typefaces. Two serifs are gonna battle each other. (Explains what serifs are, and yes, she uses the word “feet.”) (Shows AIGA.)
Typesetting: Some people still do it. I took a class in it and thoroughly enjoyed it. (Really is talking about metal type there.) Everyone designs on a computer, because these things are done for you, and poorly. Alignment. (Explains not to use justification. Doesn’t even like it in print. [Books, though?]) Left-align has the best tracking for that (meaning fixations). The way your headlines are aligned: If you’re using justified type, I would recommend centring your headlines for visual balance. Left-aligned text needs left-aligned headlines.
Whitespace: You want to have things legible. Kerning is a little difficult on the Web to the point where what I try to do is take it beyond spacing letters to manually tweaking. Almost impossible on a dynamic site, but on a static one, I encourage you to try it. Punctuation: Correct quotes, en and em dashes instead of multiple hyphens, actual ellipsis character instead of typing dot-dot-dot ([questionable]). Enhance the way they loo, but also for legibility. Hanging punctuation. If you have the ability to do manual tweaking, I highly encourage you to do that. [Some browsers, like iCab, use system-wide layout to do that for you, including f-ligatures.]
Favourite: The Big Noob. Good example of whitespace, or maybe bluespace.
Decorative type. I like to make the first line small caps and more letterspaced than the rest. Making quotation marks superbig on blockquotes.
Images: Ornamentation, photography, illustration. If you want to know what ornamentation is, just look up. It’s all over here – it’s in the ceiling, it’s the chandelier. The way I prefer is using subtlety. The Grammar of Ornament, Owen Jones, 1856: “Construction should be decorated. Decoration should never be purposely constructed.” Boom Design Group, especially in headlines. Adding a flourish at the bottom, like a leaf, can make or break a design.
[Certain portions missed.] (Runs through emotional connotations of colours: orange, green, purple, black, white.) (Shows BrightCreative.) What kind of feelings do you get from this? (Me: “Aftermath of a house fire.”)
Volume and depth: If you create the feeling you can reach behind and move things, you can create something interesting. Normally I’m not big on Flash Web sites, but I’m really big on Checkland Kindleysides. Make you feel like the paper (cutout) is really standing up.
Pattern and texture add another layer. This gives you the feeling there could be touch to it. If you have big solid areas of colour and you find it’s just not enough, adding even a little bit of texture helps. Elliot Jay Stocks: Grey background would be cold to the touch without texture.
Oden Marketing and Design: “It’s not how the work looks. It’s how the look works.”
Critiques: Get someone else’s eyes on what you do. Go to a Starbucks and offer to buy someone a coffee for an opinion.
(Q&A untranscribed. She did say “tact is the most important thing during critiques.)
(Not going to cover the next session, “Standards in the Enterprise,” with Kimberly Blessing, due to eye fatigue, which affects the orbicularis oculi muscle, and stiff hands.)