Video Description
In this course, design pro Andy Anderson guides you through the basics of working with the Framer prototyping design tool. You'll download the app, explore all of its functionality, use it to design a prototype for an actual Smart Phone App, and then you'll bring that prototype to life. Along the way, you'll pick up the basics of interface design and gain hands-on experience using a very simple prototyping coding tool called CoffeeScript. There are no prerequisites for this course, just the desire to learn.
- Master the basic concepts behind designing and coding prototypes for web sites and apps
- Learn about Framer's design tools; then use them to build a visual prototype for a Smart Phone App
- Explore Framer's coding tool and use it to transform that visual prototype into a working prototype
- Discover the insider tips and shortcuts that speed up the visual prototyping process
- Understand how to export prototypes and share them with others
Instructor Andy Anderson is the author of over a dozen best-selling books on graphics and design, including the O'Reilly titles "Getting Started with Adobe InDesign CC 2015" and "Learning Lightroom 6/CC." Funny, engaging, and always on point, he's worked with Adobe tools since 1990 and has taught Adobe Photoshop, Illustrator, InDesign, Flash, and Dreamweaver to thousands of happy students over the past 25 years.
Table of Contents
-
Introduction
- Welcome To The Course 00:01:45
- About Andy 00:04:16
- What Is Framer 00:03:29
-
Getting Started
- Introduction 00:00:40
- The Framer Interface 00:07:49
- Using The Code Editor 00:05:30
- Importing Assets 00:03:53
-
Working With Framer Design Tools
- Introduction 00:00:39
- Starting The Project 00:04:07
- Stylizing The Screens 00:06:51
- Adding Additional Elements 00:02:36
- Adding A Map Page 00:02:58
- Adding Filler Pages 00:03:56
-
The Role Of Coding In Framer
- Introduction 00:00:35
- Swiping Between Pages 00:07:01
- Controlling Page Content 00:04:29
- Clicking Through Pages 00:06:57
- Working With Animate Options 00:05:09
-
Finalizing The Prototype Design
- Introduction 00:00:43
- Firming Up The Design 00:08:01
- Working With Text 00:06:54
- Setting Up The Targets 00:03:55
- Using Headers And Footers 00:07:10
- Generating The Main Navigation 00:04:07
- Creating Clickable Events 00:02:35
- Defining Animate Options 00:04:46
-
Finishing And Exporting The Prototype
- Introduction 00:00:36
- Animating Text 00:03:36
- Exporting The Project 00:05:17
-
Final Thoughts
- Conclusion 00:01:11