Skip to content
#2 in Interaction DesignUdemyIllustratorPaid courseAll Levels

Design and Prototype an iOS8 Mobile App on Illustrator (Udemy.com)

Create beautiful, high-fidelity iOS8 app prototypes with interactions and transitions. No coding skills required.

Created by: Pablo Stanley

Last updated April 2015

Our take

Based on the ratings of 373 students, a sample of their written reviews and the syllabus, as the course stood in April 2015. No course pays to be reviewed.

A free, 5.5 hour walkthrough of building a fashion shopping app from a blank artboard to a tappable prototype on a phone. The design work happens in Illustrator, and the prototype is stitched together in Marvel, so there is no code anywhere. Pablo Stanley, a San Francisco product designer, teaches it in a follow-along style that reviewers describe as natural and on point. It suits designers or founders with an app idea who want to see how a screen design becomes something people can actually tap and swipe.

Students mostly like it. The 4.1 rating across 373 reviews holds up, with 324 of those at four or five stars, and reviewers say the structure is clear and the videos are well made. The complaints are consistent, though. Two reviewers find the background music makes the narration hard to follow. A reviewer who has used Illustrator for years calls the pace slow and wanted more app-specific design thinking; another simply says move faster. Two more grumble that the instructor keeps changing things mid-design. One two-star review lists blurry videos, a missing artboard, and a Marvel interface that no longer matches what's on screen, which points at the real issue: the last update was in April 2015.

Age is the main caveat. iOS 8 patterns, iPhone 6 screen sizes and a Marvel workflow from 2015 look dated next to the Principle and Flinto courses it sits beside in our interaction design list. As a free primer on the mindset of prototyping, and on turning paper sketches into clickable flows, it still earns its place. Treat the specific tool steps as a rough guide rather than gospel, and expect to adapt them to whatever Marvel looks like today.

Best forDesigners or founders with an app idea who want to see a static screen become a clickable phone prototype without writing code.
Skip it ifYou want current tooling; the iOS 8 patterns and 2015 Marvel workflow have aged, and the background music grates on some.

Pros

  • Free, and builds one complete fashion shopping app from blank artboard to a tappable phone prototype
  • No coding at all: Illustrator for the screens, Marvel hotspots for the transitions and interactions
  • Reviewers call the teaching natural, on point and well organized, with good video quality
  • Includes a paper sketch to prototype section, handy for testing an idea in an afternoon

Cons

  • Last updated in 2015: iOS 8 patterns and a Marvel interface that no longer matches the videos
  • Background music is loud enough that some reviewers struggle to hear the narration
  • Too slow for people who already know Illustrator, with little app design theory to make up for it
The course itself is very good, however there is a background song playing that sometimes is quite hard to understand the instructor.
Bruno Campos, a student

Listed as all levels; one reviewer calls it basic but easy to follow. You need Illustrator CS6 or newer and free Marvel and Dropbox accounts.

icon
What you will learn

  • Know how to create iPhone 6 screens and assets
  • Prototype complex flows easily
  • Simulate iOS8 transitions and interactions
  • Put their creations on a phone

Course content

8 sections · 41 lectures · 5.5 hours of video 5 quizzes

  1. 1Introduction 1 free preview2 lectures · 5 min
  2. 2Turn paper sketches of a video player into a mobile prototype 2 free previews6 lectures · 1 quiz · 19 min
  3. 3Designing the layout 2 free previews9 lectures · 2 quizzes · 1.2 hours
  4. 4Design the content screens8 lectures · 1 quiz · 1.8 hours
  5. 5Design the user settings screen and final details4 lectures · 27 min
  6. 6Create Prototype on Marvel6 lectures · 1 hour
  7. 7Testing your design on your phone and desktop 1 free preview2 lectures · 13 min
  8. 8Create a signup flow prototype on a whiteboard 1 free preview4 lectures · 1 quiz · 28 min

Who it is for

The instructor says it suits

  • Graphic Designers
  • UX designers
  • Entrepreneurs
  • Anyone that has an idea for an app
  • UI designers

What you need before you start

  • Free Marvel App account
  • Free Dropbox account (minimum)
  • Illustrator CS6 or higher
  • Basic knowledge of Mac/PC operative systems

icon
Course Description

Are you ready to blow people's minds?

Go from amateur to "iPhone App Design Badass" by using the power of prototypes. Learn to take a blank page and transform it into a complete, high-fidelity, and interactive prototype on your phone.

  • Design iOS assets from scratch using flat design (so trendy).
  • Create complete flows and pixel-perfect screens (so sharp!).
  • Prototype your creation on any smartphone (so smooth).
  • Reproduce amazing transitions and interactions with no coding at all (so smart).

(Warning: High Risk of Mind Explosions)

I'll walk you through the entire process, while skipping the boring theoretical knowledge. You will go straight to the juicy stuff, and start building the app of your dreams right away. For the prototype, we'll be using the free tool Marvel App (coming soon: InVision) and the design will be build on Adobe Illustrator (free trial available).

So, why did I create this course?

Working as a designer, documentation is often the main deliverable for clients. The problem is that when dealing with complicated interactions, documents get bulky and hard to read (google search: boring). Nobody wants to see an app on paper, they want to play with it on their phone; tap, swipe, scroll, and do a little dance. That’s why I found that creating quick mock-ups and prototypes were a more powerful way of telling a story. People are amazed to see the idea in action and you end up looking like a total champ.

Who is this course for?

This course was made for beginner to advanced designers who want to improve their skill set and want to show how their creations actually feel on a phone. Or for anyone that wants to mock-up their ideas in a realistic way.

Entrepreneurs will find this course useful to bring their dreams to the real world in an easy way. Pitching a prototype to investors will have them writing checks in no time.

This course will also prove valuable for UX and user testing. Upon completion, your designs will be transformed into interactive, high-fidelity products - without the use of expensive programmer$$$.

What you’ll learn

In this course we’ll start from a blank screen until we have a complete iPhone 6 app. You will follow along through the entire process.

We'll build a fashion shopping app following common iOS 8 patterns in navigation, animations, layouts, icons and graphics, buttons, interactivity and even color and typography. We’ll prototype a signup flow, an onboarding screen, discovery flow, search screens, and user settings. We’ll create product detail screens, brand pages, a selection menu, a tabbed menu, an image slideshow, and you'll even be able to put your smiling mugshot as a profile pic. Sweet, right?

Prototyping is powerful

Creating a prototype as a mock-up or final delivery allows for greater interaction with the product and a better understanding of how it works. It's an impactful way to present an experience or tell a story. People know how to interact with products.

Stop documenting. Start prototyping.

Take a look at the introductory video and take my free preview. I look forward to seeing you inside.

icon
Udemy Discount

The discount is applied through our link. Open the course from here and Udemy's current promotional price is applied at checkout on most courses, no code to type.

Some courses are excluded from Udemy's promotions. If the price does not drop, clear your browser cookies and use the button again.

icon
Instructor Details

Pablo Stanley

Hello, I'm Pablo Stanley. I'm a San Francisco based product designer. I'm the designer and cofounder of a healthcare startup in San Francisco called Carbon Health. 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”.

icon
More courses by Pablo Stanley

$54.99

$59.99

icon
More Illustrator courses

$20

$20

$84.99

$89.99

$124.99

icon
Reviews

4.1

373 ratings on Udemy

Select a bar to show only those reviews.Select the bar again to show every rating.

By Jared Neely on 6/30/2018

So far the course is super helpful in making a prototype of a app. I am really enjoying it!

By Moon Lee on 4/24/2018

Hate the Background music watching fast speed, and presentation change here change there, made me sick (like delete icon created @Export and Import). Missed 1 Brands section Artboard in Video. Advertising using Marvel app link screens using Hotspots. But Marvel Prototyping (2 Projects only for Free tested on desktop) Interface procedures different from videos shown. Cannot download project, only can have link (Need to pay). No less 3 minutes or less videos direct to point. Blur videos in some contents.

By Kev Master on 4/1/2018

i know how to pen and paper, move faster pls...

By Musa B sesay on 1/10/2018

thanks for teaching me the basic of prototyping especially the aspect of physical draw and illostration most my work as a developer I just learning to code most time but no knowledge of illustrating ideas simple as u did now I have the concept of designing simple ideas , prototype and programming because most time when u startup new idea or small project u don't have the resource to hire expert to do some work for you as a developer is very important to learn multiple skills thank you

By Bruno Campos on 10/24/2017

The course itself is very good, however there is a background song playing that sometimes is quite hard to understand the instructor. Especially when you like me, are taking the lectures while using the subway public transport.

By Ellaine Escueta on 7/7/2016

This is a great way to understand the basics of building a functional prototype for an app. The tutor occasionally talks low throughout the video, and the background music ends of drowning him out at times, but other than that its a great lesson.

By Kereem Adams on 3/17/2016

This course was very detailed and the first UX to illustrator/Photoshop course I was able to complete properly. Five stars all the way, I am definitely gonna check out your apple watch course now

By Todd Fisk on 3/5/2016

I would recommend this training, but I don't love the class (for style reasons like the background music and the superficiality of the example app -I find both annoying). What I think is good is he takes you through a fairly full app prototype, and it's a useful experience just to go from start to finish. So overall it's a good course.

By Theo Palios on 2/4/2015

I took this course as a web designer who wanted to design a mobile app for the first time and see how it works. It didn't only helped me to achieve that but i also succeeded on an essay for my university using the marvel app for prototyping. Highly recommended course.

By Adam Treister on 11/24/2014

I signed up for this course after seeing a promotion online, and am surprised by how easy it is to pick up some of these skills. I like the pace of the course, especially how it focuses on only the important tactical portions - and skips the theoretical jargon that no one needs to use anyway. I would definitely purchase another course if you launch it.

Showing all 10 reviews on CourseDuck

Read all 373 reviews on Udemy

icon
Quality Score

No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.

Content Quality
/
Video Quality
/
Qualified Instructor
/
Course Pace
/
Course Depth & Coverage
/

Overall Score : 82 / 100