object(WP_Query)#65 (49) { ["query_vars"]=> array(61) { ["tag"]=> string(13) "visual-design" ["error"]=> string(0) "" ["m"]=> string(0) "" ["p"]=> int(0) ["post_parent"]=> string(0) "" ["subpost"]=> string(0) "" ["subpost_id"]=> string(0) "" ["attachment"]=> string(0) "" ["attachment_id"]=> int(0) ["name"]=> string(0) "" ["static"]=> string(0) "" ["pagename"]=> string(0) "" ["page_id"]=> int(0) ["second"]=> string(0) "" ["minute"]=> string(0) "" ["hour"]=> string(0) "" ["day"]=> int(0) ["monthnum"]=> int(0) ["year"]=> int(0) ["w"]=> int(0) ["category_name"]=> string(0) "" ["cat"]=> string(0) "" ["tag_id"]=> int(14) ["author"]=> string(0) "" ["author_name"]=> string(0) "" ["feed"]=> string(0) "" ["tb"]=> string(0) "" ["paged"]=> int(0) ["comments_popup"]=> string(0) "" ["meta_key"]=> string(0) "" ["meta_value"]=> string(0) "" ["preview"]=> string(0) "" ["s"]=> string(0) "" ["sentence"]=> string(0) "" ["fields"]=> string(0) "" ["menu_order"]=> string(0) "" ["category__in"]=> array(0) { } ["category__not_in"]=> array(0) { } ["category__and"]=> array(0) { } ["post__in"]=> array(0) { } ["post__not_in"]=> array(0) { } ["tag__in"]=> array(0) { } ["tag__not_in"]=> array(0) { } ["tag__and"]=> array(0) { } ["tag_slug__in"]=> array(1) { [0]=> string(13) "visual-design" } ["tag_slug__and"]=> array(0) { } ["post_parent__in"]=> array(0) { } ["post_parent__not_in"]=> array(0) { } ["author__in"]=> array(0) { } ["author__not_in"]=> array(0) { } ["ignore_sticky_posts"]=> bool(false) ["suppress_filters"]=> bool(false) ["cache_results"]=> bool(false) ["update_post_term_cache"]=> bool(true) ["update_post_meta_cache"]=> bool(true) ["post_type"]=> string(0) "" ["posts_per_page"]=> int(15) ["nopaging"]=> bool(false) ["comments_per_page"]=> string(2) "50" ["no_found_rows"]=> bool(false) ["order"]=> string(4) "DESC" } ["tax_query"]=> object(WP_Tax_Query)#275 (2) { ["queries"]=> array(1) { [0]=> array(5) { ["taxonomy"]=> string(8) "post_tag" ["terms"]=> array(1) { [0]=> string(13) "visual-design" } ["include_children"]=> bool(true) ["field"]=> string(4) "slug" ["operator"]=> string(2) "IN" } } ["relation"]=> string(3) "AND" } ["meta_query"]=> object(WP_Meta_Query)#274 (2) { ["queries"]=> array(0) { } ["relation"]=> NULL } ["date_query"]=> bool(false) ["post_count"]=> int(15) ["current_post"]=> int(-1) ["in_the_loop"]=> bool(false) ["comment_count"]=> int(0) ["current_comment"]=> int(-1) ["found_posts"]=> string(2) "25" ["max_num_pages"]=> float(2) ["max_num_comment_pages"]=> int(0) ["is_single"]=> bool(false) ["is_preview"]=> bool(false) ["is_page"]=> bool(false) ["is_archive"]=> bool(true) ["is_date"]=> bool(false) ["is_year"]=> bool(false) ["is_month"]=> bool(false) ["is_day"]=> bool(false) ["is_time"]=> bool(false) ["is_author"]=> bool(false) ["is_category"]=> bool(false) ["is_tag"]=> bool(true) ["is_tax"]=> bool(false) ["is_search"]=> bool(false) ["is_feed"]=> bool(false) ["is_comment_feed"]=> bool(false) ["is_trackback"]=> bool(false) ["is_home"]=> bool(false) ["is_404"]=> bool(false) ["is_comments_popup"]=> bool(false) ["is_paged"]=> bool(false) ["is_admin"]=> bool(false) ["is_attachment"]=> bool(false) ["is_singular"]=> bool(false) ["is_robots"]=> bool(false) ["is_posts_page"]=> bool(false) ["is_post_type_archive"]=> bool(false) ["query_vars_hash"]=> string(32) "47483f6b1a4c25040247a4af10a80daf" ["query_vars_changed"]=> bool(false) ["thumbnails_cached"]=> bool(false) ["stopwords":"WP_Query":private]=> NULL ["query"]=> array(1) { ["tag"]=> string(13) "visual-design" } ["request"]=> string(341) "SELECT SQL_CALC_FOUND_ROWS wp_posts.ID FROM wp_posts INNER JOIN wp_term_relationships ON (wp_posts.ID = wp_term_relationships.object_id) WHERE 1=1 AND ( wp_term_relationships.term_taxonomy_id IN (14) ) AND wp_posts.post_type = 'post' AND (wp_posts.post_status = 'publish') GROUP BY wp_posts.ID ORDER BY wp_posts.post_date DESC LIMIT 0, 15" ["posts"]=> &array(15) { [0]=> object(WP_Post)#291 (25) { ["ID"]=> int(4811) ["post_author"]=> string(1) "2" ["post_date"]=> string(19) "2013-06-24 12:10:48" ["post_date_gmt"]=> string(19) "2013-06-24 02:10:48" ["post_content"]=> string(885) "

This caught my eye a few weeks ago: it's the site for an iPhone app to help you remember your dreams, called Shadow.

Things I like like:

  • the judicious use of the "zooming fade to black" effect on the sepia tone photo to set a lovely dreamy tone right from the start
  • great use of a single page site to tell a story with a simple and tight narrative
  • the beautiful colour scheme and art direction that would seem to carry through the app as well
  • the no-fuss responsive version

See for yourself!

" ["post_title"]=> string(39) "Design inspiration: the Shadow App site" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(4) "open" ["post_password"]=> string(0) "" ["post_name"]=> string(38) "design-inspiration-the-shadow-app-site" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2013-06-24 12:10:48" ["post_modified_gmt"]=> string(19) "2013-06-24 02:10:48" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(36) "http://www.webdirections.org/?p=4811" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [1]=> object(WP_Post)#292 (25) { ["ID"]=> int(3788) ["post_author"]=> string(1) "7" ["post_date"]=> string(19) "2011-11-08 17:41:15" ["post_date_gmt"]=> string(19) "2011-11-08 07:41:15" ["post_content"]=> string(2863) "

Web Directions South 2011, Sydney, October 14th.

Presentation slides

Session description

With the release of the Windows Phone, Windows 8, Google+ and a host of other interfaces – a call for revolution is becoming more absolute. There seems to be a clear opposition to skeumorphism in graphical user interfaces (skeumorphic UI were made popular by Apple for the past half a decade). There is a clear call for fierce reduction of chrome in favor of content. History seldom repeats itself, but every now and then, it rhymes. My session focuses on what I call — ‘The Interaction Design Bauhaus’. It discusses this growing minimalist, ‘form follows data’ trend in UX and compares it to historical phenomenon that occurred in the early 1900’s in the form of the industrial design Bauhaus movement. This session draws comparisons and lessons from history, and attempts to focus on the new material we deal with in Interaction Design and how we deal with old human feelings like Envy.

About Rahul Sen

Photo of Rahul SenRahul is an interaction designer with a background in architecture and theatre. He has a MA in Interaction Design from the renowned Umeå Institute of Design in Sweden. Prior to his work at Ergonomidesign, where Rahul currently works, he has worked at Teague (Seattle) and Atlas Copco (Örebro). In all these places he has worked on a wide range of cross-disciplinary projects with people from different backgrounds. His work has made him work with global brands like Microsoft Surface, Windows Phone, Zune, Hewlett-Packard, Roche, Proctor and Gamble, Pepsico, Spotify, Maquet, Nokia, and several others. Rahul uses his diverse history to probe and create interesting intersections between people, pixels and our physical World. In addition to his role as a visual interaction designer, Rahul is a keen thinker about future design scenarios and design-fiction. He writes and speaks about this within the design community as often as possible. He has experienced life and work in India, France, Berlin, USA and Sweden where he currently lives. Follow Rahul on Twitter: @rahulsen79" ["post_title"]=> string(38) "Rahul Sen - Interaction Design Bauhaus" ["post_excerpt"]=> string(428) "

Photo of Rahul SenMy session focuses on what I call — ‘The Interaction Design Bauhaus’. It discusses this growing minimalist, ‘form follows data’ trend in UX and compares it to historical phenomenon that occurred in the early 1900’s in the form of the industrial design Bauhaus movement.

" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(4) "open" ["post_password"]=> string(0) "" ["post_name"]=> string(36) "rahul-sen-interaction-design-bauhaus" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2011-11-08 17:42:53" ["post_modified_gmt"]=> string(19) "2011-11-08 07:42:53" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(36) "http://www.webdirections.org/?p=3788" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [2]=> object(WP_Post)#293 (25) { ["ID"]=> int(3869) ["post_author"]=> string(1) "7" ["post_date"]=> string(19) "2011-11-07 09:15:46" ["post_date_gmt"]=> string(19) "2011-11-06 23:15:46" ["post_content"]=> string(2001) "

Web Directions South 2011, Sydney, October 14th.

Session description

HTML5 Video has been a hot topic for the last couple of years — but with new additions to the specification, we can now extend it beyond all recognition. In this session we’ll look at basic timed data, closed captioning and more — and as we adventure into more sophisticated uses of the technology, we’ll explore what additional value timed data can provide to your video, with attention paid to how you can implement it today. The key focuses of this session will be accessibility, searchable media, and enriching existing multimedia experiences with timed data, all with a liberal application of flashy eye-candy. And of course we’re using the freshly minted Timed Text Track specification, soon appearing in a browser near you!

About Christopher Giffard

Photo of Christopher GiffardChristopher Giffard is a full stack web developer at the Department of Education, Employment, and Workplace Relations in Canberra. He’s somewhat new to the government, having a career background as a web guy in graphic design and advertising agencies — but hopes to bring a slice of that mad, informal world to the Australian public service. He gets a kick out of solving problems everybody else avoids, has a soft spot for architecture and design, is particularly interested in electronic music, and the algorithmic generation thereof. His current secret project involves natural language processing… and sarcasm detection. Follow Christopher on Twitter: @cgiffard" ["post_title"]=> string(65) "Christopher Giffard - HTML5 Video, Captioning, and Timed Metadata" ["post_excerpt"]=> string(470) "

Photo of Christopher GiffardThe key focuses of this session will be accessibility, searchable media, and enriching existing multimedia experiences with timed data, all with a liberal application of flashy eye-candy. And of course we’re using the freshly minted Timed Text Track specification, soon appearing in a browser near you!

" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(4) "open" ["post_password"]=> string(0) "" ["post_name"]=> string(61) "christopher-giffard-html5-video-captioning-and-timed-metadata" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2011-11-07 09:15:46" ["post_modified_gmt"]=> string(19) "2011-11-06 23:15:46" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(36) "http://www.webdirections.org/?p=3869" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [3]=> object(WP_Post)#294 (25) { ["ID"]=> int(3882) ["post_author"]=> string(1) "7" ["post_date"]=> string(19) "2011-11-06 20:10:52" ["post_date_gmt"]=> string(19) "2011-11-06 10:10:52" ["post_content"]=> string(2057) "

Web Directions South 2011, Sydney, October 13th.

Presentation slides

Session description

A new generation of touch devices have proven to be exciting playgrounds for app designers. And with every new product we create, we have the opportunity to offer the most clear and efficient experience for our users. Recent UI trends often lean to realistic, faithful representations of analog controls and features. These designs can offer advantages, but also come with their own set of hazards. In this session Aaron will lead you on a tour of current trends and practices, examining the strengths and drawbacks that realism brings. We’ll talk about things like mental models, innovation and usability as they relate to lifelike UI. Finally, Aaron will share some pragmatic guidelines to keep in mind as you build the next wave of mobile and tablet apps.

About Aaron Weyenberg

Photo of Aaron WeyenbergAaron Weyenberg is the UX Lead at TED in New York. Over the last 13 years Aaron has served in key roles at a range of companies, from small design agencies to fledgling startups to internationally recognized media brands. As an Art Director for ESPN, Aaron guided best practices, developed core UI components and designed pioneering real time game and scoring apps. His work appears in places like Smashing Magazine, Six Revisions and Tripwire Magazine. His offline hobbies involve learning about social psychology and human behavior, photography, reading, and an intrepid quest to find the perfect iPod earphones. Follow Aaron on Twitter: @aweyenberg" ["post_title"]=> string(72) "Aaron Weyenberg - Getting Real: Pros and Pitfalls of Realistic UI Design" ["post_excerpt"]=> string(301) "

Photo of Aaron WeyenbergIn this session Aaron will lead you on a tour of current trends and practices, examining the strengths and drawbacks that realism brings.

" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(4) "open" ["post_password"]=> string(0) "" ["post_name"]=> string(71) "aaron-weyenberg-getting-real-pros-and-pitfalls-of-realistic-ui-design-2" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2011-12-06 14:58:30" ["post_modified_gmt"]=> string(19) "2011-12-06 04:58:30" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(36) "http://www.webdirections.org/?p=3882" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [4]=> object(WP_Post)#295 (25) { ["ID"]=> int(3797) ["post_author"]=> string(1) "7" ["post_date"]=> string(19) "2011-11-06 08:37:38" ["post_date_gmt"]=> string(19) "2011-11-05 22:37:38" ["post_content"]=> string(2408) "

Web Directions South 2011, Sydney, October 14th.

Presentation slides

Session description

Since the early days of the web, the only reliable way to get movement on your site was through Flash, or more recently, Javascript. But now, with WebKit and Mozilla leading the way, transformations and transitions can be done with pure CSS, even on mobile devices. And for those in need of even more movement, CSS3 provides for keyframe-based animations. In this session, we’ll take a look at all of the possibilities and explore what works and where — from the simplest effects, to creative usability enhancements including the combination of CSS with mobile Javascript frameworks.

About Greg Rewis

Photo of Greg RewisGreg Rewis is the Principal Evangelist for Adobe Systems, focusing on Adobe’s open web products and technologies such as HTML5, CSS3 and Javascript. With over 20 years of computer industry experience, Greg spends in excess of 200 days of the year on the road, talking with customers, giving product demonstrations at seminars, and speaking at industry conferences. Greg has been passionate about the web since putting his first “home page” online in 1994. His career has taken him around the world, from the early days of desktop publishing, to a start-up in Hamburg, Germany, the glory days of the web at Macromedia and finally his current role at Adobe. The original GoLive Cyberstudio Product Manager and former Dreamweaver Technical Product Manager, Greg is the co-author of “Mastering CSS with Dreamweaver CS3″ and “Mastering CSS with Dreamweaver CS4″ published by New Riders, as well as a regular contributor to industry publications. Follow Greg on Twitter: @garazi" ["post_title"]=> string(53) "Greg Rewis - Move it! CSS3 Transitions and Animations" ["post_excerpt"]=> string(386) "

Photo of Greg RewisIn this session, we’ll take a look at all of the possibilities and explore what works and where — from the simplest effects, to creative usability enhancements including the combination of CSS with mobile Javascript frameworks.

" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(4) "open" ["post_password"]=> string(0) "" ["post_name"]=> string(50) "greg-rewis-move-it-css3-transitions-and-animations" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2011-11-06 08:47:37" ["post_modified_gmt"]=> string(19) "2011-11-05 22:47:37" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(36) "http://www.webdirections.org/?p=3797" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [5]=> object(WP_Post)#296 (25) { ["ID"]=> int(3377) ["post_author"]=> string(1) "7" ["post_date"]=> string(19) "2011-06-04 18:14:13" ["post_date_gmt"]=> string(19) "2011-06-04 08:14:13" ["post_content"]=> string(2436) "

Web Directions @media 2011, London, May 26th 10:45am.

Presentation slides

Session description

With most browsers adding increasing support, and the simplicity of providing fallbacks for those that don’t, CSS3 gradients are something we can start to use right now. They benefit our users with faster websites and ourselves with more time in our hands to spend in other things, since they are easy to create, edit and update. A very powerful feature that can also be utilized for a surprising number of design effects, even ones that don’t resemble gradients at all. In this talk, Lea will explore CSS3 gradients in great depth and it’s almost guaranteed that no matter your expertise level, you will walk out having learned new things.

About Lea Verou

Photo of Lea VerouLea Verou is a front-end engineer currently living in Greece. She discovered programming at the young age of 12 (web development a few years after) and it was love at first …line. In 2008, she co-founded Fresset Ltd, whose websites have attracted a large following in the Greek internet scene, they are currently working frantically on their first international project.

Fed up with the lack of proper web development education in Greece, she co-organised a university course which teaches all aspects of modern, standards-based Web development, including CSS3, HTML5 and ES5 as regular parts of its content.

During her spare time, she blogs about CSS, JavaScript and web usability at leaverou.me.

Follow Lea on Twitter: @LeaVerou
" ["post_title"]=> string(36) "Lea Verou - Mastering CSS3 gradients" ["post_excerpt"]=> string(799) "

Photo of Lea VerouWith most browsers adding increasing support, and the simplicity of providing fallbacks for those that don’t, CSS3 gradients are something we can start to use right now. They benefit our users with faster websites and ourselves with more time in our hands to spend in other things, since they are easy to create, edit and update. A very powerful feature that can also be utilized for a surprising number of design effects, even ones that don’t resemble gradients at all. In this talk, Lea will explore CSS3 gradients in great depth and it’s almost guaranteed that no matter your expertise level, you will walk out having learned new things.

" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(4) "open" ["post_password"]=> string(0) "" ["post_name"]=> string(34) "lea-verou-mastering-css3-gradients" ["to_ping"]=> string(0) "" ["pinged"]=> string(85) " http://leaverou.me/2010/07/organizing-a-university-course-on-modern-web-development/" ["post_modified"]=> string(19) "2011-06-26 15:45:06" ["post_modified_gmt"]=> string(19) "2011-06-26 05:45:06" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(36) "http://www.webdirections.org/?p=3377" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [6]=> object(WP_Post)#297 (25) { ["ID"]=> int(3375) ["post_author"]=> string(1) "7" ["post_date"]=> string(19) "2011-06-04 17:59:46" ["post_date_gmt"]=> string(19) "2011-06-04 07:59:46" ["post_content"]=> string(2104) "

Web Directions @media 2011, London, May 26th 1:40pm.

Presentation slides

Session description

The Large Hadron Collider (LHC) is estimated to produce 15 petabytes of data per year. This is difficult to store let alone understand! With connected devices quickly out numbering connected people, we are soon going to be swamped with data. Visualising the constant stream of information we are collecting so that it can be better understood is going to be a critical task. In this presentation, I’ll walk you through a quick overview of some basic chart and graph design, then look at how easy it is to write some quick scripts in your favourite language to produce beautiful graphics. SVG is an under-​​rated technology, but it can be created programmatically and quickly to visualise data.

About Brian Suda

Photo of Brian SudaBrian Suda is an informatician residing in Reykjavík, Iceland. He has spent a good portion of each day connected to Internet after discovering it back in the mid-1990s. Most recently, he has written a book on the topic of charts and graphs entitled Designing with Data. His own little patch of Internet can be found at suda.co.uk where many past projects and crazy ideas can be found. Follow Brian on Twitter: @briansuda
" ["post_title"]=> string(29) "Brian Suda - Visualising Data" ["post_excerpt"]=> string(477) "

Photo of Brian SudaIn this presentation, I’ll walk you through a quick overview of some basic chart and graph design, then look at how easy it is to write some quick scripts in your favourite language to produce beautiful graphics. SVG is an under-​​rated technology, but it can be created programmatically and quickly to visualise data.

" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(4) "open" ["post_password"]=> string(0) "" ["post_name"]=> string(27) "brian-suda-visualising-data" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2011-08-07 11:16:40" ["post_modified_gmt"]=> string(19) "2011-08-07 01:16:40" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(36) "http://www.webdirections.org/?p=3375" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "2" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [7]=> object(WP_Post)#298 (25) { ["ID"]=> int(3348) ["post_author"]=> string(1) "7" ["post_date"]=> string(19) "2011-06-04 14:39:06" ["post_date_gmt"]=> string(19) "2011-06-04 04:39:06" ["post_content"]=> string(1618) "

Web Directions @media 2011, London, May 27th 11:45am.

Presentation slides

Session description

In this session Dave will cover high-​​performance presentation and animation using HTML5, JavaScript, CSS3 and Canvas. Examples will include mobile-​​friendly techniques you can use today for creating game effects and “flashy” user experiences across a range of browsers and devices.

About Dave Balmer

Photo of Dave BalmerAs a Senior Software Engineer with Palm Developer Relations, Dave is a JavaScript guru currently focused on mobile app development. He is the creator of four JavaScript application frameworks, including Jo, which is a lightweight solution for cross-​​platform mobile apps. In his spare time, Dave designs and writes games, makes music, and writes. Follow Dave on Twitter: @balmer
" ["post_title"]=> string(42) "Dave Balmer - Rockstar graphics with HTML5" ["post_excerpt"]=> string(452) "

Photo of Dave BalmerIn this session Dave will cover high-​​performance presentation and animation using HTML5, JavaScript, CSS3 and Canvas. Examples will include mobile-​​friendly techniques you can use today for creating game effects and “flashy” user experiences across a range of browsers and devices.

" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(4) "open" ["post_password"]=> string(0) "" ["post_name"]=> string(40) "dave-balmer-rockstar-graphics-with-html5" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2011-06-26 18:22:19" ["post_modified_gmt"]=> string(19) "2011-06-26 08:22:19" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(36) "http://www.webdirections.org/?p=3348" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [8]=> object(WP_Post)#299 (25) { ["ID"]=> int(3251) ["post_author"]=> string(1) "7" ["post_date"]=> string(19) "2011-05-29 10:13:24" ["post_date_gmt"]=> string(19) "2011-05-29 00:13:24" ["post_content"]=> string(2254) "

Web Directions Unplugged 2011, Seattle, May 12th 11:45am.

Presentation slides

External slides

Session description

Being a front-end designer used to mean pixel hacking and endless rounds of pain while trying to make sites and applications “look the same in each browser”. Thankfully, we now live in more interesting times. But as we strive to make our web apps a pleasure to use, the vast array of tools and techniques available to us present their own set of challenges. In this session you will learn to ask the right questions to guide your choice of tools and the design. Find out how to creatively use new features of CSS3 (gradients, multiple backgrounds, generated content, and many more) to give life to your design ideas, make them adaptable and maintainable, and provide the best experience possible on an array of platforms. Finally, you’ll hear how to create a library of simple and ready-to-use design patterns, that you can incorporate into your workflow to bring your designs to life much faster.

About Divya Manian

Photo of Divya ManianDivya Manian is a Web Designer in Seattle. She made the jump from developing device drivers for Motorola phones to designing websites and has not looked back since. She takes her duties as an Open Web vigilante seriously which has resulted in collaborative projects such as HTML5 Readiness and HTML5 Boilerplate. Speaker Photo: © Mohini Patel Glanz. Follow Divya on Twitter: @nimbuin
" ["post_title"]=> string(28) "Divya Manian - Creative CSS3" ["post_excerpt"]=> string(416) "

Photo of Divya ManianFind out how to creatively use new features of CSS3 (gradients, multiple backgrounds, generated content, and many more) to give life to your design ideas, make them adaptable and maintainable, and provide the best experience possible on an array of platforms.

" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(4) "open" ["post_password"]=> string(0) "" ["post_name"]=> string(26) "divya-manian-creative-css3" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2011-05-29 13:13:07" ["post_modified_gmt"]=> string(19) "2011-05-29 03:13:07" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(36) "http://www.webdirections.org/?p=3251" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [9]=> object(WP_Post)#300 (25) { ["ID"]=> int(3273) ["post_author"]=> string(1) "7" ["post_date"]=> string(19) "2011-05-29 10:11:41" ["post_date_gmt"]=> string(19) "2011-05-29 00:11:41" ["post_content"]=> string(2910) "

Web Directions Unplugged 2011, Seattle, May 13th 1:25pm.

Presentation slides

Session description

A new generation of touch devices have proven to be exciting playgrounds for app designers. And with every new product we create, we have the opportunity to offer the most clear and efficient experience for our users. Recent UI trends often lean to realistic, faithful representations of analog controls and features. These designs can offer advantages, but also come with their own set of hazards. In this session Aaron will lead you on a tour of current trends and practices, examining the strengths and drawbacks that realism brings. We’ll talk about things like mental models, innovation and usability as they relate to lifelike UI. Finally, Aaron will share some pragmatic guidelines to keep in mind as you build the next wave of mobile and touch apps.

About Aaron Weyenberg

Photo of Aaron WeyenbergA mixed breed designer/developer, Aaron’s career is built upon a unique blend of creative and technical sensibilities. He began twelve years ago leading interactive initiatives for Colorado’s top design agencies, delivering successful projects for a range of clients including HP, Spyder Active Sports and the National Center for Atmospheric Research. In 2004 he joined ESPN New Media where he provided instrumental leadership in an Art Director role. At ESPN he guided best practices, developed core UI components and designed pioneering real time game and scoring applications. Aaron currently serves as Creative Director for Fanzter, a lean and profitable New England based startup. His work has appeared on Smashing Magazine, Six Revisions, Ajax Rain and was awarded at the 27th annual Sports Emmys. Aaron’s academic background spans three fields of study at three different universities, settling into a B.S. in Scientific and Technical Communication from Michigan Tech. His offline hobbies involve learning about social psychology and human behavior, photography, and a quest to find the perfect iPod earphones. Follow Aaron on Twitter: @aweyenberg
" ["post_title"]=> string(37) "Aaron Weyenberg - Realistic UI Design" ["post_excerpt"]=> string(523) "

Photo of Aaron WeyenbergIn this session Aaron will lead you on a tour of current trends and practices, examining the strengths and drawbacks that realism brings. We’ll talk about things like mental models, innovation and usability as they relate to lifelike UI. Finally, Aaron will share some pragmatic guidelines to keep in mind as you build the next wave of mobile and touch apps.

" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(4) "open" ["post_password"]=> string(0) "" ["post_name"]=> string(35) "aaron-weyenberg-realistic-ui-design" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2011-05-29 11:06:15" ["post_modified_gmt"]=> string(19) "2011-05-29 01:06:15" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(36) "http://www.webdirections.org/?p=3273" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [10]=> object(WP_Post)#301 (25) { ["ID"]=> int(3280) ["post_author"]=> string(1) "7" ["post_date"]=> string(19) "2011-05-29 10:10:48" ["post_date_gmt"]=> string(19) "2011-05-29 00:10:48" ["post_content"]=> string(1721) "

Web Directions Unplugged 2011, Seattle, May 13th 2:25pm.

Presentation slides

Session description

The Canvas tag has been around for a while, and HTML5 has given it more visibility. It’s now finding its way into most mobile browsers, and even a majority of desktop browsers. This talk will give a solid overview of what the canvas tag is, what it can do, and how it compares with other technologies like SVG and Flash. Several practical code examples will show how you can use it along with CSS3 and other HTML5 goodies to make your web apps more featured, efficient and downright cool.

About Dave Balmer

Photo of Dave BalmerAs a Senior Software Engineer with Palm Developer Relations, Dave is a JavaScript guru currently focused on mobile app development. He is the creator of four JavaScript application frameworks, including Jo HTML5 Mobile App Framework, which is a lightweight solution for cross-platform mobile apps. In his spare time, Dave designs and writes games, makes music, and writes. Follow Dave on Twitter: @balmer
" ["post_title"]=> string(46) "Dave Balmer - HTML5 Graphics: Canvas Deep Dive" ["post_excerpt"]=> string(478) "

Photo of Dave BalmerThe Canvas tag has been around for a while, and HTML5 has given it more visibility. It’s now finding its way into most mobile browsers, and even a majority of desktop browsers. This talk will give a solid overview of what the canvas tag is, what it can do, and how it compares with other technologies like SVG and Flash.

" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(4) "open" ["post_password"]=> string(0) "" ["post_name"]=> string(43) "dave-balmer-html5-graphics-canvas-deep-dive" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2011-05-29 10:10:48" ["post_modified_gmt"]=> string(19) "2011-05-29 00:10:48" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(36) "http://www.webdirections.org/?p=3280" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "1" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [11]=> object(WP_Post)#302 (25) { ["ID"]=> int(2981) ["post_author"]=> string(1) "7" ["post_date"]=> string(19) "2010-11-17 15:52:44" ["post_date_gmt"]=> string(19) "2010-11-17 05:52:44" ["post_content"]=> string(2713) "

Web Directions USA 2010, Loews Atlanta Hotel, September 23 10.45am.

Presentation slides

Session description

Humans, though cute and cuddly, are not without their flaws, which makes designing for them a challenge. By understanding how the wet, mushy processor works in these hairy little devils, you can design interfaces and web experiences that will have them hopelessly devoted to your brand. In this talk, Aarron Walter will introduce you to the emotional usability principle – a design axiom that identifies a strong connection between human emotion and perceived usability. Through real-world examples, you’ll learn practical interface design techniques that will make your websites and applications more engaging to the humans they serve.

About Aarron Walter

Aarron Walter PortraitBy day, Aarron Walter is the mild-mannered lead user experience designer for MailChimp, and by night he leads a team of education crusaders in The Web Standards Project who are the magic behind The WaSP InterACT curriculum. Aarron is the author of Building Findable Websites: Web Standards, SEO, and Beyond, and is a co-author and project manager of the book InterACT With Web Standards: A holistic approach to Web design. Follow Aarron on Twitter: @aarron.
" ["post_title"]=> string(67) "Aarron Walter - Learning to Love Humans: Emotional Interface Design" ["post_excerpt"]=> string(522) "

Aarron Walter PortraitIn this talk, Aarron Walter will introduce you to the emotional usability principle – a design axiom that identifies a strong connection between human emotion and perceived usability. Through real-world examples, you’ll learn practical interface design techniques that will make your websites and applications more engaging to the humans they serve.

" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(4) "open" ["post_password"]=> string(0) "" ["post_name"]=> string(64) "aarron-walter-learning-to-love-humans-emotional-interface-design" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2010-11-17 15:55:43" ["post_modified_gmt"]=> string(19) "2010-11-17 05:55:43" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(36) "http://www.webdirections.org/?p=2981" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [12]=> object(WP_Post)#303 (25) { ["ID"]=> int(2970) ["post_author"]=> string(1) "7" ["post_date"]=> string(19) "2010-11-17 15:23:49" ["post_date_gmt"]=> string(19) "2010-11-17 05:23:49" ["post_content"]=> string(3323) "

Web Directions USA 2010, Loews Atlanta Hotel, September 23 11.45am.

Presentation slides

Session description

Since many pieces of CSS3 are now supported in the majority of browsers, web sites are popping up all over the place that feature rounded corners (ooh), drop shadows (ahh), and unique embedded fonts (hooray!). But CSS3 can do more than add visual richness to your sites (though it’s quite good at that). Using robust, forward-thinking CSS3 techniques in place of the old standbys can have tangible benefits for your business and users. Powerful new selectors and image-free visual effects can streamline your sites and improve their speed. Media queries can make your sites more adaptable and usable on the wide variety of browser configurations and user agents in use today, including mobile devices like iPhone, Android, and iPad. CSS3 is changing how we design and develop web sites, allowing us to quickly and easily create and maintain highly efficient and adaptable sites that are a pleasure to use. You’ll learn practical yet progressive examples of the most beneficial CSS3 techniques to put to use in your pages today.

About Zoe Mickley Gillenwater

Zoe Mickley Gillenwater PortraitZoe Mickley Gillenwater is a freelance graphic and web designer, developer and consultant. She is the author of the book Flexible Web Design: Creating Liquid and Elastic Layouts with CSS and the video training title Web Accessibility Principles for lynda.com, and is working on the upcoming book Stunning CSS3: A Project-based Guide to the Latest in CSS. Zoe is currently a member of the Web Standards Project (WaSP) Adobe Task Force and was previously a moderator of the popular css-discuss mailing list. Find out more about Zoe on her blog and portfolio site. Follow Zoe on Twitter: @zomigi
" ["post_title"]=> string(66) "Zoe Mickley Gillenwater - Effective and efficient design with CSS3" ["post_excerpt"]=> string(480) "

Zoe Mickley Gillenwater PortraitCSS3 is changing how we design and develop web sites, allowing us to quickly and easily create and maintain highly efficient and adaptable sites that are a pleasure to use. You’ll learn practical yet progressive examples of the most beneficial CSS3 techniques to put to use in your pages today.

" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(4) "open" ["post_password"]=> string(0) "" ["post_name"]=> string(64) "zoe-mickley-gillenwater-effective-and-efficient-design-with-css3" ["to_ping"]=> string(0) "" ["pinged"]=> string(43) " http://zomigi.com/blog/web-directions-usa/" ["post_modified"]=> string(19) "2010-11-17 15:23:49" ["post_modified_gmt"]=> string(19) "2010-11-17 05:23:49" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(36) "http://www.webdirections.org/?p=2970" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [13]=> object(WP_Post)#304 (25) { ["ID"]=> int(2968) ["post_author"]=> string(1) "7" ["post_date"]=> string(19) "2010-11-17 15:13:57" ["post_date_gmt"]=> string(19) "2010-11-17 05:13:57" ["post_content"]=> string(3151) "

Web Directions USA 2010, Loews Atlanta Hotel, September 24 11.10am.

Presentation slides

Session description

For almost 15 years, Web designers have had a list of 10 “Core Web fonts” to choose from. Many ask, “Why can’t I just download a font file from my Web server the same way I can an image?” Well, actually, you can. The verbiage for font linking is a little different than images, but the syntax for Webfont linking has been around for over 10 years as a part of the CSS standard. Web typography expert Jason Cranford Teague shows you how to apply the principles of fluid typography, to choose, find and use Webfonts and create your unique typographic voice. Come and find out why 2010 is going to be the year of Web typography.

About Jason Cranford Teague

Jason Cranford Teague PortraitJason recently took over as the Managing Director of UX & Design for Forum One, an interactive agency that helps people apply technology in creative ways to build a positive future. He has been at the for front of Web design for over 16 years as a designer, writer and teacher. His many books include CSS3 Visual Quickstart, Fluid Web Typography and Speaking in Styles: The Fundamentals of CSS for Web Designers. Jason has also worked with the W3C CSS Workgroup, Yuri's Night: The World Space Party, and was the Director of Web Design Standards for AOL. He recently served as the Sr. Design Manager for Marriott International eCommerce, where he helped relaunch marriott.com, the 7th largest transaction site on the Web. Read more about Jason on his blog jasonspeaking.com.

Follow Jason on Twitter: @jasonspeaking

" ["post_title"]=> string(56) "Jason Cranford Teague - 2010: The Year of Web Typography" ["post_excerpt"]=> string(417) "

Jason Cranford Teague PortraitWeb typography expert Jason Cranford Teague shows you how to apply the principles of fluid typography, to choose, find and use Webfonts and create your unique typographic voice. Come and find out why 2010 is going to be the year of Web typography.

" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(4) "open" ["post_password"]=> string(0) "" ["post_name"]=> string(53) "jason-cranford-teague-2010-the-year-of-web-typography" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2010-11-17 15:19:03" ["post_modified_gmt"]=> string(19) "2010-11-17 05:19:03" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(36) "http://www.webdirections.org/?p=2968" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [14]=> object(WP_Post)#305 (25) { ["ID"]=> int(2925) ["post_author"]=> string(1) "7" ["post_date"]=> string(19) "2010-11-01 13:40:26" ["post_date_gmt"]=> string(19) "2010-11-01 03:40:26" ["post_content"]=> string(2299) "

Web Directions South 2010, Sydney Convention and Exhibition Centre, October 15 2.40pm.

Presentation slides

Coming soon.

Session description

As SVG and Canvas come of age, every developer who loves standards is wanting to use them in production to make eye-popping effects. But then they come up against the inevitable lack of support in IE6 to 8, and promptly give up the ghost. Fear not! Raphaël provides a developer friendly API to create graphics that work in Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+. Yes, you read that correctly, IE6. In this session Dmitry Baranovskiy, Raphaël's creator will walk you through its possibilities and will open up new horizons for web graphics that will work in all almost every browser.

About Dmitry Baranovskiy

Dmitry Baranovskiy PortraitDmitry has over ten years experience in creating web applications. Having started as a back end developer, more recently he has changed his orientation to front end development and even pure design. These days he spends his working hours as Software Architect at Sencha. He is also the creator of Raphaël, the JavaScript Library, as well as a Optimus, the Microformats transformer. At any given moment he is always working on three secret projects, though no one knows where he gets the time for any of this. Follow Dmitry on Twitter: @DmitryBranovsk
" ["post_title"]=> string(65) "Dmitry Baranovskiy - Raphaël: native web vector graphics library" ["post_excerpt"]=> string(364) "

Dmitry Baranovskiy PortraitIn this session Dmitry Baranovskiy, Raphaël's creator will walk you through its possibilities and will open up new horizons for web graphics that will work in all almost every browser.

" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(4) "open" ["post_password"]=> string(0) "" ["post_name"]=> string(61) "dmitry-baranovskiy-raphael-native-web-vector-graphics-library" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2010-11-01 13:43:18" ["post_modified_gmt"]=> string(19) "2010-11-01 03:43:18" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(36) "http://www.webdirections.org/?p=2925" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } } ["post"]=> object(WP_Post)#291 (25) { ["ID"]=> int(4811) ["post_author"]=> string(1) "2" ["post_date"]=> string(19) "2013-06-24 12:10:48" ["post_date_gmt"]=> string(19) "2013-06-24 02:10:48" ["post_content"]=> string(885) "

This caught my eye a few weeks ago: it's the site for an iPhone app to help you remember your dreams, called Shadow.

Things I like like:

  • the judicious use of the "zooming fade to black" effect on the sepia tone photo to set a lovely dreamy tone right from the start
  • great use of a single page site to tell a story with a simple and tight narrative
  • the beautiful colour scheme and art direction that would seem to carry through the app as well
  • the no-fuss responsive version

See for yourself!

" ["post_title"]=> string(39) "Design inspiration: the Shadow App site" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(4) "open" ["post_password"]=> string(0) "" ["post_name"]=> string(38) "design-inspiration-the-shadow-app-site" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2013-06-24 12:10:48" ["post_modified_gmt"]=> string(19) "2013-06-24 02:10:48" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(36) "http://www.webdirections.org/?p=4811" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } ["queried_object"]=> object(stdClass)#287 (12) { ["term_id"]=> int(14) ["name"]=> string(13) "visual design" ["slug"]=> string(13) "visual-design" ["term_group"]=> int(0) ["term_order"]=> string(1) "0" ["term_taxonomy_id"]=> int(14) ["taxonomy"]=> string(8) "post_tag" ["description"]=> string(0) "" ["parent"]=> int(0) ["count"]=> int(25) ["object_id"]=> int(3869) ["filter"]=> string(3) "raw" } ["queried_object_id"]=> int(14) }

Presentations about visual design

Podcasts, slides, videos and more

Design inspiration: the Shadow App site

This caught my eye a few weeks ago: it’s the site for an iPhone app to help you remember your dreams, called Shadow.

Things I like like: