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 –

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 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: – @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 –

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”




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 (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 (Tim Brown) – test different ratios and

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

5. Pixel density
check – designed to function reliably at 9px to 18px also and

6. Device Orientation and

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: and the Awwwards Barcelona slides too.


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 – 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 –

Slides at

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 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. (Trello board)
  2. comment away
  3. add your own ideas and mocks
  4. ???
  5. profit – @pbakaus



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”



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…

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

The Smashing conference:

Considerations: components, strategy and layouts

Check Atomic Design by (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’ –
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:

ICTF 2012


Raspberry Pi

by Daniel Bates

WHAT: It is a credit-card sized computer, it can connects to a mouse, keyboard, tv or monitor, power plug (you can use from your own mobile if you have a micro connector) and it has the following structure:

You can buy for $25 (without ethernet port) or $35 and despite they do have a backlog, on the conference was announced that it will clear in about a month or two. The demonstration of programming was OK, but the ‘media centre’ similar to X-box was really good. It is without doubt that has great potential for a simple use or for more interesting computing purposes. If you think about giving a presentation somewhere and you don’t want to carry your 1.5kg laptop you can consider carrying a ‘credit card’ and just plug into a screen/mouse/keyboard on the presentation venue. Impressive!

You can get many of your answers if you go to the Raspberry Pi FAQ page.

On the ‘designing a box’ for it, I just couldn’t resist to this Lego kit. Will be definitely getting one soon! (first need to order my R.Pi in UK can be bought from Farnell or RS)


Cisco and London 2012

by Ian Foddering

The London 2012 Olympic and Paralympic Games aim to be the most connected games to date.

Security, reliability and performance of the network infrastructure will be critical, with stability taking precedence over creativity. London 2012 is not about doing anything Cisco has not done before. Rather, it is all about doing what we do, but doing it better than ever.

Cisco are supplying the routing, switching, firewall and IP telephony to approximately 100 venues across the UK including:

  • 80,000 connections
  • 94 Locations
  • 2,220 Switches
  • 1800 WAPs
  • 7000 Cable TV sockets
  • 16,500 IP Phones
  • 65,000 active connections
  • 4 billion broadcast audience.
  • 6,500 Cisco WebEx licences
  • Show & Share plus MXE for “knowledge on Demand”

Interesting fact

I didn’t know, but London already hosted Olympic games twice, so this will be the third time! Years: 1908, 1948 and 2012!

Cisco is providing connectivity to the Olympic games, it is working with many partners to provide the service and it is expected to be the ‘most connected games ever’. Cloud technology is being used for first time. Even for the monitoring of construction sites and other Olympic-related business the partners/employees are using videos (Cisco call them ‘Show and Share’ so people can make a video of what is going on, hold meetings over internet or phone and discuss the progress of the work). Some of the technologies that are being used is the Cisco Webex (a free account, open to anyone allows 3 people per meeting, 250 MB storage, Standard video, Audio: VoIP (Internet), Share: Desktop, the premium account has more perks, check online if interested… However I wonder what is the real benefit of Webex compared with Skype…)

Some of the links shared: (which didn’t lead to anywhere… shame on the presenter! maybe try this one???

The presentation also mention Cisco and its relation with educational programs/partners. He mentioned the STEM initiative – Stem academy. One of the fronts will help people that might not have a chance to education and skill training (for financial/social reasons) to get the appropriate technological skills preparing them for the future. I like the way the word of “Legacy” appeared and how we should care/prepare to leave a good legacy and carry on our work into the future. The other front is to creates opportunities to inspire young people in Science, Technology, Engineering and Mathematics (STEM).

The presenter also mentioned the National Virtual Incubators and the BIG awards (just now I discovered that BIG stands for British Innovation Gateway! :P)


New digital initiatives at the Bodleian

by Michael Popham

Mike showed the DAMS structure, with emphasis on the preservation section. He showed a few screenshots of projects going on at the BDLSS, such as the Digital Images (Blockbooks), Digital.Bod, ORA (and explained what it is about). Mentioned the BEAM (futureARCH blog) – relating to the preservation theme/discussion; mentioined EMLO and showed a visualisation done with a 50-year-window to demonstrate the letters sent and received at that specific time. Mike also mentioned the scanning process and the workflow changing to BDLSS, making it more dynamic and fast. He showed a few other project screenshots such as Oxford google books, What’s the score? (the crowdsourcing part), mentioned that Bodleian also have an app for the Treasures of Bodleian (how come I just discovered this on the presentation???), the Queen Victoria project. We had questions about editorial on whatsthescore project (how to merge/combine/edit information coming from Zooniverse and how reliable that information is) and someone asked about the image kits/technologies used at the BDLSS.


Mobile Oxford

by Tim Fernando

OUCS will be replacing some structure for the Status.ox using Nagios and other kits (so if Nexus goes down status.ox doesn’t :)). Also replacing Events.ox, they are offering now Telecoms self-service (voicemail over web).

MobileOxford beginning: python, django, postgris; then went open source with Molly project.

Their process: Continuous deployment: commit (github), Jenkins (continuous integration), Fabric (deployment control, also see this blog for some info), Sentry (exception tracking), Puppet (helps system administrators manage infrastructure throughout its lifecycle), Pingdom (uptime monitoring)
elasticsearch (It is an Open Source – Apache 2, Distributed, RESTful, Search Engine built on top of Apache Lucene. Would this be better than Solr???)


Mobile Oxford website


Delivering Agile projects – Sprints, Scrums and Burndowns…

by Sara Passmore

She mentioned the Manifesto, which states:

We are uncovering better ways of developing software by doing it and helping others do it. Through this work we have come to value:

Individuals and interactions over processes and tools
Working software over comprehensive documentation
Customer collaboration over contract negotiation
Responding to change over following a plan

That is, while there is value in the items on
the right, we value the items on the left more.

Check names and other things at the Agile Manifesto site.

Sara has a DSDM training, which is similar to prince2 apparently. The important things that she said we could keep our minds to be able to deliver Agile projects are:

  • Fix time and cost, flex features (instead of the fixing features and flex cost and time). Contingency becomes the ‘nice to have’ features (instead of money or time for development). DSDM method uses numbering system instead of Moscow (must have, should have….)
  • “Built incrementally but on strong foundations”. Use Sprints.
  • Communication (stand up meetings, lean documentation – email and list of decisions).
  • Test early and continuously. Try creating unit-tests
  • Demonstrate control, empower team this will enable creativity


Her suggestions were to use timeboxes or sprints plus burn down chart, developers define task time! (points or hours, check cards -poker issue, until agreement is reached). Try to demo the system with user as the project goes along so they can be involved and also give feedback on how the features should behave according to their expectations. She also mentioned a possibility to give access to users to the development site so they can see the project on early stages (communication and someone filtering complaints or features suggestions could be needed for development)


Go live early with minimum set of features.


She recommended Keith Richard’s book Agile project management: running PRINCE2 projects with DSDM Atern. And he has a consultancy/training site.


She mentioned Microsoft dynamics (don’t remember why now, sorry… maybe they offer Agile support/services?)


Experiments into Biology – Technology Interaction

by Kevin Warwick

In this presentation a practical look is taken at how the use of implant and electrode technology can be employed to create biological brains for robots, to enable human enhancement and to diminish the effects of certain neural illnesses. In all cases the end result is to increase the range of abilities of the recipients. An indication is given of a number of areas in which such technology has already had a profound effect, a key element being the need for a clear interface linking a biological brain directly with computer technology.

The emphasis is clearly placed on experimental scientific studies that have been and are being undertaken and reported on. The area of focus is notably the need for a biological/technological connection, where a link is made directly with the cerebral cortex and/or nervous system. The presentation will consider the future in which robots have biological, or part-biological, brains and in which neural implants link the human nervous system bi-directionally with technology and the internet.

This presentation was so good and interesting that was really hard to take notes… he demonstrated a few implants that he had installed on himself, (Class II implants (RFID) arm and nervous system), mentioned Sensory substitution – where some students had implants on their fingertips (to allow detection of nearby objects by their vibration(?)) and a sensor in one student’s tongue.


Some great experiments:

  • Bi-direction communication: he was able to demonstrate (play video where he had) control of a robotic had over the internet (he was in different country where the robot hand was).
  • Implant on his arm and his wife’s arm and while blindfolded he could detect when his wife opened/closed the hand
  • Deep brain stimulation amazing stimulation of brain, on Parkinson’s disease, epilepsy, etc. The presenter showed a video of a person with Parkinson’s disease and the amazing benefit of an implant straight into the patient’s brain, stopping the tremors and allowing him to not only move hands and arms in a normal way, the patient was able to walk (and spin) at this own will, without assistance (as he has to, without the activated implant)
  • In USA patients with diabetes and epilepsy had implant in their hands to know exactly which medication they are using in case of an accident/event, where the hospital/ER would scan and detect the doses faster and accurately (apparently this is now regulated).
  • Robot with live brain cells learning to turn if wall is detected by sensor.


And Kevin Warwick also mentioned about “Enhancements”: memory, communication, senses, multi-dimensional thinking, extending the body, in build machine, etc. (for the creation of the super-human)


Kevin Warwick’s website:
And there are some videos of/about Kevin on youtube.