On Wednesday through Friday, May 16-18, I attended the WebVisions 2012 conference at the Oregon Convention Center in Portland. Below is a quick overview of all sessions I attended on Friday, with links. See Twitter updates using #wvpdx.

The CSS of Design Storytelling: Context, Spine and Structure – Traci Lepore
(9:15 am to 10:00 am | session details)

Storytelling is an age-old tradition, because it’s one that just plainly and simply works. As the book Storytelling for User Experience by Quesenbery and Brooks says “We all tell stories. It’s one of the most natural ways to share information, as old as the human race.”

But to be a really good storyteller, you need to understand three basic concepts: Context, Spine, and Structure (CSS). Each is critical and necessary, and all three need to work together.

In this session I will walk through these concepts and how to understand and implement them in your user experience design work to ensure a good story that covers all of the components of CSS—Context, Spine, and Structure—and is compelling, engaging, and memorable.

• Twitter: @TraciUXD
• Slides: slideshare.net/treygd/css-design-storytelling
• Storytelling tenets: Context, Spine, Structure
• Context (Theme, Mood, Audience): setting, theme/message, the big picture, emotional aspects
• Spine (Plot, Characters, Climaxes): basic storyline(s) that runs throughout plot and characters
• Structure (Patterns, Infrastructure, Through-line): progressions of the story
• Stories are a great way to help people learn by engaging their emotions
• Book: Storytelling for User Experience
• The role of storytelling in UX design is to be the bridge: managing the pieces to communicate a compelling and engaging story
• In UX design, the plot must cover the goals and scenarios
• Source for a lot of the content: “Improving Web Site Usability and Appeal” by Kevin Keeker

Casting Off Our Desktop Shackles – Jason Grigsby
(10:15 am to 11:00 am | session details)

No matter how much we try to put ourselves into a mobile first mentality, it is hard for us to do so fully. Our access to PCs prevents us from experiencing mobile the way many in the world do.

We’re currently fighting for parity among experiences. We’re arguing that the mobile version shouldn’t be a dumbed down version of the desktop site.

But we’ve set our sights too low. In a true Mobile First world, the mobile version should be the best experience. Mobile shouldn’t just match the desktop experience, it should exceed it.

• Twitter: @grigs and @grigs_talks
• Website: Cloudfour.com
• Slides: bit.ly/shackles-wxpdx
• “There is no mobile web.” Agree or disagree?
  1. Mobile doesn’t mean taking things away.
  2. Our vision of mobile context is often wrong.
• Mobile as the 7th Mass Media?
  1. Printing press
  2. Recordings
  3. Cinema
  4. Radio
  5. Television
  6. Internet
  7. Mobile
• More notes coming soon.

Strictly platonic: Responsive Design + Development – How to Avoid Digital Land(scape) Mines – Matt Fordham, Taylor Winters
(11:15 am to 12:00 pm | session details)

Users expect their experience on a website to adapt across all their devices – including mobile, tablet, laptop and desktop. The demand has coined the industry term – responsive design. The ideal effect is a satisfying and relevant experience to users on every size of display. Is this so much to ask?

What users don’t see is the behind-the-screens, starting with the people crazy enough to craft experiences that inherently respond to users demands – designers and developers. For progressive developers, this is an easy to grasp evolution. For designers, it presents a new host of challenges with some serious digital land(scape) mines.

To create a successful responsive web experience – and not cause any friendly fire in the process – requires design and development be in lock-step, harmony rather. Matt Fordham and Taylor Winters will talk through the fundamental need-to-knows from a developer’s and designer’s perspective, respectively and respectfully (well, mostly). Depending on levels of attention some combination of the following can be gathered:

+ The fundamentals developers want designers to know when designing a responsive experience
+ The cornerstones of a successful process for engineering a responsive web experience
+ A real-time working example for attendees to access on devices during the presentation – we’ll review key points of common responsive design layouts and the associated code

Plus, alarming statistics about why a responsive web experience is critical and helpful responsive design resources.

• Twitter @WINTR_US
• Website: wintr.us
• Responsive web design: a broad range of devices can access a single source of content
• PC usage is down 20% since 2008
• Traffic to mobile websites has increased 200% since 2010
• In the U.S., 25% of mobile web users browse only on their phones
• Responsive web design patterns by Luke Wroblewski cited again
• Great responsive design examples: mediaqueri.es, crushlovely.com (fluid), colly.com and foodsense.is

Crank WordPress up to 11 – Lorelle VanFossen, Mike Bijon, Jeremy Wilson, Taylor Dewey, Don Elliott
(1:30 pm to 2:15 pm | session details)

Designing and developing WordPress Themes isn’t about a paint job on the web. It’s where design and content meets the code pavement. WordPress Themes are highly flexible and dynamic, pushed to their limits by the New York Times, Wall Street Journal, CNN, Huffington Post, NFL, Number 10 Downing Street, NASA, Harvard, and more than 70 million websites worldwide.

Join Lorelle VanFossen and a panel of WordPress experts for insider stories, tips, tricks, and techniques to move you away from boring templates and crank up your designs with techniques to create powerful, dynamic websites. This engaging, high energy panel will discuss how WordPress Plugins influence design and functionality, wireframes to frameworks to WordPress Themes, and the future for WordPress Theme development including mobile, HTML5, CSS3, and the new federal laws on web accessibility.

• Twitter: @gravitatedesign, @tddewey, @geekcode, @ElliottDesign, @lorelleonwp
• The WordPress Codex and WordPress API
• Extensible tools in WordPress: Advanced Custom Fields plugin
• Cool WordPress magazine plugin: Edit Flow
• Best WordPress e-commerce plugin: WooCommerce (vs. Cart62 vs. Magento)

SHIFT Deluxe: An AIGA Portland presentation – Chad Rea, Kristin Rogers Brown, Rich Moore, Samuel Hulick
(2:30 pm to 3:15 pm | session details)

Thought leaders of the design community and AIGA Portland will showcase examples of intentional design and processes that are making the world a better place environmentally, economically, culturally, and socially. Join us for this concentrated version of SHIFT that will include brief, inspiring presentations followed by panelist and audience discussion on how to make design for positive change actionable.

• Twitter: @aigaportland
• Four-part sustainability focus: environment, culture, people and economy.  Learn more at livingprinciples.org
• Kristin Rogers Brown: featured The Urban Forest Project in Portland
• Rich Moore (zero one ten, iLoveHandles): featured Muji product designs and the Barnacle iPhone stand. Three design principles:
  • Can you do it in fewer pieces?
  • Can you make it smaller?
  • Can you do it with half the budget?
• Chad Rea (@chadrea): Green is not the conversation starter, yet many companies and brands choose to lead with this message. Leading communication strategies with green/eco-friendly language is preaching to the converted, not to the skeptical masses.
  • “Don’t act green. Be green. Act pop.” (Boring, outdated “green designs” aren’t necessary.)
  • Green can be irreverent. Green can be populist. Green can be all colors. Green can be just as ______. Green can co-mingle. Green can be discovered. Green can be subversive. Green can be invisible. Green can change and change the masses.
• Samuel Hulick (@samuelhulick): Save the websites!
  • Oxford, 1379: example of oak timber beams rotting away after centuries, but there was a replacement stand of trees ready that had been planted long ago
  • Sustainable ethos
  • 3 ways to avoid slash-and-burn website replacement strategies: 1. Respect what’s there; 2. Build for durability; 3. Plan for preservation

The Future of HTML5 Motion Design – Terry Ryan
(3:30 pm to 4:15 pm | session details)

HTML5 and CSS3 are hot, driven by an explosion of new, Internet connected devices.  While they offer many new features that should allow you to do the types of things that you previously did in Flash, actually making it happen is really hard.  Until now.

Mark Anders, an Adobe Fellow who leads the Edge Development Team, will explain how HTML5 animations are done by hand, and show how Adobe Edge Preview 4 can be used to save time while creating beautiful motion and interactive content. Adobe Edge is a new tool that natively uses HTML5, CSS3 and JavaScript for fidelity across modern browsers, while enabling integration into real-world workflows. This is a rare opportunity to not only learn about Edge from the source, but to give feedback and influence the design of a new tool under development.

• Twitter: @tpryan
• Slides: slideshare.net/tpryan
• In the near future: Adobe Edge: Motion and interaction design for open standards. Build with HTML5, CSS and JavaScript. Works across available browsers
• In the less-near future: CSS shaders: Cinematic 3D effects for the Web. Make browsers do more

Whither Twitter? – Laura Fitton
(4:30 pm to 5:15 pm | session details)

Twitter Twitter Twitter Twitter Twitter. How is it changing the world? What else might it have in store for the future of business, politics, social change and global economics? What secret Twitter superpowers are barely understood and have barely even been tapped yet?

• Twitter: @Pistachio
• Slides: slideshare.net/pistachio
• oneforty: can still find it at socdir.com
• 10 Things to Know in 3 Easy Parts
• What
  • An EKG for Attention
  • Sensing & signaling network
  • The Message is the influencer
  • Any to many
  • 5 BILLION publishers
• How
  • Be Useful (it’s not about you; make it about the readers; turn the message inside out)
  • Tame the Fox (The Little Prince reference)
  • Maintain loose ties
• What Next?
  • Explore the humble # (the flocking mechanism of Twitter)
  • Vulnerabilities

A few more things:

• Guide to Twitter: “Listen. Learn. Care. Serve.”
• “Either write something worth reading or do something worth writing about.” – Ben Franklin
• If you want to build your following … take AMAZING care of your followers.
• Crazy spreadsheet: Twitter chat schedule
• Useful tool: marketing.grader.com

That is all. WebVisions 2012 is over. For my notes from previous WebVisions conferences, see 2011, 2010, 2009, 2008 and 2007.

On Wednesday through Friday, May 16-18, I attended the WebVisions 2012 conference at the Oregon Convention Center in Portland. Below is a quick overview of all sessions I attended on Thursday, with links. See Twitter updates using #wvpdx.

Correspondent from the Future – Baratunde Thurston of The Onion
(9:15 am to 10:00 am | session details)

In this technology and future-oriented talk, Baratunde, host of Popular Science’s Future Of on Science Channel, goes behind the scenes of his television show as well as his digital strategy work at The Onion and other companies to give a deeper analysis of the issues raised in his exploration of the future. From self-driving cars to creepy Japanese robots to a real, functioning orgasmatron, Baratunde will share anecdotes, images and a thoughtful, provocative and humorous analysis of what the future might hold.

• Twitter: @baratunde
• Book: How To Be Black
• Projects on Twitter: @jjpolitics, @FutureOf, @TheOnion
• CultivatedWit.com organization

How to Not Be a JavaScript Hack – Phillip Kerman
(10:15 am to 11:00 am | session details)

The good news is browsers have seen phenomenal performance gains in their ability to render JavaScript. But the demand for sophisticated applications has also grown. Match this with the fact mobile devices are inherently slow and you will quickly see why streamlined code is important. Not only do developers need to squeeze every drop of JavaScript performance possible, but more importantly, they need to avoid pitfalls that can cause applications to come to a screeching halt and crash.

This session covers: basics of JavaScript (like avoiding variable collision and memory leaks); best practices for good performance (including simple caching, closures vs. global functions, as well as comparison of different object-oriented patterns); and, when to use CSS transitions instead of JavaScript.

• Twitter: @phillip
• JavaScript and jsFiddle resources and code samples: tinyurl.com/javascripthack
• Overview:
  • scope
  • hoisting: if a function is declared (vs. an expression), the function gets hoisted to the top; so, list all local variables at the top
  • closures
  • immediately invoked functions
  • expressions (IIFE)
  • modules
  • namespaces
• Understand why JavaScript libraries/frameworks like jQuery and xjs are advantageous
• Learning
  • “hate list”
  • learn by doing
  • books: JavaScript Patterns and JavaScript: The Good Parts
  • don’t optimize too early
  • don’t beat yourself up
  • avoid boilerplate code (i.e., using the same pattern for every project)
• Tooling
  • editor for JS: Komodo Edit (free), WebStorm ($49+)
  • JSLint (code quality tool, remove errors/”lint” from your program)
  • browser dev tools
  • jsFiddle
  • case for unit testing (because JS gets interpreted at runtime, generating lots of test cases are essential
• console.log() vs. alert()
• JavaScript garbage collector: delete pieces of memory that are no longer in use

The Web’s Third Decade – Faruk Ateş
(11:15 am to 12:00 pm | session details)

Our medium has entered its third decade of existence, and is ready for some growing up. Our definitions and understanding of the web are rapidly getting out of date, as, too, are our practices for building on it. It is time to re-evaluate where things are and, more importantly, where they are going.

Faruk Ateş will teach tools and techniques for a more modern view on the web, the world’s greatest platform for content delivery as well as function. Learn how the past is improperly preparing us for the present and the future, negatively affecting our work—and what you can do to free yourself from these information shackles.

• Twitter: @KuraFire
• The Third Decade: 2012-2022
• A History of the Web
  • 1991-2001 – Dark Ages of “Web Design”
  • 2001-2011 – Early stirrings of modern civilization
  • 2012 – Cold War shenanigans (with browser vendor prefixes)
• In April 2012, Opera announced that it’s going to implement the -webkit alias: “Opera Mobile Emulator build with experimental WebKit prefix support“
• Historically: we already have a user-agent clusterfuck (with numerous web browsers based on different engines posing as each other)
  • “Internet Explorer wants to be identified as Netscape 4; Konqueror and WebKit want to be identified as Firefox; Chrome wants to be identified as Safari.” Source: “History of the user-agent string“
• Developers or browser vendors to blame?
• Good developer tools: LESS, Sass with Compass. They are CSS preprocessors
• Responsive images: img srcset syntax vs. picture proposal

CSS3 OpenType: The New Web Typography – Thomas Phinney
(1:30 pm to 2:15 pm | session details)

Web typography is changing dramatically thanks to browser support for @font-face and server-based fonts. Web designers now have thousands of font choices where they once had just a dozen. But beyond @font-face, CSS 3 introduces myriad new OpenType typographic controls, bringing a level of typographic precision to web design previously seen only in print.

Covered in this presentation:

• how @font-face server-based web fonts work, and what options they replace
• choices for enabling @font-face, from self-hosting to web font services
• both font-independent and OpenType features, and how to tell which web fonts support which OpenType features.
• see these features in action on web pages, from workhorse everyday typography to the surprising and bizarre, via fonts created by Phinney and friends
• other CSS 3 typographic features such as kerning and hyphenation
• state and near future of advanced typography support in browsers
• “correct” typographic use of all these new features

Additional notes:

• Twitter: @ThomasPhinney
• For about 20 years, web design has been shackled to a few common fonts
• Many font formats required, but converging on WOFF (web open font format)
• Self-hosting vs. web font services
• @font-face CSS tag > font-family
• CSS3 and OpenType fonts:
• Text module: Hyphenation, Grid-based layout, various wrap options, handing punctuation, multiple columns
• Fonts Module: kerning and ligatures (turn on optimized legibility in CSS in Firefox), full OpenType features and alternates
• Ligatures: multiple letters colliding: f-i collision – use standard ligatures all the time – happens via alternate glyphs (built into many fonts)
• Tabular lining, proportional lining, proportional oldstyle, tabular oldstyle
• Stylistic sets for levels of swashiness (swashes)
• Contextual alternates of glyphs plus ligatures
• Firefox OpenType font feature support: mzl.la/ff4-ot

Hulk Smash the Web! How the Web and Digital Technology are Reshaping Visual Effects – Jeff White
(2:30 pm to 3:15 pm | session details)

Computer graphics in visual effects is a relatively young industry in relation to film making, although it is an ever changing industry. In recent years, digital technology and the web have brought significant changes into all aspects of film production.

Jeff will detail how digital capture drove the creation of the Hulk, Ironman and a virtual New York City for Marvel’s the Avengers. He’ll cover the steps ILM took to create the newest Hulk including working with Mark Ruffalo to bring his likeness and performance into a CG character.

In addition, he’ll talk about the impact of the web at each step of visual effects production and how it’s rapidly changing the way visual effects work is done.

• Twitter (for Industrial Light & Magic): @ILMVFX
• Company website: Industrial Light & Magic
• Related Wired article: “Exclusive Video: Making the Hulk, Avengers‘ Big, Green Smashing Machine.”

Building Mobile Applications with Web Standards – Kevin Hoyt
(3:30 pm to 4:15 pm | session details)

If you are building for iOS, the you use Objective C and Xcode. If you are building for Android, then you might use Java and Eclipse. And if you are building for BlackBerry, you will find yet a different Java. But all these devices have a modern browser capable of leveraging many of the emerging web standards. So why not use that browser to build applications that you can deploy in the various application stores? Welcome to PhoneGap.

In this session, join Adobe Evangelist, Kevin Hoyt on a tour of how to get started building mobile applications with web standards using PhoneGap. We will start by setting up the workflows for both iOS and Android. From there we will build and deploy our first application to each. After that it is off to the races with native device API integration including accelerometer, compass, audio recording, camera and photo gallery access, and more.

• Twitter: @krhoyt
• Presentation (PDF): goo.gl/MjdmI
• Demo: kevinhoyt.com/webvisions/punchy/
• Web standards: WHR 2, HTML 5, FileReader (for reading local files)
• Resolutions and screen densities pose a challenge in the mobile space (e.g., too big on an iPhone 3, but too small on an iPhone 4)
• On mobile/tablet devices, mouse events become touch events (check if “ontouchstart” exists in document; if so, it’s a touch-enabled device)
• Use CSS3 media queries to rearrange/resize design elements to account for fat fingers (vs. a mouse pointer on desktops)
• Rotation/orientation events using built-in accelerometers are great for making cool mobile-specific features. But simulators don’t support rotation events, so you have to test it on actual mobile devices
• PhoneGap: uses a chromeless web browser running inside a baseline native application container that loads your HTML, CSS, and JavaScript for testing for mobile devices. PhoneGap is part of the open source Apache Cordova project
• The ideal scenario, or ultimate goal, is that PhoneGap becomes obsolete

Sex and SciFi – Nathan Shedroff, Chris Noessel
(4:30 pm to 5:15 pm | session details)

Could there ever be a better trifecta than Science Fiction, Technology (OK, Interaction Design), and Sex?! While it may be more common for sex to be used to titillate rather than inform or inspire scifi audiences, sex is a big part of our lives and a major form of interaction. Films like Logan’s Run, Total Recall, THX-1138, Sleeper, Barbarella, and Firefly, as well as television programs like Star Trek: Voyager and Futurama offer lessons to designers that are both specific to the domain and generalizable to the field of interaction design.

As part of their ongoing analysis of interfaces in science fiction, Make It So, the authors will share and discuss a collection of video clips depicting visions of sex-related technologies in mainstream science fiction and their relation to real world technologies from state-of-the-art “sexplorers.” Discussion will address the questions these scenes—and what their presence in the larger film or television show—raise.

• How have sex interfaces been portrayed in mainstream science fiction?
• What can we generalize from these examples about interface design?
• What can we generalize from these examples about Hollywood?
• Which are examples of “good” scifi sexual interfaces?
• What criteria should we use when evaluating fictional interfaces?
• What counts as sexual technology?
• What expectations have been raised by scifi around technology and sex?
• What fears have been raised by scifi around technology and sex?
• How has science fiction extended existing sexual paradigms?
• How have actual sexual technologies been affected by science fiction?

Additional notes:

• Make It So (Sexy): This talk is based on the last chapter of their forthcoming book
• Three areas of exploration: matchmaking, augmented mediated coupling, sex with technology
• Sex-tech breaks sci-fi narratives when sci-fi is exploring something other than sex. In sci-fi movies, sex derails the narrative; sex needs to be treated as a shallow titillation instead of a satisfying, meaningful experience.
• Sex-tech and sci-fi are on divergent paths. Technology breaks sex for most people. But design and sci-fi are more compatible and mutually beneficial. In the real world, unlike in sci-fi plots, sex is a core goal and meaningful force of human existence.

Continue to WebVisions 2012 in review: Part three »

(Also see my reviews from previous WebVisions conferences: 2011, 2010, 2009, 2008 and 2007.)

Building HTML5 Games – Alex Porter, Andrew Cooper, Nathan Bingham
(8:30 am to 12:00 pm | session details)

HTML 5 Gaming is rapidly evolving and there has never been a better time to give it a try. This workshop focuses on using Impact JS and other libraries and tools to create amazing games in the browser without any plugins. We’ll be taking advantage of  the HTML5 Canvas, JavaScript, and modern browsers (Chrome, Safari, FireFox, IE 9+) to deliver fast, fluid games directly in the browser.

We’ll be covering the basics of building an HTML5 game from the ground up, as well as touching on some more advanced topics to inspire developers to push HTML5 gaming to its limits.

During this workshop we will cover:

• How to install tools for HTML 5 game building.
• Introduction to Game Design, Game Theory and Web Gaming.
• Intro to ImpactJS.
• Making your first ImpactJS game.
• Game Asset generation with Flash and CreateJS’s Zoë (http://createjs.com/Zoe)
• Working with inheritance, animation and sound in ImpactJS.
• Deployment strategies and distribution (Web, Desktop, Mobile).
• What’s coming next for HTML5 Gaming?

• Notes coming soon.

Adaptive Web Design – Aaron Gustafson
(1:30 pm to 5:00 pm | session details)

In this Workshop, Aaron Gustafson will teach you everything you need to know about modern web design with progressive enhancement. Whether you are a novice or an experienced professional, you will walk away from this workshop with a greater understanding of what progressive enhancement is and how to implement this philosophy in your own work.

During the course of the workshop, Aaron will mentor you on best practices as you work together to build a web page from the content out. Along the way, you’ll…

• see where concepts like “mobile first” and “responsive design” fit in with progressive enhancement and your workflow;
• learn how to wield the awesome power of JavaScript wisely, while keeping a watchful eye on how it can affect the user experience or your sites;
• become more familiar with how CSS parsers work and how you can use their logic to apply advanced CSS (including CSS3) in a layered fashion;
• see how accessibility concerns can be easily factored into your development process; and
• gain exposure to ARIA roles & states and see how you can employ them to improve the experience of those using screen readers.

• Notes coming soon.

Continue to WebVisions 2012 in review: Part two »

Maybe, just maybe, I’ll start using this blog more regularly again since I have become thoroughly disenchanted with the social networking landscape. I used to really enjoy Twitter and Flickr (and tolerate Facebook, etc.), but joining Google+ in June overwhelmed me with social fragmentation. People I care about have splintered into too many social networks. And so now I generally ignore them all, to maintain sanity/memory. Just about the only online activity I don’t neglect is Mascot Mashup, my daily 8-bit art project. Well, I guess I maintain my film ratings and reviews at Filmometer.com pretty well too.

Here is the prevailing sentiment on campus about the latest version of Blackboard course management software:

To make your own nonsense images like this (or, even better, like The RAGE FACES of MARIO BROS. Collection by Eric Foster), visit Meme Generator.

I am attending the HOW Design Conference 2011 in Chicago, Illinois. Below are my notes from the sessions I attended on Monday.

9:45 am-11:00 am – 36. All Your Creativity Questions Answered – Deborah Morrison, Heather Lins, Chris Chapman & Chris Elkerton
You’ve seen how Chris Chapman, Chris Elkerton, Heather Lins and Deborah Morrison keep their creative juices flowing and consistently deliver innovative concepts. Now’s your chance to ask them anything you want (preferably related to creativity). Even if you missed their earlier sessions, you’re more than welcome to come join the discussion in this panel-style session.

• Session hashtag: #howanswers.
• disneycollegeprogram.com - internship
• “The secret to creativity is knowing how to hide your sources.”
• No idea is ever original; get as much influence as possible; the best take stuff and put their own spin on it.
• “Your ideas aren’t precious.” – Heather
• Get out of the studio to generate ideas.
• Chris C.: My office is the world … my physical office is only where I execute
• Support people getting out of the office, and make the office more open and collaborative
• Everything is a Remix video series
• Statistical proof: The more fun people have, the more productive they are
• More design inspiration (through curation):
  • Brain Pickings – Deborah’s inspiration
  • The Cool Hunter
  • Inspiration Fuse sites
  • Designboom – good to look at 3D when you’re a 2D artist
  • Trend Hunter
  • Lovely Package
  • GOOD magazine
• Be a student of the world and never stop learning
• Get yourself out of your element
• Get engineers (or business people/marketers) and designers together from day one.
• Making the whole company creative might be better than building an isolated pod of creative people.
• Pick and choose your battles wisely.
• Have non-designers describe what’s not working instead of art-directing you.
  • You are the professional designer. Don’t let them move layout. Have them rely on you.
  • It’s really them just putting their thumbprint on something because they want to be part of the process.
  • Ask them: “What is this not achieving?” Big picture, not details. (Define roles, and context.)
  • You’ve got to train them on what their role is.
  • Example question: “Does this design recommendation you’re making impact the success criteria we’ve established?”
  • Don’t let them stand over you as you work.
• Search: innovation-based culture
• Academic credentials and working for universities:
  • Chris C.: All my biggest heroes dropped out of school or didn’t go to school at all.
  • Chris E.: You can go get the letters after your name, but if you’re a dick you’re not going to get the job.
  • Chris C.: “Get them [the manager] an MBA (Manage by Absence)” – your designer doesn’t have ownership because they know they are going to be micromanaged.
  • “Creativity is change. Universities don’t like to change.”
• Find this TED talk: Pixar (at their worst) during the Toy Story 2 process

11:15 am-12:30 pm – Closing Keynote – 39. Fascinate: How to Persuade and Captivate – Sally Hogshead
Why are you captivated by some people and not others? Why do certain messages convince you to change your opinion while others go ignored? And how can you create designs that irresistibly attract attention?

Find out as Sally Hogshead reveals her secrets for creating ideas that both persuade and captivate your audience. You’ll discover:

• which of the 7 fascination triggers you naturally use to persuade and captivate
• how to provoke strong and immediate emotional connections in your design and presentations—and even in your personal life
• how to influence decisions using the 7 fascination triggers: power, lust, mystique, prestige, alarm, vice and trust

What makes your personality irresistibly fascinating? Find out by taking the F-Score Personality Test.

• Session hashtag: #howfascinate.
• Are you selling a green ticket or are you selling an orange ticket? An orange ticket is fascinating.
• We take things that have no intrinsic meaning and we make them more meaningful and valuable.
• “Hi” is the GAP khakis of online dating.
• If your message fails to captivate … you get lost in the crowd.
• 9 seconds is our attention span (BBC study) and our brains are being rewired. You’re designing to goldfish.
• “In a competitive environment, the most fascinating wins.”
• The about your name that makes it different will one day make you love it.
• What makes you different, what sets you apart.
• Free digital version of her first book, Radical Careering: 100 Truths to Jumpstart Your Job, Your Career, and Your Life: sallyhogshead.com/rc
• Expressing your truest self is ultimate competitive advantage.
• You can be comfortable, or creative, but not both.
• Better to fail by going down in flames….
• Design comes in two flavors: Vanilla and Pistachio. If you want to create Pistachio, do not work at a (soul-crushing) Vanilla company.
• The 7 Triggers of Fascination (triggers are like instruments; the reasons why are almost compulsive about certain people & media).
• Mystique is almost the opposite of Passion; it is the most delicate of all the triggers.
• Rebellion is the trigger of creativity.
• Trust was the most dormant by a longshot among the HOW attendees.
• Trust is about consistency and reliability – make you work exciting and your structure boring if you want trust. Establish and repeat patterns to build trust long-term.
• Alarm is about deadlines and consequences. What is the negative consequence of not taking a particular action? If (not) X, then Y. Now your own emotional journey.
• Emotional journey of creative process: 1. possibility, 2. doubt, 3. agony (I am a hack and world is going to figure it out; I actually suck and this project is going to unveil me), 4. epiphany, 5. craft. The most important part is the agony, where you work through all the things that have already been done. Truly revolutionary ideas happen during the Throne of Agony. The worse it gets, the better the epiphany is going to be.
• Take the test: FScoreTest.com
• Mark Zuckerberg: Power and Mystique.
• HOW Design attendees:
  • 43% on the Passion trigger, secondary on the Rebellion trigger. (18% is statistically significant.)
  • You defend the world from predictability.
  • Passion is not a luxury. It is an imperative.
  • You rarely sort of care. The world is not changed by people who sort of care.
  • Use your natural fascination talent. It’s not enough to be the better (or best) unless it’s you.
• Make people fall in love with your ideas.

Thanks, Chicago. Back to Oregon.

I am attending the HOW Design Conference 2011 in Chicago, Illinois. Below are my notes from the sessions I attended on Sunday.

9:00 am-10:15 am – 20. Where Ideas Come from and Where They Go – Stephen Doyle
While designing brands for Barnes & Noble, Martha Stewart and his alma mater Cooper Union, you’re likely to find Stephen Doyle using a handsaw and a glue gun to create a piece of type…or casting a clay sculpture in bronze to create a sign. By nights, he’s transformed into a maniacal sculptor working with books or even dollar bills.

Tracing his career through magazines, books and package design to film titles, wayfinding systems and environmental graphics, he’ll explain how this unique combination of mass market and poetry—along with a heavy dose of craftsmanship—continually fuels his creative fire.

• Stephen: I’m successful because I’m “ambitious, naïve and selfish.”
• The Six Senses of Design
  1. A Sense of Appropriateness
     • Be cognizant of expectations and context.
     • Transportation Alternatives logo
     • GE ecology ad – LED light bulb
  2. A Sense of Community
     • Choices that are responsible to the community
     • Cooper Union – geometric box kite – CU
     • Actually more interested in language and semiotics more than typography
     • Peter Pan had forgotten his shadow so he comes back through Wendy’s window – an example of existential semiotics
     • I don’t think you can own an idea. I don’t think ideas are original. Ideas are fluid, like water.
     • Intersection of air, fire and water
  3. A Sense of Scale
     • LOGIC paper cutting – Thinking With My Fingers – a monument to lack of logic – lack of logic can sometimes lead to things logical
     • Sea Glass: The Carousel at the Battery – signs in the style of the perforation
     • Wrangling a client’s design project into a personal art project
     • Aquarium on Coney Island – shimmering tiles and bioluminescent
  4. A Sense of Wonder
     Bright objects hypnotize the mind
  5. Nonsense
     • You never know where it’s going to go. Logic doesn’t go everywhere.
     • Book and dollar bill sculptures – cutting up a book and gluing lines into forms
  6. A Sense of Purpose
     • Equate time that’s a little bit maniacal as value, because of this saying: time is money
     • Infrastructure – the story of civilization
     • Intelligence is nothing without delight.
  7. Bonus: A Sense of Gratitude
     • Taking on jobs only if you can move the needle (meaning: manipulate the jobs you accept: Fun, Fame, Fortune). Take on a job that fulfills 2 of the 3.

10:45 am-12:00 pm – 25. The NEW Web Typography: Where The Sexy Is REPEAT – Jason Cranford Teague
2010 was a big year for web typography—new technologies came online that will forever change the way information appears on our browsers. And as the dust from these changes settles, a new style of web typography is emerging, one that reflects print origins, but also experiments with the unique strengths of online communication.

In this session, Jason Cranford Teague will review the latest technologies and share case studies that push the boundaries of type on the web. You’ll learn how to find, choose and use web fonts, and discover new inspiration for web type techniques. In all, you’ll learn how to expertly use new web typography to set your work apart from the rest.

• Follow Jason on Twitter: @jasonspeaking. Session hashtag: #howsexy.
• His website: FluidWebType.info
• What is sexy? Makes you look again. Changes over time.
• Web Typography = the applications of HTML style to CSS text
• Humaan
• festivalmundo.com
• citizenmusician.com
• sweetlifefestival.com
• forumone.com
• 150,000 fonts
• 5 fonts commonly used on the Web out of 10/11
• If fonts were dogs … Comic Sans
• The Fatal Five: Arial, Verdana, Georgia, Trebuchet MS, Times New Roman
• 2010: The Year of Web Typography
• Webtype Basics
• Webfont
• SVG – caused Safari for iPhone to crash, avoid
• WOFF is the future of web fonts
• Upload an EOT, TTF/OTF and a WOFF version of your font in order to cover all browsers.
• Convert, Buy or Lease?
• A font is a piece of software that tells the computer how a particular glyph should be displayed.
• Choosing the right voice for your text is the job of the designer. Choose the voice that represents the brand message.
• Typography is to type what voice is to speech.
• Make web typography sexy:
  • Either high-color contrast and low-color contrast.
  • Scientifically shown: making things a little harder to read (such as with low contrast) improves content retention (memorable) because people have to look again and work a little.
  • Width contrast.
  • It’s not the ordinary.
  • lifefroots.com
  • lilaccreative.com
  • aifestival.org
  • “Above the fold” is a myth and has been substantially disproved. Space is what will draw them down into the rest of the page.
  • effectlab.gr – gives your eye time to move around in the space
  • Use scale: large and small
  • Text on the screen has been made too small on the screen for too long. 12 pt isn’t 12 pixel. People will find it easier to read your site if you go a little bit larger.
  • 18px body intro, 14px content
  • faciodesign.co.uk – all caps and regular font
  • A drop shadow is meant to simulate texture on a page.
  • Drop Shadow, Emboss or Bevel – use multiple shadow effects to create combination effects
  • e-shop.effectlab.gr
  • Letterpress effect – an emboss on the web
  • jaxvineyards.com
• Forum One – his company
• Fluid Web Typography book
• Download slides, posters and tools: bit.ly/howwebtype

2:00 pm-3:15 pm – 30. The Un-Guide to Creativity and Brainstorming – Chris Chapman
If you’re tired of having your ideas shot down, this session is for you. Disney Design Group’s Chris Chapman will explore the creative processes of some of the most innovative minds in history and show you how they found success.

Chris will explain how your creative mind works and give you the specific tools you need to break down the creative barriers imposed by clients, collaborators and even yourself. You’ll head home with loose guidelines to help you become a more efficient problem solver and brainstormer and—in the end—a stronger design thinker.

• Follow Chris on Twitter: @chapmancatalyst.
• Disney Design Group; Disney Creative Inc.
• You cannot act like an adult if you want to come up with big ideas.
• Pyramid chart: Arts (top), Crafts (middle), Sciences (bottom)
• People have been told they aren’t creative
  • By public school
  • Children go into school as a “?” and come out as a “.”
• You have to fail in order to find success.
• Orbiting the Giant Hairball book
• Statute of limitations – if there are rules you’ve got to bust them
• Line graph: A large segment of the “Creative Occurrence” line graph is an “invisible creative occurrence” and a smaller segment is a “measurable creative occurrence.” You need to give your creativity time to expand and breathe
• Jennifer Chatman – innovation-based culture stats … found this example article: “Investment Banking Serves as Case Study in Investigation of Services Innovation“
• You have to take great risks for great rewards
• ANTI-creative mood – “processed creative”
• Create the box: Fear, Knowledge (too much knowledge is incredibly damaging; don’t be an expert), Habit & Complacency (conformity, a blanket for people who can’t change), Assumption and Rules (break and bend the rules).
• Brain waves:
  • Beta – “you’re getting me in beta because you’re slamming me with pressure” – we’re not saving lives here (creativity can’t be forced or pushed)
  • Alpha – relaxed and effortless alertness, ideal for creative visualization
  • Theta – deep meditation
  • Delta – deep REM  sleep
• We live in a culture of judging ideas too soon.
• Brad Bird innovation article, with nine key lessons: “Pixar’s Brad Bird on Fostering Innovation.”
• How to be:
  • Positive minded
  • Be present – check your Blackberrys before the meeting
  • Share air – talk out to each other
  • Can it (wait) – do you have to?
• Conference tables are not for brainstorming
• Brainstorming “energizer” (ideal): 6-8 people, 4 hours tops w/breaks, 5 ideas
• 4 steps:
  • Vision – what question/topic are you trying to solve for (see success criteria)
  • Explore
  • Stretch – ideation phase, borrow it, twist it, re-express it
  • Ignite – judging the ideas like an adult, potshots
• Success criteria:
  • Do (what do you want it to do), Restrictions, Investments, Values, Essential outcomes
  • Catalytic question: “How might we…”
• Focus groups: Steve Jobs hates focus groups, and we (Disney) will never use them, ever
• Go out and ask individuals instead
• Stargazing: map the ideas (w/connections like star patterns)
• Brand guidelines don’t let you explore and make it your own; limits personal ownership, creativity and joy. (Designing in rigid environments becomes detached, soulless.)
• Recommended books:
  • Thinkx’s book: Think Better by Tim Hurson
  • The Five Faces of Genius: Creative Thinking Styles to Succeed at Work by Annette Moser-Wellman
  • Sticky Wisdom: How to Start a Creative Revolution at Work – The ?What If! group
  • Orbiting the Giant Hairball: A Corporate Fool’s Guide to Surviving with Grace by Gordon MacKenzie

3:45 pm-5:00 pm – 31. Letter for a Living – Jessica Hische
Jessica Hische, letterer, illustrator and founder of Daily Drop Cap, will take you through the differences between lettering and type design and show you how to break into each industry. She’ll examine some of her own projects, as well as those of other lettering artists and illustrators, to show you the differences between these two seemingly related industries.

You’ll discover when type is more appropriate than lettering (and vice versa), and uncover the biggest differences when it comes to getting work, making work and getting paid in each of the two fields.

• Follow Jessica on Twitter: @jessicahische. Session hashtag: #howletter.
• Daily Drop Cap
• icanhasartschool.com
• Package Your Baggage game
• Chalk type – use pencil and smear it around, scan it in and invert it
• Crazy cat lady rule: you can have no more than +1 cat per bedroom in your house
• shouldiworkforfree.com
• Lettering – type as image
• Type design – full alphabets that are turned into fonts (which are software loaded on your computer)
• theinternetismagical.com
• Typography (the arrangement of letters) vs. Type Design (the people that made typefaces) vs. Lettering (type as image)
• photolettering.com – House Industries – all three rolled into one
• Type designers are the unsung heroes of the design community. Most people have no idea about the type designers.
• Text type designers:
  • (missed about three of them here)
  • Christian Schwartz
  • Chris O.
  • Okay Type
  • Jackson Cavanaugh – All Right Sans
  • Hannes von Döhren – Brandon Grotesque (similar to Futura)
    • Don’t Fear the Internet project uses Brandon Grotesque
  • Jos Buivenga – Exlibris – cheap fonts
  • Text type has to be a workhorse, but display type … not so much.
  • Mark Simonson – Coquette font
• Display type designers:
  • Alejandro Paul – AudioScript – every letter has like nine alternate characters
  • Compendium by Alejandro Paul for Sudtipos Type
  • Underware – alternate endings makes their fonts look more customized
  • Type designers are the most type-A people ever.
  • Liza Display Pro – insane features – 1300+ glyphs
  • There is a glyphs palette in most Adobe software
  • Carol Twombly
  • Zuzana Licko – Mrs. Eaves
  • Veronika Burian – Bree
  • Broiche – lots of alternate swashes

Continue to HOW Design 2011 in review: Part four »