Mobile App Design: From Sketches to Interactive Prototypes

Learn to turn UX Design sketches into an interactive prototype on your mobile in a quick and fun way using Marvel App
4.3 (937 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
16,974 students enrolled
Free
Start Learning Now
  • Lectures 18
  • Contents Video: 2 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 4/2015 English

Course Description

UPDATE: New Section! (Section 2)

  1. Just added a new section where we go over the most modern design and prototyping tools.
  2. We discuss design tools like Sketch 3, Photoshop, and Illustrator, so you can decide what to use.
  3. Overview of static prototyping tools like Marvel App and Invision
  4. Overview of granular animation prototyping tools like Pixate, Flinto, FramerJS
  5. We create a simple design flow using Sketch!
  6. We put our prototype on Marvel

/////////////////////////////////////////////////////////////////////

Overview

A quick and practical course on turning your whiteboard or paper sketches into mobile prototypes. Learn to use animations and transitions to convert your static designs into easy-to-understand user flows, products, or features.

You don't need design skills, software knowledge, or even know how to draw. All you need is some paper, a pen, and an idea—a story waiting to be told.

5 reasons you should take this course

  • Prototyping is powerful. It helps an idea explain itself by letting users play with it.
  • Drawing is quick and simple. Sometimes boxes, lines, and circles are all you need to describe a product.
  • You'll have fun taking it. This course is designed for you to finish it as fast as possible and enjoy the ride.
  • You'll impress your colleagues. We all want to express ourselves, this course will empower your communication skills.
  • It's free and it doesn't suck! Seriously, I took some effort to cut what you don't need and just keep the juicy stuff ;)

So, is this the right course for you?

  • The goal of this course is to teach you how to convert your sketches, either on a whiteboard or on paper into a quick and dirty prototype on your phone.
  • I built this course for engineers, designers, product managers, or anyone interested in expressing an idea.
  • This is for creators that are in the early stages of building an app or feature—teams that want to explore ideas quickly or try different approaches to the same problem
  • This is for people that want to test their concept and show it to potential users

Who am I?

I've worked as a designer for the last 15 years. Now I'm focused on designing web and mobile products, but even with all that experience, sometimes explaining a concept with simple wireframes can be a challenge. Prototyping has helped me bridge that communication gap.

What this course does NOT cover

This course does not go into detail about usability or other UX issues. I think it's obvious by now, but this course will not teach you how to code. Remember, this is for people that are in the early stages of building a product or feature.

If you want to know a bit more about mobile UX or if you want to design a high fidelity UI, then I recommend you take my other course "Design and prototype an iOS Mobile App on Illustrator"

What do you need?

  • For this course, you only need a marker and a whiteboard, or a pencil and paper
  • A smart phone. Either an Android device or an iPhone.
  • Downloading the free Marvel App

This course is quick and practical, and my goal is for you to have fun finishing it. Prototyping has made a huge impact in my work. It's powerful. I'm sure it will help you too.

So, are you ready to start? Let's do it!
HAPPY PROTOTYPING :)

What are the requirements?

  • You only need to have an idea, a problem to solve, a story to tell

What am I going to get from this course?

  • Turn your design sketches into engaging interactive mobile prototypes

What is the target audience?

  • This course is meant for UX Designers, project managers, engineers or any other stakeholder that is in the early stages of building a product or feature and want to explore different ideas

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

02:01
  • Is this course for you?
  • What are you going to get?
  • What are you NOT going to get?
  • Is it going to be fun?
Let me answer these questions for you :)
Section 1: Turn paper sketches into a mobile prototype
01:28

You're going to need a piece of paper, a pen/pencil, and your phone. That's it. Let's get drawing!

Let's start drawing our wireframes
07:26
How to use Marvel App
01:43
Taking pics of the sketches with Marvel App
01:28
Creating your prototype—Linking screens with hotpoints and adding transitions
05:56
Let's see how good you got!
4 questions
00:44

Congratulations! You just finished a whole section. You should be able to create interactive prototypes with simple sketches. Share your work on the discussion board so everyone can see what you accomplished... Oh, yeah. And, here's a little celebration dance just for you ;)

Section 2: Design and Prototype Introduction
Introduction to Design and Prototyping Tools
05:39
Design Tools
13:08
Prototyping Tools
05:39
Animated Prototyping Tools
09:02
Creating a Quick Simple Flow using Sketch
17:37
Creating a Prototype using Marvel
07:21
Section 3: Creating a prototype from drawings on a whiteboard
Introduction—What you'll learn and what you need for this section
01:32
Drawing your signup flow on a whiteboard
11:18
Creating the prototype with Marvel App
07:22
Creating the prototype with Marvel App (detail screen)
07:41
Let's see how good you got!
1 question
01:36

Change your profile preferences to HTML5 video so you can control the speed of your lectures.

Also, download Marvel App from your phone or via this link: https://marvelapp.com/apps/

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Pablo Stanley, Product Designer

Hello, I'm Pablo Stanley. I'm a San Francisco based product designer. I love solving design puzzles, making silly illustrations, composing geeky music, creating colorful animated gifs, munching veggie burgers, and writing punny comics.

Mentoring is one of my new found passions. I want to learn and teach as much as I can and Udemy is the best platform for it.

I also write a comic series called “The Design Team”.

Ready to start learning?
Start Learning Now