Hands on Sketch Training - Learn Mobile App Design

Name: Hands on Sketch Training - Learn Mobile App Design
Rating: 4.5 (109 reviews)

Learn mobile app design with Sketch by duplicating mobile app screens, logos, and more. From basic to advanced

Created byArend Pryor

Last updated 2/2020

English

What you'll learn

Have the skills and confidence to create mobile app screens, logos and more using Sketch
Export designs so they can be used during the development process
Build a mobile app that looks amazing
Submit designs for contests on crowdfunding sites

Course content

5 sections • 63 lectures • 17h 5m total length

Welcome to the Course!2:03
In this video I'll tell you a little about myself and the course and what you'll need to get started.
Teaching Style & Pace2:50
Asking Questions1:42
Develop a mindset of asking questions when you encounter difficulties, embrace mistakes as learning moments, and seek help to solidify understanding as you move through the course.
Course Resources6:52

Interface Overview - Artboards and Layers11:12
Topics Covered:
Using artboards as a canvas
Keyboard shortcut for inserting an artboard
Adding custom artboards
How layers work
Re-arranging layers
Interface Overview - Toolbar Items17:12
Topics Covered:
Grouping and Ungrouping
Creating and Editing Symbols
Zoom
Editing and Transforming Shapes
Applying Masks
Boolean Operations (Union, Subtract, Intersect and Difference)
Interface Overview - Inspector16:26
Topics Covered:
X and Y Coordinates
Setting Width and Height
Applying a radius to the corners of a shape
Changing shape attributes such as opacity and color
Applying borders, shadows, inner shadows, and blur
Changing text attributes: Font family, weight, size, color, character spacing, etc.
Interface Overview - Exporting5:50
Topics Covered:
Exporting content for developers to implement in code
Exporting individual items and artboards
Importance of naming
Creating & Editing Shapes8:26
Topics Covered:

Drawing and editing shapes
Dissecting app screens
Using basics shapes to create a custom button
Working with Images8:31
Topics Covered:
Importing and Resizing images
Recommendations on searching for images
Cropping
Applying a blur effect
Using the Vector Tool13:25
Topics Covered:
We'll use the vector tool to recreate the Batman logo
Tips for using the vector tool
Sketch Basics - Quiz

01 - Workout Timer: Overview2:09
01 - Workout Timer: Part 1 (Header)22:18
01 - Workout Timer: Part 2 (Workout Settings)8:12
01 - Workout Timer: Part 3 (Countdown Timer)12:41
01 - Workout Timer: Part 4 (Repeat & Bottom buttons)20:30
Design a workout timer interface by building a repeat button and two bottom controls in Sketch, detailing shape creation, color fills, text, alignment, and export-ready assets.
02 - Nike App: Overview2:43
Learn to duplicate a Nike app screen in Sketch by assembling images, icons, and a gradient button, using supplied resources and credited designers.
02 - Nike App: Part 1 (Header)35:17
Learn to duplicate a header screen in sketch, resize and align Nike icons using smart guides, and build a precise header with status bar and separators.
02 - Nike App: Part 2 (Title, Button, & Image)18:31
02 - Nike App: Part 3 (Bottom Images)25:23
03 - Belongings Login screen: Overview3:50
03 - Belongings Login screen: Part 1 (Logo)37:50
Learn to design the belongings login screen logo in sketch by importing the screenshot and the key icon, building a textured background, and assembling triangles into the logo.
03 - Belongings Login screen: Part 2 (Text Fields)20:20
03 - Belongings Login screen: Part 3 (Buttons)13:38
Learn to design the belongings login screen buttons in Sketch, refining the logo, username and password fields, borders, gradients, shadows, and precise alignment for a polished mobile UI.
03 - Belongings Login screen: Part 4 (Font Update!)3:09
04 - Steller Login screen: Overview2:46
04 - Steller Login screen: Part 1 (Left Side)19:24
04 - Steller Login screen: Part 1 (Right Side)22:52
05 - Avenger Chat: Overview1:52
05 - Avenger Chat: Part 1 (Background & Header)24:56
05 - Avenger Chat: Part 2 (Chat Pic & Message)14:56
06 - Blog Profile: Overview4:06
06 - Blog Profile: Part 1 (Header & Stats)37:15
06 - Blog Profile: Part 2 (Rewards Tracker)23:21
06 - Blog Profile: Part 3 (Rewards Icons)22:05
06 - Blog Profile: Part 4 (Lines & Buttons)21:39
06 - Blog Profile: Part 5 (Circle Graph)34:29
Design a circle graph in sketch by building concentric shapes and using union, intersect, and masking. Align labels and lines with color sections for a clear, editable infographic.
06 - Blog Profile: Part 6 (Grid)21:33
06 - Blog Profile: Part 7 (Vector Graph)33:55
06 - Blog Profile - Extra Credit0:19
07 - Facebook: Overview1:56
Get ready to duplicate an app screen you might've seen before. Facebook! It might look easy, but there's much more detail than you think. Be sure to download the resources file, which includes everything you'll need along the way.
07 - Facebook: Part 1 (Header)23:57
07 - Facebook: Part 2 (Main Menu)16:25
07 - Facebook: Part 3 (Status section)21:05
07 - Facebook: Part 4 (Suggested Post)46:28

01 - Accuweather10:01
02 - Facebook Messenger5:19
03 - Photobucket19:17
04 - Yahoo Weather19:45
05 - Google Docs14:45
06 - The Chive4:27
07 - Dumb Ways to Die 213:40
Create two dumb ways to die icons by sketching vector shapes, applying fills and strokes, and using layers to align eyes, mouth, and tooth.
08 - Plex Pass6:09
09 - iOS App Store14:39
10 - Fandango8:57
11 - Google Cardboard17:20
12 - iOS Mail12:13
13 - Safari23:06
14 - Google Play11:57

Requirements

Students will need a Full or Trial version of Sketch running on one of the following:
A Mac running OSX
A PC running a virtual mac OSX environment

Description

In this course, I’ll walk you step-by-step through the process of re-creating some amazing looking app screens, popular logos and some outside the box design elements, all using Sketch. Upon completion, you'll have real-world experience building basic and advanced mobile app screens using Sketch.

What kind of App screens will I be duplicating in this course?:

Login screens
Screens with Transparent backgrounds
Group Chat app
E-Commerce app
Blog Profile app
Workout Timer app
Facebook
Basic and advanced mobile app Icons/logos
Various buttons: Rounded, Sliding, Metallic and more

Sketch is an amazing product that's gaining in popularity as the top tool for designing mobile apps due to its very intuitive controls and ease of use. If you’re interested in designing your own mobile apps, this course will get you up to speed on using Sketch.

Course Outline:

Start with the basics: Draw and manipulate shapes, inserting images, working with fonts
Mobile App Screens: Follow along as we recreate a dozen detailed app screens
Mobile App Icons/logs: Duplicate over a dozen mobile app icons using a variety of skills/techniques. From beginner to advanced.
Additional Content: Sharpen your skills by re-creating several outside the box designs

Class Resources & Support:

You'll see the process I use when designing and where I get my resources
If you have a question, a comment, or need help, post it in the Q & A section

Who this course is for:

Do it yourselfers looking to design a mobile app
People looking to test the waters of Graphic Design and possibly change careers
Developers interested in becoming a double-threat by creating app screens
Experienced designers who want to learn Sketch

Hands on Sketch Training - Learn Mobile App Design

What you'll learn

Explore related topics

Course content

Introduction4 lectures • 13min

Sketch Basics7 lectures • 1hr 21min

Hands-On: Duplicating App Screens34 lectures • 10hr 22min

Hands-On: Duplicating Logos & Icons14 lectures • 3hr 2min

Hands-On: Duplicating Everything Else4 lectures • 2hr 8min

Requirements

Description

Who this course is for: