Meta Refresh 2015

The workshop will introduce a design workflow that provides a seamless approach to designing interactions for the web and mobile applications by augmenting what the role of a traditional designer is usually limited to.

Outline

“In my experience, designers are better at technical things than they assume they are and engineers are better designers than they think are” @murmurs

The worlds are colliding. Modern tooling is bridging the gap between what a designer can do and what a developer can’t. It also brings in a more powerful notion of the role of a prototyper. A prototyper can not only design in traditional applications such as Photoshop/Illustrator to realize the structure and layout of web/mobile applications but also be able to code interactions to conceptualize ideas in a fidelity that mimics the end behavior for the targeted platform(s).

This workshop aims to provide attendees with a sense of how such a workflow can be constructed using modern tools. We will start with going over Sketch (http://bohemiancoding.com/sketch) which aims to be a replacement to Photoshop/Illustrator, learning how to use it to design for multiple screen sizes, hooking it up to framer.js to provide a environment which enables exploration of interactive/animation patterns and using front-end tools like gulp to enable live editing of both sketch resources and HTML prototypes for a more efficient iteration cycle.

Requirements

A copy of Sketch (http://bohemiancoding.com/sketch/ which also has a 30 day trial period), basic knowledge of JS, CSS, HTML

Speaker bio

Designer/Developer trying to bridge the gap between how designers and developers collaborate.