Web Directions » visual design http://www.webdirections.org Just another WordPress weblog Fri, 27 Jan 2012 00:02:10 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Rahul Sen — Interaction Design Bauhaushttp://www.webdirections.org/resources/rahul-sen-interaction-design-bauhaus/ http://www.webdirections.org/resources/rahul-sen-interaction-design-bauhaus/#comments Tue, 08 Nov 2011 07:41:15 +0000 Guy Leech http://www.webdirections.org/?p=3788 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.

]]> 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

]]> http://www.webdirections.org/resources/rahul-sen-interaction-design-bauhaus/feed/ 0 Christopher Giffard — HTML5 Video, Captioning, and Timed Metadatahttp://www.webdirections.org/resources/christopher-giffard-html5-video-captioning-and-timed-metadata/ http://www.webdirections.org/resources/christopher-giffard-html5-video-captioning-and-timed-metadata/#comments Sun, 06 Nov 2011 23:15:46 +0000 Guy Leech http://www.webdirections.org/?p=3869 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!

]]> 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

]]> http://www.webdirections.org/resources/christopher-giffard-html5-video-captioning-and-timed-metadata/feed/ 0 Aaron Weyenberg — Getting Real: Pros and Pitfalls of Realistic UI Designhttp://www.webdirections.org/resources/aaron-weyenberg-getting-real-pros-and-pitfalls-of-realistic-ui-design-2/ http://www.webdirections.org/resources/aaron-weyenberg-getting-real-pros-and-pitfalls-of-realistic-ui-design-2/#comments Sun, 06 Nov 2011 10:10:52 +0000 Guy Leech http://www.webdirections.org/?p=3882 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.

]]> 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

]]> http://www.webdirections.org/resources/aaron-weyenberg-getting-real-pros-and-pitfalls-of-realistic-ui-design-2/feed/ 0 Greg Rewis — Move it! CSS3 Transitions and Animationshttp://www.webdirections.org/resources/greg-rewis-move-it-css3-transitions-and-animations/ http://www.webdirections.org/resources/greg-rewis-move-it-css3-transitions-and-animations/#comments Sat, 05 Nov 2011 22:37:38 +0000 Guy Leech http://www.webdirections.org/?p=3797 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.

]]> 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

]]> http://www.webdirections.org/resources/greg-rewis-move-it-css3-transitions-and-animations/feed/ 0 Lea Verou — Mastering CSS3 gradientshttp://www.webdirections.org/resources/lea-verou-mastering-css3-gradients/ http://www.webdirections.org/resources/lea-verou-mastering-css3-gradients/#comments Sat, 04 Jun 2011 08:14:13 +0000 Guy Leech http://www.webdirections.org/?p=3377 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.

]]> 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

]]> http://www.webdirections.org/resources/lea-verou-mastering-css3-gradients/feed/ 5 Brian Suda — Visualising Datahttp://www.webdirections.org/resources/brian-suda-visualising-data/ http://www.webdirections.org/resources/brian-suda-visualising-data/#comments Sat, 04 Jun 2011 07:59:46 +0000 Guy Leech http://www.webdirections.org/?p=3375 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.

]]> 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

]]> http://www.webdirections.org/resources/brian-suda-visualising-data/feed/ 2 Dave Balmer — Rockstar graphics with HTML5http://www.webdirections.org/resources/dave-balmer-rockstar-graphics-with-html5/ http://www.webdirections.org/resources/dave-balmer-rockstar-graphics-with-html5/#comments Sat, 04 Jun 2011 04:39:06 +0000 Guy Leech http://www.webdirections.org/?p=3348 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.

]]> 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

]]> http://www.webdirections.org/resources/dave-balmer-rockstar-graphics-with-html5/feed/ 2 Divya Manian — Creative CSS3http://www.webdirections.org/resources/divya-manian-creative-css3/ http://www.webdirections.org/resources/divya-manian-creative-css3/#comments Sun, 29 May 2011 00:13:24 +0000 Guy Leech http://www.webdirections.org/?p=3251 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.

]]> 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

]]> http://www.webdirections.org/resources/divya-manian-creative-css3/feed/ 0 Aaron Weyenberg — Realistic UI Designhttp://www.webdirections.org/resources/aaron-weyenberg-realistic-ui-design/ http://www.webdirections.org/resources/aaron-weyenberg-realistic-ui-design/#comments Sun, 29 May 2011 00:11:41 +0000 Guy Leech http://www.webdirections.org/?p=3273 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.

]]> 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

]]> http://www.webdirections.org/resources/aaron-weyenberg-realistic-ui-design/feed/ 0 Dave Balmer — HTML5 Graphics: Canvas Deep Divehttp://www.webdirections.org/resources/dave-balmer-html5-graphics-canvas-deep-dive/ http://www.webdirections.org/resources/dave-balmer-html5-graphics-canvas-deep-dive/#comments Sun, 29 May 2011 00:10:48 +0000 Guy Leech http://www.webdirections.org/?p=3280 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.

]]> 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

]]> http://www.webdirections.org/resources/dave-balmer-html5-graphics-canvas-deep-dive/feed/ 1