Finally decided to just post my notes and I’ll edit bit by bit if I have time.
UPDATE - Should give some praise as well. AEA does the best job I’ve ever seen running a conference, and the content is spectacular. Both last year and this year I’ve come away wanting to learn more about design, because watching what these talented people do makes me want to learn so much. If you’ve never been to AEA, I highly recommend it.
——————–
Zeldman - what is web design
——————–
what are our skills? what do we need?
we need empathy.
** think he was saying we needed empathy with users. We need to understand what frustrates them, what they can’t figure out.
Looking at real.com. everything that looks like a link is not a link. And vice versa - things that don’t look like links ARE. They are responding to two internet strategies - dominate the market by giving free player (make it easy to find/download), and sell the pro player. Marketing teams are split. The pro team wants to make it hard to find the free one, free team wants to make it easy.
consumersearch.com
similar to consumer reports. reviews, etc.
There’s no intro about what this site does. They don’t tell you what their site does, he had to tell us what they did. Looks like a spammer site. You feel like you are in the wrong place and should leave.
One thing they do well - scent of info by Jared Spool. There is a user who does ctrl-f a lot. People will keep searching if they think they are getting closer to the results they want. The site does not train you how to use it - every page is a new interface. If they don’t get it in 30 seconds, they will leave. Happy Cog finds that one main failure is that sites don’t get the seductive intro, people just find things by google.
** not sure what I meant by the last sentence. Is it that people don’t sit through an intro, they just search?
** bit about how people keep searching - we don’t have to put THE result in front of them, we just have to put enough that they can keep going
you want to put the user first, have empathy for them, even in the face of business pressure.
in the room, we were all self taught. Many people had 5 yrs experience, but were self taught. If you aren’t motivated to teach yourself, you won’t last in web design. It’s hard to find a good education for this job. There are good design, HF, IA, etc educations. A lot of schools that do design train typography, etc, but just hand you the software. Teaching excel is is not the same as teaching business. Teaching Flash is not teaching design.
** we try to teach with our deliverables, but do we do enough flat out teaching? how to create visual design, how to code, how to progressively enhance….is this a place we could be doing more? Even to teach each other?
Liz Danchico - School visual arts in NYC, MFA in Interaction Design.
People who make more money in web design usually had an education that did not have anything to do with web design.
The work of a designer has more relevance to their education. Coders, writers, etc don’t.
no respect - people don’t understand what we do.
** stories make the presentation - he’s getting us to connect with him. you design a talk just like you design a website
Razorfish once bragged they had simplified to 25 titles. There is no standard for what to call us.
** slide of architect, attorney, surgeon
** LN has certain things about titles, you can’t just switch.
Traditional companies have traditional titles, and vice versa. What kind of work you do versus what technology you use. Strategy versus tactical?
if you don’t work in a web dept, you don’t own what you do.
Few people get rich doing web design. Still gender biases. 15% of industry is women, they make more than average but hit a ceiling. Women who think there are predjudices tended to have better titles and better salaries.
who speaks for web design, and explains what we do?
award shows. Communication Arts - awards for interaction design each year. They tend to pick flash based and visual sites. Coke site - splash screen, then a popup with a survey. Adobe site from Guatanomo bay!
webby awards - bad sites awarded. They don’t really know what they are awarding. These sites don’t teach us how to be good designers. They don’t think about the users.
real world sites - they help the user. you won’t learn how to make real sites from award shows.
** the idea of UCD awards for our products - can we hold up good examples? Especially things WE didn’t do. Let’s praise where it’s due.
can news media teach people about what we do? example - CNN and the blogosphere, they don’t really get it. Techcrunch - who reads it outside of CA?
Most news talk about who’s getting rich on the web? Like talking about Frank Lloyd Wright and saying who’s getting rich from real estate. They focus on who’s making money from the web, and that’s it.
can design blogs teach us? they are sort of snooty. where have all the good designs gone?
the guitar solo approach to web design - younger designers do this more. The idea is that the guitar player should have companionship after the show! It’s about what people think of you. It’s ‘look what we can do’.
Good design is invisible. It gets out of the way. It’s not about showing what you can do. Good design is about the character of the content, not the character of the designer.
** this is when he talks about the minimal design for blogger that Douglas Bowman did (Minima is the design name).
http://stopdesign.com/log/2004/05/09/blogger.html
Empathetic web design.
1. start with the user or your passion. Ex - make it work well for all users, like a .edu. Parents, students, alumni. the passion side is like being a musician - you can write your own songs, or be a cover band. Anyone can be a rock start of design if you have the passion for it and are willing to work. Same way he started ALA.
2. Know yourself. what you like, what you don’t. never take a job just because you need a job.
** do we do this? Are we better served picking and choosing our battles?
3. HC banters with the client because they know it means they respond to the personality of HC.
** what is our personality?
4. sell design, not pixels. It’s the idea, not the look. See slides from last year about Amnesty International. Human/News/Impact, they sold the brand.
5. “i don’t know” should be ok to say. If not, you will have problems.
** we should always be willing to say this
6. build trust. build it before you start. HC does a lot of research before designing to build the trust so they know you. Show your boss you CARE about the business side so they will trust you with the work.
7. bring out the big guns - consultants can be used to tell people the same thing you are saying if they will be listened to. They don’t have to read the documentation, but it reassures them that you know what you are doing.
8. Create a paper trail. Document everything.
9. never underprice you work.
10. never work for free - nospec campaign.
11. say no to rush jobs.
12. end with the user
Q- job titles. Did they ask if people can set their own?
——————–
Eric Meyer
——————–
why css for debugging? validators can’t tell you everything.
ex - page with no content, empty img tags, etc, is still valid.
can work better than link checker, validator. it’s real time as well - always on.
** should be one part of a toolkit - this, validator, acc checker. Need a sort of ‘build process’ to ensure we deliver things that are equal quality. business needs to know that no matter who you deal with in UCD, you get same results.
pick your debug as a user style sheet, don’t always apply it. FF extension Stylish is great for this.
debug css is fun because you can push the envelope for css with pseudo classes, etc
Q :empty pseudo class, does it work when it’s whitespace only? He doesn’t know. Spec says
doesn’t work for images, br
inline styling *[style] - Big Red Angry Text methods (http://accessites.org/site/2006/07/big-red-angry-text/)
** be a good example here to fire up some site that does this
use outline so it doesn’t break layout. This is what Firebug does? Use these to show layout divs, for ex.
img:not - negation selector.
** need to review the selectors in CSS and learn to use the unsupported ones more for protos
** just ran into this with input[type="radio"] for example. there’s so much we can do. When less code meets more code, less always wins.
if you don’t have NOT support, you can turn things on and then off again. Same with outline.
table border rule is there to look for layout tables.
form > input is there because you must have a fieldset, or div, holding the children elements in a form.
blockquote is there because text can’t be direct child of blockquote.
IE does not have a default style sheet. FF, Safari, Opera all do.
Meyer doesn’t recommend just taking this and blindly applying it. If you are going to use it, turn it into a foundation. make it a reboot versus a reset.
blockquotes, q - turns off quotes because he doesn’t want to trust the browser to generate content. same idea as trusting browser to have js turned on.Would not use list-counter to create section numbers. But if it’s really important in the content (will be linked to and referred to) it should be in the content. If it has to be seen, it is content, not generated.
** this is interesting approach. There’s a lot we can do with generated content and CSS, but it should still be progressively enhaced. Make it work as plain HTML, then add visual treats.
don’t remove focus. keyboard nav issue.
insert and delete - browsers seem to default to inserted text being underlined. too much like links.
tables - cellspacing=”0″ must go in markup still.
don’t use universal selector for reset because of forms. not cannot have group selectors in ()
IE/Win does not support inherit, so he doesn’t use it. list items break inheritance in some ways that are odd.
** we need to do more with FF building protos, because we can use this stuff more. we can save time and effort using better features for creating prototypes.
IE makes table row background by copying it to the table cell. It doesn’t support inherit, but it pretends to, by making the td inherit the tr background.
——————–
Jason Santa Maria
——————–
Storytelling by design
design telling a story - ” where the wild things are”pictures. Look for meaning in images. Doesn’t matter if we can read, look for the visual message. Setting allegory similes.
GRAPHIC RESONANCE. make the connections more meaningful.
atari - haunted house video game. harder to make the jump to your imagination in this case. But the catalog shows the old box art and it really connects. Doesn’t matter that the game can’t match it, the art sets the mood for you. your mind fills in the gaps that the graphics can’t.
Need link to his flickr photos here.
designer = nararator. tufte image about napolean marching to moscow. it tells a story without really knowing what it is.
Link to the image here.
shows examples from Wired mag - spam king article, lonelygirl15, greencity, why things suck.
when these went online, they took that context away. there’s not the mood, they are telling a different story each time. they are ‘barely even trying’. the stories have been distilled down to content.
“design can’t not communicate” - everything sends some message. Our stories are lacking.
web 20 icons and layouts are too much the same. people don’t complain, so we keep using it over and over. why the sameness?
ex typefaces - there weren’t really that many they had but they were able to make beautiful designs. they weren’t limitations, they were constraints.
are we not really creating great design? we all start from same place, blank page, empty browser window.
NATURE OF THE MEDIUM
we have common principles for design, but they are not common any more.
1. the metaphorical page - the message exists on something. used to be physical medium. But the problem is still there. designer that came up with the idea of the two page spread. people used to only do one page. figuring out A solution doesn’t mean it’s the only way
length of the page and viewport. the page can go off in all directions forever. so we lose the constraint of having to work in a page.
Ex - a book has things on different pages, a website has it all on one page. in print, the content is fixed from the time it’s set to when you read it. not true with a webpage.
2. ubiquity and WYSIWYG - missed this part of the talk. Not sure of his point
3. collections of pages - you can look at a book and grasp the depth of it, how long it will take you to ‘attain’ that information.. can’t do that with a webpage. Example - harpers.com has ALL their content right there, going all the way back to 1850.
4. layout - golden ratio. 1.618. can keep taking a subpiece out and having the same piece left over. if you can base a design on a ratio, you create a visual cohesion between elements, even if people can’t tell the ratio. The golden ration was mentioned at least 10 times at AEA.
Rule of 3rds, if a point of interest falls on a line of thirds, it creates tension.
books - you can count on the hand and the eye working pretty similarly for all people, as far as distance from eye to page, and the way the book is held. not true for web - you don’t know what a person is using to read the site.
design ideals that have developed over centuries depend on predictable dimensions. the web only really has one dimension - width. we don’t know how much of a page a person will see.
TELLING BETTER STORIES
noonebelongsheremorethanyou.com - the story pulls you in.
fray.com - knife/teddy bear(http://fray.com/drugs/scar/).
story about tapeworm (http://fray.com/drugs/worm/), the narrator always has his pants down in the illustrations.
abriefmessage.com - each story is different.
principles of beautiful web design - site becomes it’s own example
espn eticket - each story has a certain mood set right away. http://search.espn.go.com/keyword/search?searchString=eticket
his own site - each story gets it’s own layout. using grids to make things 1/4, 1/2 page, etc etc. there are constraints to maintain a visual identity, it’s part of a whole.
immaturity - first photo ever taken. when photography came out, people used the saying ‘written with light’. It tells you exactly what will happen without you needing to understand the tech details. Story drove the form. Model T - any color you want as long as it’s black. we have done a lot of the hard stuff for working online. but our sites are still ‘black’. how we build it doesn’t matter, it’s the story. why it’s important.
——————–
Sarah Nelson
——————–
used to do front end, cd rom design, etc. went to design institute in Chicago.
no matter how brilliant you are, if you can’t work as a group, your product will not succeed.
Design Criteria (DC) for this presentation (what her criteria are for herself)
wants us to be able to use this wed am.
constraints are freedom.
anytime, anywhere
collaboration doesn’t have to suck
simple and accessible
DC are 5-7 short memorable criteria to focus activities
rules for the problem at hand. complements the higher level stuff (mission statement, etc)
constraints are freedom
they help find solutions.
august wilson - black playwright. Charlie Rose interviewed him. wrote 10 plays about black life in America. He set a specific set of constraints on what he was going to do. he wrote first 3, then realized he could keep going and it gave him a way to concentrate and focus.
can use constraints as platform for creativity.
Dan Flavin - artist who used light. goal to use only flourescent tubes and color gels.
constraints push us and make us look at things in a different way. can’t just spin wheels.
budget, time, people, info, media, resources - all constrain us.
‘if only’ talk - if only I had this, that, whatever.
when going into a stakeholder interview, we ask for MORE constraints to learn. Mission statement, branding, personas, design principles.
learning about a product is really learning what all the constaints are for that product.
to think outside the box, you must know and define the box. now it’s called innovation.
businesses competed on efficiency, a race to the bottom. anyone can make things efficient. once there, now that everyone is the same at efficiency, they must compete in some other way. It’s hard - now you aren’t stripping down, you are opening up.
defining the box - business, market. is it feasible/possibility, do users want it?
If I only worked alone, I get to define the box. And I’m the only one that needs to know it.
we don’t design alone. even if you ask the right questions, no one person holds the whole picture.
everyone needs to understand the box and the edges of the box. may not agree, but can support it. very direct conversations. rip it apart and put back together.
ideas - once the box is made, now make relevant ideas.
Never been a project that wasn’t improved by someone else’s ideas. Use the group for what it’s good at = generate ideas.
which ideas can you work with?
DC - rules for tackling the problem at hand
divergence-convergence
divergence - all the possibilities. vacation analogy - you have a million places you can go. Now you have to narrow it down. convergence - select the most important ones.
the two have a VERY different mindspace (arrow). Convergence - roles are important now. Criteria help turn the corner from one to the next.
examples - type 1 diabetes. disease of numbers. manage it all day long. research team asked users what they wanted:
easy to learn
better use of data
less stuff
no numbers
keep users motivated
wear it during sex
users in control
ex 2 - google calendar
wrote vision statement first. were no criteria that showed impact on the business. were all about the user.
drop dead simple to get info into the calendar. wasn’t ‘3 clicks or less’. fuzzy criteria. you can’t define DDS in terms of clicks, it’s just HOW it works
‘drop dead simple’ is a way to ‘check’ yourselves. it can also be a way to say why you are doing something different. you are breaking it on purpose.
ex3 - flickr.com/about
Flickr is the WD40 of getting photos and videos from one person to another.
ex4 - paycycle
payroll support system for 1-5 employee businesses. it’s like doing your taxes - doesn’t happen often, takes a long time, and is hard.
‘we need to increase conversion rates’ - what does this mean? this is not actionable.
they want people to make jump from setup to product - where they will actually pay for the product. They had a LOT of prelim work a user had to do.
was a linear process. lots of steps. but you could go out of it and not get back easily.
they did interviews with small business people to see what the mental model was. what do they use to help support them in doing this process?
also did expectations/experience interviews - popup to talk to people in the start and middle of process.
they made personas and a mental model. 2 kinds of users - novices just want to pay employees. others know paying taxes is the most important thing.
what were the criteria they came up with - be human. work the way customers do. set expectations. show progess. find efficiencies.
efficiencies - chunk it, regroup it, import data, whatever. make it faster to get the info in
set expectations - give a checklist, etc. show them what step they are at in the process
work way customers do - customers work in a different way than the company thinks. they get interrupted. there were two kinds of potential customers, those who wanted to save every penny, those who just wanted to get the info in and be done
be human - ? this wasn’t a good one. too vague - what does this mean?
DC for DC - how to make them
1. come from anywhere
research data, interviews, whatever.
2. start from the start
capture info from day 1. make a huge list of ANYTHING that can be one
3. one brain, many brains, one brain
everyone throws ideas, one person reviews, group then reviews. Groups can usually get to 5-7 and everyone sort of agrees.
4. art, not science
must be memorable. ‘be human’ - supposed to mean to give a warm feeling. didn’t really come through. but DC CANNOT dictate the solution. do these inspire me? create ideas when I read them? Specific, actionable.
5. support with evidence.
you can know something’s a problem, but you have to support it. Show user research that SAYS what you know.
6. criteria everywhere
use these DC for EVERYTHING. they should be part of every step.
——————–
Robert Hoekman, Jr.
——————–
instant usability reviews
design is what gives you a better user experience.
pulls out target ad from Time mag. talking about design.
wants audience to give him sites that he can runs a quick overview on for UX.
giving a book to each person who volunteers.
the idea here was neat, but I don’t think it was really valuable. At least for me. too many things to look at, etc.
http://theideacenter.org - rates faculty and classes.
important task you would do here - started with ratings, now trying to bring out services.
purpose, benefit, usage - three keys for ANY site
text under 4 yellow bars on right - text will probably be ignored. text under headlines might get ignored. top image - it’s a stock photo. Doesn’t do anything really. pretend someone is driving by at 60 miles an hour - what would they get out of this? The content below the image might take focus away from the services. Yellow bars - simplify the text to make it more obvious. Text is one of the most important factors - labels, links, length of paragraph, appearance on the page. the page is a billboard - instant impact.
UIE.com - designing for the scent of information?
http://asufoundation.org
purpose is to get people to donate. stakeholders believe that they will scare people away if they just have a big button. progressive disclosure/manipulation. need to get people comfortable with giving money. security impression. don’t answer them all at once on the homepage, make sure they have access to the info. Use right hand column for bullet points about what org does - purpose benefit usage. one the actual donation page, the progress meter is good. the dropdowns for picking where to donate to is WAY TOO LONG. suggestion - get rid of dropdowns if they are pre-populated. talks about labels on the forms, etc.
http://schooldude.com/
site owned by marketing. school district might use the site to do work orders, etc.
people do better when an app supports ‘doing’, versus figuring out the structure of the site. organize by task. so instead of public/private/higher ed, go with ‘work order/bus route planning/etc’.
task based organization versus destination/users?
http://soudertonborough.org
small town, 1.2 sq miles
residents who might want to live there, businesses who might want to open a business, current res/owners can find what they need
make the news bits the content of the page. Move the about text to an about page.
fast/easy/cheap way to get feedback
5 second test. take one screen show it to a user for 5 seconds. take away and ask them to write down what they remember. your #1 goal better be there.
http://fivesecondtest.com - way to make this work
sort of a neat tool, but knowing what you are going to do makes it harder to do. random test is interesting.
http://fivesecondtest.com/test/22ff989 - answerforce.com.
Want people to register. they have 10% conversion rate (sign up). sign up form is good. learn more link is good.
——————–
Jason Fried
——————–
CRAFTMANSHIP
- be like a furniture maker.
ikea and a master both serve the same purpose, but the craftsman’s is premier work. more wood table, less ikea table.
WEAK/NORMAL/STRONG
normal text uses <p>
strong uses <strong>
there is not <weak>
example of a table grid that is pushed back by making it light gray and that makes the numbers pop.
example of campfire, they ‘weak’ the people who are ‘away’
basecamp - the days with no events are pushed back
ANTICIPATE THE FLOW/SHARPEN THE FOCUS
good design - wufu, campaignmonitor, google analytics
thinking about something versus doing it
iPrioritize versus Tada - you type and hit return, but then Tada list sets you to make another right away. type return, type return, etc etc.
screens are NOT flow
this is a good example. Anticipate what the next thing to do it and go ahead and do it.
BEFORE/DURING/NEXT
DON’t just think about using it, think about before and after
highrise - moving into a flow. find field is focused when load dashboard. Don’t have to do much mouse movement.
Q - accessibility issues with focus?
As soon as you record a conversation, you can add a followup task right underneath.
COPYWRITING IS UI DESIGN
be obsessed with words, not just pixels
highrise - ‘who can see this person?’ versus ‘Permissions’
they purposefully don’t use permissions
everyone
only I can
Select a group
Select people
dropdown comes up with ’select somebody’.
details need a lot of time AT THE RIGHT TIME. fix them later on, not early on.
they sketch using thick sharpies - pens and pencils let you do too much detail
example of changing text from ‘person’ to ‘people’. write your website like you talk to people. don’t use object(s), for example.
’search by city, state, country, zip, email, phone’. tell people what’s behind the link - say it. give a glimpse
3 sentence rule when explaining in detail. Broad overview, example of how to use, suggestion. 3 sentences. Ex - changing categories in highrise.
don’t call buttons ’submit’. people submit things to the govt. call it ‘add a category’, or exactly what it will do.
little details - changing hours to hour when they enter 1.
TIMING IS EVERYTHING
basecamp - hover over todo you get the nubbin. appears instantly, does NOT disappear right away. top nav bat has a hover effect only after .25 seconds
timing AND proximity - some things only happen if the WHERE and WHEN are both right. Hover in a certain place for a certain amount of time.
how long it takes to delete something.
PHOTOGRAPHIC MEMORY
remember what people were doing when the leave an app. it keeps the flow for that product. don’t dump them on the homepage each time.
remember state for options on a task. if there’s an option unchecked when I do something, and I check it, remember that.
!!!!! Preferences and Settings Should Not Be Required. pay attention to what they are doing.
WHAT JUST HAPPENED
show them what happened. yellow fade, fade out, page moving to take up newly released space. might stay even longer if it takes a while to read.
EXTREME DETAIL
try to anticipate what people might want. Ex - merge people, auto select the winner.
if someone is expressly trying to do something, give them a little extra feedback once they pass a certain threshhold. figure out when they are expressly doing something.
creating something new - find spots where you can eliminate error messages. is it an error, or an inconvenience. Ex - make a new list, you should give a name. If not, they call it ‘List’ and keep going. don’t need an error, just make it work
small details add a little personal touch.
make good features common across products
Q - do they do this on their own, or as part of customer comments/requests? How do you split it out?
QUESTIONS
make the UI a casual conversation - ’save this’ rather than ’save’
they don’t do usability testing - it’s not real. do it and get real people to tell you what they think.
A lot of their detail work is hobby work. they sprinkle it in over time. make it better each time. it’s more a ‘love’ thing, where you love it so much that you HAVE to keep making it better. hobby work adds in a lot of this detail. the craftsmaster makes every detail work because that’s who and what he is, he can’t be anything else.
they use Prototype for their js library. Sam Stephenson wrote it and works for them.
only use icons when its super clear - trash can for example. They use the word Edit, not an icon. They use the double arrow icon for move. use words wherever you can.
They don’t think everything that has to be obvious. once you know, you might use it. If you never know about it, it’s not a loss.
Doing UI design - sketch out with large markers. go right to HTML, no wireframes. build it. be as close to the real thing as possible. HTML is real, photoshop isn’t. wireframes don’t work for them, they were spending time on stuff that wasn’t real.
When jumping around and you want to bring someone back to where they were, how do you deal with it if it’s not there? Go to a default page in that product. back out one step.
——————–
Andy Clarke
——————–
comic books - got a lot of interesting things now with comics inspiring movies. Bad ones (hulk) good ones (sin city).
sin city is almost scene by scene correlation between the comic and movie
currently Frank Miller doing the Spirit
lot of parallels between design of comix and web
with a new comic you have to ‘learn’ how to read it - different styles, ways of writing, etc.
same way you have to learn to use a new UI
the watchmen - it’s an example of how two disciplines work together. lots of various people working together - penciler, inker, etc.
writer gave notes to the artist about how the page should be laid out.
PDF page 2, slides 3-6
on the web, we are disconnected much more. writers writing, developers developing. too much separation. need a better way.
nothing can happen without the content. it drives the rest.
most people think panels with comics. most people think panels in a grid on the web.
the panels don’t just hold the content, they help tell the story.
watchmen laid out in a 3×3 grid. rhythm carries through the whole thing. Only breaks out of it for a particular effect.
PDF page 3,panels 4-6
a new job he was working on he wanted to do the same sort of panel work to tell the story. the req were to make it really visual.
wanted to have a the rhythm and grid layout. let the grid carry the user through to the content they wanted.
PDF page 4, panels 1-4
some comix use panels to support the branding. can also create suspence via shapes. ex - tilting panels adds tension. something is happening. jolt the user out of their sense of comfort. usability = comfort, sometimes we want to really make them uncomfortable.
scott mccloud - understanding comics. he talks about panels as well. what’s even more important than the panels is what happens BETWEEN them. you are making the user’s brain think about what happens BETWEEN the panels. don’t always make it easy, make them think.
between panels, make the reader interpolate between the panels. movement to movement, action to action, subject to subject, scene to scene.
again, it’s how you make the person think about what’s between the panels.
PDF, page 5
used to think about layout of the page. size, shape, related to amt of content. Now it’s what do you want them to get out of content, how long to spend on it.
comic book - paul chadwich. concrete. he uses panels to determine the amount of time he wants a user to spend on that content. it’s not the amount of content, it’s the time he wants you to spend on it. ex - the ’seriously’, ‘no’ panels.
PDF, page6, panel 3 (seriously no)
example - the vertical panel adds the drama by leading the eye.
PDF page 6, panel 4
the panel that is not bordered - the woman breaks out of it. without the border, your eye can spread out and gives the panel emphasis. it’s the opposite of what we think.
PDF page 6, panel 5-6
ex - the character out of the box listening. or the one falling.
ex - dark knight returns
PDF page 7
size varies according to importance on the page
made the whole area clickable in his code examples
PDF, page 9-11
need to help the reader know the order to read in. comics use speech bubbles placement to show the order. on the web, images, especially with faces, draw the eyes.
PDF, page 12, panels 1-3
watchmen was originally 12 parts over 12 months. the last part built the drama up so much.
PDF page 12, panels 5-6
PDF page 13
splash pages = comic book covers. they don’t have to be bad. comic covers establish continuity across issues. intro pages explain to a reader what’s gone before. orient a reader as to where they are in a story.
PDF page 14-15
QUESTIONS
splash page examples - apple is a good one. the iPhone launch, they went to just a single page saying ‘hello to iphone’
fluid vs fixed - he’s been able to do more with fluid layouts since he stopped showing photoshop comps. client doesn’t expect it to look like the comp then.
one man shop - he works a lot of hours. set the expectations so they know who they are working with. be effecient at the mechanics.
——————–
Eric Meyer
——————–
CSS debugging live, peopel submitted their sites to him
http://stratom.com/
<div id=”menublock”>
<ul id=”cssmw0″ class=”level-0″>
<li><span><a href=”index.html”>Home</a></span></li>
Why not use the bg image on the li instead of the span?
note - no one submitted a table based site to him!
frameworks - if you change the wrong thing it falls apart
divitis - YUI does this a lot. try to not use a div unless there is no other container that does what you need
http://mms.mckesson.com
username macdeke
pw macdeke
pixel based font size coming back?
Q - do sight impaired users zoom the text or the whole page?
no bg color specified
if doing font-size in pixels, set it on body, do rest on percentages and ems. Allow inheritance and scaling.
arrows next to links - either set bg on the link itself, or give it padding so the link extends. If you put it on the link, you can get a rollover effect.
ul with li inside, and you want the li to float. So ul is in the flow, li are not.
solution - float the ul,
or
overflow: auto. this makes overflow elements expand to contain floated children !!!! Not sure how different browsers handle that.
Setting a width of 100% on the float means there is no space next to it, so that might work as well.
http://delta.com
divs have ids of primary_failure_top
could the flight finder be in a table? would it be more accessible?
the way things are arranged can be an indicator as to how they should be marked up. For the table it’s more about how the interaction really works.
semantic names = it’s hard to not use things like wrapper, col1, col2, etc etc. what else are you going to use?
remember that firebug shows styles as it reads them, not always as it’s written in the CSS
IE - save as webpage complete will remove universal selectors, and break!
layout forms in whatever manner hurts the least
http://www.tablethotels.com/
web dev toolbar - use the custom elements outline tool
http://forwardlymphoma.org
alt text means it is forward content. no alt text means it’s not content, and should be in the bg.
overflow-y and overflow-x = is this a good use?
——————–
Rob Weychert
——————–
graphic designer
been designing for 10 years, chess for 20 years
two books - pandolfinis ultimate guide to chess (bruce pandolfini), how life imitates chess (gary kasparov)
chess and design both have 4 part structures that match up- chess has research, opening, middle game, end game. Web design has research, IA, visual design, building the site
research/design - chess you research the opponent. form a strategy based on what you know about them and you. research - learn about the client
opening/information architecture
middle game/visual design - tactics. strategy is long term, tactics are short term. Design has visual design here. get the info into their head. get them thinking about it.
endgame/building the site - kasparov quote. it’s about detail here. find inspiration in the small things.
8 design lessons in chess
1. OPPONENTS
opponent as user. need to anticipate what the user will do
opponent as the client. go back and forth with the client, tradeoffs
opponent as colleague. they need to challenge you so you learn
2. LESSONS
2.1. Content is King. chess - king is king. in the back of your mind must always be thinking about this. will this help capture his queen or protect my king. focusing on capturing queen when king might be open is a classic beginnners mistake
see picture about content. content is the king.
2.2. KNOW YOUR HISTORY
it’s not just what’s happening on the board in historical games. what was going on around the game - social, cultural, etc. they all effect the game.
ex - 1972 chess match. Bobby Fischer and russian. media circus. bobby fischer - brilliant, but a total jerk. shows up 2 days late. demands no cameras, move 7 rows of seats, etc etc. when you look at the games you can see that Boris made bad moves. it was the atmosphere that threw him.
His friend Matt and one man band Mose Giganticus. masters in EE. admires Tesla. Wanted a tribute album to tesla. wanted to focus on struggles to make people realize the value of what he was doing because he was so far ahead that people didn’t understand. decided to do a newspaper ad from that time. looked at the ads that existed, how were they done.
PDF page 4-5, page 5 panel 5 is the cover
Thomas edison electrocuted an elephant?
3. THINK AHEAD
must know your move, and think what responses might be. opponent might have 3 responses, and then how would you reponsd to that?
the web is first medium that receiver of that content can receive it the way they want. You have to think about all the things will go on. example epitonic site with only allowing 3 content areas.
4. DON’T GET TOO ATTACHED
novices get attached to the queen. the forget to protect the king.
Emmanuel Lasker - if you see a good move, look for a better one.
5. ACT WITH PURPOSE
every single thing on the page matters.
Siegbart Tarrasch - one badly placed piece makes your whole position bad.
ex - his own slides use golden ratio. typeface was futura light as it’s really geometric. unmodulated stroke - all lines same thickness, shows similarity with design/chess. Lined up top to bottom to match letters (the letter E). illustrations were same thickness. text and illustrations are on same plane but different.
sometimes designers work on intuition and they know it’s good. take time to figure out WHY it’s good. he did his color scheme by intuition.
PDF page 7, panels 5-6, page 8 all
6. OBEY CIRCUMSTANCE
you can’t play a pre-set series of moves. you don’t really know how it will all play out. sometimes we start thinking about our bag of tricks before we really know the problem. look at factors in front of us.
ex http://comhaultas.com (irish dance site he did) was ripped off for a russian manufacturing company
don’t put the solution before the problem. it’s like ripping yourself off. you can’t just take a solution and apply it to a problem
7. PRINCIPLES ARE YOUR FRIEND, EXCEPT WHEN THEY’RE NOT
the path to a chess master is predictable. start young, have skills, etc etc.
Emerson - the man who knows how will always have a job. the man who also knows why will always be his boss.Think critically. web developers have a non-ordained path. people sometimes get too pedantic, or aren’t pedantic enough. there is a middle ground.
8. THE JOURNEY IS AS IMPORTANT AS THE GOAL
people sometimes decide that a single move, or a series of moves decided the game. they forget they could not have gotten there without all the other games.
Alekhine - what I do is not play, but struggle.
It’s about the struggle and failure. success is build on failure.
shows a screenshot of his failures. each one taught him something. it’s a process of elimination.
lose as often as you can take it - kasparov
Q
why yellow - audience member says it’s the favorite color of crazy people.
nothing is ever wasted. will pay off eventually.
yellow is the color of intelligence?
speedchess? does the metaphor extend to it?
——————–
Dan Cedarholm
(Derek Powazek - http://powazek.com/ - was supposed to speak)
——————–
Implementing Design
craftsmanship
grew up in vermont, has a rep for crafting things better.
well crafted shows that a human was behind the design.
on the web it’s about implementation. you don’t always see it until you start using it, like pulling out a drawer and seeing the dovetails.
case study from A-Z
1. bulletproof
2. progressive ENRICHMENT, not enhancement - more about progressive enrichment? cool stuff that doesn’t work in IE
3. reevaluating past decisions - the browser landscape is changing, so the way things were done may be changing
http://icedorhot.com
‘iced or hot’ - enter your location and it tells you to buy iced or hot coffee.
A - anchor links with meta info.
B - border radius. rounded corners. differences between FF 2 and FF 3. enriched.css - holds the extra stuff. it’s ok to not have all the features there for all browsers.
C - transparency with RGBa. opacity sets it for element and ALL CHILDREN.
background-color: rgba(0,0,0,.7);
D - don’t need to look the same in every browser. Decision makers who get it. it’s ok to be different when they are things that don’t affect the layout.
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
E - easy clearing floats. allows flexibility. IE8 allows generated content.
PDF page 14
F - frameworks. stubs in the file for consistency so things end up in same place
same css files, same names, same baseline files
G - gridlasticness. em-based design forces you to be flexible. setting body to 62.5em gives you a 10px base. can’t set font size and width on same element. set a max-width to prevent scrolling. Xscope - grid layout
PDF page 19, panel 4-6
H - horz grid, sort of a vert grid. don’t make it lay out perfectly vertically. content will adjust
I - ie8 does not do text resizing in px. even with page zoom the text size tools are still there.
do we need to allow for text based resizing anymore? all 4 of the main browsers zoom the page. He thinks yes.
J - jquery
K - his kitty
L - use jquery to add a lst class
…
S - shifting background. use a negative percentage it moves at a different speed as the page resizes.
T - testimonial. mtv.com used margin and padding 0 155 times before they moved to reset.css
U - eric meyers’s comment on site logs.
PDF page 30, panel 6
Q
overflow:auto method vs his - uses it when prototyping. has seen some small issues when doing prod sites.
testing text size: how many text jumps? 2.
rounded corners - no preferred method really.
text zoom and page zoom - do we need both? yes.
——————–
Cameron Moll
——————–
In house design
fundamental principles of flight are the same regardless of the aircraft.
logistics of trying to APPLY those principles do change
same is true for design. priciples are same for freelance or in house designers, but how to apply them changes
went to work for LDS in 2006
took survey of his readers a few months ago asking what are issues in large in house designers
1. LET’S TAKE THAT OFFLINE
relationships are important. designers have to earn some trust, others see us as weird, odd, etc.
Khoi Vinh - we spend time doing design, telling people about design, asking people to let us do design
the work gets 20% of the time, publicity is 40%, 40% is the relationships with the other people at the company
80% of our time is soft skills
Irena Au - UX at google. need to be able to influence and draw people in.
you have to be willing to work and build a team in house. Tufte says to put a LOT of info on a sheet of paper. they created a 11×17 page talking about what their group does so people can know right from the start.
few things build trust better than results. DELIVER. Good work, done fast, done thoroughly. Must show you understand how design fits into the big picture.
Customer happiness depends on feeling ‘listened to’ - they need to see that you have taken their feedback.
cannot divorce design from engineering. in theory it works, not in practice. Jack Shedd quote
Must work together throughout the process. ship on time, make them elegant, etc.
The Anatomy of Peace?
2. LET’S TAKE A 5 MINUTE BIO BREAK
phone call or personal visit works more effectively (NOT efficiently) than email
getting context about how people work is invaluable
Great comm skills make the shortest distance between idea and a good UX
3. LET’S NOT TRY TO BOIL THE OCEAN
Book - How Designers Think Bryan Lawson.
Map of process is like a diagram showing how to walk.
http://interactions.acm.org/content/?p=33
run thru 5ws of questions for each project. make sure you and everyone else see the larger picture. then think about page comps and so forth. then protos
drumming - sometimes it’s solo time, sometimes it’s just rhythm setting. Same idea - there is time for the full fledged design, and a time for just pieces
present things at a lower level. remove fidelity when it is not neccesary for agreement. sketching
greyscale comping - take away things that aren’t needed for agreement so you don’t get hung up on color and palettes
bring people along in your thinking. paint the big picture. avoid ‘illusion of agreement’ by prototyping often.
4. DO WE HAVE THE BANDWIDTH
Design Excellance Program - raise quality of design they get
Knowledge and cap. of the designers - hold an annual design review. did sort of a roast of themselves, then a group discussion. then talking about what needed to be done better.
weekly design reviews are the most valuable thing they do. standing invite to prod/prog mgrs
SITE - well done critique by Spool
Strengthen long term relationships with others
internal orgs, colleges in area (funny that comp sci and design don’t meet), vendors
Culture and environment
establish the environment and culture for good design to flourish
5. SYNERGY…… (ENVIRONMENT)
what surrounds you will inspire you. it’s not about the cube, it’s the things that surround you.
Don’t let the workspace be uninspiring.
7. I JUST GOT DILBERTED. AGAIN
the only ‘perfect’ thing that will ever ship is a personal project. you have to be willing to compromise. know when to exit.if you are looking for a new job, dress up a few times so people don’t think you are leaving.
if you will freelance, have enough work lined up. establish residual income beforehand
http://cameronmoll.com/downloads/Web_Accessibility_Checklist.pdf
——————–
Curt Cloninger
——————–
William Morris - what would william do?
old typefaces - lots of different types in victorian era. didn’t think of it as a style, just doing the job
all comes back to greed - didn’t really care about the design, just wanted to make money.
pimp my profile for myspace (need link here)
William Morris - designed wallpaper, textile patterns. did not trust technology.
book to read - The Lesser Arts, an essay by William Morris
1. STAY TRUE TO NATURE
he did not like fake materials. wool should be wool
we don’t need to simulate material - no brushed metal.
our material is typography. what do we push against? typefaces. Coudal uses letter spacing to make them tighter and looser.
oversize text = easy to use. the large text says ‘this is easy to use’
behavior as material - it should look like it does what it does
making a wooden door and leaving the finish on to tell the person it’s a heavy door, you’ll need to push
xiiin.com
interstitial animation. a narrative through the site. augment the motion through the virtual space.
a9 scrollbar - as I scroll it loads more
it’s not true to the material of scrollbar - it’s insincere
2. UNITE ART AND DESIGN
1800s rennaisance had a split between fine arts and crafts. Morris said we can’t live like that.
whatever you do, be GOOD at it. get skills. don’t just be good, be great! be a genius.
Morris drew his final patterns freehand. Wanted to make the final product more real by doing it this way.
genius design - better than user centered design when the user can’t recognize beauty any more
3. UNITE MICROCOSMIC AND MACROCOSMIC
morris gets into type in last 7 years of his life. makes incredible books after 2-3 years
he went from the small things all the way to the large things, studying them all and figuring how they worked together.
he made sure that all the pieces worked together, small to large
with smaller sites, why not fuss over it and make things different? so the people who live there can feel it
anyone can make a website now. we have the technology. so what do web designers get paid for? it’s getting to the level of detail
unify the small to the whole
4. VALUE UTILITY VALUE BEAUTY
beauty alone is a legit reason to exist
it’s not always true that less is more. there is a place for beauty for beauty’s sake
ornamentation has a place but it can’t be just added on, must be tied in to all
great designers added ornamentation for a long period of time, then for some reason it went away.
5. ENJOY WORK
your work should make the people who buy it happy, and it should make you happy making it
outsource what’s not fun, but do as much of the whole process yourself at least once
get under the hood if you use frameworks
6.RESDESIGN THE WHOLE WORLD
if things are good enough for you, make new ones
whether it’s a small thing, or the whole world. don’t accept poor quality or bad design
don’t just design a poster, design the context it will hang in as well.
craftsmen make the world.
style is producing life - Bruce Mau. style is a decision about how we live.
be ingenious about your craft.
——————–
Links mentioned/seen
——————–
http://aneventapart.com/events/2008/chicago/
http://alistapart.com/
http://localhost/tools/css/debug.css
http://www.flickr.com/groups/aeachicago08/
http://flickr.com/photos/jasonsantamaria/193691123/in/set-72157594205133472/
http://www.edwardtufte.com/tufte/minard
http://harpers.org/
http://noonebelongsheremorethanyou.com/
http://fray.com/drugs/worm/
http://sports.espn.go.com/espn/eticket/story?page=boozers
http://www.carsonworkshops.com/summit/2006/sanfrancisco/slides/carl_sjogreen.pdf
http://flickr.com/about
https://www.paycycle.com/external/home.jsp
http://fivesecondtest.com/
http://campfirenow.com/images/tourshot-lobby.png
http://icedorhot.com/
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
http://en.wikipedia.org/wiki/William_Morris
http://localhost/demos/aea08/cloninger/victorian.html
http://www.pimp-my-profile.com/generators/preview.php?mode=myspace&layout_id=18877
http://a9.com/%22curt%20cloninger%22
http://www.xiiin.com/idol_ani.asp
http://localhost/demos/aea08/cloninger/02.html
http://www.notesondesign.net/design/designing-context/