Shape and Form
Enroll in Course to Unlock
Welcome! |
Get Sketch |
Why Sketch? |
Why Design? |
A Brief History of Graphic Design |
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 |
Shape and Form |
Pictographs |
What is Gestalt Psychology? |
Importing an Image |
Generate Art Boards |
Adding Shapes |
Groups and Shape Properties |
Adding Text |
Exploring Some Property Tools |
Golden Ratio Grid |
Golden Ratio Exercise |
Color Lesson intro |
Color Lesson Categories |
Color Lesson Hue, Chroma, and Values |
Color Lesson Further Considerations |
Color Exercise |
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 |
Typography Intro |
Typography Initial Terminology |
Typography Space between characters |
Typography Organizing Text |
Typography In Application Exercise |
Apple Developer Tips |
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 Art boards |
Exporting Individual Elements |
Slices |
Exporting Slices |
Exporting in Batches of Different Sizes |
Design iOS: Part 1 |
Design iOS: Part 2 |
Looking into iOS App Anatomy |
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 App Assignment |
Noke App Assignment Tips / Things to Consider |
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 |
Settings Icon: Part 1 |
Settings Icon: Part 2 |
Settings Icon: Part 3 |
Settings Icon: Part 4 - Alternative Solution |
Adding Assets from Sketch into Xcode 6 |
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 |
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 |
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 |
iPhone Wireframe UI Kit |
Sketch Toolbox |
iPhoneMockup |
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 |
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 |
Get Sketch Mirror! |
Making Edits in Sketch Mirror |
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 |
Designing for iPad vs iPhone |
iPad as a Social Experience |
iPad Screen Real Estate |
Introduction to Flat Design |
Skeuomorphism : What is it? |
Design Today : How to Adapt? |
Flat Design : Just a Trend? |
What will we do in this section? |
What is Spotify? |
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 |
A Walk Through the Spotify iPhone Design Techniques |
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 |
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 |
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 |
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 |
Intrdouction : More Complex Icons for the Browse Screen |
Mood Icon |
Party Icon |
Pop Icon |
Workout Icon |
Focus Icon |
Latino Icon |
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 |
Introduction : Creating the Spotify Logo |
Making the Beams |
Putting the Beams in Context |
From Existing Font to Custom Font |
Spotify Logo : Finishing Up |
Assignment : Spotify for iPad |
Assignment : Testing Usability Issues / Improving the App |
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 |