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