Daniel Slaughter

Chris Ruppel
Frontend Developer
Four Kitchens

Presentation Description

Chris Ruppel demonstrates some bleeding-edge creative concepts you can achieve using CSS3. Examples aren’t as practical as they are inspiring, showing off the possibilities of CSS3 and touching on components like animation, media queries, masks, transforms, transitions, filters, shaders, and 3D.

The audience should walk away with excitement, new awareness, and the desire to implement some of this awesome eye candy in a practical manner.

Presentation Note

We shouldn’t be calling it CSS3, as it is just CSS with modules. One of the modules just happens to be CSS2.1, which encompasses all of the existing styles.

Transforms

3D Transforms can be a little complex, but what is cool about them is they are inherited by their children just like other CSS properties.

Make sure to do all of your 3D Transforms with ems, as it will change monitor to monitor.

• Translate (moving on x, y, z)
• Rotate (x, y, z)

• transform-style
• perspective: an integer representing distance from camera, measured in px.
• perspective-origin: vanishing point of the perspective effect
• translate()
• rotate()
• backface-visibility: specifies if you can see this element when it is not facing you. A polygon traditionally in 3D rendering is off by default. However, with CSS3 they have enabled it by default.

Resources

• Presentation Slides on GetHub
• Presentation Slides Directly
• CSS3 Flip Cards
• CSS Filter Effects
• CodePen
• CSS 3D Clouds
• CSS3 First Person Shooter

Timothy Parcell
Manager Experience Design
SapientNitro

Presentation Description

A geek’s breakdown of the history of comic books and the parallels and principles to modern experience design.

From their shared roots in the 1930s and 40s, with Siegel and Shuster’s Superman ushering in a Golden Age and Chapanis and Fitts establishing the field of experience design through their efforts to redesign airplane cockpits to consider human factors through more modern milestones like Watchmen, Y: The Last Man, Dyson Vacuums and the iPhone, the two fields have helped shaped our culture.

And while Norman coined the term ‘user experience’ and Nielsen has educated many designers on usability, Lee, Kirby and Eisner can certainly give lessons that any experience designer can apply to their next project to make it more engaging and memorable.

Explore the worlds of the Uncanny X-Men, Spirit, Green Lantern, Zappos and Amazon.com to discover that while the mediums are different, the fun and design are not.

Presentation Notes

How do you define experience design? The craft of building lasting relationships between people and brands. Information Architecture, user experience, usability, research, etc. are all different parts.

Brand

A brand cannot just be a symbol and icon. It must as well have values behind it. What are the values of the brand itself, of the people who buy the brand, and how do we tie those two together?

Design

One image can say a lot to a person. When you talk about design, you need to talk about the medium. In terms of mediums with comics, it is paper. With the Hulk, original printing presses would skew the color of him so much that sometimes he would be gray, black, brown, etc. It wasn’t until later that they decided to make him his iconic Green.

Stories and Themes

In experience design you look at how to engage, and how you engage in design. Experience design extends beyond just web design, because you need to look at how people view your product. Stories have memory moments, such as “with great powers, comes great responsibilities.”

Audience

Film makes you a spectator. Comics make you a participant. Comic books were one of the first medias to publish feedback from users in the back of the comics. In the 1980s DC took it even further and opened up two 1-800 lines and asked if Robin should die in the end or not. Fans didn’t actually think that DC was going to follow through on it, but Robin died.

Today, typical comic book readers are 18-35 years old. We need to take that into consideration with who is our target audience. On a bell curve you can see that there are new people on one spectrum, and nerds on the other. Somewhere in between, the most users of Comics, are everyone else. You need to target your largest audience, but don’t neglect the new people or the nerds.

Scalability

How does a system grow over time? Not very often do we have something that just stays the same size. The first Green Lantern (1940) had a horrible costume. It wasn’t until the 1950s that a new Green Lantern look and feel was released (the most iconic). Change is risky. Change is colorful. Change is violent. Change is fast.

Continuity

Things kind of remain the same, starting with one point and slowly changing instead of completely starting over. What can I do where? Target your audiences for each medium, but try and keep a continuity between them all. What does the audience expect at any given time? You’ll want to attract to experts on the bell curve by giving them easter eggs. For  the new people you’ll want it to still be usable.

Epilogue

Everything in comics has to work, or else it fails. We need to know how our customers feel.

• Make your brand stand for something
• Get the details right
• Tell a great story
• Make it simple
• Make it for your audience
• Know your medium(s)
• Don’t be afraid to start over
• Have fun

Carley Knobloch
Founder
Digitwirl

Presentation Description

Werner Vogels
CTO
Amazon.com

Presentation Description

Today’s applications have the opportunity to reach a global audience, upset the status quo and transform entire industries. With the arrival of Amazon Web Services, on-demand access to compute, storage and database resources has removed the constraints to building sophisticated, scalable applications that delight and disrupt. In this keynote, join Amazon’s CTO to explore the new rules of application architecture that power resilient, adaptive, data-driven applications. We’ll discuss new patterns of architecting for lower cost, continuous deployment, and greater scale used by some of today’s hottest start-ups such as Pinterest, Animoto, Airbnb and Instagram.

Presentation Notes

In the old world mentality, all resources were constrained: capital, physics, capacity, people, geography, and scope.

When you look at an actual capacity chart of what is being used, you’ll see lots of use on the weekdays and very little on the weekends. In old world thinking you choose to have a little buffer of 15% over the top points, and thus you have a lot of waisted resources that are not being used. Furthermore, at the end of November it spikes even more, making it a loss of almost 76% of their old world server mentality.

The new world is completely unconstrained. What does that mean? It means you can start building architectures in ways you could have never done before. This idea is: secure, scalable, high performance, cost-effective, and fault tolerant.

Everything is now, that used to be physical, a programmable resource: data cents, networks, compute, storage, database, local.

In the past, most of architectural resources went into knowing that you were restricted by those efforts. Not only can you build them in terms of resources, but you can build them so they fail less frequently. The reason why most old world servers failed is because you cannot accurately measure what resources you’ll need when customers change their mind and/or give you outlying needs for server reliance.

The Commandments of 21st Century Architectures:

Controllable

Architect with cost in mind. Resources can change throughout the lifecycle of the project. Decompose into small, loosely coupled, stateless building blocks. If you want to build an architecture that can scale very fine-grained, you need to build the boxes smaller and smaller.

If you want to build new applications, you should leave behind the old world mentality, and start using the cloud as native cloud.

Automate your application and processes. If you actually have to SSH into your server to manage it, you’re doing it wrong. Let business levers control the system and manage what is happening to it. These tools will allow it to determine when it needs to scale up, and when they need to scale down.

Resistent

The most important thing, even before security reliability, is security. Integrate security into your application from the ground up. With the cloud in AWS, they give you very fine tools to be able to protect yourself in terms of security groups, identity access management, and RAID.

Don’t treat failure as an exception. Working hard to prevent failure costs you more resources. Deployment isn’t much different than a failure path.

Amazon rolls out a change into production, on average, once every 11 seconds.

Adaptive

Objects should not be replicated beyond necessity. Those solutions, where you make the least assumptions, are likely to be the most successful. One of the things in modern architecture is you assume nothing. If our world is no longer constrained about resources, we don’t need to make any assumptions.

Change your mind, often, whenever you want. Don’t be afraid to make mistakes.

Data Driven

Instead of having models about how the world works, you’re going to instead use exact data to drive your application. Focus on the whole distribution. What does that mean? If you look at a bell curve, and it is based on customer experience, that means that you have 50% of customers that are getting the worst experience. And with this, you need to know how much worse. If you can actually focus on this, and you can control it, you will do great.

Amazon.com doesn’t try to recommend you anything you haven’t already bought. However, if you haven’t every bought anything with them, then you can just display anything. With past customers, they compare your last 1500 purchases, which is very process intensive. That needs to be fast.

Put everything in logs so you can determine everything that has happened in times of failure and success.

Lastly…

Keep in mind that you can always just switch it all off. When you go home at night, and you’re in testing, just turn it off. There’s no need to run processes when nothing is happening on it.

Corey Chandler
Principal Interaction Designer
Deep Dive Design

Jorge Furuya Mariche
Lead UX Designer
HTC

Presentation Description

Richard Clarke
Managing Editor
Arsenal Media Group

Presentation Description

Official websites are now a major player in the sporting landscape. Sports teams now see themselves as media organizations – offering news that competes with more traditional outlets such as print and television. (And they both have enough problems as it is.)

I am the Managing Editor for one of the world’s most famous soccer clubs. Arsenal Football Club pride themselves on history, tradition and integrity as much as on-field success.

We have also developed highly-successful digital and social media strategies. Our numbers stack up alongside the most successful sporting franchises in the world.

We certainly engage with our fans. But, in the modern world, what form should that engagement take?

Is the ‘homer’ now transparent and irrelevant?

Or, in a digital world in which Twitter has lifted speculation, snap-judgment and bar-room debate (forever the currency of the sports fan) on to a higher plane, is it more important than ever?

That is the question I will explore.

Presentation Notes

How do you make an official site, such as a sports website, meet the demands of the digital age? At what point does an editorial draw the line at social media? With football fans, there isn’t any financial return, it’s not just engagement, it’s love for the game. They want immediate knowledge and data, and they want it now. Is Twitter the answer? How do we balance it correctly?

The position of the Optimist/Realist. We’ve already got the person who we’ll be writing for, but we’ll need a Balance between Cheerleading (hooray!) and Hardening (negative feedback). Optimist/Realist is somewhere between being Balanced and Cheerleading. If you, however, are in the middle like that then you’re lacking a certain amount of residence for those fans who want the Balanced approach. Taking a Balanced position over an Optimist/Realist approach seems better for Arsenal as that’s what the fans want.

First and Formost. Arsenal focuses on Formost as they aim to try and sign players on before it gets out on Twitter, and then be the ones who announce the update before it has begun to spread, but that hardly ever happens. They are the legitimating site, which confirms what really just happened. Thus, they are Formost.

Aaron Gustafson
Principal
Easy Designs LLC

Samantha Warren
Designer
Twitter

Steve Fisher
Dir of User Experience
Yellow Pencil

Yesenia Perez-Cruz
Designer
Happy Cog

Presentation Description

The web is not a fixed width. So if the medium is fluid, should the process be fixed? Fireworks and Photoshop are not flexible enough to demonstrate media queries, button and menu states, HTML5 and JavaScript behaviors, dynamic resizing of elements and navigation flow.

Diving into responsive design projects can be daunting. Old design practices are cumbersome when thinking in terms of web systems that will span a wide variety of devices and dimensions. Four industry leaders will delve into how they handle the responsive process or how they don’t. A fluid process to match the fluidity of responsive design. Bam! We’ll also explore some of recent successes and failures while establishing why a responsive process is a responsible process.

One web to rule them all?

Presentation Notes

The content should be available no matter what screen size, but just presented differently.

97% of devices were met with a responsive design.

Is responsive web design boring? No, if you’re using the same patterns over and over then you’re not thinking like a designer. It gives us the idea to redesign a process and get into patterns ourselves.

Responsive design gives us the availability to sit down, look at a system, and determine how it is different.

How do we show a wireframe to a client if it is to be responsive?

While Bootstrap and Frameworks are perfect for prototyping, they are becoming a crutch for doing simple things that damage bandwidth such as simple animations that could be done other ways. Using a framework can also make it feel like it is all the same as any other site in a framework (such as Bootstrap). However, on the other end of the argument at least the content is easy to access and see.

Style Tiles are good for companies that already have established brands. So, how do you communicate with those types of clients who already have that? It’s about creating deliverables in a fashion that you can quickly share and get feedback. mood-boards and comps also do this.

Implementing responsive design involves team participation. Two of the most important things for any team is to communicate, and to trust one another. Put both the designers and developers in the same room to create quick mock-ups and ideas for how things will/can function.

Resources

• Responsive Process
• Style Tiles
• Gather Content (brainstorming)
• Fisher’s Secret URL
• Foundation
• Interactive Style Tiles (example)
• One Size Fits None

Golden Krishna
Designer
Samsung Design America

Presentation Description

Many believe the future of design is in screens. They’re wrong. It’s time to kill the interface. Because when we think only in screens, we design based upon a model that is inherently unnatural, inhumane, and has diminishing returns. It requires a great deal of talent, money and time to make these systems somewhat usable, and after all that effort, the software can sadly, only improve with a complete overhaul.

This conversation will explore a better path: No UI. A design methodology that aims to produce a radically simple technological future without digital interfaces. In its most sophisticated form, it centers around learning about individuals, continuously improves and becomes exponentially pertinent. Eliminating counterintuitive input mechanisms for natural inputs inverts the contemporary focus of software design to have computers adapt for people, rather than people adapt for computers. The results can have a profound impact on our lives, and your design process.

Presentation Notes

There’s a terrible trend in tech today, and that is we’re getting away from solving people’s problems. What is so fascinating about this awful trend is that it started with something good. However, originally computers were all text base, and that wasn’t very good. Then we got GUI interfaces. Today, our love for the digital interface has gotten out of control. How do you build a better car? Slap a screen on it, and track things that are “more important” than your driving such as Twitter and Facebook.

User Experience (UX) is not a User Interface (UI). We are surrounded by screens, and we should start dreaming of a world with no screens. The best interface, is no interface.

Principals:

1. Embrace typical processes instead of a UI. Using one of the new smart phone apps to unlock a car-door is 12 steps. The user interface is 10 of those steps (step 1 is “Walk up to car” and step 12 is “Unlock the door”). We think, as a developer or user, that this is a good way to do it as that’s what we’ve gotten used to.
2. Leverage computers instead of catering to them. Computers should do things we don’t want them to do, but what they should do.
3. Create a system that adapts for individuals. We’re all unique.

Automatic solutions? They’re very hard to get right, but when you do get them right they become part of our lives. Some people are using UI as a backup. For instance, some hardware is allowing you to tweak features although the normal hardware is fine by itself. Such as an automatic door, which you can always push to open if it fails.

How can we think in this no-UI way? The real problem with the interface is that it is an interface.

NoInterface.com

BJ Fogg
Founder & Dir
Behavior Design Lab at Stanford University

Presentation Description

Over the last year, I’ve coached thousands of people in creating new habits.

Human behavior is not as complicated as most believe. And the received wisdom about habits is often wrong.

From my research and my hands-on practice, I’ll share key insights and surprises about how behavior works.

Presentation Notes

Persuasion Boot Camp

Typically two-days, Crash Course

Path vs. Span: If you set yourself up to do something you have to do day after day, you’re going to fail (path). It’s better to set a tiny goal (baby-steps) of just a few days, you’re more likely to complete your goal (span).

So, how can we get people to do things to get your company to become more successful? In order to have a successful company you have to be able to influence the things people do. We need to, however, be able to span goals down into baby-steps.

If changes are small enough, you don’t have to rely onto motivation.

Tiny Habits Method

Tiny Habits method If you can design your life to create Success Momentum, then you are on your way to achieving big things. Success Momentum is being able to complete little things, but then see that you’re completing a much bigger thing the more you do.

Whenever someone says “motivate behavior change” a red-flag should go off. It’s better to say “trigger behavior change” because behavior isn’t always about motivation. “The new you” is all about revolutionizing your life quickly, and this isn’t right. It is almost impossible to radically change yourself quickly.

You’re going to fail if your goal is to do 25 pushups each day. Your goal should be much smaller, such as 2. You’ll never create a habit if you’ve set it up to fail.

With the term “break a bad habit” the word “break” implies getting rid of it. The best thing to do would be to unsnarl it instead. BJ isn’t an expert in breaking bad habits, but instead he creates good behaviors. So, for instance, if you want to stop snacking, you should focus on the smallest snack you do (grabbing candy when you walk into the office) and then later focus on the more unhealthy snacks (like a snickers bar after lunch).

Priority Mapping

Write down specific behaviors each on different post-it. Then, prioritize them in two dimensions. Top to bottom would be at the top it promotes the business and/or is important (some can be on the same level). Then, after you finish that you do it with your teammates. You then sort them side-by-side as a feasibility rating.

Fogg Behavior Grid

If a university calls and gets a donation commitment of $10/year, compared to someone else who gets $1000 once, what one is more likely to donate more throughout their lifetime? The $1000 once will.

Get “crispy”: Have specific tangible goals. Don’t say “I will drink 8 glasses each day” but instead say “I will put a glass of water on my desk each morning.”

Baby steps are easy to achieve. Big Leaps are not. However, if your big leap is something enjoyable you may be just fine. But when it comes to things that hurt you, like lifting heavy weights, you’re setting yourself up to fail.

David Merkoski
Partner & Chief Designer
Greenstart

Presentation Description

Cleantech is dead. Investors have dropped out and entrepreneurs are more interested in making apps. What happened? Why didn’t the same spirit and capital that created the internet grow renewable energy and other “clean technologies” to scale? With 93% of the world’s fuel supply still coming from burning stuff we dig out of the ground – it’s a question that matters. So what do we do now?

David Merkoski, the former Executive Creative Director of frog design and current Chief Designer at Greenstart, has a plan to “bring sexy back” to cleantech by ultimately using design (service, product, brand and business) to fight climate change and blow apart our energy constraints. Join him for a look back at the mistakes made in the cleantech design track record, and leave with a vision of how we can design a cleaner world. Long live clean tech.

Presentation Notes

The problem with Cleantech is nothing has drastically happened as hoped within the last 10 years. The reason why it has been doing so poorly is because it failed to capture the imagination.

The Cleanweb: a term invoked last year at SXSW 2012. It’s the idea that software can potentially clean up the world. Cleantech is a collection of things, and Cleanweb is a connection of things. It is super critical as it is the hardware and software of the internet. The argument is that those services that gave us Facebook, etc. etc. has the potential to do this.

Cleantech is there, but until people are aware of its uses and actually start pro-actively pursuing saving the world, nothing is going to happen. That’s where Cleanweb comes in, as it’s our way as designers and developers to make innovative ideas to assist people with making the jump. We’ve been saying that simply turning off a light switch will save the world, but in all seriousness it wont. However, creating automation to turn off all lights in your entire house may. Think Cleanweb.