September 13, 2012
Amber Weinberg
www.amberweinberg.com
www.hired.im
@amberweinberg
Practical CSS3 Animations for you & your client
Amber gave a demonstration of how to use CSS3 animations, though by way of cautionary tale she presented some bad examples first: logos and entire comics produced completely in CSS3; these might be cool, but they’re wildly impractical. Subsequently Amber shared her experience of using of CSS3 animations responsibly. So, while you can add as many key frames to an animation as you wish, you need to keep in mind the performance of the animation and use key frames wisely. The use of CSS3 Transitions (over CSS3 Animations) for simple effects was reccomended as they’re slightly faster. However, CSS3 Animations were the better choice for more complex effects.
It was interesting to note that Amber only uses the -webkit and -moz prefixes (in addition to the non-prefixed properties), ignoring -o and -ms prefixes.
Resources:
Slides and transcript from Amber’s session.
http://caniuse.com – resource for determining browser support for CSS3
Joel Bauman
New media freedom of expression
Don’t just talk about things. Make it, fail, learn from it. It will teach you.
Design is problem solving
Love what you do & dare to do it
Joel used his session to showcase his digital experimentation. This included his Noogs ‘digital collectables’ project and the one woman play he helped put on. Joel’s role in the play was to set the backdrop for each scene, which he achieved by changing images on a bank of old CRT televisions and two large, draped screens.
Resources:
Paul Virilio, urban philosopher.
Suggested sites:
Des Traynor
www.intercom.io
blog.intercom.io
destraynor.com
@destraynor
From data to insight
Don’t imply precision you don’t have.
What’s the point of a pie chart if you have to add the data to make it understood?
Visuals should say something otherwise they end up as the Jessica Simpson or Ryan Gosling of info graphics.
This was one of my favourite sessions of the conference, after which I think we can safely add ‘charts’ to the old maxim of ‘lies, damned lies and statistics’. With many examples drawn from the ‘fair and balanced’ Fox News, Des showed how charts could be manipulated simply and cynically by manipulating either axis.
As well as showing us the bad and ugly of information visualisation, Des gave advice on how to visualise data in a meaningful, honest and effective way. One of the main themes of this is to tap into things humans are good at, such as judging length, width, height. He then offered ways we might effectively render different aspects of data:
6 ways to visualise quantity:
- Line length
- Line width
- Colour intensity
- Size
- Quantity
- Speed
4 ways to visuslise category:
- Line type
- Colour
- Shape
- Location
I think Des takes a slightly dim view of a lot of the recent work produced in the info-graphics trend, issuing a challenge: “Are you trying to create a poster for someone’s wall or teach them something?” I don’t think he’s completely against info-graphics, but he wants us to get the data right first and then, in his words, we can “bring the fancy shit later’.
Des also challenged the notion that the role of data visualisation is always to present data, even when very complex, in a simple form. Using the example of data drawn from sports analysis, he showed that it was okay to present complex data in a complex format as long as the audience understands it.
Resources:
Some photos I took during the presentation of duplicitous charts:
Fox News: If Bush era tax cuts expire
Fox News: 2012 Presidential Run
Grant Skinner
Building Fun (with CreateJS & HTML5)
Technologies are tools, not religions.
Hardest part of writing artificial intelligence is making it dumb, it’s too easy to beat humans.
Games are a fantastic way to stress technology.
In this session Grant gave us an excellent insight into how he and his team created touch optimised HTML5 versions of classic Atari games, such as Pong, Centipede and Asteroids, for the Atari Arcade. A variety of Javascript frameworks and libraries were used in production:
In particular, the CreateJS suite of libraries is used extensively:
We also learnt that GitHub, Basecamp and UTrack were used extensively for managing various aspects of the project. In particular, Grant advised training not just your team, but also your clients to use project tracking and management software properly.
The were also interesting insights into problems that the team overcame. We heard how placing the game in an iFrame caused problems, unless the iFrame was at the top of the z-order. The desire to have adverts on the page also caused issues for tracking mouse events. The adverts are loaded into an iFrame which, because the content was served from a different domain, couldn’t have Javascript inserted into it. Instead, the team had to use a large, transparent gif over the adverts while the game was in play, in order to prevent loss of mouse events to the advert iFrame. Also revealed was how the games normally run at 60fps, but are throttled back to 30fps when necessary to improve performance. Grant also explained that his team built a tool named Zoë to export animations from Flash for use in HTML5 animations.
It’s clear from Grant’s session that making HTML5 games takes a lot of work, much more than for making the same game in Flash. In part, this is due to a lack of tools (hence the need to create Zoë), but also that parts of HTML5, such as sound, are a mess still. Testing requirements are greater too, which Grant’s team sought to overcome by assigning a different browser to each developer to develop in.
Resources:
Old School vs. New School – Freddie Wong promotional video for Atari Arcade.
Iconmoon – Imports SVG to create custom fonts that can be used online.
Zoë – a tool built by @gskinner for exporting animation from Flash for use in HTML5 http://www.createjs.com/#!/Zoe
Chuck Anderson
nopattern.com
npandco.com
@nopattern
What Plans? Figuring it out as you go
I would probably not wear most of the clothing I design – I find it really obnoxious!
Chuck’s session took us through his portfolio of the last 5-10 years of his excellent and distinctive artwork and illustration. More interesting though was how he got to where he is. Entirely self-taught, he didn’t go through the usual art/design school route. Instead, he relentlessly self-promoted; finding the names of art and creative directors in magazines and at companies, then guessing their email addresses to send samples of his work to. It was successful too, leading to commissions from magazines and major multinational sports companies. Often designers and illustrators are very good at self-promotion, believing the world will come to them. Well Chuck proves that it will, but only if you ask first.