Archive for the 'Design' Category

Long question, short answer

Tuesday, December 11th, 2007

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

Looking nice in every browser is, of course, appreciated.

AEAChicago2007 - “Dealing With the Both of You” by Jim Coudal

Wednesday, October 3rd, 2007

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

AEAChicago2007 - “Selling Design” by Jeffrey Zeldman

Wednesday, October 3rd, 2007

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."

AEAChicago2007 - “Best Practices for Form Design” by Luke Wroblewski

Wednesday, October 3rd, 2007

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

AEAChicago2007 - “Interface Design Juggling” by Dan Cederholm

Wednesday, October 3rd, 2007

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">&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.

AEAChicago2007 - “Design Your Way Out of a Paper Bag” by Jason Santa Maria

Wednesday, October 3rd, 2007

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
&ldquo; &rdquo; &lsquo; &rsquo;
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

AEAChicago2007 - “Writing the User Interface” by Jeffrey Zeldman

Wednesday, October 3rd, 2007

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.

An Event Apart Chicago 2007

Wednesday, October 3rd, 2007

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

Quiet structure for reading online

Sunday, July 8th, 2007

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.

Tools of the Trade

Tuesday, May 1st, 2007

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.