The 2011 Future of Web Design Conference was recently held in NYC and I was fortunate enough to attend the two days of talks. Below is the summary of Day 2. The Day 1 FOWD summary can be found here.

As a disclaimer, these notes were quickly jotted down & summarised and may not be understood out of context but I’ve done what I could from my notes.

Below are the summarised keynotes which you can click to jump to.

• Pith, Passion & Productivity – Cameron Moll
• Design Principles: The Philosophy of UX – Whitney Hess
• Future of CSS – Dave Shea
• Future of Mobile UX – Steve Fisher
• Responsive Web Design and Embracing The Unknown – Aaron Weyenberg
• The Lost Art of Design Etiquette – Dan Rose
• Extensis Photoshop Font Plugin
• Future of Branding – Randy Hunt
• The Design Revolution – Brad Haynes
• Future of HTML5 – Tim Wright
• The Unknown Voyage – Josh David

Pith, Passion & Productivity – Cameron Moll

PITH & PASSION

How can you make a name for yourself? Write.

• “If you don’t write, you don’t know how you think.” – Jeffrey Zeldman
• “The details are not details, they make the product.” – Charles Eames
• Words with pith, convey knowledge & personality.
• Good writing not only comes from grammar & sentence structure, but practice.
• Start writing, don’t just convey information but write with authenticity, passion & pith. And persist.

Recommended reading: Editing tips for designers

Who’s A-Game Pithy?

• @fictivecameron – Creator of Gimme Bar
• @Ether Brian – His tweets are exercises in creative writing.
• Ethan Marcotte – Author of Responsive Web Design

PRODUCTIVITY

Cameron uses these methods for productivity:

• Sorted iPad App and TeuxDeux app.
• SimpleNote – recommended application.
• Has Scuba dive pads in his shower as they are waterproof and allows him to jot down ideas in the shower.

Recommended reading: Future of Self-Improvement: Grit is more important than talent

Design Principles: The Philosophy of UX – Whitney Hess

User experience is the establishment of a philosophy about how to treat people. Visual design is the establishment of a philosophy of how to create an impact. Each have distinct goals and both vary depending on the goals of the product / service. There is a standard set of principles for creating an impact, as outlined below.

10 Principles of Visual Design

A principle is a rule or belief / philosophy to govern a behavior.

1. Contrast
2. Emphasis
3. Variety
4. Balance
5. Proportion
6. Repetition / Rhythm
7. Movement
8. Texture
9. Harmony
10. Unity

Why use principles?

• Consistency
• Constraint
• Vision
• Objective Evaluation

Good design does not mean good experiences, but it should.

Principle’s of Good Experience Design

1. Stay out of people’s way.

Make it easy and simple to use. Don’t have information there that is not needed. Hide unneeded information. A good example of this is Tumblr’s hidden ’30 reasons’ on their home page.

2. Create a hierarchy that matches people’s needs.

Make the most important information the most prominent. Take note of size, color, space & proximity. Match real world scenarios to the design.

3. Limit distractions

Just because items are alike does not mean they have to be.  People can not multi task so make users focus on one task, to keep people in the moment.

4. Provide strong information scent

Use clear language, properly set expectations so you don’t lead users down the wrong path.

Bad: Tropicana orange juice has hard to distinguish bottles. Only one color band difference.

Good: Quora’s information search has search suggestions. Tags are displayed as users write.

5. Provide signposts and cues.

Make it incredibly clear where people are. Don’t let people get lost especially on the web, where there are so many paths that lead people away. Provide sign paths. Show people where they came from and where they can go which allows them to expect to be taken in the right direction,

6. Provide context

Ensure that designs are self contained and don’t break people out of the experience, unless for a purpose.

7. Use constraints appropriatel

Preventing error is much better than recovering from it. Guide people towards successful interactions.

eg. Toilet lavatory in planes, lights turn on and off when entering.
eg. TV entertainment on planes notify users when the movie is longer than flight time.

8. Make actions reversible.

Make sure your actions can be undone if needed or have some sort of back up plan.

9. Provide feedback

Give feedback to users. eg. Asthama puffers & tape rolls should show how many puffs are lef.

10. Make a good first impression

Make a good first impression as you don’t get a second chance. Use welcome messages. Make people feel comfortable. Set their expectations. Ease them into the process. Be attractive, strong. You want people to stay with you for a long time. Create purpose with user experience.

Future of CSS – Dave Shea

This article was a bit more technical so couldn’t take as many notes but here are few snippets & recommended resources. You can get the slides here.

• By mid 2012, Google Chrome will become next prominent browser, then IE, then FF, Safari and Opera.
• CanIUse.com – Good compatibility list.
• Use CSS Gradient Generators to make gradients compatible back to ie6.
• ‘Shadow DOM Web Kit allows you to customize checkboxes & form elements including the scrollbar.

Future of Mobile UX – Steve Fisher

Steve’s slides can be downloaded here.

• Focus on the mobile context & it is not about shrinking it down.
• Design outside in. Make it make sense. Make it obvious.
• It is not about the device, but the mobile context. The web is not fixed width.
• Patterns are repeatable solutions to a common problem.
• The mobile web is about coherence and how it works across all devices.
• Make navigation obvious. The less screen you have, means it is even more important.
• Remember what’s obvious to you might not be obvious to someone who is new to the experience.
• Create once, publish everywhere. Well structured content and interactions matter.

Responsive Web Design and Embracing The Unknown – Aaron Weyenberg

• There is no desktop web, no xyz web, there is no device web. It is just the web.
• There is always going to be ‘the unknown end user’.
• BostonGlobe is a great example of responsive web design.

Recommended reading on Responsive Web Design:

• Responsive vs Adaptive design
• A Dao of Web Design by John Allsopp

The RWD Stack – Use percentages & max widths.

3 Choices for RWD

1. Desktop Down
2. Mobile Up
3. Ranged Media Queries

RWD challenges

• Images
• Tables
• Ads
• Process

To Do

• Forget pixel precisions – they are for egos.
• Move to the browser early.
• Do rapid prototyping.
• Create structured content & use progressive enhancement.
• Try mobile first.
• Build content out.

Recommended Reading

• Responsive VS adaptive web design
• What to look for in a UI typeface
• Mobile web content adaptation techniques
  

The Lost Art of Design Etiquette – Dan Rose

I didn’t attend this talk but you can see the slides here: The Lost Art of Design Etiquette.

Also be sure to check out The Photoshop Etiquette Guide for Web Designers.

Extensis Photoshop Font Plugin

Extensis released a new Photoshop plugin that allows you to use their 2000 fonts + Google’s Web Fonts too, all from right within Photoshop. Best thing is that it’s free, although it is bundled with some font management software. Worth checking out.

Future of Branding – Randy Hunt

At the moment there is a blurring between community and customers, between offline and online, home and work. This is because they exist at the same time.

What cuts through the blurriness of branding?

• Smart content and an honest story.
• An experience that people can relate to and people empathise with.
• A memorable personality or character that is not forgettable.
• The best brands are the ones you can believe in & actually mean something to people.
• Brands manifest themselves through people and active engagement. The community defines your brand.
• Designers are product makers. Products become expressions of the brand and brands are products.
• Make people happy.
• Rather than differentiating, make brands likable and loveable. Successful brands aren’t made up, they are the ones that are believed in.
• You don’t want a web design, you want a web solution.

The Design Revolution – Brad Haynes

• We are moving from an Information Age to a Conceptual Age.
• Systematic jobs are being automated or outsourced.
• Right side brains are big pictured, empathetic, emotional.
• The Wholefoods experience is pleasing and enjoyable. eg. Flowers at entrance, dimly lit, homely. Think “How can you improve the ROI?”
• Find the opportunities that allow you to make a larger impact.

Recommended reading: A Whole New Mind by Daniel Pink.

Future of HTML5 – Tim Wright

I wasn’t at this talk but the slides can be found here: Future of HTML 5.

The Unknown Voyage – Josh David

This talk really couldn’t be transcribed. Let’s just say that Josh “might hold the record for the most f**ks at TED”.

• Learn to embrace failure to arrive at success.
• If it is right, and you believe in it, do it.

Thank you to the speakers and placemynamehere for the photos used in this article.

What was the most insightful talk / summary for you?