LearnUX.io Awwwards Honorable Mention

InVision Studio Course

  1. Welcome to Studio 03:29

    Welcome to Studio

    Let me introduce InVision Studio

  2. Interface roundup 09:03

    Interface roundup

    Check out the basics plus some keyboard shortcuts

  3. Navigating on canvas 07:18

    Navigating on canvas

    Quickly organise the view plus import some Sketch files

  4. Working with colors 09:47

    Working with colors

    Check out the basic artboard settings and set up the colors

  5. Artboard settings 09:23

    Artboard settings

    Creating the first artboard with image and text

  6. Working with vectors 11:21

    Working with vectors

    Using vector tools inside InVision Studio

  7. Working with images 08:09

    Working with images

    Exploring image options as well as creating masks in Studio

  8. Components in Studio 05:56

    Components in Studio

    Creating reusable assets across your project

  9. Positioning elements 13:17

    Positioning elements

    Create responsive layouts that scale across different devices

  10. Applying positions to layout 04:21

    Applying positions to layout

    Let's position the elements within the layout so that they scale

  11. Creating animations 10:17

    Creating animations

    Starting with some basic shapes animations and transitions

  12. Easing in animation 03:52

    Easing in animation

    Exploring the timeline and more advanced animation settings

  13. Animating first artboards 06:51

    Animating first artboards

    Simple animations and transitions between different cars

  14. Looping the animations 08:02

    Looping the animations

    Tweaking the animations so that we can loop the car selection

  15. Details screen 14:31

    Details screen

    Creating and animating the car details screen

  16. Renting a car 13:55

    Renting a car

    Let's create another flow and animations for the Instant Pick Up button

  17. Rapid Prototyping 10:00

    Rapid Prototyping

    Explore the rapid prototyping options for readymade layout

  18. Filters screen 11:18

    Filters screen

    Design and animation for the filters screen

  19. Previewing prototype 12:28

    Previewing prototype

    Working with the mobile preview and exporting rot the InVision platform

  20. Working in Freehand 02:52

    Working in Freehand

    Check out the Freehand feature on the InVision Platform

  21. That's it for now 00:52

    That's it for now

    Thanks for watching and keep an eye on the updates

InVision Studio Course

Duration: 02:57:02 Last update: 1 month ago
  • Key Points
  • Author
  • Source Files
  • Who is this course for?

InVision Studio isn't just another app for UI design. It's a complete solution for bringing your project from its early shape to a high fidelity prototype together with outstanding animations. Having it all under the hood of InVision platform lets you go even further. You can easily preview the prototypes on devices, share them with your clients and get their feedback as well as set up an easy handoff for your developer. Oh, and Studio is both for macOS and Windows. Plus, it's COMPLETELY FREE. And so is the course.

  • Studio tools and shortcuts
  • Practical app workflow
  • Working with Components
  • Animating your UI in Studio
  • Creating microinteractions
  • Export, preview and handoff

Greg Rog - “My work is all about design, coding and education. For over 10 years I’ve been a professional designer, design lead and UX consultant for companies such as Microsoft or Google. I work closely with Adobe as Community Professional. I also run a software house and a training facility, speak on design conferences and more. I’m curious, passionate and I love sharing knowledge.”

You can download source files to this course using this link.

This course is created with UI/UX designers in mind. If you want to design your product or you work for clients on website or app design - this is something you’ll probably be interested in. You don’t need to have any prior knowledge of the design tools to learn Studio, however if you’d previously used Sketch or XD you’ll find Studio even more intuitive and straightforward. If you were doing some interactive prototypes before, it’s also a good option to explore Studio’s possibilities. As for now the course is for macOS users only but soon, Studio will be available for Windows, too!

Basics in a breeze

Soon you'll find out that Studio is probably one of the easiest tools to master and most of the functions are simple and intuitive. Especially if you've previously used Sketch, transition to Studio is painless and all the tools and shortcuts works just as expected. This is why we won't spend much time explaining the interface, rather than jump right into creating a practical design in Studio. As you will find out this is the most effective and rewarding way of discovering Studio.

It just works

The overall user experience of Studio is great. There are dozens of little things that just works, without bothering you. You might even think - what is there to learn? Everythig is so simple. Thanks to this, the learning curve that you're about to take is focused on effective workflow, rather than the tool itself. My aim is to show you the tips and tricks to work even faster, better and more efficient.

Get the most out of InVision Studio
Get the most out of InVision Studio

One fits all

This is one of the rare examples where one solution gives you a spectrum of possibilities. For most of the time you won't have to leave InVision Studio. Even though you can create seamless transitions and advanced animations in you UI, the software itself feels light and responsive. We'll explore different parts of your workflow, from initial sketches, to a detailed design, to a prototype working on devices. All without leaving Studio.

Leverage the platform

InVision Platform is much more than Studio. Thanks to its capabilities you'll be able to easily export and share the prototypes and edit them after the rounds of feedback from your client or project owners. We'll explore those options together with the handoff capabilities and creating automated specs for developers.

Design elements

In the course I will explain the usage of colors, typography, grid and other basic UI design concepts combined with the tools and workflows available in Studio. We'll focus on the correct setup, creation of the Components and other good habits that will help you in professional UI design process.

Create beautiful UI

In the course I'd like to showcase Studio workflow based on a practical UI project of a Supercar Rental app. Thanks to this approach I'll be able to show you step-by-step design process in Studio that is closer to real life example.

Get the most out of InVision Studio