off original price!

The coupon code was not applied because it has already been redeemed or expired. Please click on "My Courses" to see if the course is already on your account.

off original price!

The coupon code was not applied because it has already been redeemed or expired. Please click on "My Courses" to see if the course is already on your account.

The Bitfountain Immersive iOS Design Course

The Intersection of Design & App Development Is This UI/UX Course

What's Inside

Whether you're a total beginner to app development, a pro who wants to hone your style, or a graphic designer interested in trying UI/UX design, you have a ton to gain from this course. Using Bohemian Coding's Sketch as a primary tool, you'll design a complete iOS app interface, and infuse your own style and preferences to make your app uniquely yours. This one is as fun as it is functional.

Access 122 lectures & 9 hours of content
Complete simple but unique design projects to master the basics of Sketch
Learn the UI Foundations you need to design a complete app from start to finish
Discover the basics of color & color psychology in UI/UX design
Design popular app icons from Pinterest to Instagram in your own vision
Learn the basics of typography in UI/UX design

Course Curriculum

1 Sketch Basics

DE-BAS - 1 - Introduction - 0:49
Start
DE-BAS - 2 - Get Sketch - 2:35
Start
DE-BAS - 3 - Cloud Icon - 9:24
Start
DE-BAS - 5 - Raspberry "R" (Part 2) - 7:46
Start
DE-BAS - 6 - Floating Sphere - 1:45
Start

2 Sketch Reference

DE-REF - 1 - Artboards - 1:21
Start
DE-REF - 2 - Layers List - 1:37
Start
DE-REF - 3 - Customizing Toolbar - 1:30
Start
DE-REF - 4 - The Vector Tool - 3:34
Start
DE-REF - 5 - Bezier Curves - 4:03
Start
DE-REF - 6 - Shapes - 5:16
Start
DE-REF - 7 - Moving Layers Forward and Backward - 0:35
Start
DE-REF - 8 - Borders - 2:50
Start
DE-REF - 9 - Fills - 2:25
Start
DE-REF - 10 - Union, Subtract, Intersect, and Difference - 2:28
Start
DE-REF - 11 - Text - 1:33
Start
DE-REF - 12 - Adding Images - 0:40
Start
DE-REF - 13 - Creating and Using Symbols - 2:48
Start
DE-REF - 14 - Make Grid Tool - 0:37
Start
DE-REF - 15 - Transform Tool - 0:33
Start
DE-REF - 16 - Rotate Layers - 0:57
Start
DE-REF - 17 - Rotate Copies Tool - 1:05
Start
DE-REF - 18 - Using Masks - 1:51
Start
DE-REF - 19 - Flip Tool - 0:32
Start
DE-REF - 20 - Sketch Mirror - 1:35
Start
DE-REF - 21 - Exporting - 3:03
Start
DE-REF - 22 - Adding Fonts - 1:04
Start
DE-BAS - 4 - Raspberry "R" (Part 1) - 6:13
Start

3 UI Foundations Introduction

DE-UIF - 1 - Noodle Intro - 3:12
Start
DE-UIF - 2 - UI and UX - 1:01
Start

4 Noodle App

DE-UIF - 3 - Icon Intro - 3:56
Start
DE-UIF - 4 - Noodle Icon Design - 11:36
Start
DE-UIF - 5 - Launch Screen - 4:16
Start
DE-UIF - 6 - Signup/Login Screen - 12:50
Start
DE-UIF - 7 - Recipe Feed - 6:01
Start
DE-UIF - 8 - Filters Intro - 1:50
Start
DE-UIF - 9 - Feed Design - 2:58
Start
DE-UIF - 10 - Tab Bar - 10:37
Start
DE-UIF - 11 - Search Screen - 8:23
Start
DE-UIF - 12 - Search (keyboard) - 3:07
Start
DE-UIF - 13 - Results Screen - 13:03
Start
DE-UIF - 14 - Recipe Highlight - 4:20
Start

5 Noodle Challenge

DE-UIF - 15 - Noodle Challenge
Start

6 Icon Module

DE-ICO - 1 - Icon Module Intro - 0:41
Start
DE-ICO - 2 - How important is a good icon? - 1:17
Start
DE-ICO - 3 - What makes a good icon? - 2:54
Start
DE-ICO - 4 - Color - 4:55
Start
DE-ICO - 5 - Apple Music Icon - 2:49
Start
DE-ICO - 6 - Clarity - 1:34
Start
DE-ICO - 7 - Texture - 2:06
Start
DE-ICO - 8 - Instagram Icon Setup - 4:03
Start
DE-ICO - 9 - Instagram Lens - 12:11
Start
DE-ICO - 10 - Instagram Camera Body - 1:46
Start
DE-ICO - 11 - Instagram Leather Texture - 1:36
Start
DE-ICO - 12 - Instagram Secondary Camera Lens - 3:39
Start
DE-ICO - 13 - Instagram Icon Final Touches - 6:06
Start
DE-ICO - 14 - Text and Pinterest - 3:40
Start
DE-ICO - 15 - Infuse Icon - 6:58
Start

7 Icon Assignment

DE-ICO - 16 - Spinrilla Assignment - 1:11
Start

8 Color

DE-COL - 1 - Intro - 1:05
Start
DE-COL - 2 - Color Vocabulary - 7:19
Start
DE-COL - 3 - Human Interface Guidelines - 6:24
Start
DE-COL - 4 - Color Choices - 4:32
Start
DE-COL - 5 - Exercises - 2:14
Start

9 Typography

DE-TYP - 1 - Intro - 1:17
Start
DE-TYP - 2 - Initial Terminology - 5:24
Start
DE-TYP - 3 - Letter Spacing - 6:01
Start
DE-TYP - 4 - Body Text Terminology - 3:29
Start
DE-TYP - 5 - iOS Human Interface Guidelines - 5:58
Start

10 Typography Exercises

DE-TYP1 - 1 - Typography Exercises - 0:55
Start

11 UI Interaction Prototyping

DE-FRM1 - 1 - Framer.js Introduction - 6:45
Start

12 Opening Framer Studio

DE-FRM2 - 1- Opening Framer Studio - 7:29
Start
DE-FRM2 - 2 - Tour of Framer Studio - 11:40
Start

13 Drawing With Code

DE-FRM - 1 - Shape Layers - 9:56
Start
DE-FRM - 2 - Image Layers - 4:57
Start

14 Click Events

DE-FRM4 - 1 - Click Events - 2:41
Start
DE-FRM4 - 2 - Adding Layers - 6:18
Start
DE-FRM4 - 3 - Adding States - 2:55
Start
DE-FRM4 - 4 - Adding animationOptions - 1:57
Start
DE-FRM4 - 5 - Continuing with States and animationOptions - 2:06
Start
DE-FRM4 - 6 - Activating our States - 4:56
Start
DE-FRM4 - 7 - States and animationOptions for Final Layer - 3:36
Start
DE-FRM4 - 8 - Click Events Recap - 3:00
Start

15 Importing Layers From Sketch Beta

DE-FRM5 - 1 - Preparing Layers - 8:20
Start
DE-FRM5 - 2 - Importing Layers From Sketch Beta - 3:22
Start
DE-FRM5 - 3 - Manipulating Sketch Layers in Framer - 8:08
Start
DE-FRM5 - 4 - Accessing Other Artboards - 3:58
Start

16 Weather App

DE-FRM6 - 1 - Weather App - 1:35
Start
DE-FRM6 - 2 - LaParis Sketch File - 4:20
Start
DE-FRM6 - 3 - Importing Sketch Beta File into Framer - 1:08
Start
DE-FRM6 - 4 - Remember Layer Positions in Code - 4:20
Start
DE-FRM6 - 5 - Repositioning Items - 2:45
Start
DE-FRM6 - 6 - Setting Alternate Origin Positions for LA - 5:04
Start
DE-FRM6 - 7 - Setting Alternate Origin Positions for Paris - 7:53
Start
DE-FRM6 - 8 - Creating Code Shortcuts - 3:36
Start
DE-FRM6 - 9 - Adding the "Start" Artboard - 4:19
Start
DE-FRM6 - 10 - Animating the "Start" Screen - 3:28
Start
DE-FRM6 - 11 - Animating LA Layers Back to Original Positions - 8:21
Start
DE-FRM6 - 12 - Animation from LA to Paris - 6:18
Start
DE-FRM6 - 13 - Animating Paris Layers - 3:19
Start
DE-FRM6 - 14 - Reverse Animation - 5:02
Start
DE-FRM6 - 15 - Weather App Completion - 5:01
Start

17 4PinkBubbles

DE-FRM7 - 1 - 4PinkBubbles - 5:52
Start
DE-FRM7 - 2 - Looping Animation - 7:23
Start
DE-FRM7 - 3 - Finishing the Animation - 6:18
Start

18 Toggle Robot

DE-FRM8 - 1 - Toggle Robot - 2:23
Start
DE-FRM8 - 2 - Importing from Sketch - 2:30
Start
DE-FRM8 - 3 - Make Layer Draggable - 2:19
Start
DE-FRM8 - 4 - Adding Curve Shortcuts - 2:14
Start
DE-FRM8 - 5 - Animation Time - 7:45
Start

19 Carousel Onboarding Clone

DE-FRM9 - 1 - Carousel Onboarding Clone - 3:07
Start
DE-FRM9 - 2 - CarouselClone Sketch File - 6:22
Start
DE-FRM9 - 3 - Before we Begin - 1:40
Start
DE-FRM9 - 4 - Initial Document Setup - 6:34
Start
DE-FRM9 - 5 - Creating Shortcuts - 1:25
Start
DE-FRM9 - 6 - Setting Initial Positions - 6:16
Start
DE-FRM9 - 7 - Swipe Indicator Animation - 9:43
Start
DE-FRM9 - 8 - Reviewing The SwipeGo Animation - 4:32
Start
DE-FRM9 - 9 - Second View Animation - 8:03
Start
DE-FRM9 - 10 - Continue Button Transition - 8:19
Start
DE-FRM9 - 11 - Next Button Transition - 8:22
Start
DE-FRM9 - 12 - Finishing Carousel Onboarding Clone - 2:23
Start

off original price!

The coupon code was not applied because it has already been redeemed or expired. Please click on "My Courses" to see if the course is already on your account.

Get started now!

Paid Course Coupon Discount

or pay in installments:

$49

Certificate Available

46429+ Students

122 Lectures

8+ Hours of Video

Lifetime Access

24/7 Support

Instructor Rating

Bitfountain.io

Bitfountain is an online coding bootcamp focused on iOS development and design. We teach you how to build real production-ready apps with step by step video tutorials.

Popular Bundles

StackSkills Unlimited
Evan Kimbrell's Business Launching Bundle
Essential JavaScript Coding Bundle
Ultimate Web Developer Bundle
World Travel Hacker Bundle

off original price!

The coupon code was not applied because it has already been redeemed or expired. Please click on "My Courses" to see if the course is already on your account.

Just In

The 2020 Learn to Code Bundle

Hot Bundle

Master Photoshop & The Entire Creative Cloud

Unlimited Learning

Expand Your Mind with StackSkills Unlimited

Course Categories

The Bitfountain Immersive iOS Design Course

The Intersection of Design & App Development Is This UI/UX Course

What's Inside

Course Curriculum

Get started now!

Paid Course Coupon Discount

Bitfountain.io