Information Squid

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.

Back to main AEAChicago2007 post

Web 2.0 reflection of Yoda!
isindex tag? from HTML 1.0, no one's used it in five years or so.
display: table doesn't have to only apply to tables
padding on images not just text; images have backgrounds
punchouts with transparent images so changed background on rollover
	shows through
turn a table into a bar graph
	old version on Meyer's site
	table { display: block; position: relative; }
	tr, th, td { position: absolute; bottom: 0; }
	tr { width: 25% } (create columns)
	th, td {width: 100%; }
	thead tr { left: 100%; top: 50%; margin: -2.5em 0 0 5em; }
	(headers outside table)
	thead th positioned correctly - legend with border on each th
	table #q2 {left: 25%; border-right: 1px dotted #999; } etc
	table tbody th { top: .75em; vertical-align: top; }
		(Q1 label at top of column)
	start using <th scope="row"> and <th scope="col">
	tbody td.sent vs td.paid colors
	position td.sent on left of column, 40% wide
	and td.paid on right, 40% wide
	borders set so look like buttons
	outset CSS property doesn't say what colors should be
	so browsers decide (poorly)
	#q1 .sent { height: 36.9%; }
	#q1 .paid { height: 33%; } etc
	precalculated numbers here; since probably coming out of database,
		just program to produce
	or could use JavaScript
	CSS will probably never let you do math: see section 8(?) of CSS1
		but also see CSS3 proposals
	Microsoft had behavior CSS-like property, but many people hate it
	extra div/list/whatever for tick marks at each $10,000
	could use content::after if willing to lose them in IE
	could use tfooter row maybe?
	#ticks { position: relative; top: -30em; margin-bottom: -30em; }
	#ticks .tick { border-bottom: 1px dotted #999; }
	#ticks .tick p { position: absolute; left: 100%; }
		(put them to the right of the graph)
use same markup for horizontal bar graph instead of vertical
accessible and indexable
reset styles
	:focus { outline: 0; }
	table { border-collapse: separate; border-spacing: 0; }
		(need cellspacing in markup)
	blockquote:before, blockquote:after, q:before, q:after { content: ""; }
	blockquote, q { quotes: "" ""; }
Firefox package / Contents/Mac OS/res/ has Firefox's default .css files
line layout is incredibly complicated, so not getting into
can set all elements to display:block and will show head etc. in (most?)
	modern browsers
html element's background inherits upward to canvas
if html element doesn't have a background and body does, it inherits
	upward to canvas
if display html element, there can be space outside it - that's where the
	Force comes from

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