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/

Awwwards Barcelona – Day 1

Awwwards Barcelona - Great event, inspirational talks and projects.

Conference venue was easy to find from my hotel, it was a building with nice clean lines and staff was very helpful. Coffee was nice and strong, despite coming from Nespresso machine.

Swags were sooo nice!

Awwwasome swags! The “100% brain food” is packed with case studies! #AwwwardsBCN

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

Book of use cases and a nice notebook with some tips of places to see in Barcelona.

Great  fun welcoming talk from Josh Holmes @joshholmes, including raising the near fire alarm (none visible inside auditorium), no tweets and no selfies with firemen and/or fire before the fire is completely out.

So, here come the notes…


Haraldur Thorleifsson

Real artists ship

Designing something nice in photoshop is easy. Designing something that solves the business problem, gets through the multiple stakeholders, looks nice and eventually launches is a lot harder.

My notes:

Designers have loads of sketches, ideas, mocks, prototypes created but all sitting in cloud/drive without being published. Company UENO. How they setup rules to avoid lost projects…

Haraldur is from Iceland and he says that most people there are generalists, not specialists. There’s usually a small team and one man does-it-all is the designer.

His suggestions:

  • Understand the project (don’t start with UI)
  • Stop pitching (too early in project to do any pitch, understand the business first)
  • Create your own wireframes (they use a ‘flat design turned gray’ to communicate and build trust and work on concepts and ideas) – showed sample for Dropbox user/admin guide.
  • “A prototype is worth a thousand meetings”
  • Photoshop lies (easy to create something beautiful, perfect, but not real)
  • From idea to launch (ask the client how they think they will bring the idea to solution)
  • Only deal with decision makers (clause on contract: “if you want to have an opinion you have to be in the meeting”)

A few examples of work: Dropbox user guide, Medium design, Google Santa tracker, Reuters TV app (video cast) @hthorleifsson – http://haraldurthorleifsson.com/


Bruce Lawson

<picture> and responsive images

Amaze your friends, confound your enemies! Oh, and save bandwidth and speed up your site by sending the correctly-sized images for the device with HTML’s new responsive images capabilities. Bruce proposed the new <picture> element in 2011, and it’s just gone live in Opera, Chrome and Firefox, so learn all about it now and put the techniques live tomorrow.

Fairy magic that works in browser! NOW all makes sense! #AwwwardsBCN @brucel

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

My notes:

<picture> tag and attributes Images are big and getting bigger, and not responsive properly. 3 years ago, retina images would be served no matter what, now you can serve the correct image size for each device.

Steve Souders, the “Galdalf” of performance said that:

preloading is the single biggest performance improvement bowsers can make

Media queries for video already existed and worked, so, @brucel and responsiveimages.org worked with the <picture>

Serving hi-resolution images properly – the only way to work is via the srcset, example:

<img src="'normal.jpg&quot;" srcset="hi-res.jpg 2x, super-res.jpg 3x" alt="desc here" />

Serving ‘stretchy’ images:
<img src="medium.png" srcset="big.png 960w, small.png 240w" alt="desc" />

Different widths but showing with the size of 100% of the viewport. Order of the media queries matters, the first to satisfy the requirements ‘wins’. You need the <img> as last option of the <picture> to carry on with fallback to other browsers.
  
  <img src="tree.jpg" alt="tree" />


Check his slides at: http://brucelawson.github.io/talks/2015/awwwards/ – @brucel


Tobias van Schneider

Side Projects are Stupid

Exploring the world of side projects and particularly why I believe side projects are stupid. The talk will bring light into this mystery.

My notes:

Tobias mentioned that side projects have to follow the KISS principle.

General concerns we have: not enough time, fear of failure, overthink, not the right moment, have kids and family, have to pay the bills, have to do research first, and all other excuses…

“The best way to complain, is to make things”. – James Murphy

A few of his projects:

  • Authentic weather app (simple, funny phrases, etc.)
  • Soundslike festival 2010 – open air festival – learning curve, not knowing about the process and all that was required.
  • Les Avignon project, one of the members setup screenprinting for t-shirts, then tried out the long boards (‘it was just a stupid idea that received amazing feedback and could potentially turn to business’)
  • His favourite project was Reflections, photographing reflections of these square glass objects and making artwork/prints/postcards. Playing with elements/objects and being creative without actually having an initial goal.
  • 2D flat surface shader
  • Semplice – Semplice is the first fully responsive case study portfolio system based on WordPress. Built by designers’, for designers’.
  • Projects can also appear out of a simple personal motivation: make people laugh, example:  PaP – Passive aggressive password machine
  • .Mail – naively optimistic (but we need to know when it is enough) – this was a side project that was fun but then was not fun anymore… (n.b.: link to a review, Tobias doesn’t have link to the project anymore)

The Principles

  1. simple stupid (if people say it’s crazy and stupid, you are in the right path)
  2. ignore everybody (Huh MacLeod)
  3. trust your gut
  4. be a jack of all trades (to be able to see the big picture)
  5. stay busy (“it is faster to run when you’re already walking”)

Example: Casey Neistat – youtube videos skate boarding – self-taught film maker @schneidertobias – http://www.vanschneider.com/


Meagan Fisher

As designers we spend most of our time toiling over the graphic design principles we need to master, or the best way to create progressively enhanced sites. These skills are vital to our success, and worthy of our attention. But there are other things to think about that are just as integral to the quality of our work. What larger role does design play in an organization, and how do we shape it? What kind of culture should we foster within our teams? How do we choose where (or if) we focus our efforts, and how does the focus of our work affect the development of our skill set? In this talk we’ll step away from the keyboard and explore the interpersonal side of design.

In-person testing to gather feedback #AwwwardsBCN

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

My notes:

“The goal fo design is to provide the best possible solutions fo real human needs.”

Empathy as keyword

Where do we find constraints? – goals and limitations of the organisation, our aesthetic ambitions of a project (‘how we can solve this problem in the most beautiful way possible’), the needs of the users (failure of Coke creating the New Coke – without checking customers – and bringing back the ‘classic’ Coke; then Pepsi ‘crystal’ that didn’t taste good)

User on center of design process is well known but we fail to include the user quite often.

Innovation as keyword

Excuses: “User research belongs to someone else”, “I don’t now where to begin”, “It may raise inconvenient questions”, “It’s expensive and time consuming”.

Getting to know the user doesn’t have to be hard.

Interviews, remote testing, observation, analytics:

 

Listen to what your users are already telling you.

 

Keep yourself reachable, create more personal emails (don’t need branding), asking what the users expect, what they will use the tool for, etc.

HelpScout – gathering feedback

Example/suggestion on being in touch with the customer: 15 min spending on random support tickets every morning, get notifications for tweets people send to the organisation, ask sales rep to listen in on a call once a week.

Getting all this empathy will give you:

  • useful constraints
  • meaningful content
  • better critiques
  • iterative changes

“Become a better communicator”

 

Books/reference:

http://owltastic.com/@owltastic

 


Marko Dugonjić

Responsive Web Typography

Responsive Web Design done correctly is based upon content rather than actual device resolutions, and so typography should adapt to both layout and sizing across content breakpoints. However, mere font sizing along the typographic scale based upon two-dimensional viewport @media queries is not enough. Apart from setting the correct balance of the black and the white in letterforms and texts, there are other important factors such as reading distance, information density, screen sharpness and device orientation that also influence the reading process. Learn to look at typography multidimensionally and enhance the overall responsive experience.

My notes:

Check Creative Nights (agency in Croatia)

Pantographia – accurate copies of all the known alphabets in the world!

Things to consider

1. Reading distance (basic font size, differs from device/medium) – He created a detection test at http://webdesign.maratz.com/lab/responsivetypography/realtime (dependent on user camera and permission of user)

2. viewport width height (imagine a bullet point in each phrase and if looks like bullet list is too much height, also consider diactrics – giving enough distance to differentiate them in between lines – and other characters)

Book to check: Inside Paragraphs

3. Content Hierarchy
Modularscale.com (Tim Brown) – test different ratios and http://webdesign.maratz.com/lab/subheads/

4. Information Density (quantity information you can see on screen)

5. Pixel density
check http://www.fontbureau.com/ReadingEdge/ – designed to function reliably at 9px to 18px also ia.net/blog/responsive-typography and font-to-width.com

6. Device Orientation
typologic.nl/news/live-font-interpolation-with-svg and typosansplomb.com/ResponsiveInterpolation

7. Aspect ratio
example with paper sizes perfectly aligned A0 to A6 and then all kinds of aspect ratios from devices (check his slides for the visual)

Article to read: Designing with context

All his slides are at: https://speakerdeck.com/maratz and the Awwwards Barcelona slides too.

@markodugonjic


Phil Hawksworth

Betting on the Web to #Win

The Web’s open nature has fostered ways of working which accelerate learning and innovation to an amazing rate. How do we keep up? How do we protect this asset for the future and can it compete with the fashionable application marketplace?

This talk will explore these themes and attempt to answer those questions by looking at case studies, examples and concepts from past and present.

Great roundoup presentation

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

My notes:

Phil works on R/GA (London) started as ad agency now they produce ‘other stuff’.

The Ted Nelson words (and his attempt at using them on the presentation) – hypermedia, hypertext, transclusion, intertwingularity, teledildonics, etc.

“Everything links to everything”

heich tee tee pee double meh – once you’ve seen it, you’ll never forget…
H T T P ://

Fashion and trends…. yes, trends appear and disappear. Standards and conventions versus trends.

Much more important now: accessible, stick to the principles you know to be true, resisting ‘the man’.

Check Google year in Search

‘We need to consider performance a design feature, not just a technical concern” – Yesenia Perez-Cruz via @philhawksworth #AwwwardsBCN

He mentioned Lonely planet style guide and highlighted that many others can be found at http://styleguides.io – also great article: A maintainable style guide

High level sitemap with sticky notes (and agile!) – example of his involvement on styleguide for google developers

The new way to Taco Bell isn’t on the internet it’s #onlyintheapp (problem about which App Store to cater for: Apple? Android, Amazon, other?)

Progressive enhancement is not about having javascript disabled, but to be conservative in what you do, be liberal in what you accept – Jon Postel

@philhawksworth – http://hawksworx.com/

Slides at https://speakerdeck.com/philhawksworth/betting-on-the-web-to-win


Paul Bakaus

Designing with Chrome DevTools

Paul is currently working on many design-specific features with the ultimate goal to make DevTools a tool for designers, as much as for developers. Come by for a sneak preview of crazy new things, such as improved responsive design controls, rich live editing of animations and more and more fun with colors.

My notes:

The anchorpoints: design, develop, iterate

Paul gave various examples of new features coming up (and some already in place) on the dev tools.

DevTools for designers for today – eye dropper can pick colour hovering on the page, with a few steps it will allow editing css/less/sass files straight from browser, the inspector shows exactly which font is being rendered.

Live editing in Dev tools, go to settings: workspaces – add the folder and allow editing (when question comes up), and in sources tab on browser you can map to file system resource (double check docs later).

(Note to self: I understood that works for CSS but does it work for less/sass? how about compiling?)

Other amazing features: Animations tab to control animation speed. Cubic bezier editor showing onion skin previewing how it will look.

You can play with the Google Canary version and check events.google.com/io2015/onsite for the effects

@maxwrk is a new designer at the dev tools team

“SCRIM” term and story: Smart, Colourful, Responsive, Intuitive and Material
S – typography and layout audits, flex assistants
C – colour swatches, gradient designer, colour theory
R – always-on, simplified device mode; device art and centered rulers
I – css transform builder, layout mode
M – material UI builder, material colours and animations

How to contribute?

  1. designers.chrome-dev.tools (Trello board)
  2. comment away
  3. add your own ideas and mocks
  4. ???
  5. profit

http://paulbakaus.com/ – @pbakaus

 


Aquest

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

Everything we talk about is inspired by the stories that frame our personal and working lives. There are seemingly few other experiences outside of those two contexts. What we have learnt – after all these years! – is that each story does matter. Every single story, from the smallest anecdote to the most profound tale, can become utterly unique and unequalled. What matters most is how you tell a story. We would like to tell you something of the diverse stories and experiences that have shaped who we are, and what we believe in. Let’s do that by discussing creativity. Creativity is a force that can change everything, turning all it touches into a work of art. It is a universal language that makes dreams come true.

My notes:

Stories allow us to be creative, be happy.

Helping hands – a picture story – #7mml an humanitarian project, around the world, and about food – creating a travel diary, photos, maps, instagrams, twitter, videos (youtube)

Apparecchiato – a tomato story – local food and ecomerce (buy fresh local and good food).

Scruud the vegetarians – a band of jugglers – game ‘scruud’, developed internally, (a bit like ‘angry birds’ IMHO)

Diumbo – an elephant story – app to meet people, approaches only ‘closer’ people to you so you can meet personally using only wifi triangulation.

“nothing to rethink, everything to invent”

@id_aquest

 


Vitaly Friedman

Responsive Web Design: Clever Tips and Techniques

Responsive Web design challenges Web designers to adapt a new mindset to their design processes as well as techniques they are using in design and code. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.

My notes:

He started with a few examples on screen…

http://codepen.io/yoksel/pen/XJbzrO
http://codepen.io/lbebber/pen/ypgql
http://responsivelogos.co.uk/

Use of ‘ascii’ art in 1800s
C-fax / teletext – Vitaly getting embarassed explaining how it works to the audience.

The Smashing conference: dev.smashinmagazine.com

Considerations: components, strategy and layouts

Check Atomic Design by bradfrostweb.com/blog/post/atomic-design

patterns.alistapart.com

http://rif.superfriend.ly/ (check the whole history of a project, from the big picture showing one big image/canvas with design elements, then refine and work up to a prototype/sample page, general look and feel)

At smashing magazine they try to define component behaviours for xs, small, medium, large, x-large and xx-large but undefined to exact pixel constraints

They also use a styleguide and boiler patterns on Drive just showing where they can shortcut depending on the type of components used for each project.

StyleDocco generates documentation and style guide documents from your stylesheets.

‘peta library api’ – ianfeather.co.uk/a-maintainable-style-guide/
lonelyplanet/rizzo (github)

– Design workflow –

slightly better linear workflow -> content . ux . design . front-end . back-end . launch!

Build smaller, tactical teams that are capable of executing multiple rounds of planning, design, and code quickly and independently. — Trent Walton

Ask the customer to prioritise instead of asking what it is important (after all, everything is important for the customer).

His trick: “fast-fake” a competitor URL loading time and show the client site using Slowy

Close and sign off the performance budget at this stage, since emotions are high and customer is concern that is performing badly compared to competitor. Later on, whenever the customer wants to add new features, give 3 options:

  • remove existing feature to add new one
  • optimize the new feature
  • don’t add the new feature

(most of the time no feature is added)


Update (09/03/2015) – check my notes on Day 2.

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

UX Bristol 2013

UXBristol organisation changed from smaller venue to Mshed however they are trying to keep it small so people can interact better, have better experiences on workshops.

As always, with any concurrent talks on conference comes the question on which ones to choose. Sometimes your interests guide you enough so you can get exactly what you want, sometimes can be hard, especially if you want more than one at the same time. Nevertheless, below are the ones I made my decision about…


Positive Psychology and UX
by Patrick Jordan

Positive psychology has the same goals as self-help and how we can implement it through design. Understand the principles how people get happier.

Started 15 yrs ago (USA) to bring an ‘ok’ status to an ‘even better’

  • How to flourish: take responsibility, set goals, be positive, persevere intelligently, connect with others.
  • People matter!
  • User experience comes down to the behaviour of the individual (cabin crew politeness, one individual on a hotel can make or break your experience)
  • Empower people
  • Having little steps is less daunting, if you set the bar low, can be more empowering (Which one would you choose? every penny helps / every pound / give generously)
  • Make it personal (show how you would be “helping a child in Africa”)

Kiva – loan/donation for people and projects (under development countries) – loan goes directly to person (not a charity) so it is more personal.

Have clear goals
also be aware of units/measures

Step-by-step
Pre-contemplation, contemplation, preparation, action, maintenance
Immediate benefits (goodgym burn calories in a ‘meaningful’ way – London based, helping people with disabilities)

Couch to 5K app set little goals, give positive reinforcement (I found two: C25K and Change4Life)
Apps with positive feedback, view and correct trends, tracking over time, progress, build little successes,

Remove stress
Improve mood (moodgym) – coping vs savoring

Psychological priming (mind connect to our bodies?)
perception (medical treatment) on the active people vs sedentary/ordinary stereotype

In flow app (explore your happiness) – building a profile about who you are with and what are you doing.

Persevere intelligently – being fixed in our goals but flexible how we achieve it
knowing the facts (billion pound o-gram) – abstract concepts viewed on a graphical design sometimes makes it clear, understood.

Daily mail ‘oncology project’

Effect vs theatre – (environmental theatre, local bacon vs outsourced vegs, dog vs tv)

Emotional journey
peak and end – the boredom at queues (on parks) can be surpassed by remembering the ‘big moment’ (amazing ride) and the great finish to give a general good experience.

Tesco in the underground in Korea (QR codes on metro, shopping delivered before you get home) understand the context of people’s live and provide the experience.

Connect with others
Mumsnet – supportive networks (understand the cultural element around the community). Trust on younger women (mind the gap voice) stats appeared, but not ‘apparent reason’ behind the motive.
eHarmony – matching similarities, not much what you are looking for
Men’s shed – men like to be doing things together (do “stuff” in sheds)

Cycle routes as problem (not enough of them), if more cyclists, more voice, greater need of accommodating them.

http://www.patrickwjordan.net/
info@patrickwjordan.net


How to think like a content strategist
http://www.valuablecontent.co.uk/@valuablecontent

Can we have one? what is it?
Book: valuable content market

Plan from A to B, content first instead of design…

Not only about the page (url) but also the ‘satelites’ (FB, twitter, youtube, servietes with content on it, maps on cafe, etc). Think wide, as well, not only at the site. VALUABLE content.

Need to know the customer’s business and WHY they are doing it….

So, as an exercise, we got a group of people to discuss a real-business case: Roll for the Soul – cycle hub – and the goal is to create a focus cycle point in Bristol. One week cycle festival brings all people together in Bristol, so the owner thought ‘how about the other 51 weeks?’.

Business was recently opened (2 and 1/2 weeks old). Success aims: keep open for one to two years down the line, get more interest of people that doesn’t cycle, ‘get more people to cycle more often’. Non-profitable company, want the cafe to be full, busy.

Workshop pricelist, menu, describing services (cafe, cafe seating/lounge, function room/meeting room, bike workshop – two sides of business: catering and bike workshops), feeling of community, sense of fun. Serving ‘healthy fast food’, vegetarian (owner and cook are vegetarian, didn’t feel right to serve something that they don’t eat), cakes on the go. Business is all-inclusive, not only a niche of the cycle community. Family, athletes, commuters, etc.

Problem: how to engage the wider community.

Exercise about strapline of business (http://www.rollforthesoul.org/) and we chose “Feeding the cycling city”. Some other ideas in the room: “Your tasty community hub”, “pitstop”, “freedom”, “feel good fix”.

Ideas on how to engage, the persona: “Ed, mountain biking dad” – ways of attracting him: cycle lane developments, maps of routes, family events, parking availability/security, mountain bike talks, what can I do with my bike at the cafe (parking/workshop), can I talk with experts?

Interests:
Map my bike or Strava bike (mapping routes and sharing) – routes shared by people
Live talk or youtube/vimeo
Update on cycle lanes – twitter feed
Family services

Challenges (apps) to motivate youngsters and use of different routes…

Message: Get a goal, imagine possibilities for the business, curate and decide which ones are interesting for the business. Make a PLAN how to create/make this content.

Rethink about your own person online, the digital trails and footprints, get better content, ideas, thought process etc.

http://www.rollforthesoul.org/


UX Hacks
by Jan Strutek – @jansru

Coming with new ways (creativity) of doing stuff
The art of war on the Overground
Sketchplanations.com

“desire to improve things for better”

What UX hacks do you know???

  • creativity
  • productivity
  • wellbeing
  • research
  • sketching
  • a-b communication
  • prototyping
  • collaboration

Productivity
Read and apply “Getting things done” – David Allen

Creativity
Use mental notes for rapid ideation and lateral thinking – deck of cards by Stephen Anderson

A-B communication
Follow a process when presenting your designs (start with the problem, not the solution)

Sketching
Don’t look at the tip of the pen (to sketch nicer looking, straight lines)

Prototyping
Use custom widget libraries in you tools (‘better defaults’ for axure)

Research
Leave a longer gap after the first research session (for Q&A)

Agile/lean research
online forums are goldmines full of insights (pain points – if you don’t have time do to more research)

Collaboration
when sharing screen, remember to switch off

Welbeing
always try to end your day with something positive (even a small achievement will do – peak-end rule)


Tips and Tricks
From attendees of the UXBristol

  • Explain problem to other people, ask kids to solve problem or sketch an idea, voice the problem
  • Pull post-its downwards (instead of upwards) so they don’t curl
  • Have a no-meetings day
  • Focus@will, coffitivity
  • Walk around, talk to people instead of email
  • Check trend online, do keyword searching, go for a walk
  • Sketching (Paperbrowser), keep it simple
  • Put headphones on even if not listening to anything (to avoid people interrupting)
  • Don’t check work emails on Sunday
  • Frame a problem and walk away so your subconscious work it out
  • Ask WHY (why you did this? why this feature exist? why are you commenting? etc.)
  • Ask the CEO of company to do some user testing
  • To improve an existing system check what the user do to hack it (and make it usable for themselves)
  • Review often and iterate
  • If you are trying to make sketches either make it really good or purposely awful
  • Use clingfilm to write on the wall
  • Not only complain, provide a solution
  • Offer material to people collaborate on your project
  • Use dropbox, github, etc

UX Trade Secrets


UX Past, Present, Future
Joe Leech – @mrjoe

Psychology for designers book

Glass-ceiling (the unseen, yet unbreakable barrier that keeps minorities and women from rising to the upper rungs of the corporate ladder, regardless of their qualifications or achievements.)

Alex Morris: designing things, solving problems.
David Jarvis (VP of customer engagement): taking a business outcome and shaping a range of activities to ‘get there’.

Merging the physical and digital worlds.

UX future in 10 yrs:
‘make ux for telepathy apps and dream visualisations’
‘the same!’
‘almost definitely would like to work internally rather than agency side as the stress levels are much less’ Aaron @ Google
‘integrate design into core process’
Not UX since it will be already incorporated.

Integrations of physical and digital – lot of life is lived in the real world – interior design would be part of UX.


UX and physical products
Mathias Willerup

Didn’t know… One Volvo founders got into car accident in early days and safety was the drive of the company since them.

Physical to Digital merge: different skillset, software is key differentiator, agile process does not apply in device design, user center design is key, traditional design backgrounds fall short, digital design is increasing part of product experience.

S60/V60 sensors (camera top/front/back, laser, radar, ultrasonic front/back)

iPhone plug (should include? design for it? etc.)

Volvo UX centre: concepting, user interaction and prototyping

Their design process: brief > early concept > selection and development (of idea) > early development > technical development (of product itself) > develop for production. ‘Kano’ inspired model

Tech/Biz/UX/Design conjunctions.

Solutions: speeding visual clues, breathaliser connected to ignition, boredom (eye tracking) – air control/temperature, distraction


Launching probes and releasing trojan mice
Oli Shaw – www.olishaw.com – hello@olishaw.com

“Design is the job of solving problems”

Should we be doing this?/why are we doing this? instead of ‘How to solve this?’

Focus on defining the problem (instead of just jumping into solutions/wireframes)
How do you identify and define the purpose?

Explore, discover, create; you need resources, make alies and sometimes enemies…

Probes for information, discussion, innovation and disruption. Sometimes is just creating awareness.

Great technique: mission statement > elevator pitch > tweet(to align people)
Probing discussion – what’s the opposite you are trying to achieve?
Probes are exploratory! not evaluative… (just reveal a ‘bit more of the map’)

Trojan mice (by Peter Fryer) – because Trojan Horse are heavy, take lots of people and effort. Small focused changes, ongoing basis, inconspicuous way. Small enough to be owned by people concerned.

‘Pretotype it’ – (http://www.pretotyping.org/ ?)

Visibility and awareness. Co-location/colaboration.

Is this the right problem to solve?
Change the organisation to make better products.


Hello Lamppost
Clare Reddington
http://www.hellolamppost.co.uk/

The pervasive media studio – sometimes you have to sit and interact with people that are nothing like you.

Playable city (their answer to ‘smart city’) – anti-efficient drive.

People of any age could play, SMS was their choice (wider audience). Not a game or a toy, but people are defined as ‘player’. More an automator than I.A. Object knows time, weather, knows if you talked to it before. There is an ‘editor’. Character for each object (post office quite administrative). Brilliant from just a single experience… Also have to design to bigger audience. There are easter eggs and other surprises. Really important to test with real people, they had 659 unique players in one week.

Emergent behaviour, hacking and other uses. Promoting Bristol as some place different.


Neuroasthetics: science embraces art
Simon Norris

Colour impressions.
Why are some things considered beautiful?

What is the function of the brain? “The acquisition of knowledge…” – Zeki

A study that if you represent vertical lines ‘fire things’ in the brain. Zeki wrote many books about perception, colour, etc.

Brain structure, in basic (plain English) you have either pyramid or star cells.

“There are two kinds of brain concepts: inherited and acquired. The two kinds are intimately linked and one could not exist without the other.” – Zeki

  • consistency
  • abstraction
  • ambiguity

What can we use to help design?
– patterns and pleasure


Lightening talks

With great methods comes great responsibility
Vicky Teinaki @vickytnz

Kickstart project – constrains cards (design principles)

A pattern language, design patterns (elements of reusable object-oriented software)

How you can add your own experience?
UCDtoolbox
Yahoo Design pattern library (graveyard)

Book: the persona lifecycle (field guide for interaction designers)

Is your method:

  • an instrument? (solving something)
  • a competence? (helping you understand)
  • an agenda? (getting people on board)

http://starters.cc – investigating design

http://finalfinal.com – sharing the creative process

Think and talk about your methods.

Better Communication and Better design
@francisrowland

Just an idea, not a full-blown method.
Plain language is part of user centered design!
Helping people with design presentations, articles, posters with a particular audience in mind. So, they can get back and try to apply to their projects better.
Like a trojan horse but full of UX-ey love.

When content strategy is a matter of life and death
@catisnotpretty

Content strategy is about getting the right information to the right people, in the right way, at the right time.

The worst lighting talk in history – experiences with the anti-problem
Mark Dalgarno – @markdalgarno
UXCambridge

The anti-problem: sometimes we get stuck when thinking about how to solve the problem -> think about the opposite (the anti-problem).

Anti-problem: how could our team make our internal business customers hate us?

Surface differences of opinions and strong feelings
These can show what you haven’t already
What more can you do to make your customers burn down your office?
How to stuff people even more into smaller spaces?

Some links: