The nature of consumer experiences are changing. A great product or service is no longer just defined by a singular iconic design. A great experience is one that allows others to participate in its development, to add to it, to change it and to extend its uses. To be successful at a large scale, designers need to consider the opportunities for an ecosystem to emerge around their experiences.

But how do you grow a community around a product, around a service, around the whole experience? How do you design to allows the community to build on it and make it their own? Drawing on recent experience building a new mobile ecosystem, this session will illustrate new approaches for experience design that encourage community participation and methods for attracting a community to your product and services.

Be prepared for a three hour super fast, fully intense Masterclass on how to build cross-device apps using JS/HTML5 and CSS3.

We will touch the "frameworks" and pick backbone.js, look at stuff like less, use PhoneGap as our wrapper for targeting app-stores, will look at setting up mobile architectures and finally piece it all together using apparat.io.

It will be useful if you have JavaScript knowledge, but you can follow this Masterclass also without deep knowledge and take the material as your points of reference.

Get ready for some mobile action!

The mobile industry is moving from one extreme into another (WebOS anyone?) and if you are not betting on the safe horses called iOS and Android it is hard to know what other platform is a viable option today. In this talk Nikolai will give you an insight into the current state of developing mobile cross-platform apps with JavaScript, HTML5 and CSS3.

He will cover the mobile toolchain, existing platforms, show you how you can approach mobile testing, explore the different JavaScript libraries and show different concepts of designing architectures which work on several platforms.

After this talk you will have a clear overview of the current state of the mobile web and have concrete tools at your hand to get started or to take existing projects to the next level.

As we journey through life we are moulded into various experiences and influenced by design around us. What makes us click "buy" on one website compared to another? What small design details can we add to truly enhance our design for positive benefits? How can design shape our everyday interactions without us realising? Sarah will serve up a large helping of practical UI advice for both mobile and the web, through her experiences as a User Interface Designer.

Craftsmanship and communication are at the heart of everything we do on the web. With our ability to understand and overcome challenges, we should deliver engaging experiences without compromising our integrity or failing the end user. Still, we're often naive and we make the same mistakes over and over. We get hung up on our tools and confuse our goals. It's time to think and talk smarter, get our priorities straight, and learn from our mistakes.

The web is evolving. Fast. As designers working in this volatile medium we face a challenge to deliver solutions for a 'fluid web', one in which our content is consumed across a growing range of devices, all with different characteristics. At first glance this challenge can appear overwhelming, however, by marrying fundamental web standards with timeless design principles, we can create beautifully designed user experiences that not only stand the test of time, but deliver regardless of context.

While many designers are familiar with fonts, many don't understand the difference between lettering and type. Through examples of her own work and the work of typeface designers, Jessica outlines the differences between lettering and type, when each is appropriate, and why all graphic designers owe type designers a bottle of champagne.

With the introduction of the <canvas> element into the wonderful and magical world of HTML5, we now have a drawing API that can help us create experiences that we imagine and make them real on the web.

In this master class you will:

• See examples of fun <canvas> apps ranging from casual games to data visualizations.
• Learn the fundamentals of <canvas> and how to manipulate it with JavaScript.
• Compare <canvas> with its cute sister <svg>.
• Learn the fundamentals of game and animation mechanics.
• Find best practices and real-world lessons in <canvas> performance and how to stay away from anti-patterns.

Today in web layout there is a pull between what is practical, what we want, and what works. We are barraged with a variety of layout technologies in CSS3 including Grid Alignment, Media Queries, Multi-column, Positioned Floats, "Flexbox" and more. We are excited by all the opportunities but what are our options and how does this all come together especially in a world of various devices and browser support? This session will discuss the various alternatives as well as how to think about how they can work together to build a flexible and simple layout.

Every day we make thousands of small decisions. We like to think that these decisions are conscious and rational. However, the latest advances in cognitive psychology, behavioral economics and neuroscience show that this is often not the case. In this session Andy will look at some of the most common "cognitive biases" and how concepts of trust, reciprocity, social proof and liking are used by sales people and marketers around the world to persuade people to do their bidding.

Using examples ranging from architecture to menu design, Andy will show how these time honored techniques can be employed on the web. The result is not only a site that looks good and is free of usability errors, it's a site that's designed around the way we think and optimized for the maximum return on investment to know to become a master in online persuasion.

Sketching is a great tool for designers to understand problems, to explore design solutions and to communicate their thinking to clients and colleagues.

This Masterclass gives an introduction to basic sketching principles and explains how you can use sketching to structure problems and to communicate ideas. We'll look at how to approach sketching objects and people by combining simple shapes and how to use simple techniques to improve the clarity of your sketches.

The Masterclass will encourage and enable you to add sketching as a tool to your daily work and build up confidence in thinking, designing and communicating with pen and paper.

The Masterclass is a mixture of explanations and live sketching demonstration for you to sketch along as well as some simple and fun exercises to practice the explained principles.

Sketchnotes are a way of capturing ideas in an engaging and visual way by combining the power of sketching and writing.

Sketchnotes are not new – artists and designers have captured their thoughts in a visual way for centuries – but recently, there has been quite a bit of interest and activity around sketchnotes and visual thinking in general in the web and UX community.

This talk gives an introduction to visual note taking by presenting the main characteristics that make it a great tool for designers (and anybody else) to capture their thoughts. It explains why this form of note taking is a wonderful opportunity for designers to practice and refine all sorts of important skills for our profession.

By showing and analyzing lots of examples from different sketchnoters and through tips from personal experience, this talk provides attendants with the main principles and building blocks of sketchnotes as well as lots of inspiration to jump straight into taking their own visual notes at FRONTEND 2011.

This hands-on session will cover a number of low cost, yet powerful research methods to help you make better data-driven design decisions. We'll provide a number of techniques for recruiting research participants, creating better research questions, and what to do with your data once you've conducted your research.

Topics covered in this Masterclass:

• How to sell guerrilla research into a project from the start
• How to recruit better participants
• How to form better research questions
• A number of inexpensive, quick, but highly effective research methods when time and/or budget are limited
• Valuable "how-tos" to execute the research

Questions answered in this Masterclass:

• How do I get my boss or client to buy into doing research for my project?
• What is guerrilla research and how is it different than traditional research?
• What are some guerrilla research methods and what kind of results can I expect?
• How do I pick the right method(s)?
• What's the downside/shortcoming of guerrilla research methods compared to other research methods?

Get a behind the scenes look at the design process used by four different UX designers, all working to solve the exact same problem with the exact same set of requirements. We'll identify the right way–for you–to wireframe.

This session will provide an in-depth behind the scenes look at the process behind the design, including: research, information architecture, interaction design, wireframing/prototyping and visual design. The presentation will conclude with a time-lapse video of the entire process from start to finish and a comparative view of the similarities in the processes that each designer uses.

Topics covered in this Masterclass:

• Drawing easy-to-understand diagrams eplaining flash exposure and the inverse square law
• Shooting live portraits demonstrating real world examples (via Lightroom's tether or HDMI to HDMI compat projector)
• Talking about the basics of one-light portraiture
• Lending advice on inexpensive solutions to making the jump into creating your own lighting kit

Learn to build, extend, and develop with Ender - JavaScript's best open module framework.

In this session Dustin Diaz will cover:

• understanding the shift from large monolithic frameworks to small modular components
• learn how to implement a commonJS module for optimal portability
• write fast, direct, and to-the-point code avoiding software cruft and bloat

By now most of you know how to use the popular new CSS3 features in your stylesheets, like embedding custom fonts or creating rounded corners, drop shadows, and scalable designs with media queries. However, below the surface, there are many other things that CSS3 brings and most web developers have never heard of.

In this talk Lea will present many CSS3 features that are useful but underrated, as well as uncommon ways of utilizing the CSS3 features you already know about, in order to do much more with even less images and code.

As designers, we tend to get distracted by aesthetics of our designs, and often do not pay enough attention to the other, invisible side of our creations.

This talk discusses the value of functionality, storytelling and thorough editorial work in Web. It argues about the significance of purpose, context and quality in our decisions. It also provides personal insights and practical examples of invisible design being used in practice.

Changes to the user experience can be costly if you are already in the development cycle. Storyboarding your ideas early allows for scrappy experimentation on what's really important to your customer.

At Intuit, Joseph uses a variety of storyboarding methods allowing him and his team to test ideas with customers before spending time developing code – the result is a history of millions of satisfied customers.

In this hands-on session, you'll practice expressing your ideas with storyboards to elicit valuable feedback from your most valued customers. He'll share his experience iterating on ideas with lightning speed to uncover what works, what doesn't, and what will truly delights customers (hint: it's usually not your first idea). Come ready to get your hands dirty.

Note: Lack of drawing ability is a plus.

A few years ago, the financial management software company Intuit began seeing flattening growth and declining net promoter scores. The company founder and leadership commenced a company wide call to arms regarding innovation.

The issue — this call from the top was expressed through powerpoint and no road to action. Fast forward four years, the innovation pipeline is bursting, net promoter scores are rising, and Intuit posted one of its best years in a global economic downturn. So, what happened? A small group of employees started a bottom's up revolution leveraging many existing company execution levers and subsequently changed a culture. Design Director, Joseph O'Sullivan will discuss the experience and lessons learned.

Though we've barely even had time to get used to Webfonts, the next big challenge is already looming on the horizon for font users and manufacturers: fonts for mobile devices. As with Webfonts, which have already become practically indispensable, there are a myriad of special considerations involved, including technical matters and, more importantly, legal issues that need to be addressed by the industry.

Are you even aware that it's basically impossible to use professional fonts in any kind of mobile apps? This presentation aims to sensitize developers to this dicey topic and to introduce possibilities for secure embedding of mobile fonts. As an extra treat, this talk will also feature an overview of the current state of affairs in the world of Webfonts.

A lot of very popular web applications allow access to their API via JavaScript. This masterclass will go over how to create the AJAX calls to get content, how to read the documentation provided, security, what to do with your JSON objects, and how to organize your content.

JavaScript is the cornerstone of a good foundation as a web applications developer. As today's apps get more complex, and more logic migrates client side, the need for Object Oriented Javascript has grown.

This session will cover when to use JavaScript objects, and how to build them using common design patterns. Also, we will be learning about polymorphism, encapsulation, inheritance, constructors, and helper functions using the JQuery library.

We will be using object oriented JavaScript to work with web APIs do display content in a web sandbox in order to illustrate how much it improves developer experience and readability.

Wireframes are great for turning ideas into concepts. They help us to think about important user experience aspects upfront. We can lay out and test-drive something in almost no time. We can gather feedback and iterate and even go agile. But here is something we can't do with wireframes: wireframes can't deliver the whole experience because that's a work in progress distilling over time.

This talk is not about wireframes, although it's not guaranteed you won't have to see some. This talk is about how to identify and create touch points throughout your service. Wolf will lay out different approaches on how to incorporate your communication concept into your app or website, discuss best-practice examples and provide insights from the latest application redesign he was going through. You should walk away from this talk with a flair for transforming your visitors into customers and a better understanding of the magic behind turning a like into love.

You've been a web designer for years now. You've got your own way of working and you're happy with it, but then some "guru" comes along and tells you you've got to learn a new technique.

First you had to ditch tables for CSS, then you had to make your sites accessible, and now it's "Responsive Web Design". Can you honestly be bothered?

In this hands-on session you'll learn how you can easily adapt you current design process to responsive web design, the one line of CSS code you need to know to make that happen, and how RWD can actually take away your Internet Explorer nightmares!

Adaptive design is the talk of the web design town, but how does it affect your design process and how can you use it on a day-to-day basis? Rich will cover the basics of adaptive design and talk about how you can integrate it into your existing web design process.