This workshop has already been published as a course!
UI Prototyping with FramerJS
Some Key Takeaways!
By coding along with us in the Workshop, you'll:
- Use Framer Studio to create native-feeling mobile app prototypes that run directly on your device
- Take control of not just the look and the functionality of your prototypes but also the way they feel and respond to users
- Make prototyping a seamless, first-class part of your design workflow whether you use Sketch, Photoshop or After Effects
- Explore expressive animation techniques including springs, curves and Framer's state machine
- Create dynamic, responsive user interfaces using concepts like velocity and modulation
- Build data-driven prototypes by integrating data from JSON APIs and Firebase
Your (Awesome) Instructor
Spend a Full Day Immersed With a Leading UI Prototyping with FramerJS Master
Workshop Details
Prototyping has arrived as a first-class member of the modern digital product design and development toolkit. Framer is a prototyping tool that lets you turn static mockups into interactive prototypes and to experiment quickly with dynamic, native-feeling animations and interactions. It integrates seamlessly with design tools, exports smoothly to mobile devices, and is powered by the language of the modern web, Javascript. In this hands-on workshop, we'll use Framer Studio to design and build responsive interactions, explore advanced animation techniques, and build data-driven UI prototypes together. You'll leave empowered to not just design the look or create the functionality of the products you build, but also to control the user experience and feel. Join FramerJS and prototyping master Jay Stakelon and learn how to build interactive prototypes and learn advanced animation techniques.
Daily Schedule
We've already held over 300 workshops with thousands of attendees in-person and online. In this time we've discovered ways to schedule the day, so it goes smoothly and efficiently. Regardless if you're in-person or participating with us online you'll have the full ability to replay things you missed, get your questions answered LIVE and interact with the teacher throughout the day.
- 8:30AMTech Check and Welcome
- 9:00AMIntro to prototyping, Framer.js and Framer Studio
- 9:30AMExamples and a look under the hood
- 9:45AMHands-on work time
- 10:00AMFramer fundamentals
- 10:30AMWorking with Framer
- 11:30AMAnimation workshop
- 12:00PMLunch and Hacking
- 1:00PMResponsive UI workshop
- 1:30PMHands-on work time
- 2:30PMData-driven prototyping workshop
- 3:00PMHands-on work time
- 4:00PMWrap it up
Interact with the Instructor - Online & In-Person
Is This Workshop for Me?
Summary
Framer is a tool for building animation and interaction prototypes with Coffeescript. This workshop is for designers who code, for front-end engineers who want to dive deeper into interaction design, and for anyone who works on web or mobile products who wants to supercharge their design workflow, iterate and experiment faster with prototypes.
Any Prerequisites?
- To get the most of of the workshop, some Javascript experience is necessary. Coffeescript is what we'll be coding in, which is relatively easy to pick up if you have a Javascript background. If you have no prior experience with Javascript, it might be hard to keep pace with the workshop since we focus on Framer and won't spend much time on language and syntax.
- Besides a bit of Javascript experience, you'll get the most out of this workshop if you're interested in or have some background in designing and building web or mobile experiences.
- Before the workshop, please take a few minutes to download and install the free trial of Framer Studio and sign up for a free Firebase account
- Important: A mac is required to run Framer Studio. You'll need a mac to participate in this workshop.
Event Details
What
One Full Day Workshop Session
Replay Videos (available immediately)
When
February 20, 2015 - 9:30am to 5:30pm Central Standard Time
Where
Option 1: Attend online on our full HD live stream
Option 2: Attend in-person at HQ in Minneapolis, MN