Design Track | Web Directions Unplugged

Design Track

Relly Annett-Baker has a content strategy for your app; Juliette Melton goes mobile with user research; Stephanie (Sullivan) Rewis is moving it with CSS3 transitions and animations; Aaron Weyenberg knows the perils of realistic UI design; Rachel Hinman looks at mobile prototyping essentials; Dan Saffer tackles the top ten issues for touchscreen design; and Divya Manian is very creative with CSS3.

Top Ten Things To Tackle Touchscreens

Designing for Fingers and Hands

Presenter: Dan Saffer

The average size of an adult human’s finger pad is 10-14mm. The average size of a cursor or stylus tip is 1-2mm. That fact alone means that designing native touchscreen apps is an entirely different thing than designing web, desktop, or even traditional mobile apps. This talk outlines the most important concepts, guidelines, and practices to keep in mind when designing with fingers and hands in mind. We’ll cover interaction zones (where it’s easiest for fingers to reach), touch targets (size and distance apart), kinesiology (how fingers can bend, move, and stretch), and signaling (how users can become aware of gestures).

Move it! CSS3 Transitions and Animations

It’s all about the movement, baby!

Presenter: Stephanie (Sullivan) Rewis

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.

Realistic UI Design – the good, the bad and the ugly

Do’s and Don’ts

Presenter: Aaron Weyenberg

A new generation of touch devices have proven to be exciting playgrounds for application designers. And with every new product we create, we have the opportunity to offer the most cogent and efficient experience for our users. Recent UI trends often lean to realistic, faithful representations of analog controls. Realistic designs can offer advantages, but can contain their own set of hazards. In this session, Aaron leads you on a tour of current design practices (the good, the bad and the ugly) and shares his pragmatic advice on creating effective interfaces.

Mobile Prototyping Essentials

Tools, methods and techniques for Prolific Prototyping

Presenter: Rachel Hinman

We’ve heard it all before… prototype, prototype, prototype. It’s a standard step in almost any design process — but often the first step skipped in time and budget constrained projects. While prototyping is considered a standard step in any UX design process, it is an *essential* part of the mobile UX process. This talk will outline why prototyping is essential to part of the mobile UX process and how prolific prototyping is a necessary step for designers keen to grow the ruthless editing skills necessary to craft successful mobile experiences. This talk will also cover common and uncommon mobile prototyping tools, methods and techniques that you can apply to your project work.

Bring your apps to life with CSS3 magic

Make your web apps really sing

Presenter: Divya Manian

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.

You had me at “signup”- Content Strategy for Apps

Creating fulfilling mobile apps with a few well-chosen words

Presenter: Relly Annett-Baker

Dear app makers,

I love the stuff you have been putting out recently. Supercool maps, guides, syncing and such make my day. There’s just one little thing. As a content strategist and writer, I’ve noticed that some of your instructions aren’t as clear as they could be. The experience is not as fulfilling as it might be. I know this might not be your favourite part of the process. In fact, they are probably the bits chucked in to get it out the door. And so I have created a session to help ease the pain.

I have a framework for you to build on to make sure that your next app is as pithy as it is pretty and elegant to use as it is coded. I’ll even bring a whole virtual suitcase of apps with fantastic snippets of microcopy to inspire you. It’s a pretty simple concept and it’s a bunch of fun to work on, running alongside your app development.

In one sentence: it’s about creating a fulfilling experience, one that puts you ahead of your competition, simply through the power of the written word.

Mobile User Experience Research

What’s New? What’s Next?

Presenter: Juliette Melton

Most user experience research takes place sitting behind a computer. And yet these days, most networked experiences are happening on mobile devices. Some common user experience research methods work well in a mobile environment — others don’t. In this talk, Juliette Melton will guide you through how to use some great existing research methods in a mobile context, how to incorporate some new (and fun!) methods into your arsenal, and propose next generation tools and services to make mobile user experience research even better.

Images:

The images are downsized due to limited space here. The original dimensions may differ.
Click on the image to open it on a new tab.