It’s not quite over–there’s still the informal gathering over at the Sheraton–but I wanted to go ahead and post my notes from the first day of the 2008 Webmaster Jam Session.
The following notes are organized by session name. They haven’t been edited (much).
Making Accessibility Sexy
can you have a pretty design and still be accessible? try.
What accessibility means
don’t create separate sites for each person…make one site that works for everyone
don’t coddle, just remove barriers
accessibility is for everyone!
it doesn’t mean plain and boring!
it doesn’t take too much time.
Designers are afraid of the idea of designing for the blind. But you can use the same back-end code and create infinitely different designs.
The biggest problem with flash accessibility is keyboard controls. Build external controls. (You can use the API to control Flash externally)
Captioning and descriptions get indexed and help people find your video.
the answer is not to sell people on it…it’s to just do it.
EXAMPLES:
http://icant.co.uk/easy-youtube/? <--put YouTube link here
http://www.csszengarden.com/
live.yahoo.com
blogdeafread.com/abcohende/2008/02/15/yahoos-live-deaf-chat-room/
Yahoo search – style the label on the radio button
Viddler allowed timed captions; YouTube is starting with annotations
Universal By Design
“NUI” = Natural User Interface
Johnny Lee’s experiments mentioned.
Haptic devices: feedback based on touch
Quote of the session: “For those I-beams that come flying at you.”
Buzzword: metaperception
Going Social
“I MUST have the secret to WEB 2.0!”
People try blogs without thinking about creating quality content.
Companies don’t make viral videos; people do.
Trends don’t necessarily translate into value.
People hate advertisers on social networks.
It’s not about ADVERTISING. It’s about bringing quality content to the user through avenues they alreay use.
Don’t just slap social media stickers on old school advertising packages.
Social media is about people connecting.
Diversify. Create different places where ideas are talked about.
Who am I trying to reach? What are their interests? Reverse-engineer based on these questions, rather than general-interest “broadcast” ads.
“Socializing with purpose”
Stand Up to Cancer had lots of traditional promotion, but barely any online word of mouth. Came up with “The Virtual Standup” – getting people to submit videos of themselves saying they stand up. Had top bloggers participate. Twitter was a huge factor in the spread.
Obama’s “open campaigning” – apply collaborative, Wikipedia-style approach. Puts message out on various platforms and lets supporters spread it. Video fact-checking. Twitter updates. YouBama – voters say what they want.
Cost effective way to build brands by letting people do the talking.
Find who’s influential in the area you want to impact, and see if/how you can work with them.
Design Lessons in Chess
I. Two parallels
A. CHRONOLOGY
Chess Chronology: Opening, middle game, end game.
Website Chronology: Information architecture, visual design, build.
First you develop a strategy. In chess you study your opponent; in websites you talk to your client about goals.
Then you work on tactics. In chess you decide what moves to make; in websites you decide where you want everything.
Finally you build. Find inspiration in the details. Be precise; you have few options. Cautious and clever people have the strongest endgame.
You don’t think about just one phase at a time. You evaluate as you go.
B. OPPONENTS
Relationships you have with your client is similar to relationships with chess opponents. End users are too.
If you’re playing chess well, you’re controlling all the moves. You’re guiding your opponent to their defeat. In design you want to guide users to the information they’re looking for. Limit options, create a clear path.
With a chess opponent, it’s a matter of creating problems for each other to solve…same thing with clients.
Chess opponents enrich each other, and so do design colleagues.
I. PRINCIPLES
A. CONTENT IS KING
You always have to keep the king/content in mind. You can get too excited about other things (presentations, the queen)
B. KNOW YOUR HISTORY
Studying what was going on in the world when chess games were played can tell you a lot about how people were thinking and why they made the choices they made. Make history relevant to design work, too. Understand how design develops in other times and how it develops now. Understand what time period you’re trying to evoke.
Understand technical limitations in former time periods.
C. THINK AHEAD
Think several moves ahead–the decision tree. Possibilities. How would you repond? Future-proofing the site is an example. Think about what people may need down the road.
Jason Santa Maria – thinking ahead about navigation
D. DON’T GET TOO ATTACHED
A lot of chess players get enthralled by the queen…they’ll shoot themselves in the foot to protect her, rather than the king. It happens in design too. You’re sketching out ideas and you see something you like, so you run with it without continuing to sketch.
“If you see a good move, look for a better one.” -Emanuel Lasker
E. WORK WITH A PURPOSE
“One badly-placed piece makes your whole strategy bad.”
Notes on how he prepared the slides: Futura Light: geometric font, all line thicknesses the same. Associate multiple lines of text with what they share in common.
Intuition does play a role in design. We can’t necessarily understand it. But if you try to examine your choices, it’ll help you grow and determine your method/process.
F. OBEY CIRCUMSTANCE
Every move creates a whole new world. You can’t decide all your moves at the beginning. You have to respond. It’s the same with new clients.
Prefab solutions != design
People who are willing to rely on solutions they created in the past are just ripping themselves off.
G. PRINCIPLES ARE YOUR FRIEND. EXCEPT WHEN THEY’RE NOT.
Chess players seem to follow a similar path. Their ability is discovered and then they’re groomed. These players know the rules so well that they know when the rules can be broken.
Web designers backgrounds are all different. No one went to school for this! As a result, approaches and attitudes are all different. It’s polarizing. People are either too pedantic, or not pedantic enough.
Traditional graphic designers: “Rules?! You know who I am? I don’t need the rules!”
H. THE JOURNEY IS AS IMPORTANT AS THE GOAL
Some chess players focus on one “fatal move”. But all moves are related. Likewise, every step of the way in design is important, and they can all teach you something.
“What I do is not play, but struggle.”
Process of elimination leads you to your finished product…but you learn from the stuff that doesn’t work.
Learned lessons: Get half up front ;)
“Lose as often as you can take it.”
III. REFERENCES
How Life Imitates Chess – Garry Kasparov
Pandolfini’s Ultimate Guide to Chess – Bruce Pandolfini
robweychert.com
Website Critique
onwired.com – mostly good things, just a few nitpicky comments
[smushit.com can remove a bunch of unnecessary nonvisual information from website images]
icu2.com – can’t figure out what the site is about; small navigation; text in images can be done with CSS; cute “warning” doesn’t match site style.
www.grc.nasa.gov/WWW/OHR/coop/ – no www redirect; no 404 page; color contrast issue in top right menu
unisoft.com – move page header, put “in partnership with” over S&T, clean up homepage
Didn’t get to have a critique on any site I’ve done.
dbs.myflorida.com
High Style and Low Fidelity
I didn’t have my laptop open and wasn’t able to take detailed notes, nor did I send notes to Twitter. Here’s the main thing I remember: you can use real-life objects to create patterns and textures. You can age materials with coffee and an oven. Colors set the mood. Contrasting hot and cold has great impact. Gradients are powerful when done well, especially gradients of different tones of the same color. Stay away from default styles. Use drop shadow colors that go with the existing colors, not black. Take photos or scans of real things to create designs.
And here’s how it looks now, with header and profile pic from Sunday’s trip to Little River Falls:
I’m not sure how long my blog was pink, because I don’t seem to have screencapped it when I updated it. The last screenshot I have is from 2013, when I put a Sweetwater Creek photo from 2012 in the header. I do know that Gibbs Gardens photo was taken in August of 2014, so that sort of dates it, I suppose.
