Basic Screen Linking (Hotspotting) With Invision | App Prototype

Autoplay
Autocomplete

Previous Lesson Complete and Continue

APP PROTOTYPE MASTERY

PART 1 : INTRODUCTION & BASIC SKETCH PROTOTYPING

Course Introduction (10:05)
Watch This Video First Before You Go Through The Rest Of This Course (2:44)
Types Of Mobile Apps You Can Create (11:07)
Our App Project For This Course
Preparing For Sketching Our App Screens (1:54)
Sketching Out App Screens On Paper (11:18)
Overview Of Marvel (14:49)
Taking A Picture Of Your Sketches (4:43)
Prototyping With Marvel (Web Version) (13:15)
Prototyping With Marvel (Mobile) (2:13)
Embedding Video & Audio Services Into Your Prototype (6:12)

PART 2 : BUILDING OUR PROTOTYPE MASTERPIECE IN PHOTOSHOP (SCREEN 1)

Don't Have Photoshop? (Watch This Video & Snag It For Cheap) (2:31)
(Important!) Keeping Files Organized (4:42)
Overview Of Invision (5:31)
Tethr (A Freaking Awesome IOS Design Kit!) (9:07)
Setting Up Base Template For App In Photoshop (6:38)
Adding A Cool Background To Our App (19:57)
Creating An Exciting Logo That Wows Your Users! (13:27)
How To Find Cool Text Fonts For Your App (14:43)
Adding Text Part 2 (Font Meme Revisited) (10:16)
Badass Ninja Text Tool (Hi Ya!) (9:04)
Button Mania Part 1: Duplication & Color Editing (11:13)
Button Mania (Part 2) : Utilizing Preset Templates (5:07)
Button Mania (Part 3) : Adding Crazy Cool Effects (12:45)
Applying Finishing Touches To Main Screen (4:22)

CREATING SECOND SCREEN - (NEW USER/SIGN UP) SCREEN

Creating Main Sign Up Screen (19:01)
Adding Realistic IOS Keyboard (2:58)

CREATING THIRD SCREEN - CHOOSE SELECTION SCREEN

Part 1 : Adding Logo (8:41)
Part 2 : Adding Buttons & Icons (18:49)
Part 3 : Adding Avatar Box & Finishing Touches (15:12)

CREATING FOURTH SCREEN - MAIN LANGUAGE SELECTION

Setting Up The Main Language Selection Screen (19:51)
Adding Layer Masks And Flags To Langauge Selection Screen (8:56)
Adding Patterns To Buttons Of Main Langauge Selection Screen (11:48)

CREATING FIFTH SCREEN - LEARN ITALIAN SCREEN

Part 1 : Creating Learn Italian Screen (15:22)
Part 2 : Add Icons To Buttons (6:04)

CREATING SIXTH SCREEN - LEARN ITALIAN BY DIFFICULTY

Learn Italian By Difficulty Screen (9:01)

CREATING SEVENTH SCREEN - LEARN ITALIAN BY CATEGORY

Learn Italian By Category Screen (14:10)

PART 3 : HOTSPOTTING OUR PROTOTYPE ON THE INTERWEB!

Getting Started With Invision (4:14)
Basic Screen Linking (Hotspotting) With Invision (12:54)
Using Templates To Make Linking Easier (2:32)
Adding Overlays To App Prototpye (5:07)
SMS Sharing With Invision (Text Message Link) (3:03)
How To Access Your App Project On Your Phones Home Screen Anytime (2:08)

PART 4 : APP MOCKUP 101 : (SEEING HOW YOUR APP LOOKS LIKE IN THE HANDS OF A USER)

Amazing Mockup Website (4:34)
Overview Of PlaceIt (Unique Video Mockups) (5:10)
Overview Of PlaceIt (Part 2) (4:56)
Recording Our Video Mockup (7:35)

PART 5 : APP MOCKUP 101 : (SEEING HOW YOUR APP WILL LOOK LIKE IN THE APP STORE)

Overview Of App Icon Template (Amazing!!) (5:26)
Applying Our Icon To The Template (5:46)
Editing Icon Template & Finishing Touches (6:14)

PART 6 : APP MOCKUP 101 : (EDITING PREMADE MOCKUPS WITHIN PHOTOSHOP)

How To Edit Pre Made Mockup Templates In Photoshop (16:53)

PART 7 : SHOWCASING YOUR APP ON A WEBSITE/LANDING PAGE

Setting Up Iphone Screen Template For Websites (4:20)
Using Strikingly To Showcase Your App (Part 1) (4:27)
Using Strikingly To Showcase Your App (Part 2) (7:04)
Using Strikingly To Showcase Your App (Part 3) (12:12)

PART 8 : SHOWCASING OUR APP WITH A SWEET DEMONSTRATION VIDEO

Mirror Your Iphone On Your Computer With Reflector (5:33)
Additional Features Of Screen Mirroring Tool (Reflector) (6:06)
Download This Free Audio Editing Tool (2:23)
Grab This Screen Recording Tool (Free Trial) (2:05)
Snag This Free (But Efficient) Video Editing Program (1:23)
Free Royalty Free Music Site 1 (8:02)
Free Royalty Free Music Site 2 (5:31)
Free Royalty Free Music Site 3 (3:12)
Paid Royalty Free Music Site 1 (6:31)
Paid Royalty Free Music Site 2 (2:37)
Paid Royalty Free Music Site 3 (2:44)
Recording Screens Of App Demonstration Video (3:09)
Recording Narration For App Demonstration Video (9:57)
Removing Green Screen & Adding Audio To Demonstration Video (Option 1) (15:38)
Removing Green Screen & Adding Audio To Demonstration Video (Option 2) (10:18)
Uploading App Demonstration Vid To Youtube (3:25)
Uploading App Demonstration Vid To Youtube (Using Youtube Audio Library) (5:36)
Embedding App Demonstration Video In Strikingly (4:40)

MAIN COURSE RESOURCES

PROTOTYPING PAPER (PRINT OUT)

IMPORTANT (FOR BONUS FILES BELOW)

IMPORTANT NOTE FOR BONUS FILES

(BONUS CONTENT) - FREE FONT SITES

FONT SQUIRREL (AWESOME!)
DA FONT
FONT PARK
1001 FREE FONTS

(BONUS CONTENT) - MORE UI TOOLS/KITS

DO (ANOTHER UI KIT FROM INVISION)

(BONUS CONTENT) - FREE IMAGE SITES

PIXABAY
PEXELS
GOOD FREE PHOTOS
UNSPLASH
SPLASH BASE
JAY MANTRI (PHOTOGRAPHER)
TRAVEL COFFEEBOOK
DESIGNERS PICS
SUPER FAMOUS
PICOGRAPHY
SNAPOGRAPHIC
STOKPIC
KABOOM PICS
MMT
RAUMROT
STOCKSNAP
FREE NATURE STOCK
BUCKETLISTY (TRAVEL PHOTOS)
GRATISOGRAPHY
LIFE OF PIX
NEW OLD STOCK (VINTAGE PHOTOS)
SPLITSHIRE
MAGDALEINE

Basic Screen Linking (Hotspotting) With Invision

Complete and Continue