Read the previous talk in this series, The Arts & Crafts of Web Design – or What Would William Do? by Curt Cloninger, or view An Event Apart’s Table of Contents

Designing the Next Generation of Web Apps

Jeff Veen

• He’s going through the history of computers, how he liked Pong when he was six, and how it progressed.
• Jeff left Google about 5 months ago (today is October 14, 2008). 
• “When I’m feeling dumb, it’s usually not my fault. It’s usually someone not communicating something, [etc.]”
• Cholera – John Snow used design and the sanitation maps to show that a pump was causing the cholera, not the air. Took the map, drew all the deaths at each address, then used design by taking out everything that wasn’t proving his point.
• This is visual design oriented, not technical design. That’s why my notes here are sparse.
• Inspiration comes from all different places. If having difficulty, stop looking for a bit.
• Use the visual to help make statistics more real - The MegaPenny Project. (screens)
• Try to find the story in the data, and how to be a good data visualization designer?
• assign different visual cues to each dimension of the data. Maybe black marks next to each address, bullet points like an Indiana Jones global flight, whathaveyou.
• Remove everything that isn’t telling the story. Journalists already follow this.
• Learn to give up control, and that helps you on your way to be a good interactive designer. In can show up in any context, and that’s ok.
• CSS Zen Garden is a perfect example of giving up design.
• Jeremy Keith makes it clear that you can choose your style. My content can show up anywhere.
• An aggregator, so you don’t see any of the design. Relinquish control. 
• A braille browser. Letting go.
• Tons of data visualization analysis and examples. No links given out. New York Times Casualties of War. I wish he gave out links.
• Storytelling -> discovery. Allow them to discover their own stories.
• A huge percentage of Google’s audience was coming from outside the USA.
• 1) Start with the user 2) Know yourself, then an option #3, Then understand the user
• User research is important, but those two are so key. Put research into the context of what you know.
• “Everything I’ve built has come from the frustration that it didn’t yet exist.” - Matt Mullenweg, founder of WordPress
• Everywhere you look, inspiration can come from…. (he ends with screenshot of Pong from the beginning)

Skip to An Event Apart’s Table of Contents

Read the previous talk in this series, The In-House Designer by Cameron Moll, or view An Event Apart’s Table of Contents

The Arts & Crafts of Web Design – or What Would William Do?

Curt Cloninger

• It’s all about being like this William Morris dude, his ethic.
• Via Cameron Moll, http://tinyurl.com/6×4lg
• This William dude’s thing was:
1. Stay true to Nature and Materials
• What are the material properties of a pixel?
• We’re dealing with light: light coming off of a screen.
• Also dealing with code, but mainly, staying true to a pixel.
• Need not simulate a physical material
• Typography is our material: 
• push css-typography (like coudal.com )
• Coudal is using letter-spacing to change the kerning of these letters.
• http://poccuo.com/ If you learn one thing from this: Georgia, 40px. That’s all. Beautiful.
• oversized text = easy to use (vimeo vs. youtube, roov, twitter, 37 signals)
• Vimeo: It’s like it says, our service will be easy to use, see how easy it is to read this text!
• ROOV: Just use that space on the text, don’t fill it with a bunch of stuff
• 37Signals: “Work well”. It shows it is easy to use, gives you that feeling, so warm and fuzzy.
• Behaviour as material: It should look like it does what it does. When Ajax first came out, it was like “What! No. There needs to be a refresh.” So there needs to be a transitional animation so that it looks like it’s doing what it’s doing. Even though you don’t need to, just give the feeling, it’s our material.
2. Unite art (design) and hand craft
• When is “genius design” more appropriate than “user-centered” design? When contemporary visual culture becomes corrupted. When forging a new medium. Read: iPod is genius design. 
3. Unite the microcosmic and macrocosmic
• He started to get really interested in typography
• Started on the paper, the form of the type, etc, and went out wider until lastly, the printed matter on the page
• Showing detail on buildings
• If it doesn’t need to be scalable, don’t automate it, make each section slightly different.
4. value utility. value beauty.
• Beauty alone is a legitimate reason for something to exist.
• Now that everyone can make a cookie-cutter site for free, beauty and customization is more important than ever.
• This is not about taking over the page with ornamentation, but using it for flourish and make it beautiful. Great designers did these ornamental things for a long time, “until these Swiss designers came in and then everything went all” wonky. 
5. Enjoy work.
• Everyone is here because we enjoy what we’re doing and it makes us excited.
• So, ensure that what we’re doing is something that is pleasing to us.
• If you’re not excited, get excited by delving deeper, or maybe go into something else.
• Orchestrate things so that you do what you like (like what Cameron’s talk was on).
6. Redesign the whole world
• “My hope is to get mumbo jumbo out of the world.” – William Morris, on his deathbed. (As in, to eliminate it)
• Designers make the world. Design the context around your design.

View the next talk in this series: Designing the Next Generation of Web Apps by Jeff Veen, or skip to An Event Apart’s Table of Contents

Read the previous talk in this series, Implementing Design: Bulletproof A–Z by Dan Cederholm, or view An Event Apart’s Table of Contents

The In-House Designer

Cameron Moll

• Cameron Moll works for LDS Church and in-house design.
• He’s excited about having the team be over 30 people and to work with a big team. He had been a freelancer. He can understand how both ways of working go.
• He’s using “designer” loosely.
• Designers spend their time 1) doing design (the work), 2) telling people about your design (publicity), and 3) convincing people to let you design (relationships).
• A key skill for in-house is the ability to influence and draw people in. Your employers are not exactly sold like they are when they are going to go hire an agency.
• Must build relationships to have the workflow go smoothly. That’s relationships betwen engineers and designers as well.
• Great designers are also great communicators. Communication (lack thereof) can often be the barrier between greatness and failure. The cake decorating dilemma (Cakewreckers: http://cakewrecks.blogspot.com/)
• Discussion with a client, spent most of the time discussion color and aesthetics. 
• He ended up ending the projects and they never used the design. He presented it as it would look. 
• He wonders what would’ve happened if he just presented functionality first, and then as those discussions are complete, bring in visual.
• Later, introduce color, introduce layout, etc.
• The Design Excellence Program
• Build up the knowledge and capabilities of the designers working for the organization
• Annual Design review
• Weekly design reviews – his designers find it to be the most useful thing that they do.
• Workshops: Fundamentals of Type, HTML/CSS I, HTML/CSS II, First Principles of visual design, design leadership & Communication
• Design conferences (like An Event Apart!)
• bit.ly/checklist – checklist from a blind person about accessibility and things that really concern them, as well as other accessibility things
• Strengthen long-term relationships with others who may influence the work
• Internal departments
• Local colleges and universities – the schools need to be teaching designers this CSS/HTML curriculum as well, as they need to understand both aspects of it.
• Vendor relationships
• Establish the culture and environment necessary for good design to flourish
• northtemple.com is his LDS church’s internal blog.
• Journal of design
• Establish a culture so that the design can flourish
• It’s easy to let the environment around us hamper your work, but this is not necessarily so. Surround yourself with inspiration, including at home, or a place where you go to sit. 
• Telecommute! “Those of you who aren’t [telecommuting], I recommend you do so.” He does it once a week. There’s an article in this month’s Wired that is promoting telecommuting.
• Uninspiring workplaces are detrimental only if you allow them to be.
• “I just got dilberted. Again.” If you are not willing to compromise, know when to get out if you must.
• If you go to freelancing, make sure you have some sort of residual income. A product that you’re selling, or for him the authenticjobs.com website, anything like that.

View the next talk in this series: The Arts & Crafts of Web Design – or What Would William Do? by Curt Cloninger, or skip to An Event Apart’s Table of Contents

]]>

Read the previous talk in this series, Design Lessons in Chess by Rob Weychert, or view An Event Apart’s Table of Contents

Implementing Design: Bulletproof A–Z

Dan Cederholm

• Craftsmanship: Vermont is craftsmanship by nature. Why? Your impression of Vermont… “I think of a guy with a beard building something, a human behind the design, not a factory.”
• “When something is well-crafted, it reflects that a human was behind its design.”
• The browser landscape is changing – it is a time to embrace progressive enhancement (for JS) and progressive enrichment (for CSS).
• These items will be referencing his demo site, http://icedorhot.com
• A: Anchor links with meta information (a bulletproof example)
• Screenshot of popular drinks box from slide (10_populardrinks)
• a display block and use floats to keep things appropriated 
• B: Border-radius (progressive enrichment)
• border-radius is promised with CSS3, yay! (in 2000 years :/)
• Vendor-specific solutions of the -webkit and -moz options
• Layer background images and border radius with clip the background image so that it does not exceed past the rounded section, maintaining the rounded corner.
• Firefox2 not as great support for that clipping of rounded corner, so it’s a little bit of aliasing, but so it goes. It looks ok in FF2 if contrast is low enough.
• He puts these things in an enriched.css, so has border-radius and the webkit and moz styles in there, and only cool browsers use them.
• What about uncool browsers?
• Well, they get square corners. Tough cookies, still workers. That’s ok and that’s good. It degrades wonderfully. It affects the design in minimal ways.
• Great for prototyping before carving the images out.
• C: Color transparency with RGBa (progressive enrichment)
• Hovering over the city makes it semi-transparent with temperature (screenshot)
• opacity sets the value for the element AND all its children, including the text, blek!
• background-color: rgba(0,0,0,.7) 0,0,0 is black, and .7 is the opacity, and there is no usage of png or any other deal. ¡Que bueno!
• Tiled png would reach more browsers, but rgba is great for prototyping before carving out final images.
• D: Do websites need to look exactly the same in every browser(.com)? No!
• D: Decision makers who get it.
• It’s not the end of the world if some browsers don’t get the opacity from rgba and if they have square corners instead of round. IE6 is still perfectly usable.
• The h1 headings in foamee.com have little flourishes right after and before the name. uses generated css content to generate the image: PERFECT USE OF CONTENT PROPERTY for :before and :after
• It’s ok: tiny visual enhancements that do not affect the layout
• E: Easy-clearing floats (reexamining past methods)
• This is not what floats were intended for, but this is what we’re dealt so we have to play it
• Dan likes the clearfix:after clearing method. 
• Dan tried what I do and made a big giant list of things and not adding the clearfix class (but too unmanageable)
• So instead he changed it to .group and it doesn’t look as scary as .clearfix
• Then lists *+html .group: {min-height: 1px} and * html .group{height:1%;}
• IE8 will supposedly support generated content, wahoo!
• F: Frameworks
• He uses Meyer’s reset.css and saved himself 155 times of writing margin:0 padding:0 for mtv.com
• Also in his framework he built he includes the IE6 filter png fix (* html #selector{ filter: progid.blahblahblah}) as well the clearfix.
• G: Gridlasticusness (bulletproof)
• Dan doesn’t have a design background, so he’s been learning about web design as he’s going.
• Implemented grids on simplebits
• Each grid will have em value
• Em-based layouts force you to ensure ultimate flexibility
• Em/pixel values make more sense when using the 62.5% method – end up with a base ten emming math reference. 
• Ems should also be used for margins, borders, etc as well.
• Avoid setting font-size and width on the same element – gets confusing and you throw off your base. The calculated width is going to be different once you change your font-size.
• Adjusting font size can throw off your grid too.
• Set a max-width if using ems on elastic layouts!
• Think modular – don’t get overwhelmed by so many sections. Partition your sections.
• H: Horizontal grid. sure. vertical grids? Kind of. 
• Be realistic about what’s going to happen. Make lines jagged, put different lengths of content there so that it looks realistic and they know what to expect. (Screenshot of “everything is just fine here”)
• Use groupings so that things are grouped and at least sections have the same tops
• I: IE8 still refuses to resize text set in pixels (reexamining past methods)
• Say what?
• Dan logged a bug, and they closed it right away without even opening or validating it or posting a workaround. 
• He’s still using ems because of that.
• Page zoom is there, does this eliminate our issue of font-size? No, because the text size is still there. Dan uses text size quite a bit and his eyesight is decent.
• J: jQuery. 
• He’s never talked about Javascript in a talk before, but he’s just that excited about jQuery that he’s bringing it in here.
• He’s just expressing his love for it.
• K: Kitty (kitty screenshot)
• L: .last (bulletproof)
• Simple way? Just add the last class with jQuery $(”ul.lst li:last”).addClass(”last”);. Sooo, that may not work without JS disabled, but your site will still work and it’s just a presentational thing.
• M: Must skip a few letters if we’re going to get through this
• N, O, P, Q, R…
• S: Shifting backgrounds
• Silverback’s layered pngs and http://therissingtonpodcast.co.uk
• Position background with a -80% or other – percentage. 
• http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax/
• T: Today’s MacBook release… MacBook Sun(tm), in ten minutes, it’s going to be huge.
• U: Ur stats.
• “When can we ___?”
• “The answer is simple: when your site’s (or sites’ if you have more than one) user logs tell you that you can. Not before then. The user stats from other sites, or from global-aggregation surveys, are worse than useless.” – Eric Meyer
• If you’ve got all IE6 users, may not want to do border-radius and other stuff
• Etc, etc. Listen to your user stats. Don’t care what other people do, because you’ve got to look to your audience.

View the next talk in this series: The In-House Designer by Cameron Moll, or skip to An Event Apart’s Table of Contents

Read the previous talk in this series, Live Code Workshop with Eric Meyer, or view An Event Apart’s Table of Contents

Design Lessons in Chess

Rob Weychert

• Chess is cool.
• Rob Weychert really likes chess.
• Strategy: overarching, long-term plan. Tactics: Short-term, small things to support the strategy and make it happen.
• Visual design is a tactic.
• Keep your endgame in mind.
• Opponent as user: In Chess, you do your move and your opponent’s move, you are moving them to defeat. Limit your user’s options so that they can only do what you want them to do. Make the path to completion obvious
• Opponent as client: You make a move, say “I have this problem for you to solve” and client responds, on and on until the game ends.
• Opponent as colleague: You don’t want to play against someone who can’t challenge you, is boring. 
• Lessons in Chess
1. Content is king
• The king needs to be the center of everything you do
• You may weave this complex strategy with getting the queen, that you don’t even notice that the king is vulnerable and you lose sight of the end goal.
• Get caught up in various solution, you’ve overshot and you’re missing out that content is king. 
• A slide from Jeremy Keith: Style/CSS & Behavior(Javascript) = Structure(HTML) = Content ( King!) “Thank you Jeremy!”
2. Know your history
• 2 Things to know about Bobby Fischer: 1) Brilliant chess player 2) Real meaniehead. A difficult person.
• He arrives at the world championship and he makes all these demands: first 7 rows of chairs must be gone, TV cameras must go, etc, etc. Even before the game started, he’s working on his opponent by just being himself.
• It wasn’t just about the Chess game, it was all a bunch of KGB breathing down their necks and drama in the room and Fischer being a jerk and blah blah blah.
• So Fischer’s opponent cracked and lost. Awww :/
• Know what your client likes, look into the history of that information, and go from there.
• Album cover for his friend making an album in honor of Tesla. Yeah, the electricity guy.
• Friend loved Tesla’s overcoming the typical views of his work at the time, especially in the face of the “advertising” being done by Edison.
• Decided to pretend to make it an advertisement that Tesla might make offering his services today.
• So Weychert looked into the ads of the time period of Tesla, including making sure the typefaces he used were authentic, and built it and designed it from there
3. Think ahead
• http://www.epitonic.com/ - Never more than three things. Silly. Not thinking ahead.
• Jason Santa Maria’s site – beautiful, art, builds, forward-thinking
4. Don’t get too attached
• Don’t get too attached to the queen! People will protect the queen even more than the king. No.
5. Act with purpose
• A sister lesson to “Content is king”
• The king is your world. Every move has to be focused on capturing opponent’s king or defending your own.
6. Obey circumstance – you have to act in line with the things in front of you and adapt if something throws you a curveball.
7. Principles are your friends, except when they’re not. 
• “The man who knows how will always have a job. The man who also knows why will always be his boss.” – Ralph Waldo Emerson.
• We may tend to be too pedantic or not pedantic enough regarding our principles. 
• “I ran your site through the validator and there were 6 errors and I think you could be doing a more to justify your existence.” – Rob Weychert, imitating lame pedantic people on the web.
8. The Journey is as important as the goal
• “What I do is not play, but struggle.” -Alexander Alekhine
• We go through and we see what doesn’t work and struggle through, and it may never see the light of day. But we struggle through, learn, and progress.
• What we know it “the stuff we learned in not getting there.”
• On a comp for a company named Philebrity, he learned “The most important freelance lesson of all: Get half the money up front.”
• Businessdk – he learned that he really doesn’t want to do a newspaper site. Important lesson! Mountains of failure!
• If you take away one lesson: love your failures.
• “I had a client where the site was predominantly in yellow, and they told me that yellow is the favorite color of crazy people” – An apartnik’s comment
• “Nothing is ever wasted.” That time and energy may not pay off immediately but perhaps down the line.
• “Yellow is the color of intelligence because it takes the most energy to see it.” – another apartnik

View the next talk in this series: Implementing Design: Bulletproof A–Z by Dan Cederholm, or skip to An Event Apart’s Table of Contents