Design iOS: Part 2
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 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 |
| 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 |
POWERED BY FEDORA