Know Thy Interaction

Over the next couple of months, I'll be doing a new talk I've written called ‘Know Thy Interaction’ at a few different events.

Tonight, it will be it's first run-out at Shropgeek Rebellion, up in Shrewsbury. As the title suggests, the talk covers interaction and how design interaction has and is changing on the web at the moment.

During the talk, I show quite a few examples, and reference even more, so I just wanted to put all of the links in one place for those that see the talk and want a reference for the links, or for anyone who is interested in what is being covered but isn't lucky enough to get to see the talk in person ;)

The slides are available online and here are the accompanying links.

TMW Open Source Work

Kickoff – Our front-end framework at TMW

Kickoff Statix – A generator to make static web builds (or just static web templating) faster and easier.

All of our open source work can be viewed on github.

Mapbox Design principles

The design guidelines by Mapbox that I reference are available on their blog under the section titled Our Principles.

Codepen examples

Checkout the great work being created on Codepen, as well as the top 100 list from 2013 on Codepen – some great examples of what can be achieved now with HTML/CSS/JS.

Codrops Examples

Codrops is a great resource for unique and interesting design and interaction ideas.

These are the links I showed in the talk, and a few others I've picked out that I like, although there are many more great tutorials on the site.


Effeckt.css is a great library showing examples of performant CSS3 Transition and Animations.

Example sites I showed


Physical Interaction examples

Further Reading

Interaction Evolved – an article I wrote for 12Devs at the start of the year.