News Feed: Left Tray Menu | Bitfountain

Autoplay
Autocomplete

Previous Lesson Complete and Continue

The Bitfountain Design Immersive - iOS 8

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 (1:27)

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 (1:01)
App Preview (1:44)
Logo Explanation (7:59)
Noke Logo tutorial (9:13)
App Goals (6:13)

NOke: Wireframing

NOke: Adding Color!

Color Intro (1:33)
My Palette (3:32)
Color Login Screen (5:36)
Color Friend List (2:59)
Content Generator Plugin (2:26)
Color Friends List (6:05)
Highlighting an Item (1:06)
Confirm Delete (3:59)
Chat Colors (2:31)
Add User List (3:22)
Update Icons (1:47)
Color Map (8:34)
Color Feed (4:33)
Check-In Drop Down Menus (3:14)
Color Profile (3:12)
Color Tab Bar Notifications (3:13)
Color Stats Screen (5:20)
Redesigning Notification (2:10)
Color Add Stats (3:15)
Color Launch Screen (2:21)
Color Icons / Conclusion (3:54)

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)
Browse Icon - Transparent Technique (1:02)
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

News Feed: Left Tray Menu

Lesson content locked

If you're already enrolled, you'll need to login.

Enroll in Course to Unlock