I spent the beginning of this week attending the incredible An Event Apart Boston. An Event Apart is billed as a conference "for people who make websites," and the breadth and variety of speakers at the event really does deliver on this promise.
Here my notes from the two days of speakers. They are completely unedited, so I apologize in advance for any small errors that may crop up.
Lastly, I have to give a big thank you to the folks at Extensis/WebINK for making my trip to AEA a reality.
What Every Web Designer Should Know — A Better You At What You Do — Jeffrey Zeldman
Jeffrey kicked off the conference with a call to arms. He called to the audience's attention several points that would be echoed by the other speakers throughout the next two days:
- The rules are changing. You may not be in control of the user’s visual experience.
- Content precedes design. Design without content is decoration.
- Progressive enhancement is a universal smart default.
Sadly, I arrived a few minutes into Jeffrey's presentation and did not manage to take any notes while standing in the back.
Design Principles: The Philosophy of UX — Whitney Hess
Whitney offered a set of guiding principles for experience design. In doing that she shared photos of experience fails and successes both physical and online.
- UX is the establishment of a philosophy about how to treat people.
- Visual design is about how to make an impact
- Good design does not automatically equal good experience, but it can
- Without principles we don't know what we are trying to achieve
Principles of Experience Design:
- Stay out of people's way — when someone is trying to get something done, don't interrupt them or add obstacles. Designs should have obvious paths. (Tumblr example)
- Create a hierarchy that matches people's needs — giving the most crucial elements the greatest prominence, use hierarchy, page should be easy to scan and prioritize elements that match real world scenarios (Mint.com example)
- Limit distractions — (wanderfly example)
- Provide strong information scent — (Quaora example — suggestive search)
- Provide signposts and cues — never let people get lost (Neiman Marcus example — nav items highlighted, clear where you are in the experience)
- Provide context — (air b&b example)
- Use constraints appropriately — preventing error is a lot better than recovering from it, help people understand what is possible and guide them towards it
- Make actions reversible — make sure if someone does go down the wrong path, it can be reversed (remember the milk example — offers a link to undo)
- Provide feedback — design is a conversation, not a monologue (hipmunk example — offers a "tip" while loading)
- Make a good first impression — establishing a set of rules for how you want to conduct a relationship (vimeo example: first time user experience "welcome, you're new aren't you")
The Experimental Zone — Veerle Pieters
Veerle walked the audience through the early stages of her design process, which she calls "the experimental zone" and concluded the session with a some great recommendations about color management in Photoshop. This was probably the most "practical" session of the two days.
- Spend 15 minutes a day doing non—work experimenting
- Erik Spiekerman — copy a design, put it away and then re-draw without reference
- Article recommendation: The Cicada Principle by Alex Walker
- In Photoshop Layers Panel Options, uncheck add "copy" to layer name
- When pasting Illustrator icons, make a selection the exact size of the Illustrator image
- When kerning — flip the text upside down
- Tych Panel
- GuideGuide plugin for grids
- Extensible Baseline Grids
Mobile Web Design Moves — Luke Wroblewski
After a quick post lunch tutorial on how to do the "Thriller" dance, Luke walked us through the how and the why of Mobile web design. Luke is a big fan of statistics and I highly recommend the "Data Monday" posts found at his site.
- In Q4 2010 smartphones passed PC shipments
- 20% drop in home use of PC between 2008 & 2010 b/c of smartphones and tablets
- 600% growth in traffic to mobile websites in 2010
- Understand why/when people use mobile devices — know what mobile is uniquely good at
- Lookup/Find — (search)
- Explore/play — (Google reader)
- Check In/Status — (Google finance)
- Edit/Create — need to get something done now that can't wait
- How can we be valuable to people quickly wherever they happen to be?
- Adjust site navigation accordingly
- Content first, navigation second (Youtube, ESPN, Bagcheck)
- In the footer, don't just "drop people off of a cliff," they should be able to go somewhere related/relevant
- No back button in browser
- Top aligned labels on mobile forms
- Natural user interfaces — content should be the action ("can I do this without a button?" watch a toddler interact with an iPad)
The Responsive Designer’s Workflow — Ethan Marcotte
This was probably my most anticipated session. Ethan walked us through the upcoming responsive redesign of the Boston Globe website and the process his team took in crafting it.
- Storytelling & crafting tangible objects
- Nearly half of all American adults get local news on a cellphone or tablet
- What makes a design responsive?
- Flexible grids
- Flexible images and media
- CSS media queries
- Mobile first — narrower screens force us to focus
- Fluid grids: target/context=result
- Responsive images script
- Media Query "breaking points" for the Boston Globe site:
- Ask: is this content, or an enhancement?
The Secret Lives of Links — Jared Spool
Links are the building blocks of the web, but I had no idea they could be so interesting. Many of us (myself included) are guilty of not putting enough thought into how we use links on our sites.
- The links represent the content — if the content is well represented by the links, users find what they are looking for
- The Scent of information — the process by which content communicates to the user how to find it
- Fitts's Law (Paul Fitts, 1954) — the bigger and closer something is, the easier it is to get at, we can hit big/close targets easily
- People visit a web site for a reason (example: Ohio State — where's the library, when does the semester end, etc.)
- Trigger Words: a word or phrase that matches the user's goals and signals where to click. When they are well done, a user gets to where they want to go.
- On average, only 42% of clickstreams succeed (this has been the same for 15 years). Over half of the time, people can't find what they are looking for.
- The back button is the "button of doom" — when a user hits the back button, they have "lost the scent"
- Clutter is a relative term based on how much you are interested in
- "Learn more" links — at what point do you click on something not hoping to learn more?
- Good design is invisible — when you design well it disappears. A good example is air conditioning, when it is just right no one thinks about it.
The CSS3 Anarchist’s Cookbook — Eric Meyer
Eric Meyer kicked off day 2 by showing off some dirty CSS3 tricks. No slides, just a text editor, a browser, and a lot of fun.
All Our Yesterdays — Jeremy Keith
Jeremy warned us at the beginning of his presentation that it did not contain "practical stuff." What it did contain, however, was a thoughtful take on the permanence of the web. As web services shut their doors, what happens to all of the hopes and dreams we put into them?
- Two ways of looking at time on the web (via Robin Sloan): flow (real time) & stock (durable stuff)
- Examples of people thinking long term: millennium seed project, storage of nuclear waste, long now foundation
- "The web is small pieces, loosely joined" — boingboing
- Intuitively we think the Internet never forgets... in fact, the Internet forgets all the time
- We don't own these URLs — we give them to startups
- When a service goes away, so does our content (our "dreams")
- If we only save the good stuff/the pretty stuff, we're not telling a true story
Three Main Points
- Host your own
- Use open formats (specifically HMTL)
- Use non-restrictive licenses (particularly Creative Commons)
Towards the end of his presentation, Jeremy asked: What would you put on the voyager disk?
- Luke's Notes
- Radiolab: Space — not mentioned in Jeremy's presentation, but an outstanding listen if you'd like to know more about the "Golden Record"
From Idea to Interface — Aaron Walter
- if you get hyper-focused on execution, you lose creative thinking
- Ask yourself "what would happen if...?"
- "The hardest thing is to get started" - Jack Dorsey
- It's ok to put your idea on a shelf. Original idea for Twitter in 2000
- 1000 things on the shelf. Failure is OK.
- Inspiration is created by you. It's internal.
- You might have to do something on your time.
- Story of Tim
- No filmmaking background
- Started to make things on his own time: stepping stones
- "I'm not the best, but I'm as good as the next guy."
- Now big budget projects, up for music video award, etc.
- When you're in the ideation phase, any idea is a good idea. Don't judge what comes out of this phase. Protect your ideas at this point.
- Big D Design: what am I solving?
- ideate quickly
- incubate on your walls
- evaluate with colleagues
- keep them public
- when you ideate in prototyping, you are forking
- assemble a prototyping library (CSS, icons, jQuery)
- Can evaluate by using your prototype
- "Don't get seduced by code, want to get seduced by my idea"
- Tools: mustache (on github), wireframing/prototyping in keynote
- Design Patterns
- Patterns — new isn't always the best idea, sometimes
- Book: Designing Interfaces
- Design patterns lower the learning curve and make your site more usable
- means less code
- design interfaces that feel human
- we're making the windows that people peer through to see us/our brands
- writing "brand traits" document
Smoke Gets In Your Eyes — Andy Clarke
Andy took us through the future potential of CSS animations and demoed the Animatible, the CSS animation web application he has aided in developing. While CSS animation is still in its infancy, it looks to have incredible potential.
- Styling a mobile web app that resembles iOS is like styling a virus warning popup that resembles Windows XP
- CSS animations can use semantic markup
- List of CSS animations:
Outing the Mind: Designing Layouts That Think for You — Mark Boulton
Aside from Ethan Marcotte's presentation, Mark's "Outing the Mind" was probably the session I was anticipating most. He talked with us about how grids have been used for thousands of years to create order. With the web, we have to relinquish some of this control while still creating purposeful layouts.
- Book recommendations:
- Smart Creativity by Richard Gale
- The New Typography by Tschichold
- Canons of page construction (or rules of page construction): the goal is to create text blocks that look like they belong
- Designers are creating absolute order
- A Dao of Web Design article "should be a star to sail our ship by"
- 960px is a bit of a crutch
- gridding to 960 is 2006
- We need to be thinking "content out"
- The way of the web: fluid, chaotic. It's responsive
- Web designers need to shed this notion of control
- Connectedness is important in a layout
- Baseline grids are not worth it on the web
- there's no way to have incremental leading/incremental rhythm
- There's no rule on how wide your gutters should be, just feel it out
- lining numerals in tables — set tables in sans-serif type
- Don't vertically center navigation labels, align them to border lines. It helps the mind make sense and looks cool.
- instead of adding, adding, adding; reduce some stuff
- Less modules = better connectedness
- the more modules you have, the more opportunity there is for layouts to go astray
- don't design a 16 column grid, design a 5 column grid
- Define a constant from the content
- Use odd numbers over even
- odd numbers will always prevail
- even numbers look a bit weird
- Plan for the mess
- don't plan pages, plan bits that go into the grid system
- Design from the content
- use type to create your grid
- Big to small
- start with large grid and size down
- insetting means starting your content one column from the start of the grid
- Gutters, padding & margins
- it be whatever you want it to be to make the content feel right
- make sure your gutters relate to the padding
- hanging lines (create a visual pause)
Disaster, DNA, and the Fathomless Depth of the Web — Jeff Veen
Jeff Veen, CEO of Typekit, was the final An Even Apart speaker and stepped the audience through how he is able to manage such a gifted team of people.
- The web: for the first time in human history we can record all of our culture
- "On the web, there are always dependencies. To succeed, we must prepare for disaster, design for failure."
Techniques for building equanimity into a team
- clear and immediate roles
- repair team
- note taker: report to the rest of the team
- communication manager: messaging to outside world
- three applications:
- partners (example: api)
- ourselves — you can put just as much effort into this as users and partners. that is a safety net
objective process for subjective situations
- if you ask why something went wrong 5 times you can get to the root of the problem (Sakichi Toyoda) Root cause analysis
- act distributed, even if you're not (Campfire, etc.)
- call it "product review" — anyone can bring it
- optional attendance, mandatory participation
- not a forum for expressing opinions
- Bad: I don't like that blue
- Better: Why is that blue?
- Great: Is color important here?
- working session for group problem solving that is convergent or divergent
- divergent: start with some ideas & see how many more we can come up with
- limitless possibility
- "yes, and..."
- convergent: we have a big pool of ideas and need to converge down to one
- evaluating feasibility
- acknowledge constraints
- drive towards consensus
- divergent: start with some ideas & see how many more we can come up with
driven by purpose
- measure momentum in days
- measure projects in weeks
- measure priorities in months
- measure vision in years
- purpose is timeless: shared purpose is one of the most important things
- what problem are you passionate about solving?
- why is this the place to do it?
How Change happens in the world (fastest to slowest):
On the web:
1. Design trends
6. Human Potential
Literacy is the one thread that has continued over time
Am I actually participating in this big change in human culture?
We're all beginners and we're all trying the best we can