An Event Apart - Design Principles

27 Dec 2011

This is part of a series of posts summarizing my notes from the extraordinary conference An Event Apart, held December 12-14, 2011 at The Palace Hotel in San Francisco.

Design Principles Jeremy Keith - Author Description

All software is inherently political, reflecting the biases and beliefs of the people behind it. These beliefs can be made explicit through the publication of design principles: pragmatic rules of thumb that underpin a shared endeavor. Find out how important good design principles are to any project, whether it’s a website, a framework, or the World Wide Web itself.

Quotes

Design Principle: Be conservative in what you send and liberal in what you accept (ex. forgiving input forms)

HTML5 degradation is like Inception in your browser.

Design principles are not about pleasing everybody. Pick a side and plant your flag.

Notes Design Principles *Principles, Goals, and Patterns* * Design Principles are the tenets for a project. They help create consensus, determine the best approach to a problem. ** Design Goals -> Why? ** Design Principles -> How? ** Design Patterns -> What? ** These influence each other

Pretty much any endeavor in human history has had this pattern of design goals, principles, and patterns.

** You can't prevent your philosophies from showing in your work.

Software, like all technologies, is inherently political. Code inevitably reflects the choices, biases and desires of its creators. -Jamais Cascio

Web & Design Principles * Emergent design principles of the web: Rough consensus and running code * The Web is agreement, bottom-up effort * CSS core pattern selector {property:value;} ** fail proof - skips unknown elements * Principle: fault tolerant behavior, allows evolution of patterns

Be conservative in what you send and liberal in what you accept.

HTML5 & Design Principles * Compatibility, utility, interoperability * Browser graceful degradation allows quick adoption of new features * Input types - hints mobile browsers to use keyboard types * Browser Goal: Backward compatibility * Design Principle: Progressive enhancement (connected to graceful degradation) * Ex: HTML5 Video - video tag can contain code to a flash movie as a fallback.

Levels of fallback in html5 is like inception in your browser

*Javascript & Design Principles* * Metcalf's law bq. The value of a network is proportional to the square of the number of connected users in the system. * Javasrcript is everywhere. Competitors fight Metcalf's law. * Unobtrusive Javascript: chose a framework based on philosophy * Jquery: find stuff, do stuff to it. ** ex: star rating input actually a form selector instead of links. Selector is transformed into linked starts with js. ** Look for fundamental task ** Look at anti-patterns. * Principles can be informed by goals that are malicious. You can develop designs that are likewise malicious. ** ex: Rynair used a cookie to double the fair price on a return visit. * Not about pleasing everyone Big picture Principles * Goals lead down to principles; principles lead down to patterns. * Fewer principles help focus the task. * Pareto Principle.

Design for the 80%

** Instead of solving for everything, aim for the bigger group * Support universal access - principles that bring life to websites that work across all devices. For more info, see Design Principles.