
Design and prototype an iOS8 mobile app from scratch using Illustrator, creating every screen, UI asset, logo, and icon, with onboarding, sign-up, navigation, and an image slider.
You're going to need a piece of paper, a pen/pencil, and your phone. That's it. Let's get drawing!
Download the Marvel app, create a new project, select your device (for example iPhone 6), name it, then add photos using the plus button and capture images with the camera.
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 ;)
Select color swatches from libraries, set a global primary and accent color for your ios8 app, and refine with hue, saturation, and brightness.
Draw a rectangle from top left to bottom right to set the background, place and mask an image, and adjust opacity and layer order for foreground text and logo.
Design the first iOS 8 app screen in Illustrator by creating two large buttons with centered call-to-action text, aligning elements, and applying contrast with a separating line.
Design and prototype three intro screens in Illustrator by duplicating artboards, placing and centering images, adjusting quotes and backgrounds, and aligning hover interactions for a polished welcome flow.
Design the onboarding flow for an iOS 8 app in Illustrator, building sign-up and intro screens with a status bar and brand assets, including logos and layers.
Design and prototype an iOS8 feed section in illustrator by building content blocks with rectangles and clipping masks, adding images and text, and refining with wireframe and outline views.
Learn to build a product detail image slider in Illustrator for an iOS8 mobile app by duplicating images, placing them precisely, and ensuring they fill the frame.
Create a two-screen product options panel with an onstage size menu and a window that appears to let users select a size, updating the state accordingly.
Create an interactive brands section by building a brand list with clickable items that reveal product options, while duplicating layouts, applying brand icons, colors, and product imagery using Illustrator tools.
Review and organize artboards for the iOS8 app prototype by editing onboarding screens and print screens, and emphasize clear naming of artworks to keep files understandable.
Create the settings screen by placing a settings icon from assets, duplicating elements, and refining text and alignment. Include a sign-out option and finalize the layout.
Create an icon on a new artboard, draw a rectangle background, add a two-letter logo with gradient, outlines, and a subtle shadow; prototype and export the assets for import.
Set up the signup flow by adding hotspots and actions across screens, linking to the next screen with clicks or taps and fixed footer behavior.
Set up the discover, product, and brands screens in an Illustrator-based iOS 8 prototype, including cover panels, headers, footers, and interactive hotspots with navigation transitions.
Test the desktop prototype of the iOS8 app by adjusting settings, color, and hotspots. Preview interactions live with the play button and onboarding flows.
Create a Marvel App prototype on an iPhone 6 by importing photos, adding hot points, linking screens with left transitions, and testing navigation through error and success screens.
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.
(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.