Awwwards Barcelona – Day 2

Mathias Bynes

JavaScript ♥ Unicode

Mind blowing”stuff”. Check more sane solutions at mths.be/regenerate or mths.be/node-unicode-data

A photo posted by Monica Messaggi Kaya (@monicakaya) on

My notes:

He is currently working at Opera.

Created evil.sh – a collection of various subtle and not-so-subtle shell tweaks that will slowly drive people insane (but maybe you could ignore that I even mention it – disclaimer: I won’t be held responsible if you go ahead an test his script! )

He gave amazing examples of things that simply don’t match and “suppose to” with explanations and some solutions to work around it. Be aware: this section is “link-heavy”:

http://mothereff.in/punycode is a tool that uses Punycode.js to convert domain names between Unicode and Punycode (ASCII).

Nice site with insights on javascript and “those very special irregularities, inconsistencies and just plain painfully unintuitive moments” of the language – wtfjs.com

  • Unicode standard varies from U+000000 to U+10FFFF possible symbols (not all used)
  • Basic Multilingual Plane (BMP) U+0000 to U+FFFF
  • The rest are “astral planes” (need at least 4 hexadecimal digits to represent)

ES6 uses brackets and uses the whole scope of unicode but this is not implemented in all browsers. The current solution uses surrogate pairs.

mths.be/punycode – library that counts the strings more accurately.

Now, in ES6, the string character count gets the correct number of chars, check how it works on mths.be/bmf

Countable.js – is a JavaScript library to add live paragraph-, word- and character-counting to an HTML element. It is a zero-dependency library and comes in at just about 1KB when minified and gzipped.

Check: http://mths.be/bed about JavaScript’s internal character encoding.

git.io/unorm – unicode normalization on ES6.

A Unicode-aware string reverser written in JavaScript – mths.be/esrever

Check: A robust & optimized ES3-compatible polyfill for the `String.prototype.at` proposal for ECMAScript 6/7 – mths.be/at

Create unicode-aware regular expressions – mths.be/regenerate and mths.be/node-unicode-data

A source code transpiler that enables the use of ES6 Unicode regular expressions in ES5 –  https://mths.be/regexpu   

The “Pile of Poo Test (TM)” – just use that symbol on your own unicode tests and check if it is returning what is expected or not.

  Complete article/slides at mths.be/jsu – the examples will blow your mind… @mathias 


Hvass And Hannibal

Collaboration – Making/Thinking/Illustrating Together

The story of Hvass&Hannibal and how we work with different materials and medias.

Amazing colourful and inspiring talk on design and illustrations by @HvassHannibal #AwwwardsBCN   A photo posted by Monica Messaggi Kaya (@monicakaya) on

My notes:

Working more on music industry, illustration and exploring textile and 3D spaces. Started as fun, playful, as friends and with illustrations on wall/bars, playful creations with costumes and the ‘smoking ring’ until an ‘official’ poster for school when they decided to create the studio.

She showed some of their work and they were very inspirational to me. The process was of a “ping-pong” where Hvass and Hannibal were working on each other’s drawings and building up their design together. Some very creative ideas, and some “simple” ideas that were just so well executed that created amazing effects. A few:

  • Working on “jungle theme” around and the illustrations got to furniture, aprons, plates, etc. Now using loads of MDF for creation and textiles.
  • Working with ribbons and dancing on a project (which was raining), working outside and on “the field’ is much harder… lots of try-and-error techniques, amazing efforts.
  • Sustainia Award 2012 – amazing work using glass design and materials for the awards. Glass layered with coloured glue.
  • Cover for “Ghost of a chance” – manual work and origami-style paper work for a photoshoot. She mentioned that looks graphical/computer design but was manual work!

Unsuccessful sketches can be a “panic database” for future projects.

  • Conference design, creating a more “human” conference, more tactile design props and elements, like cut shapes, wooden crate and boxes, hand painted chairs and hand-drawn name tags, posters, panels and decoration. including hanging elements cloud-shaped. Also using pallets for tables, boxes painted for stools, hand-tied name badges. Photo-booth with the props as well.
  • Design for children’s library. With shapes allowing characters creation, signs all with the playful arrangements of these shapes.

And many more amazing work can be found at their website: www.hvasshannibal.dk

Check also Stupid Studio – a graphic studio in Denmark that they worked with.

 


Jeremy Keith

Enhance!

We’re working on increasingly complex websites. There’s a temptation to match this growth with increasingly complex solutions. But there’s a real value in keeping things simple…or at least _starting_ things simple. If you can build a solid robust foundation, there’s a good chance that your work will be future-friendly. Prepare to have your brain subtly rewired as we look beneath the surface-level implementation details of the web to reveal the semantic structure below. Whether you’re publishing content or building the latest hot app, the principle of progressive enhancement will change the way you think about your work.

My notes:

Rewiring the brain…. the double meh, Fedex arrow, Toblerone bear, Ducks wearing dog masks – this last one I will never forget… take a look:

OMG! Ducks wearing dog masks!

The moment you realise all ducks are wearing dog masks…

Remember the Dao of Web Design by John Allsopp – more relevant now than it was then.

Tapping into the Zen Garden to remind us of the separation of structure and presentation.

Progressive enhancement as well: HTML  > CSS  > Javascript

Shearing layers on architecture/building, where all layers are dependent on the one before.

HTML is fault tolerant, not throwing errors if tags not closed or not understood. He suggests to be structurally honest

don’t use a <div> or a <span> to represent a button, use a <button>!

CSS is also fault tolerant, it won’t stop parsing or showing content, just without style…

Javascript is not fault tolerant (it will throw errors), use safe defaults, but do not rely on them.

In the web front-end stack – HTML, CSS, Javascript and Aria – if you can solve a problem with a simpler solution lower in the stack, you should. It’s less fragile and it will just work.

Suggests: ember first then angular and then backbone.

“No one wants to think that what they’re doing is trivial” – John Resig

He sees a problem with the phrasing of “the web platform”. It is not a platform… if you have iOS and I’m serving an iOS app you get 100%, if you don’t have an iOS device you don’t get anything, but if you are developing for the web “anyone” can get your content if it is on the web (even using devices in other platforms).

Do websites need to look exactly the same in every browser? Answer: dowebsitesneedtolookexactlythesameineverybrowser.com

BBC – cutting the mustard, supporting FEATURES not which browsers type/version… If a feature is supported then you can get the enhanced version.

“Cutting the mustard” checking for features! If supported, then get enhancement. #AwwwardsBCN

A photo posted by Monica Messaggi Kaya (@monicakaya) on

@adactio


Henry Daubrez

No guts, No glory

We are Dogstudio and we come from Belgium. Well, not especially the place you would dream of to grow a digital agency, isn’t it ? You’ve got to grow a pair, dream big, fail bigger and trust your guts. This is our everyday guide on how being weird, integrating research & development, personal projects and taking bold decisions got us to look into whole new perspectives.

My notes:

DogStudio does loads of amazing projects, from printing, web, 3D printing, light installation (and ‘weird stuff’), animation, etc.

A few of the projects they showcased (can we even flex this noun as a verb?)

Keep the creative juices flowing (yeah, sounds naughty)

  • Gifcup website loads of visits in 24hs (had to be taken down)
  • Waterloo battle

You need to know what you are doing, without inspiration and creativity an immense budget won’t help

They use lots of videos, nice imagery, effects, sound effects.

Project cycle: rising up your team’s skills > higher expectations > high quality > better project > repeat.

“50% of a remarkable experience lies in the details.”

Live by your vision. Trust your guts. Aim for quality. Party like there’s no tomorrow

@benguedj Benjamin Guedj – @sarrimaxime Maxime Sarri

Amazing super production of sites by Dogstudio… *NEED* to check their website: http://www.dogstudio.be


Divya Manian

Responsive Design: Current State of Affairs and Where do we go from here?

In this talk learn about what we mean by Responsive Design, the workflows around responsive design that exist today, the problems that we have noticed amongst the current workflows and how we are addressing them at Adobe.

My notes:

Product manager at Adobe – her main focus lie in new features on Photoshop to help people on responsive design.

Design decisions outside of canvas…

The researched showed that people were not satisfied with workflows, they wanted to use tools they already have (not learn another), they didn’t like updating tools, there was an increasing collaboration, but lack of tools for collaboration.

The clients don’t really know what is responsive design, they feel hard to keep pace with changing browser feature set, tedious to update design for different devices.

She advocates to determine where the design breaks, determine the breakpoints and prototype for them.

Implementing the design – use same grid as prototype, inventory features you will use, use responsive frameworks.

Check site: html5 please – use the new and shiny responsibly

RD is necessary for websites and data agrees.

OMG! she did all slides in Photoshop! check this: adobe.ly/1CveCdj (didn’t work much for me though… 🙁 )

@divya – manian@adobe.com


Ricardo Cabello & Jaume Sanchez

The Web in the age of WebGL

In just three years after its conception, WebGL has emerged as the de facto technology for creating web experiences and it is now supported by all the major browser vendors. During this presentation, Jaume and Ricardo will talk about the possibilities the technology brings to the table while sharing the process of developing some of their projects, giving a comprehensive overview of their current workflow and toolsets.

My notes:

WebGL vs Stage3D (Adobe)

Project 3 Dreams of black – http://ro.me (2011) – code now on github.com/dataarts/3-dreams-of-black

Unity or Blender? They actually used Maya for many of their projects…

Check threejs.org – Three.js is a library that makes WebGL – 3D in the browser – easy to use. While a simple cube in raw WebGL would turn out hundreds of lines of Javascript and shader code, a Three.js equivalent is only a fraction of that.

Google maps cube game – started using Maya – from .OBJ converted to .js

Example (very summarised) of workflow for the project Wind&Sun (2013): they used Maya again, but terrain and repeatable objects in Collada. Then review and fix meshes (CSI Models) then optimise and output to binary, finally webgl engine with camera edits.

Gravity (2013) – website for the movie – assets from movie > siplify meshes > preview assets > camera edits

WebVR – Oculus/Cardboard devices – mozvr.com

SmartWater experience http://drinksmartwater.com/#/explore-the-sky

@mrdoob / @thespite


David Navarro & Claudio Guglieri

Where we’re going we don’t need roads

It’s freaking hard to predict the future. Will there be flying cars? Flying skateboards? Self-drying jackets? What can we learn from movies about how the future is going to be? In this talk we will explore what we can learn from the big screen and how that can be applied to our daily jobs with the internet. As digital designers what we do today will have consequences tomorrow, it’s a great power that comes with a great responsibility.

My notes:

Digital interfaces in movies, touch screens, interactions everywhere. Example of Back to the Future II – the date on the display is this year!

The presentation is full of movie clips, frames, images that exemplify all these interfaces that we had contact on a movie (possibly first) and slowly becoming real (or already here!).

Movie references: Matrix revolutions, Avatar, Her, Back to the future, Minority report, War games, Blade Runner, AI, Knight rider, 2001 (Hal), Star Wars, Pacific Rim

Speech – voice interactions bring machines close to us

Movies: I robot, Time Machine, Minority report (store), Moon

Visual

Hendo Hoverboard (a la McFly!)

Touch – the tactile, the feeling

Movies: Strange Days, Metropolis, StarTrek (original series), Next Generation (surfaces), Sleeper, Jonny Mnemonic – feedback on wrong password.

bradfrost.com (right now I don’t remember why Brad Frost was mentioned… maybe about Atomic Design?)

Glass tables, glass tablets, surfaces where you put the hand and options appear.

Feelings/Emotions

Movies: I robot, A.I., Black mirror (smart houses), Minority report (delivering content according to emotional states).

“Future is design agnostic”

Note to self: check “Black Mirror” on Netflix (mentioned twice on the presentation…)

Augmented reality

Holograms – projected in public spaces

Holograms – private spaces

“the human body is the next computer interface” – Fjord on FastCoDesign

Possible future job descriptions?

  • Brain director
  • Augmented Reality Interior Design
  • and so many others fun to hear…

@davidnavarro and @claudioguglieri

(if you know where they added their slides, please share on twitter and send me a note @monicams)


 

Conference site http://conference.awwwards.com/