Future of Web Design
November 3&4, 2008
New York

The Future of Web Design conference is in its second year and has a solid following.  Armed with engaging and influential speakers, the conference seeks to provide guidance and inspiration to the audience (maybe 1000 people?) to which they speak.  I attended this conference, held in New York, November 3&4.  It was inspirational.

A few key facts before diving in:

• This was a great conference
• 75% designer, 25% developer attendance (maybe 500?  My estimation)
• Progressive enhancement is where it’s at.  Write semantic xHTML, style it with CSS, and make it work “properly” using JavaScript
• Agencies are having a hard time with Developer / Designer workflow.  Still.
• Everyone used a Mac.  Seriously.
• Expression nor Silverlight was ever mentioned.
• Clients really drive Agencies bonkers.
• We’re in a unique position as both the “client” and “agency” concurrently at times.  It’s nice to get perspective on that.

FOWD Workshops

I attended two workshops the first day: “jQuery and other JavaScript frameworks for designers” and “Design Principles for Web App Interfaces.”

The second workshop was with Ryan Singer of 37signals.  It was a really informal session, but remained engaging and educational.

We spent a lot of time discussing developer / designer workflow.  Some notes:

• HTML is a more specific spec than you could ever give with a flat image-comp.  All wireframes and Photoshop comps are totally throw-away.  Get into HTML/CSS/JavaScript as soon as you can.
• Make your comps *real*.  Not only does this help not create garbage, but helps you really communicate with the developer side of the project.  You’re speaking his language (or at least getting closer.)
• “Number 1 design principle: the ability to change.  The structure of your HTML determines how changeable the design is.”

Ryan was a big advocate of Rails and used it in his talk quite a bit.

Ryan and I talked briefly, and after responding to his question of what I did, he responded, “You said you’re working with something called “Silverlight?  What is that, exactly?”

Another good quote:

“I’ve ripped [Edward Tufte] off for basically all of my design aesthetic.”

Ryan used the 37Signals product, Bootcamp, as the basis much of his discussion/demonstration

Some key points for application design:

• Decide what matters
• Make that pop out
• Make everything else fade back

The second session was about jQuery, my new personal favorite technology (although I still don’t know much about it.)  The talk was a little code-heavy for me and not so geared for “designers” per-se … but that’s getting into the weeds of “what is a web designer?  Does s/he write xHTML and CSS or just spend his day in Photoshop.”  Don’t get me started. J

Karl Swedberg , Fusionary Media was the speaker, and he seemed to know a *lot* about it.  Again, would have liked to see any examples of how to actually design with jQuery.

Here are some links:

• http://jquery.com
• http://plugins.jquery.com
• http://ui.jquery.com
• http://code.google.com/apis/ajaxlibs
• http://training.learningjquery.com
• http://ui.jquery.com/themeroller
• http://github.com (search for speaker name) – jQuery for TextMate
• http://malsup.com/jquery/

FOWD Sessions

The second day was held at the Roseland Ballroom, in mid-town Manhattan.  Ryan Carson of Carsonified, the company that produces FOWD, came out to introduce the conference, himself, and a few of the sponsors, Microsoft being the only one in the “diamond” level.  Carson says the goal of the conference was “to inspire,” and they really reached their goal with me.

On this second day we were to have a series of sessions ranging in length of 10-minutes, to an hour-or-so for the panel discussion held at the end.

There was a plug for the Website Named Desire Poster, and Surface and everybody seemed to really like both.  As always, the Surface demos were swarmed; at one point 6 people deep in circles around the one available.  No matter where I go, that thing is a total hit.

Before I get into the sessions, just a few notes:

• About 500+ (maybe?) attendees ranging from what could have been college-students, to some of the “rockstars” of the web-design universe
• Simple staging: stage, screen, two FOWD banners and a podium
• Short sessions were awesome and forced focus to the presentation.
• All the presentations were engaging to a great degree
• The hard seats broke my ass.

So, the sessions …

THE FUTURE OF WEB APP INTERFACE DESIGN
Ryan Singer – 37Signals

I had attended Ryan’s Workshop the day before, so for me, this was a concentrated version of our previous discussion.  Out of that discussion, he said he found two particular subjects that arose often: Developer / Designer Workflow and “Designers don’t explain their decisions.”

Need to be able to answer “Why? Why did we make the decision we did?  What was the thought process?  Why should someone listen to me and my decision?”

TEN MINUTES OF DESIGN INSPIRATION
Hillman Curtis – hillmancurtis, inc

http://www.hillmancurtis.com/index.php?/film/watch/james_victore

Curtis showed a short film with the major take-away being “use design like a club with spikes.”  The film was well shot and executed and inspirational.  Curtis seems like a very interesting character, as well, and feel lucky to finally get to attend a session by him – even if it’s only him showing a little movie of his – as I’ve been a fan of his for years.

THE EXPERIENCE LAYER: USING FLASH, JAVASCRIPT, AND OTHER TECHNOLOGIES TO ENGAGE USERS
Dan Mall – Happy Cog

Dan Mall gave an engaging talk with well-designed, cool slides.  Generally, the theme could be distilled to :

• progressive-enhancement is the way to go to ensure a solid experience throughout one’s site or web-application
• Technology over technique will never prove to emotionally engage the audience
• increase the emotion and engagement of the audience, you increase the connection between *you* and the audience

Dan used sifr as a good example of progressive enhancement: users without JavaScript or Flash experience a good downlevel experience, but users with the technologies on get a richer-more precise experience.

Books he mentioned:

• Design of Everyday Things and Emotional Design by Donald A. Norman
• Jeffery Zeldman – Designing with Web Standards

EDUCATING CLIENTS TO SAY YES
Paul Boag – Headscape, Ltd

To help clients understand what we actually do as designers, it helps to show the methodology we use, and also helps to set expectations on what the client and agency can expect from each other.

Speak the language of your client: businesses respond to vocabulary revolving around the business: bottom-line, schedules, goals, etc … marketing departments respond well to talk of “market-segmentation,” for instance.

Clients are not stupid.  They’re experts in their business field.  You are not.

Be positive.  Say yes to everything, but explain the true costs of decisions.  Sometimes you can say “no” by actually saying “yes.”

HOW TO TAKE ADVANTAGE OF JQUERY AND OTHER JAVASCRIPT LIBRARIES FOR YOUR DESIGN
Karl Swedberg – Fusionary Media

Karl is definitely a dev, and it kinda showed in his presentation through the presentation of a lot of code.  There was a lot of comparison between similar actions using different JavaScript libraries, but not a lot of demonstration of what the libraries can actually do, which was a bit of a bummer.  I’m really excited about JavaScript, and jQuery in particular, and was hoping to get some more detail.

I had taken Karl’s workshop the day before, and experienced the same mild let-down.  For instance, the one example of what you could achieve using jQuery was zebra-striping table rows in different ways.  Yes, handy, I’ll admit.  Inspirational, I’m not so sure … and it was this example he used in both the workshop and the session the next day.

He seemed truly knowledgeable about how to implement some cool things, but I would have really liked to see more of a design-perspective on this issue.

WHATEVER HAPPENED TO THE ART IN DESIGN?
Mike Cus – Carsonified

Mike busted out the drawing-skills and presented his content with fantastic hand-crafted slides.  He also provided a printed “flier” of his slides as a take-away for the attendees.  This was an awesome idea.

• First up is “the 50%” thing: the pixels on screen are only 50% of what matter.  The other 50% is concept, story, inspiration for the user – the thought and meaning behind the design and concept.
• Preparation is key: knowledge about your subject allows for greater creativity when approaching the subject.
• Inspiration: do it all to music.  Get out of your normal space.  Go do something.
• Idea, concept, story: this gets back to “the 50% thing.”  The design has to look more than pretty.  There needs to be meaning
• Ditch your Mac (or P.C.)  Get back to the roots.  “Computers are useless.  They can only give you answers.”
• Execution: An amazing work of art is executed perfectly.

WEB DESIGN FUNDAMENTALS: LEARNING FROM THE PAST TO BETTER THE FUTURE
Patrick Haney – http://patrickhaney.com

Showed his site and talked about CSS and semantic websites.

Forms and inputs

• Should be functionally stylish
• Mosaic “defined” how form inputs and buttons look like
• Make form inputs look like form inputs

Huffduffer.com sign up form : if you change your form fields so drastically, users may not understand what to do.  Here, it’s simple enough to probably not get lost, but … you can push the limits, if you’re careful

I like big buttons, and I cannot lie – Concern yourself with the size of hit-areas

Browser Sniffing “the stench of bad habits” – Progressive enhancement is better

Achieving pixel-perfection: Do websites really need to look exactly the same in every browser?  I mean, really?  Do they?

The state of typography on the web

• Georgia is not just a red state
• Siffr -  JavaScript font replacement methodology is cool if used as an enhancement
• Pixels vs. ems:
• Some say one Shouldn’t use pixels because it doesn’t scale in IE
• Inheritance problem / issue
• Pixels much easier

Don’t dig yourself into a hole with animated GIFs

• Rarely add value (duh)
• Good use on Twitter for progress indicator but in wrong place
• Mobile flickr: m.flickr.com. Good use of animated gif
• Basecamp: good use.  Submit buttons go away and replaced with animated gif when new item, or whatever is added

Accessibility: Accessibility should be considered throughout the process.

The future with CSS3: New tags:

• Border-radius
• Text-shadow
• Box-shadow

Progressive Enhancement

• Not just JavaScript
• Keep in mind when coding CSS
• Conditional comments are your friend.  Might make the code not-validate, but if it provides the correct experience, it may be the right call

CHARTING DAILY DATA
Nicholas Felton

http://daytum.com

Charted his life over many years, and created incredible data-visualizations of the results.  His summary: it’s really hard to do and you have to be really patient and detail-oriented to do it.

Really, this guy’s stuff is awesome.

FINDING INSPIRATION FROM YOUR ENVIRONMENT
Nick La – ndesign-studio

Nick gave a very inspirational “How-to” through one of his amazing Illustrations.

Sketch : Phonenix

• Start with a little doodle sketch
• Turn one squiggle into DNA
• Another looks like a dandelion
• Now use a leaf & butterfly pattern for wings

He then did the outlining and color in Adobe Illustrator

From there he imports it into Photoshop and brushes it up and adds effects like blur to simulate depth.  Really, it’s beautiful stuff.

Some points of inspiration:

• Everything has design
• Everything has a pattern

Where to look?

• Bookstore
• Mall
• Art store
• Contemporary art galleries
• Craft paper, postcards, etc …
• Carpets

How to avoid copying?

• Look at the detail – octopus example
• Zoom in
• Abstract
• Create patterns – see sucker illustrations
• Mix and match

DESIGNERS AND DEVELOPERS, WHY CAN’T WE ALL JUST GET ALONG?

The last session of the day was a panel discussion featuring: Daniel Burka – Digg and Pownce, Joe Stump – Digg, Liz Danzico – bobulate, Ryan Sims – Virb, Chris Lea – Media Temple

• Designers and Developers sometimes get into the “Mechanic syndrome,” where the Developers act as the mechanics toiling to make the customer’s (Designer’s) desires a reality.
• Problem grows with scale – as teams of designers and developers grow, the communication problems grow exponentially.
• Designers and developers speak differently, as they have different concerns: features vs. breaking

To be frank, the developers here sounded a bit like prima-donnas, not wanting to work on projects they didn’t think were interesting or cool.  It seems they were demanding the designers come to them and “sell” the developers on the project.  As a designer, I’d love to choose all the projects I’d been assigned over the years, but when it came down to it, I had to work on some crappy projects, as that was what was paying the bills.  No one had to convince me to do anything.  I just did it.

To summarize: awesome, inspirational, and I hope to return.