Wireframing in Sketch : Part 7
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 |