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 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
 Gmail Inbox : Discussing The Screens



Lecture Contents Locked

Enroll in Course to Unlock