Awwwards conference - first day highlights

We had the chance to attend the Awwwards conference this year - a great event about web design. This the first post of a two day series. You can find the second day highlights here.

Awwwards Conference 2015

Awwwards is an organisation that aims to recognise and share the most inspiring projects around the world. It consists of a talented jury who promotes projects with awards for different web design categories. Every year they host a conference with different talks and a prize-giving ceremony.

This year the conference was held in the beautiful Barcelona.

Some talk highlights of the first day below.

Real artists ship

Haraldur Thorleifsson (@hthorleifsson)

Our friend “Halli” started the presentation by asking all designers in the room who had a good project but that actually never been shipped. Many hands were raised and the point of the talk was made.

“Photoshop is like a fake world that we create for ourselves.”

Hali recommends following a set of principles for delivering good design work:

  • Understand the problem
  • Create your own wireframes
  • Photoshop lies
  • Only deal with decision makers

Responsive images

Bruce Lawson (@brucel)

Bruce provided a humorous talk on the technical subject of responsive images.

“Safari is the North Korea of browsers. They don’t usually say what they are working on.”

Responsive initially meant quick to react. Speed is part of responsive. Images are the most part of the website and they are not inadequately responsive.

He emphasised the importance of keeping the responsive images solution in the HTML instead of Javascript.

One example was Opera Mini browser, where the user can actually turn on a setting to get low quality images. That could probably fail for websites with images relying on some Javascript logic.

A browser knows things that you as a developer can’t possible know.

Decoding and de-compressing images takes previous time in all browsers and so it’s important that user gets the correct image size.

There a few updates on responsive images being shipped to some browsers lately: <picture>, srcset, sizes.

Side Projects are Stupid

Tobias Van Schneider (@schneidertobias)

Tobias encourages having side projects and the importance of keeping them simple.

“Side projects are stupid because they have to be simple.”

He shares his five principles on taking on a side project:

  1. Keep It Simple Stupid (KISS)
  2. Ignore everybody
  3. Trust your gut
  4. Being a jack of all trades
  5. Stay busy
 Some projects were being shown that were “stupid” but that actually gave a lot of experience while doing it. Having no clear plan on an idea can end paying off in the long run.

Doing something just to make people laugh can also work as a good project goal.

Empathy

Meagan Fisher (@HvassHannibal)

Meagan spoke of the importance of Empathy on design. How to consider the user feelings when designing something.

“Make sure to get close to your users and use it as an ongoing part of your process.”

Real human needs are the most valuable constraint we have.

An experiment was made with Coca-cola back in the days where they have added more salt, sugar and caffeine in their old recipe expecting to increase sales. It did not. People got furious about changing their more-than-one-hundred-year-old taste and protested.

Don’t fail to consider what yours users want. Coke did not understand the deep emotions of so many of their customers and so their old Coke taste came back.

Ask the users if they want it new before doing it. Users are not that tolerant to changes.

It’s important to meet users and have meaningful conversations with them. Make sure to get close to them and use it as an ongoing part of your process. Get feedback when they use your product and when they leave it.

Be personal and try to connect with your users in a more emotional level.

Designing with Chrome DevTools

Paul Bakaus (@pbakaus)

In one of the most interesting talks of the day, Paul Kabaus from Google shared some features that are coming to Chrome DevTools soon.

“The first rule of upcoming features is to not talk about upcoming features.”

Paul mentioned that DevTools team has been trying to be ahead of the trend curve and haven’t succeeded until now.

It looks like they finally reached that point of staying ahead with some DevTools animations features. The animations panel is a great step ahead and it caused some applauses and gasps from the audience when it was showed some new features.

You will soon be able to slow down animations, change their easing with a nice inline bezier-curve visualisation tool and even review all the properties that are being animated in a nice timeline frame-by-frame fashion.

DevTools is actually an open source project and Paul asked for feedback if somebody ever got an idea that would like to share.

Finally, the DevTools team just got themselves a designer for the first time and that is exciting news as we can expect the DevTools to look more user friendly and have a better look and feel. @maxwkr is the new designer dedicated to DevTools.

The DevTools team (with it’s new designer) is focusing on keeping the interface more usable by adding more “SCRIM” to it:

  • Smart
  • Colorful
  • Responsive
  • Intuitive
  • Material

Other talks of the day:

A tomato, a picture, an elephant and a bunch of jugglers

AQuest (@id_aquest)

AQuest impressive slides were showing how they tell stories through their projects. Very inspiring work.

Responsive Web Design: Clever Tips and Techniques

Vitaly Friedman (@smashingmag)

Some tips and tricks on Responsive Web Design and how Vitaly approaches performance budget with his clients. Recommended reading: Improving Smashing Magazine’s Performance: A Case Study

Responsive Web Typography

Marko Dugonjić (@markodugonjic)

Marko shared some tips on responsive typography that goes beyond changing sizes on breakpoints. He mentioned how we should be aware of the reading distance from the device, letter and word spacing and how we can influence a better reading experience. You can find the slides on Speaker Deck.

Betting on the Web to #Win

Phil Hawksworth (@philhawksworth)

Phil shared a great talk with some exccelent slides on how we are going forward with the web. Interesting examples and concepts from the past to the present and how we are keeping up with all the trends and innovation changes.

You can also find a nice set of curated tweets about the conference by doing a search on our Twitter account @14islands #AwwwardsBCN

Write a comment

Keep me posted!