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