Autoplay
Autocomplete
Previous Lesson
Complete and Continue
The Bitfountain Immersive iOS Design Course
1 Sketch Basics
DE-BAS - 1 - Introduction (0:49)
DE-BAS - 2 - Get Sketch (2:35)
DE-BAS - 3 - Cloud Icon (9:24)
DE-BAS - 5 - Raspberry "R" (Part 2) (7:46)
DE-BAS - 6 - Floating Sphere (1:45)
2 Sketch Reference
DE-REF - 1 - Artboards (1:21)
DE-REF - 2 - Layers List (1:37)
DE-REF - 3 - Customizing Toolbar (1:30)
DE-REF - 4 - The Vector Tool (3:34)
DE-REF - 5 - Bezier Curves (4:03)
DE-REF - 6 - Shapes (5:16)
DE-REF - 7 - Moving Layers Forward and Backward (0:35)
DE-REF - 8 - Borders (2:50)
DE-REF - 9 - Fills (2:25)
DE-REF - 10 - Union, Subtract, Intersect, and Difference (2:28)
DE-REF - 11 - Text (1:33)
DE-REF - 12 - Adding Images (0:40)
DE-REF - 13 - Creating and Using Symbols (2:48)
DE-REF - 14 - Make Grid Tool (0:37)
DE-REF - 15 - Transform Tool (0:33)
DE-REF - 16 - Rotate Layers (0:57)
DE-REF - 17 - Rotate Copies Tool (1:05)
DE-REF - 18 - Using Masks (1:51)
DE-REF - 19 - Flip Tool (0:32)
DE-REF - 20 - Sketch Mirror (1:35)
DE-REF - 21 - Exporting (3:03)
DE-REF - 22 - Adding Fonts (1:04)
DE-BAS - 4 - Raspberry "R" (Part 1) (6:13)
3 UI Foundations Introduction
DE-UIF - 1 - Noodle Intro (3:12)
DE-UIF - 2 - UI and UX (1:01)
4 Noodle App
DE-UIF - 3 - Icon Intro (3:56)
DE-UIF - 4 - Noodle Icon Design (11:36)
DE-UIF - 5 - Launch Screen (4:16)
DE-UIF - 6 - Signup/Login Screen (12:50)
DE-UIF - 7 - Recipe Feed (6:01)
DE-UIF - 8 - Filters Intro (1:50)
DE-UIF - 9 - Feed Design (2:58)
DE-UIF - 10 - Tab Bar (10:37)
DE-UIF - 11 - Search Screen (8:23)
DE-UIF - 12 - Search (keyboard) (3:07)
DE-UIF - 13 - Results Screen (13:03)
DE-UIF - 14 - Recipe Highlight (4:20)
5 Noodle Challenge
DE-UIF - 15 - Noodle Challenge
6 Icon Module
DE-ICO - 1 - Icon Module Intro (0:41)
DE-ICO - 2 - How important is a good icon? (1:17)
DE-ICO - 3 - What makes a good icon? (2:54)
DE-ICO - 4 - Color (4:55)
DE-ICO - 5 - Apple Music Icon (2:49)
DE-ICO - 6 - Clarity (1:34)
DE-ICO - 7 - Texture (2:06)
DE-ICO - 8 - Instagram Icon Setup (4:03)
DE-ICO - 9 - Instagram Lens (12:11)
DE-ICO - 10 - Instagram Camera Body (1:46)
DE-ICO - 11 - Instagram Leather Texture (1:36)
DE-ICO - 12 - Instagram Secondary Camera Lens (3:39)
DE-ICO - 13 - Instagram Icon Final Touches (6:06)
DE-ICO - 14 - Text and Pinterest (3:40)
DE-ICO - 15 - Infuse Icon (6:58)
7 Icon Assignment
DE-ICO - 16 - Spinrilla Assignment (1:11)
8 Color
DE-COL - 1 - Intro (1:05)
DE-COL - 2 - Color Vocabulary (7:19)
DE-COL - 3 - Human Interface Guidelines (6:24)
DE-COL - 4 - Color Choices (4:32)
DE-COL - 5 - Exercises (2:14)
9 Typography
DE-TYP - 1 - Intro (1:17)
DE-TYP - 2 - Initial Terminology (5:24)
DE-TYP - 3 - Letter Spacing (6:01)
DE-TYP - 4 - Body Text Terminology (3:29)
DE-TYP - 5 - iOS Human Interface Guidelines (5:58)
10 Typography Exercises
DE-TYP1 - 1 - Typography Exercises (0:55)
11 UI Interaction Prototyping
DE-FRM1 - 1 - Framer.js Introduction (6:45)
12 Opening Framer Studio
DE-FRM2 - 1- Opening Framer Studio (7:29)
DE-FRM2 - 2 - Tour of Framer Studio (11:40)
13 Drawing With Code
DE-FRM - 1 - Shape Layers (9:56)
DE-FRM - 2 - Image Layers (4:57)
14 Click Events
DE-FRM4 - 1 - Click Events (2:41)
DE-FRM4 - 2 - Adding Layers (6:18)
DE-FRM4 - 3 - Adding States (2:55)
DE-FRM4 - 4 - Adding animationOptions (1:57)
DE-FRM4 - 5 - Continuing with States and animationOptions (2:06)
DE-FRM4 - 6 - Activating our States (4:56)
DE-FRM4 - 7 - States and animationOptions for Final Layer (3:36)
DE-FRM4 - 8 - Click Events Recap (3:00)
15 Importing Layers From Sketch Beta
DE-FRM5 - 1 - Preparing Layers (8:20)
DE-FRM5 - 2 - Importing Layers From Sketch Beta (3:22)
DE-FRM5 - 3 - Manipulating Sketch Layers in Framer (8:08)
DE-FRM5 - 4 - Accessing Other Artboards (3:58)
16 Weather App
DE-FRM6 - 1 - Weather App (1:35)
DE-FRM6 - 2 - LaParis Sketch File (4:20)
DE-FRM6 - 3 - Importing Sketch Beta File into Framer (1:08)
DE-FRM6 - 4 - Remember Layer Positions in Code (4:20)
DE-FRM6 - 5 - Repositioning Items (2:45)
DE-FRM6 - 6 - Setting Alternate Origin Positions for LA (5:04)
DE-FRM6 - 7 - Setting Alternate Origin Positions for Paris (7:53)
DE-FRM6 - 8 - Creating Code Shortcuts (3:36)
DE-FRM6 - 9 - Adding the "Start" Artboard (4:19)
DE-FRM6 - 10 - Animating the "Start" Screen (3:28)
DE-FRM6 - 11 - Animating LA Layers Back to Original Positions (8:21)
DE-FRM6 - 12 - Animation from LA to Paris (6:18)
DE-FRM6 - 13 - Animating Paris Layers (3:19)
DE-FRM6 - 14 - Reverse Animation (5:02)
DE-FRM6 - 15 - Weather App Completion (5:01)
17 4PinkBubbles
DE-FRM7 - 1 - 4PinkBubbles (5:52)
DE-FRM7 - 2 - Looping Animation (7:23)
DE-FRM7 - 3 - Finishing the Animation (6:18)
18 Toggle Robot
DE-FRM8 - 1 - Toggle Robot (2:23)
DE-FRM8 - 2 - Importing from Sketch (2:30)
DE-FRM8 - 3 - Make Layer Draggable (2:19)
DE-FRM8 - 4 - Adding Curve Shortcuts (2:14)
DE-FRM8 - 5 - Animation Time (7:45)
19 Carousel Onboarding Clone
DE-FRM9 - 1 - Carousel Onboarding Clone (3:07)
DE-FRM9 - 2 - CarouselClone Sketch File (6:22)
DE-FRM9 - 3 - Before we Begin (1:40)
DE-FRM9 - 4 - Initial Document Setup (6:34)
DE-FRM9 - 5 - Creating Shortcuts (1:25)
DE-FRM9 - 6 - Setting Initial Positions (6:16)
DE-FRM9 - 7 - Swipe Indicator Animation (9:43)
DE-FRM9 - 8 - Reviewing The SwipeGo Animation (4:32)
DE-FRM9 - 9 - Second View Animation (8:03)
DE-FRM9 - 10 - Continue Button Transition (8:19)
DE-FRM9 - 11 - Next Button Transition (8:22)
DE-FRM9 - 12 - Finishing Carousel Onboarding Clone (2:23)
DE-FRM4 - 5 - Continuing with States and animationOptions
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock