Long question, short answer
Tuesday, December 11th, 2007http://dowebsitesneedtolookexactlythesameineverybrowser.com/
Looking nice in every browser is, of course, appreciated.
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
Looking nice in every browser is, of course, appreciated.
Back to main AEAChicago2007 post
located a mile and a half directly east of here
colocated with 37Signals
create names and identities, ad campaigns, short files, tv
commercials, package design
for their own businesses and for others
many people have private projects that we have enthusiasm and
passion for
and also 9-5 jobs where we have bosses and clients that we have
less passion for
so how can you get passion into client work and pragmatism into
personal projects?
spent night worrying about microformats - no, drinking with others
one bridge is craft
becoming better typographers, filmmakers, writing clean code,
learning about pre-press
all that translates from work to personal projects and vice versa
learn things that are both related and unrelated in the two arenas
Coudal is in many senses a very traditional design company, and
in others totally bizarre and new
curiousity got them into this position
1959 C. P. Snow's The Two Cultures lecture/book: growing divide
between art and science
specialization and people being stuck in roles
so much information necessary: all your brainpower devoted to
being a thermal engineer
humanity is worse off for the loss of the generalist
for today, define the gap as between designers and programmers
also between clients and creatives
what's the one reason he's all over the place?
their voracious and extremely short attention spans
filmmaker who works for Coudal has series called Regrets
"whereas a normal person would see a bird and say "oh look, a
bird," then go back to their life"
"find a good spot to watch spastic rocks"
*** find this. no really.
for him, it's the discovery that's important. "ooh, headphones!"
it's not necessarily a negative to have a short attention span
when you bail on something, you create room for more enthusiasm
if you can manage that enthusiasm, you can do amazing things
"This all might be a big rationalization for the fact that I can
never finish anything."
last winter someone called and said they'd made a new print of
Days of Heaven
new Criterion Collection DVD coming out
showing new print at Music Box on north side
"people are talking really good eavesdropping stuff"
they're the kind of conversations that you never have
went out for a drink and started talking about way to develop
business idea
show these very accessible American films that you almost never
see projected - Chinatown, The Godfather, Days of Heaven,
series of Tuesday nights, meet at bar afterward, website with links
and short essay
get back to studio and everybody's enthusiastic
start doing research - spreadsheet for cost of space, getting print
start designing an identity - "Projective, I'm in the dark"
and then client thing bursts into flames, and then swapmeet, and
then something else
eventually Projective is like in Tupperware at the back of the
refrigerator
sounds like a story about a failure, or at least a waste of time,
but really a great success story
"we learned all kinds of crap that we didn't know before."
sharpened business skills
got to design a logo with no client, so that was worth the whole
thing right there
and all that knowledge is going to show up somewhere else
so how do you get some of that into your day-to-day business?
basic concept at Coudal is very subtractive
get together, talk about it, do research, argue, start throwing
things away until we're done
best way to find answer is like peeling the onion
(remove everything not the statue)
going to use logo design as an example
pretty smart but don't often hit a home run instantly
some Japanese designer, very famous, old, tons of corporate
identities in Japan
has 12 junior designers who work with him, each gives him
12 ideas
goes to meeting with client and displays all 144
says "This is the work we've done for you." then takes out
145th and says "And this is your logo."
which he has designed
can't build a company based on design director getting a
brainwave at a toll booth
don't have too many meetings, marketing speak, employee
handbook, vacation policy
but need process, procedures that help maximize that
spur-of-the-moment brilliance
capturing "wouldn't it be cool if" ideas
use a metaphor for process, like roads
assuming have to struggle through, do the research and get up
to speed quickly
the one skillset you have working for clients that can be most
beneficial working for yourself
is the ability to learn quickly, get up to speed
get up to speed, talk a little, work to get 10-11 ideas
not sketches, pretty fully formed, but not complete
works well for logos and names
some are expected probably, some innovative, some derivative,
some from left field
then sit down with client and go through it all and talk
educating the client how got to where we are at the same time
as plumbing for interpretations
want to get the most sunlight on the most concepts we're
interested in, especially weird ones
also do meeting to get rid of most of them. get rid of 7, now have 5.
now try to get out of sterile environment of presentation board
Photoshop onto billboard, put on t-shirt, etc.
get client back in, talk about these five, open for a late arrival,
get it down to 2.
then do again and get down to 1.
advantage is have opportunity to have most interesting ideas
see the most light
other advantage is client is in boat when leave the harbor
like what Jeffrey was talking about
client has helped make all the decisions with us
so very rare get to end of road and have to restart
not a trick, a collaboration
nothing will kill your revenue like doing jobs twice
next way to get spur of moment into designs is to rip off designs
unless your a student, then you have to be your own professor
"we value, above all else, we value taste"
above technical ability, speed, amiability, cuteness
can teach anything but taste
need to look at two things and know which is better
not enough to just know, need to investigate why you feel that way
great way to investigate is to rip off the design - recreate, remake it
reason you're doing it is not to take advantage, but when you
remake, you talk to the maker
it's also another skill, you understand that poster in a way that's
much more real
in web design particularly appropriate, because web site is art
and view source is science
so easy to see how people have done things
if you think all websites look the same, same is true of other
genres ('50s fashion magazines)
"I like the way he did that" and change it to work for me
we are getting more specialized and also getting more insulated
you might work by yourself, even if you're in a cubicle
or you're at your house, or in a distributed corporation, or in
very small teams
power of adult conversation cannot be overemphasized
easy to get caught up in details and dead ends when by yourself
without serendipitous conversation
at Coudal, conference room B is actually the bar down the street
don't get so tangled up in yourself
last part is do the work. don't talk it to death.
have to understand how to set a headline, whatever it is.
while you're doing the work, you can find inspiration, whether
work or personal project
perhaps you could avoid that by coming up with buzzwords
Coudal video about Agency.com video to try for the Subway account
buzzwords like "activate their customers" -> sandwiches are awful
Agency.com video is linked on Coudal's site
if the RFP is more than two pages, we don't respond. Happy Cog
maybe goes to five.
if they spent all that time, prorated cost by sending it to everyone
when we evaluate whether to take the job, ask three questions
1. Are we going to be able to make money? (not always required,
but usually)
2. Are we going to be proud of the work?
3. Are we going to learn something new along the way?
career as continuing education
most of the time, the learning question is required.
can also use own personal projects to learn about corporate
work and vice versa
made short film to be shown to five people in a boardroom -
looking for a licensing deal
involved buying every single cocktail umbrella in the Chicago area
could do anything we wanted if communicated what they wanted
communicated
fascinated by Apple Mac commercials - not because love John
Hodgeman or hate PCs (though both are true)
love background - antiseptic but warm white
so made film using that idea
have done a lot of things on coudal.com - contests, blogging, etc.
used those ideas on client sites
one other chasm: between people who write the words and people
who design the layouts
Copy Goes Here video - new copywriter teaches coworkers to read
and is let go
fun, got attention
don't often show to audience who get the Paul Rand and CMYK jokes
Back to main AEAChicago2007 post
This presentation was otherwise known as “how fast can you type?”
was in advertising for 15 years before got into the web (musician, filmmaker, etc.) got into the web so he could work in his underwear got into it because no one really know how to do it first website he worked on, client didn't say "change this", client was just grateful could work from home, flexible hours, etc. "many years of unhealthy weirdness and great productivity" but a couple of years in, clients started to have lots of opinions David Segal, Creating Killer Websites first talked about graphic design popularized tables and layout but had little fetishes 1996 client: "shouldn't we start this site with an entrance tunnel?" before the Flash intro, there was the static HTML intro first site he worked on, Batman Forever, used Perl script to make bat grow by reloading so the clients came back Thomas Muller from Razorfish was in Miami showing film about new office in Helsinki news to him that could have multiple offices while doing web design still had to do client services, had to learn to communicate was about getting outside the cubicle most of us introverted, happy with Photoshop/text editor, nice monitor, no interruptions but have to learn to relate to people in order to get work done first day at ad agency in New York, had laid of 80% of staff was a guy Ed who was getting laid off and wasn't employable he'd been doing the kind of work one client loved for ten years, and it was terrible we're all passionate about best practices, and we have to be able to get that across not just for fulfillment now, but because ten years from now, you may need to get a job need portfolio that shows you know what you're doing if you're not the main person interfacing with the client or the boss, still need these skills it's the relationship, stupid. you already have relationships. "The only way to do great work is to have great clients." -Lou Dorfsman, creative dir, CBS "but yet there are no great clients... you have to make them" Dom Merino worked in ad agencies (Volkswagon gas pump to the head) in glory days of '70s he said he'd never had a great client. they'd kill great ads, no direction eventually they'd buy something endless scope is one way to do great work. eventually they buy something, if it's quality. but respect flows both ways - want to be able to work with the client sometimes person we talk to doesn't respect our work, so we don't respect them but being respectful can make the relationship become productive "The client is an idiot." wait a minute: "The client is *not* an idiot." may not be paying attention to you because they're great at their own thing so "Don't choose idiots for clients." he was a terrible employee (late, smoking, clueless), then changed, then was fired what's wrong? "I just don't believe it." couldn't get first impression out of her head. hopefully you have the luxury to pick your next employer or look at RFPs and pick clients so now methods and techniques Avoid bad clients. learn to smell trouble - bad assignments pack paperwork they obscure their address and phone number - not on the website instead have downloadable project planner if not willing to fill out planner, can't call and bother anyone not true for back-end developer - want what they want, what technology, all possible information but for designers, too much information is like a first date about all the tragedies of a life a literary magazine sent them an RFP - right up alley, could be pretentious and artsy and brag probably don't have money, could be an interesting job, all evens out, portfolio piece then sent 37-page RFP - looked like applying for government work 14 pages of wireframes existing site was one page with links to PDFs, ten years old, in 2006 if come and say "we have no money but we're prestigious. we don't know what we're doing." then maybe that's someone you can work with if they're coming to you and saying "can you help us"?" but bringing you committee-created wireframes, just don't do it Listen for bad date vibes. might be different for other people. they like having a good time while working. respond to people respectfully but also playfully. if respond poorly, can't work with them. "Your emergency is not my problem." every so often reads BusinessWeek or Forbes or something - on plane and forgot or finished book and iPod is dead, and they're not showing a movie - then reads Forbes had article saying if they're in a rush, you can get them to agree to anything like someone who just robbed a bank and I run a car lot when come to an outside vendor with a job that's an urgent rush, that means they can't decide means they needed in January, coming to you in August, with site needed in September if in rush, means all decisions will be made that way they'll agree, they'll sign the contract, but they won't live up to it Build trust. every time he says "if can't make work, change jobs", someone in the audience decides they should The non-webby client lack of web experience doesn't make them a dummy can help them get up to speed mosquito.happycog.com - anonymized organization in Chicago working with teenagers head of organization wasn't web-savvy and said so proposal was to move from static brochure site to community for teens and teachers immediate clients said that was fantastic, but needed to convince person at top of pyramid so they made a presentation about the web and how it works and the aspects they want to use first talk about who they are and what they've done talked about discussion sites and blogs - discussion as part of site (comments) or whole (/.) showed them the sites to explain "this is Metafilter, it's been around X years, X readers" needed to persuade would need someone to moderate forums showed example of bulletin board spam - wimonwillison.net Bulletin board spam this post about bulletin board spam got spammed. Bill Wyman, Rolling Stones, and Osama hasn't deleted, though comments are closed showed discussions for teens by teens - MuggleNet, Mogget's Old Kingdom, Youth Guardian Services perhaps there's no spam because when a community is vested in a site, they do their own policing same way people don't clean fast food restaurants but keep their own house clean took time to reassure client on various points so would allow them to do what they do How-to: have a process. be calm and methodical never know how will solve problem, but know what stages the solving process has tell that before engage and keep reminding what stage they're in "Some business people think some creative people are weird flakes." by having a process, like them, demonstrate you're fellow professionals How-to: before showing designs, build relationship. wireframes build relationships. ask "who are your users?" say "meet our IA." lots of time talking to them, even if their ideas are terrible, so they know they're heard translate into understanding of what their problems are then present next steps. "here are problems we've identified, and here's what we'd like to do." How-to: the Alzheimer's method his mom had Alzheimer's. would constantly, in gentle and calm way, remind of what was just said each time talk to client, say what last decided, what they asked to do, how has done it not top of mind for them, so need to remind. "We're in the wireframing process, and last time we decided to first only look at the homepage." there are really more phases, but no need to say "phase 3.2" How-to: as in any relationship, learn to translate wife says "that sweater's beautiful." two days later "it's cold in here." when surprise her, just showing that understand and listen valued in partner and by clients as well was showing some navigation, and client said "is there an ideal number of navigation items?" start to think about 7+-2 and sometimes it's 5 plus 3, and then realize that's not the issue instead asked, "is there something we're missing? is there something users couldn't find?" had one bad client, where returned own drawing after seeing three comps, with more tabs than items "Everybody understands design." - Hillman Curtis you don't have to explain design, because people react to it you don't have to tell people what they're looking at "when we did this one, we went with black and white, and in this one with color." Our job is to convey the meaning of design. question on planner is "What one problem are you trying to solve?" "What one action do you want to user to take?" always get three or four answers instead of one use design to show how would look with each of those objectives, to help choose who they are Sell ideas, not pixels. Amnesty International (slides show ideas, not finished) hadn't been able to articulate primary function of new design 1. Impact: pick two horrible, compelling stories that Amnesty is trying to change now shock out of complacency, make you uncomfortable, angry 2. News channel: if you're concerned about these issues, come learn what's going on in the news 3. Humanity: give the issues human faces faces, warmer color palette, eventually African rug pattern basically bought the third had discussion about three different emotional connections they could be making one way to avoid the ex-girlfriend's quilt color Kansas City Chiefs - competant website but not really designed what do they want to be? what problem should we be solving for them? so thought they're an unusual team - kind of socially conservative, respectful, not marketing only team he knows of where cheerleaders are treated as nice young women who'll go to college 1. Like no other - different from normal football sites 2. Heritage - took tour, saw cool stuff from '60s, nostalgic feel, color scheme and clunky arrow arrowhead watermark everywhere 3. Big boys - big NFL football team just like all the other big NFL football teams ended up with third sometimes "just like" would be a bad thing, but here wanted to be part of the group York Industries - Long Island manufacturer of high-tech stuff 80-year-old coming in every day, "people don't retire, they go out in a box" Polish immigrants who came not speaking English and were taught English and then promoted place had a family vibe Victor Lombardo was information architect 1. Personal touch - human, warm, we're an unusual place we make high-tech stuff, but we're more like a family business would go out of their way even if not their regular product - buy from competitors to send it to customers 2. Product focus - we're a hardware company, damn it so really started like ads, where one campaign is about how human and one how proficient and then split the difference. 3. Hybrid - "you can have your axle and your humanity too" AIGA - has some problems connecting with online community some people feel is great organization for some people but doesn't care about me 1. Consumer - you're perceived as a cold, elite organization, and maybe you want to change that maybe you want to reach out by feeling more consumer-y, lifestyle-y, Apple, Martha Stewart 2. Elite - no, "make a virtue of the fact that we're cold, elitist, heartless bastards" Swiss poster, modernist aesthetic, little color, very design-y 3. Inspirational - two narratives. normal AIGA website plus stuff at top from design archives with wild random colors, not who you think we are really inspire designer - bored, goes to site, gets great hit of color and ideas each design positioned as trying to solve a different problem all Jason Santa Maria combined designs 2 and 3 for final product Responding to criticism: That color is ugly. "Well, where did you go to art school?" never helps. might say "Well, what is it about it that makes you uncomfortable?" or "Well, yes, for people like you or me, but remember it's for 14-year-olds." pull out user research from beginning of project to demonstrate why the choice was made Responding to criticism: That button is too big again, research. big problem is people bail out of shopping cart. they don't know what button to push, so that's why we made it big. like Luke's talk about forms, user data like eye-tracking studies. Responding to criticism = translating. Dan Brown says when all else fails: 1. Push back. 2. Offer to look into it. 3. Shock them. Agree. "You're right, the logo does need to be bigger."
Back to main AEAChicago2007 post
Luke Wroblewski’s post about his presentation
designs web applications - eleven years of designing a lot of forms online shopping experience is browsing until you find what you want, then a form so forms stand between you having money and the company getting it from you i.e. MacBook Pro takes your picture for your account - very personal try to sign up for, say, Vox, all about community and blogging -> form forms for managing financial data, for voting, etc. forms are how customers talk to companies online. they make money. they enable participation. they permit engagement. YouTube's upload form has been redesigned seven or eight times already Jared Spool fixed a design problem in a two-field form and made a company $300,000 a month gave talk at Society for Technical Communicators - one person liked filling out forms so minimize the pain of filling in forms, have clear path to completion forms are conversations: "give me your name. what's your birthday. what's your secret password." lots of different departments may want different information that all goes into one form most forms are artifacts of the data structures behind them - database structure data sources: usability testing, eye tracking, customer support, best practices, site tracking design patterns: information + interaction + feedback slides have a *lot* of information label alignment depends on information familiarity, ability to extend vertically, etc. when eBay redesigned its input form, it had to restate its earnings upwards indicate which fields are required/optional when only a few get the designation when B&N redesigned its account form, they kept *s on every field but dropped explanation Walmart does this correctly - the one optional field is marked required asterisk on label is much better than on input field try to avoid things that are optional the number one thing you can do to increase completion rates is to get rid of fields text labels for required/optional are best, but asterisk is pretty good text saying "use five digits" for zip code is less good than making the field that big use field length as an affordance, or else use consistent lengths to reduce visual noise group things with least visible differences Luke has said not all form actions are equal - make primary action more visually dominant eBay Sell Your Item: Add Subtitle - "What the hell? How can you mess up a one-field form?" in eye tracking survey, fewer fixations and less time when buttons were same when people talked about what they saw, they liked the difference people said "It slowed me down", "It prevented me from making an error" might become quicker over time worst performance was continue/submit on far right, go back/cancel on far left three successful variations of Submit | Cancel with top labels, people followed very clear path to completion, submit button left bottom if possible, get rid of secondary actions - nobody uses reset help and tips can create visual clutter: automatic or activated help for current element best eBay Sell Your Item: Choose a Selling Format has too much help three radio buttons, >10 help items on the page many different ways of displaying contextual help exactly as needed primary goal for every form is completion have smart inputs so you don't have to require a particular phone number format have smart defaults to reduce choices people have to make alignment helps define path to completion - let eye scan straight down for long forms, let people see their progress and save make sure tab order is correct - use tabindex attribute use progressive disclosure: show people features when they need them use gradual engagement: let people use the site and then register example: jumpcut.com and geni.com Fidelity myPlan uses sliders. it dynamically shows you information without form submissions. there are many ways to expose dependent inputs - think about all your options slides explain lots of the possibilities use inline validation for error-prone fields - validate inputs, suggest valid inputs, etc. i.e. people really like "how secure is your password" progress bars i.e. when picking a username, show whether is available prominently indicate an error, show what the error is, say how to fix it by the field, use red and bold (doubled visual language, not just red because of colorblindness) again, say how to fix disable Submit button after it's clicked so people know something's happening provide in-progress indicator communicate that submission has been successful avoid changing inputs that have already been provided tell people before they start filling out a form if they need anything hard to get (VIN, etc.) <label>, tabindex, accesskey, <formset> wufoo.com, formassembly.com, icebrrg.com will create forms for you Pownce signup is good - but don't need to ask for birthday, gender checking availability of username could be automatic
Back to main AEAChicago2007 post
International Jugglers Association was in next room to Webvisions 2006 color, typography, iconography, microformats, flexibility start by keeping one object in the air, then two, then.... special announcement: has a new site, toupeepal.com (Wig 2.0) color color is emotional - becomes a problem when working with clients "I hate that green. It reminds me of my ex-girlfriend's quilt." clients say "more wow", like it's a Photoshop option interesting idea: choosing colors picked from nature photos - B&A article by Luke W. can use pixilate function in Photoshop to find major colors in photo (picture of Trump, founder of toupeepal....) Flickr group "Two colors or less" Drawn! illustration blog interview with Art Lozzi blend background colors so are harmonious, not competing with each other or foreground 31Three pulls dark blue menu color down into background of main part of page grain texture in background - add noise filter in Photoshop, monochromatic, reduce opacity reuse colors from palette (fourish colors) to unify page open color picker and reduce/increase saturation link color carries weight - on a link-heavy page, that color is important typography don't need many fonts, just need to use them well AIGA uses Georgia and Verdana - italics, letter-spacing, etc. Georgia responds well to all-uppercase with letter-spacing Robert Bringhurst, The Elements of Typographic Style "In heads and titles, use the best available ampersand." often want the italic version <span class="amp">&</span> webtypography.net transforms guidelines from book to web examples make sure fonts in graphics also harmonize can get on mailing lists for type foundries veer.com will send you cool stuff myfonts.com has a great email newsletter - interviews with type designers, history, etc favicons - the most important design element of any site! well, important, anyway. feeds, bookmarks, Subtraction's footer, tanyamerone.com same, cellphone really easy to make or really difficult scale down logo if possible, choose fragment of logo, or do something totally different maybe pick part of brand that isn't the logo toupeepal can just shrink logo. various examples in slides. or can use avatar of you (eep), which is apparently popular Flickr uses its branding but not its logo create in Photoshop, paste into Iconographer Delta Tango Bravo has a great collection of favicons Smashing Magazine has another add detail without adding complexity dropshadow can just be 2px repeating image across bottom of box suggest the box - background fade, round one corner only, gradient fade of one corner reuse themes, colors, graphics so e.g. backgrounds tie things together microformats way to make data available for someone's future application takes the guesswork out of how to mark up a particular piece of content http://microformats.org/code/hcard/creator SimpleBits's contact page has Download vCard link SPARQL - can query for only reviews by buddies (XFN) Scrugy is a wine review site - scrape wine reviews including from Cork'd "accidental API" - Brian Oberkirch Drew McLellan presentation, Can your website be your API? get greater results by using many microformats together microformats.org bulletproof content in slides turn images off style alt text so it doesn't look awful - and isn't black on black turn CSS off increase font size validate has he met Gary - purchases of Cork'd - and is he as crazy as on his videos? no and yes (phone). future plans for toupeepal, will he cater to the bald by choice community? hope to be acquired by someone like Google. are talking to Trump about funding. how do you design a decent-looking website around a bad existing logo? try to de-emphasize logo; those are the projects you don't talk much about with color, find the colors that are OK and focus on them with emotional reactions to colors, how do you prevent yourself from being the shrink? it's hard. change slightly, etc. important part is whether works for design. if client doesn't want to go into code view to do microformats, how can you convince them? depending on the CMS, might not have the ability to add markup put microformats into the templates; snippets for CMSs that support that interesting to have a microformats zen garden? yes, start building. there are content types that seem microformattable that don't fit the current ones create a format, use it, get others to use it, join mailing list and process. resolution designs for? bigger than 800x600 is fine now why does your octopus have ten legs? it's a decapus.
Back to main AEAChicago2007 post
start with discovery: research, interviews, what company does and message they want to convey do discovery in a place where you feel creative - colors, books, stuffed animals he keeps morgue files - printed matter that inspires him he keeps sketchbook - capture ideas and go back and find them and be reinspired sheet music title pages often have cool typography also digital morgue files - stamps, ads, photos, matchbooks, colors - tag invited to Comhaltas, preservation of Irish music/dance/etc, in Dublin invited to music sessions - feeling of community, playing together 10 minutes after meeting looked at traditional knotwork for inspiration told them to avoid dancing leprechauns had music available to bring online used knotwork, colors from those knotwork patterns, emotional connection, modern feel ended up with Comhaltas site A List Apart site - crossover between content and design took inspiration from old books' typography why is designing for yourself or your agency so difficult? hard to translate feel use iterative design makes what he calls grey-box comps look very like wireframes but are about layout hierarchy not just elements on page "AIGA stands for the professional association for design" (mm, de-acronyming) figured out flow of editorial then were wrapping different things around it third comp has design competition images in header don't want to cross designs but focus on one and develop that in second round, he focuses on details does it need an underline there? what's the relationship between headers and content? between 2 and 3, the logo got bigger. :) on article page, cleaned up navigation widened article column and inlined images instead of thumbnails Marty Neumeier, The Brand Gap WordPress head is in audience use brand equity when you redesign gridwork - i.e. early maps of Philadelphia by William Penn very different from London.... starts in Illustrator for grey-box comps, then moves to Photoshop pay attention to focal point reduce over-contrast over 400 members of Flickr group called Atrocious Apostrophe's “ ” ‘ ’ Elements of Typographic Style, Robert Bringhurst Thinking with Type, Ellen Lupton Grid systems in graphic design, Josef Muller Brockmann Making and Breaking the Grid, Timothy Samara
Back to main AEAChicago2007 post
interfaces are mostly text try going to a website in a foreign language and see if you can tell how to interact content drives traffic - i.e. boingboing words + how big they are + where they are THIS IS WHY... 1. All sites have big writing / editorial budgets. 2. All sites (especially big ones) have a content czar. yeah right. so what do we do? "Thinking with Type" one of the most humane features of design is to help people read less. guide copy explains what the site's about and how to interact with it should be brief, clear, and enable you to do things Veer is a nice site for buying fonts, pictures, etc. Khoi Vinh saw Zeldman give this talk, and now the NYTimes subscription wall page has a link if copy doesn't set tone, the design can (i.e. e-cards for tween girls) but needs to be audience-appropriate "Understanding Your Medicare Benefits. You must have Flash installed and JavaScript enabled." project management is a tough job - moment of appreciation Basecamp's login "we'll send you right along" is friendly Joyent "Take a tour and we'll prove it." instead of "Read more about our services." give us a chance to make a value proposition Flickr - must appear to be easy to use "copy" copy - doesn't have to be as brief, can be silly XHTML fist shirt has six fingers.... brand copy - taglines, blog subheads, etc. forgetting to write a sentence of introduction totally lose a visitor Marley's daughter's clothing site's shopping cart is way too formal, not reggae Lulu's about page guy in a suit in heaven with huge amounts of text really doesn't work labels can reinforce your brand - Cap Gemini's "how we work together" URLs can be labels - name them for humans reading online might be more fatiguing than reading print, but studies are unclear compare a versus b Attack of the Zombie Copy Your About Page is a Robot how do you reconcile people-read-less with SEO? cutting the fat and natural language help both so does using markup so important words are in headlines can sometimes get funding for editing content by saying will help SEO what are some questions to determine what's brand-appropriate? discovery process. what materials have you already produced about yourselves? what do you know about your stakeholders? compare with real users. there are no good books about copy there are good ones about writing for the web, but they don't address these issues - i.e. Crawford Kilian, Writing for the Web Zeldman is thinking of writing this pronouns in copy? used to be more we, now with blogging more I
ETA: Fixed spelling of Kilian, after seeing his discussion of I versus we prompted by these notes.
Better late than never. Following will be my notes from An Event Apart Chicago 2007, held August 27th and 28th. It was the AEA lineup I was most interested in seeing, and conveniently they came to my city. I’ve since moved to Washington, DC, but I’m glad I was able to bring their ideas with me. Definitely worth the price - and I was saying that after the first two talks, so the value of the full conference had to be much higher.
Jeffrey Zeldman’s event wrapup, with various links
Links to individual posts:
“Secrets of the CSS Jedi” by Eric Meyer
“Writing the User Interface” by Jeffrey Zeldman
“Design Your Way Out of a Paper Bag” by Jason Santa Maria
“Search Analytics For Fun and Profit” by Lou Rosenfeld
“The Seven Lies of Information Architecture” by Liz Danzico
“Interface Design Juggling” by Dan Cederholm
“Be Pure. Be Vigilant. Behave.” by Jeremy Keith
“Best Practices For Form Design” by Luke Wroblewski
“Accessibility: Lost In Translation” by Derek Featherstone
“The State of CSS In an IE7 World” by Eric Meyer
“Selling Design” by Jeffrey Zeldman
“Dealing With the Both of You” by Jim Coudal
Via Leisa Reichart’s disambiguity, Andy Rutledge has a discussion of “quiet structure” on the new CNN site design, contrasted with the busyness of the new USA Today design.
He mentions simplicity (in header and structural elements) and consistency (in element and whitespace dimensions) as keys to making your content stand out from its presentation and having it be easy to actually read - creating the right kind of affordances for large quantities of content meant to be read rather than just skimmed. I read a lot online - here’s hoping more news (and blog, for that matter) sites will listen to Rutledge.
Many information architects come from a design background. Their deliverables are gorgeous, their blogs are pretty - and their presentations are Good PowerPoint (take a look at the IA Summit ones for examples). It’s a little intimidating for me, coming from a development background.
So I’m trying to learn - how to use designers’ tools and how to use them well.
Last week’s discovery was that InDesign is remarkably intuitive. Reading a book and playing with the software a bit was enough for me to feel confident I could create documents. Sure enough, when I mocked up a wireframe and compared it to the one by a designer colleague, all the bones were there. I still need to dissect a couple of good examples to learn nuances: “Oh, you made the shape outline and then put a text frame inside it instead of typing directly into the shape? That makes sense.” But it’s one more tool to have.