Autoplay
Autocomplete
HTML5
Flash
Player
Speed
Previous Lecture
Complete and continue
The Bitfountain Design Immersive - Craft 10+ apps and logos with Sketch
Introduction to the Course
Welcome! (1:03)
Get Sketch (0:59)
Why Sketch? (1:59)
A Brief History of Graphic Design
Why Design? (1:41)
A Brief History of Graphic Design (6:44)
Introduction to Sketch
Toolbar (0:59)
The Left Bar: Layers and Tags (9:57)
Group Elements (1:56)
Merging Shapes: Union, Subtract, Intersect, Difference (9:57)
Symbols (1:24)
Mockup Introduction (1:24)
Creating a Symbol (1:24)
From Text to Outline (4:06)
Text Converted to Outlines : Modifying Individual Colors (7:24)
Text Styles (4:06)
Shared Shape Styles (5:36)
Resizing Pixel by Pixel (5:36)
Reshaping/Resizing Using the Space Bar (2:31)
Balancing Elements' Visual Weights (2:31)
Mail Icon: Quick Exercise (2:31)
The Fundamentals of Form
Shape and Form (5:56)
Pictographs (5:56)
What is Gestalt Psychology? (4:04)
Skype Logo
Importing an Image (1:12)
Generate Art Boards (1:12)
Adding Shapes (1:12)
Groups and Shape Properties (3:04)
Adding Text (3:04)
Exploring Some Property Tools (3:04)
What's the Golden Ratio Grid?
Golden Ratio Grid (14:48)
Golden Ratio Exercise
A Lesson About Color
Color Lesson intro (2:40)
Color Lesson Categories (2:40)
Color Lesson Hue, Chroma, and Values (2:40)
Color Lesson Further Considerations (2:40)
Color Exercise
Thinking About Shape, Form, and Color
Weather Icon: Part 1 (5:56)
Weather Icon: Part 2 (5:56)
Weather Icon: Part 3 (5:56)
Photo Icon (5:11)
Designing a Color Palette (3:23)
A Different Approach to Color Palette Creation: 3x3 Color Palette (5:11)
Evernote Logo (3:23)
ALTERNATIVE SOLUTION : Evernote Logo with Vectors and Bezier Curves (7:56)
3D Shapes without Modeling (13:32)
A Lesson About Typography
Typography Intro (3:49)
Typography Initial Terminology (3:49)
Typography Space between characters (5:56)
Typography Organizing Text (3:49)
Typography In Application Exercise
Apple Developer Tips
Apple Developer Tips (13:32)
Noke, our first App
Our first App (1:28)
Brainstorming (1:28)
Let's start with the Logo! (1:28)
Building a Screen (1:48)
Modifying the Main Control Bar (1:48)
Wireframing: Friends Screen (8:02)
Wireframing: Stats Screen (8:02)
Wireframing: Check-In Screen (8:02)
Wireframing: Profile Screen (8:02)
Get This Plug In! (8:02)
Adding Some Realistic Visual Information (3:40)
Professional Manners: Keeping Our Elements Organized (3:40)
Noke Stats Screen Update (8:26)
Noke Check-In Screen Redesign (5:51)
Noke Profile Screen Update (8:26)
Noke Check-In Notification Screen Update (12:50)
Creating a Parameters Icon for the Noke App (12:50)
File Crash: Recovering From A Potentially Devastating Experience (3:40)
Let's Redesign Our Icons! (8:26)
Creating a Consistent Visual Vocabulary (11:13)
Lost in Your Document? Center the Canvas! (1:25)
Updating the Noke Icon (11:13)
Creating a Launch Screen (1:03)
Exporting our Content
Exporting our Art boards (1:25)
Exporting Individual Elements (1:25)
Slices (2:38)
Exporting Slices (2:38)
Exporting in Batches of Different Sizes (2:38)
Design Parameters iOS
Design iOS: Part 1 (7:13)
Design iOS: Part 2 (7:13)
Looking into iOS App Anatomy (7:13)
Logo Design
Logo Design: How to Begin (5:27)
When Considering the Typeface (5:27)
Making Intelligent Use of White Space / Don't Over-do It / Make It Active (5:27)
Logos and Colors (14:40)
Complementary Colors (14:40)
Flexible Use of Color In Logos (1:56)
iPhone 6 / iOS 8 Resource (1:56)
Twitter Exercise (7:56)
Noke Assignment
Noke App Assignment (4:20)
Noke App Assignment Tips / Things to Consider (4:20)
My Solution to the Noke App
Noke Personal Results (6:47)
Noke Results: Icons and Launch Screen (1:03)
Noke Results: Add Multiple Friends Page (3:16)
Noke Results: Friends Page (3:16)
Noke Results: Find Friends Page (3:16)
Noke Results: Graphs Tutorial I (4:20)
Noke Results: Graphs Tutorial II (4:20)
Noke Results: Circular Graphs (3:16)
Noke Results: Donut Graphs (3:16)
Noke Results: Check-In Page (6:47)
Noke Results: Edit Profile Screen (6:47)
Noke Results: Maps (6:47)
Noke Results: Grey Version (6:47)
Making the iOS 8 Settings Icon
Settings Icon: Part 1 (4:54)
Settings Icon: Part 2 (4:54)
Settings Icon: Part 3 (14:48)
Settings Icon: Part 4 - Alternative Solution (14:48)
Getting Sketch Assets Into Xcode
Adding Assets from Sketch into Xcode 6 (4:04)
Design and Redesign: Facebook App
Facebook App Introduction (4:04)
Facebook App: Document Setup / Observations (4:04)
News Feed: Introduction (3:16)
News Feed: Creating the Frame for Posts (10:05)
News Feed: Like / Comment / Share Buttons (3:16)
News Feed: Status / Photo / Check In Buttons (10:05)
News Feed: Tab Bar Icons (10:05)
News Feed: Replicating Text (3:16)
News Feed: Making Our Icons Into Symbols (How to add your own shortcuts!) (10:05)
News Feed: Placing Items / Finishing Screen (3:16)
News Feed: Second Screen (1:19)
Why People Use Facebook (1:19)
News Feed: Ideas / Workflow (2:07)
News Feed: Editing the Drop Down Menu (2:07)
News Feed: Adding Notifications (3:16)
News Feed: Left Tray Menu (1:19)
News Feed Exercise (2:07)
Notifications Explanation (1:30)
Notifications Exercise (1:30)
Profile Page Explanation (1:30)
Profile Exercise (1:30)
Requests Exercise (1:19)
Facebook Parting Thoughts (2:07)
The Design Process: Working Up to Wireframing
Section Introduction (2:35)
User Centered Design (2:35)
The Process (2:35)
Sketching (5:31)
Wireframing (1:50)
Mock-up (1:50)
Prototyping (2:48)
Getting Started (2:35)
The Idea : Research Is Key (5:31)
Toilet Finder : The App We Will Be Working On (5:31)
Make Lists (5:31)
Information Architecture (5:31)
More Lists before Drawing (1:50)
My Sketches (2:48)
A Look at the Wireframing Process in Sketch (Working on the file)
Wireframing in Sketch : Part 1 (5:43)
Wireframing in Sketch : Part 2 (5:43)
Wireframing in Sketch : Part 3 (5:43)
Wireframing in Sketch : Part 4 (5:43)
Wireframing in Sketch : Part 5 (5:43)
Wireframing in Sketch : Part 6 (5:43)
Wireframing in Sketch : Part 7 (4:31)
Some Great Resources!
iPhone Wireframe UI Kit (4:31)
Sketch Toolbox (4:31)
iPhoneMockup (4:31)
Bonus Section: Starting With Existing Screens
Introduction : Starting With Existing Screens (0:51)
First Screen: Gmail Inbox (0:51)
Gmail Inbox: Getting the Basic Screen (0:51)
Gmail Inbox : The Tray (0:51)
Gmail Inbox : Discussing The Screens (0:51)
Gmail Inbox : Making Some Changes (7:48)
Gmail Inbox : Further Revisions (7:48)
Next Victim : Photo App (7:48)
Photo App : Make A Cool Camera Icon (7:48)
Photo App : Using Blur Effects and Laying Out the Screen (3:39)
Photo App : Adding Icons and Content (3:39)
Exercise : Starting With Existing Screens (3:39)
Assessing Wireframes Before Moving to Mock-up
Introduction : Assessing Where We Are! (1:38)
Mock-up : Working on Proportions (1:02)
Mock-up : Moving Away from the Wireframe (1:02)
File Explanation/Notes : Part 1 (1:02)
File Explanation/Notes : Part 2 (1:02)
File Explanation/Notes : Part 3 (3:03)
File Explanation/Notes : Part 4 (3:03)
Sketch Mirror : Why and How
Get Sketch Mirror! (2:44)
Making Edits in Sketch Mirror (7:48)
Making Changes from Wireframe to Mock-up
First Version of the Mock-up : After Some Revisions (4:41)
Designing a Logo (3:03)
Preliminary Sketches for the Logo (3:03)
Add New Toilet Screen (1:23)
Edit Map View Screen (1:23)
About the Updated List View (+More with Sketch Mirror!) (1:23)
How To : Creating an Icon Using the Grid Tool (1:23)
How To : Using the Layout Tool (1:23)
How To : Using Shadows for the "Go" Button (1:23)
Brand Identity and Coherence :The "Go" Button (1:07)
Making Color Decisions : Map / List Toggle (1:07)
Thought Process : The "Edit" Button (1:07)
More Color Revisions : Creating Consistent Visual Appeal (1:07)
Changes to The Edit List View : Don't Disorient the User! (1:07)
More Color Revisions : The Star Rating System (2:51)
Re-evaluating the "Edit" Button : Consistency is Key! (2:51)
Re-evaluating Color Choices : The Stars (2:51)
Considering a Gesture Instead of a Button : A Usability Standpoint (2:51)
Revisions to the the List View (2:51)
Icon Design : Creating Some Simple Map Markers (2:51)
More Revisions : Considering Shadows (1:22)
An Important Decision : Why I Chose a Portrait-Only View (1:22)
Creating a Gesture for the "Go" Function (1:22)
Showcasing Gestures for Easy User Comprehension (1:22)
Creating a Comment Screen (1:22)
We May Need a Quick Notification Screen! / Deciding on a Name for the App! (2:16)
File Organization : Pulling it Together (2:16)
Conclusion : Look At What We've Accomplished! (2:16)
Creating an Icon Alternative : The Map / List Toggles (2:16)
Introduction to iPad Format
Introduction to iPad (7:48)
Designing for iPad vs iPhone (7:48)
iPad as a Social Experience (0:52)
iPad Screen Real Estate (0:52)
Flat Design
Introduction to Flat Design (0:52)
Skeuomorphism : What is it? (0:52)
Design Today : How to Adapt? (7:27)
Flat Design : Just a Trend? (7:27)
Introduction to Spotify
What will we do in this section? (7:27)
What is Spotify? (7:27)
Spotify : Wireframing for iPhone
The First Couple of Screens (7:40)
Continuing the Design : Working with Text (7:40)
Designing Icons : Top Lists / New Releases / Discover (7:40)
Designing Icons : Play Functions (7:40)
Wrapping up : Designing the Remaining Screens (7:40)
Spotify Wireframe Explanation
A Walk Through the Spotify iPhone Design Techniques (10:32)
Spotify : iPad Design Choices
iPad Wireframe Introduction (0:11)
Orientation : About the Document (0:35)
Walkthrough the Multiplatform Spotify Application (0:35)
What to Consider When Designing in Landscape (4:18)
Design Choices : The Importance of Clarity (4:18)
Spotify : Wireframing in iPad Retina Format
Beginning the Wireframes : iPad Retina Format (4:18)
Wireframing : Starting with the Basic Screen Division (4:18)
How to : Vector Lines with Rounded Ends (4:18)
Wireframing : Adding Song Control Icons (1:11)
Wireframing : Volume Settings Icon (10:32)
Wireframing : Finishing the Play Bar (10:32)
Wireframing : First Column View (10:32)
Wireframing : About the Text (10:32)
Wireframing : Some Elements are Sized Identically (2:24)
Spotify : Making Some More Icons
Making Spotify Icons Introduction (2:24)
Search Icon : Lesson about Borders (2:24)
Browse Icon (2:24)
Activity Icon (2:24)
Radio Icon (2:24)
Your Music Icon (0:11)
Settings Icon (0:11)
Inbox Icon : Alternative Solution Using Vectors (0:11)
Spotify : Continuing the Wireframing Process
Wireframing : Finishing Left Bar and Portait Screen (0:11)
Wireframing : Left bar in the Landscape Orientation (1:28)
Wireframing : Completing the Landscape View of our First Screen (1:28)
We'll Need A Couple More Icons : Songs / Albums (1:28)
Icon Design : Artists (1:28)
Icon Design : Local Files (1:28)
Wireframing : Finishing the First Two Screens (0:35)
Wireframing : Browse View Portrait (0:35)
Wireframing : Browse View Landscape (0:35)
Wireframing : Breezing through the Last Two Screens (0:35)
Spotify : More Complex Icons
Intrdouction : More Complex Icons for the Browse Screen (1:11)
Mood Icon (1:11)
Party Icon (1:11)
Pop Icon (1:11)
Workout Icon (5:50)
Focus Icon (5:50)
Latino Icon (5:50)
Spotify : Full Color
Introduction : Adding Color to the Spotify App (3:24)
First Screen : Adding Color / Images (3:24)
First Screen : Buttons / Text (3:24)
First Screen : Finishing Up (3:24)
Second Screen : Cutting Some Corners (1:57)
Getting Some Album Art in the Mix (1:57)
Continuing to Develop the Screens (1:57)
Browse Screen : Manipulating Photos and Icons (1:57)
Creating Tray (Image fade to black) (1:57)
Finishing the Tray (5:50)
Adding Visual Interest to the Play Screen (5:50)
A Final Look At What We've Done (3:24)
Spotify : Logo Design
Introduction : Creating the Spotify Logo (5:58)
Making the Beams (5:58)
Putting the Beams in Context (5:58)
From Existing Font to Custom Font (13:10)
Spotify Logo : Finishing Up (13:10)
Spotify : Assignments
Assignment : Spotify for iPad (1:57)
Assignment : Testing Usability Issues / Improving the App (5:58)
Some Stuff You May Not Have Known
Section Introduction : Stuff You May Not Have Known (13:10)
Color Blending : Using The Slack Icon as an Exmaple (13:10)
Image Masking : Finishing the Slack Icon (13:10)
Ignore Underlying Mask : Those Bullet Points in the Layers List (1:27)
More Color Blending Options (1:27)
Exercise : Color Blending (1:27)
Creating Polygons (1:27)
Exercise : Creating a Cohesive Icon Pack (1:27)
Rounding Points (1:42)
Playing with Stars (1:42)
Flip Tool : Making Patterns (1:42)
Border Control (1:42)
Creating False Depth (7:24)
Using Scissor Tool to Cut Paths
Design Thinking
Introduction (7:24)
Why design as a method to achieve innovation? (7:24)
Waterfall vs Agile (7:24)
Lean UX (4:46)
D School (4:46)
Design thinking (4:46)
Heads up (4:46)
Understand (2:05)
Persona (2:05)
IDEO Method Cards (2:05)
Observe (6:23)
2x2 Matrix (12:47)
Define (6:23)
Ideate (8:29)
Prototype (6:23)
Iterate (8:29)
New App (4:47)
Take a Break : Make Another Icon!
eHarmony Icon Redesign
Presentation Design Overview : Thinking About Ways to Showcase Your Work
Design Presentation Intro (4:47)
The Goal (4:47)
Online Presence: Design Portfolio Community (5:22)
Online Presence : Your Personal Site (1:42)
Know This (0:16)
Design Presentation : One Good Example (0:16)
Design Presentation : Another Good Example (0:16)
Getting Your Screens Ready for Device Mockup (3:45)
Device Mockup : Assembly (Part 1) (3:45)
Device Mockup : Assembly (Part 2) (5:22)
Imagine : Presentation Layout (5:22)
Imagine : Presentation Layout (Part 2) (5:22)
Imagine : Presentation Layout (Part 3) (5:22)
Quickly : Macbook Pro Mockup (0:06)
Mocking Up on Other Devices (1:42)
Faking Screen Glare (1:42)
Creating a Stacked Screen Effect (Part 1) (1:42)
Creating a Stacked Screen Effect (Part 2) (1:42)
Tips / Tricks (1:42)
Presentation Design Links (3:45)
Get Inspired Here... (0:06)
Good examples of Presentation Design (0:06)
An AMAZING A-Z List of Sketch Tools
Device Mockup Resources
Exercise : Design Presentation
Usability Testing
Usability testing intro (2:52)
Why test? (6:23)
Plan your test (3:44)
Documenting Tools (3:44)
Task testing (3:44)
10 essential Metrics (3:44)
Card Sorting (5:46)
Think aloud protocol (5:46)
Tree testing (5:46)
Creating a Mockup for a test (5:51)
Noke mockup test (5:22)
What we learned from the test (5:11)
First Click Test (5:46)
Tinder Clone Exercise (Videos from other course will be added soon)
Intro : Tinder Clone Assignment (2:42)
Making Your Own Tinder Clone (1:15)
Excess Elements (1:22)
Make a Key! (1:15)
One Way of Making a Key (1:15)
Exporting Assets : Naming Conventions (0:44)
Exporting Assets : Pixel Rounding (0:44)
Some Assets Are Better Off in Code (0:44)
Exporting Assets : Make the Plunge! (2:49)
Make Sure to Communicate With Your Partner (0:44)
Plugin : AEIconizer (0:50)
Plugin : AEIConizer (Demo) (0:44)
Plugin : SketchMeasure (1:30)
Plugin : Using Sketch Measure to make a Key (4:56)
Sharing Your Files
Applan
Applan (3:53)
Understand (4:05)
Benchmarking (15:03)
Observe; getting closer to potential users (3:29)
Survey (8:36)
Immersion; trying the Apps (8:12)
Finding Insights; survey's results (7:00)
Re define (4:51)
Brainstorming; ideation through wild ideas (3:05)
Defining elements (4:27)
Navigation Scheme (6:35)
Bringing Applan to life with Sketch (3:47)
Main Screen (7:17)
Roulette and Event screens (9:05)
Powered by
Gmail Inbox : Making Some Changes
Lecture contents locked
Enroll in Course to Unlock