
Meet the instructor and start your mobile and web rapid prototyping journey with step-by-step guidance, practical blocks, and responsive support for mastering interaction and animation.
Explore how composer, Apple's graphical tool, enables graphics, animations, and micro interactions for modern user experiences. See how it simplifies creating graphics through visual programming for prototyping.
Websites to download the needed software:
Quartz Composer: https://developer.apple.com/downloads
Origami: http://facebook.github.io/origami/
jQC: http://qcdesigners.com/index.php/forums/topic/100/it-s-finally-here-j-qc-1-0-a-u/
Avocado: https://github.com/ideo/avocado
Explore the interface for assembling a visual patch workflow, drag patches from the library into the editor, inspect properties with the inspector, and create macros to organize patches.
Explore what a composition is and how these files open in quick time as a screensaver, import as iTunes previews, or embed in Cocoa applications not on iPhone.
Explore patches as reusable building blocks in the clockwork composer, dragging library patches, configuring input and output connections, and managing layers for rendering order in interactive prototypes.
Preview your prototypes on mobile by mirroring your Mac screen to iPhone or iPad with free or trial tools, select a screen area to mirror, and control from the iPhone.
Explore handling images inside a group by creating match objects from dragged images, generating layered input images, and stacking multiple images with adjustable properties like scale and position.
Define key areas to listen for interactions, connect buttons and inputs to outputs, and drive values from initial to secondary states through click and drag.
Learn to use a mobile toggle to drive animations by switching between an initial value and a secondary value, triggered by events, and choosing numeric, string, or boolean value types.
Explore implementing classic, looping, and motion animations in an interface, detailing inputs and outputs, timing, curves, rotation, bouncing, and synchronization with UI elements.
Using a multiplexer to enable rapid prototyping of interactions and animations, the lecture demonstrates two inputs, button interactions, and controlling top-to-bottom transitions.
Create reusable macros that automatically apply a Gulshan blur to matched patches, enabling fast prototyping of interactions and animations. Publish inputs to a library and customize macros for reuse.
Create a more accurate prototype by implementing reliable mode toggles and enable/disable buttons, ensure diplexer connections reflect chosen inputs, and verify interactions remain consistent during iterative testing.
Learn a fast, easy approach to flipping cards for mobile and web prototypes, using a flip batch to control front-back rendering, and practice switching cards to reveal animations.
Rapid prototyping an images carousel teaches you to build a simple image carousel in composer using patches, add multiple images, and wire next and previous navigation buttons.
Design an interactive twitter-style button with a bouncy animation for a web prototype, featuring card-based layouts, layered elements, and timing adjustments.
Learn how to design a pulsating button that can boost your sales dragging the attention of the users.
Learn to integrate the iOS keyboard into a mobile prototype, toggling show and hide states, using a keyboard patch, and linking keyboard input to on-screen elements.
Explore rapid prototyping by quickly connecting design screens with full-screen hit areas, toggling between states, and presenting seamless transitions between screens through simple interactions and maps.
Learn to translate large prototypes into small screens by building a scrollable area with directional movement, device matching, and interactive scrolling behaviors.
Demonstrates making a group or image scrollable, with vertical or horizontal scrolling for emails, and notes that layered compositions may need a different approach to avoid setting x and y.
Explore rapid prototyping of a twitter-style loading screen by building a masked, scalable animation with interactive toggles, timing delays, and alpha-driven reveals.
Wire button actions and macro rendering to drive progress indicators and alerts, while introducing a 3-d background animation and reusable macros to refine interactivity.
Thank you for following the course on mobile and web rapid prototyping. Invite questions, request ratings, and promise to address any issues by contacting me.
Find in this bonus lecture a collection of resources to get inspired and learn from other people ideas. This is the quickest way to start with your animation prototypes, all for free.
Join with more than 5700 students that already started creating animated prototypes.
Designers should build the future and the best way to do it is to be fast, react and adapt. Learn how the new prototype work, they shouldn't be static anymore, that's why you need to learn interactions and animations for your prototypes.
Doing your prototypes interactive will lead you to improve your collaboration with the product owners and the engineers as you'll be able to react and adapt without effort, even for your user tests.
You'll learn how to animate your prototypes as I do to present them to my clients so they get a better understanding of how the app or the website will look like.
This course is mainly focused on getting you more productive with the prototypes and also is focused on how to present your static designs in a way that are fully interactive, so they provide an accurate and realistic visualization of your final application or website.
I've been asked many times how to start with rapid prototyping and how to easily integrate static prototype with user interactions and flows, animations and effects that's why I decided to create this course, to let people like you to be more productive and to go to the next step in your work.
You'll learn the pieces that lead you to create compositions to show your animated interactions, designs and animations.
The course is structured in small and easy to follow parts that will introduce you to Quartz Composer and will cover the different needs a designer or a UX can have while designing animated interactions. Finally, the course will provide you some step by step examples with downloadable content that you'll be able to view, download and play. The course is so easy to follow that if you don't like it, your money will be refunded within 30 days without any question.
This course is mainly oriented to user interaction profiles, designers, animators and also for engineers that are looking to improve their skills and speed in prototype creation. The course also covers the basics of Quartz Composer so anyone looking to create any kind of animation is also welcome as the course will help them to understand and use this tool too.
Developers can also benefit from the course because coding and tweaking animations in the code can be a real pain, so you'll learn how you can easily tweak and change things on the fly without code.
Nowadays a lot of powerful companies like Apple, Facebook or Twitter are no longer using plain prototypes and sketches, they are already using rich interactions and animations so they can later show with much more detail to their animators, engineers or product owners. Start now improving your design and prototyping speed and skills by joining this course.
Course updates:
Updated on 1st April 2018 new lesson explaining changes in Quartz Composer
Updated on 9th December 2016 new bonus lecture added
Updated on 17th November 2016 fixed one lesson which was missing an exercise
Updated on 9th June 2016 new lessons updated
Updated on 22nd April 2016 new lessons added to the course to fix the latest updates
Updated on 20th January 2016 new resources added to the course
Updated on 21st December new lectures added to the course
Updated on 22nd September quizzes updated to reflect latest QC changes
Updated on 20th September new lesson added
Updated on 11th May Support for the new patches added
Updated on 17th February Lesson regarding the animations has been recorded again to support the changes in Quartz Composer
Updated on 26th December All the quiz questions now have a link to the lesson where you can learn more about it.
Updated on 10th October New lessons added to boost your sales with animations for your landing pages.
Updated on 25th September Added new workflows to improve your animation prototyping skills with Quartz Composer.