Mastering Sketch: From Beginner to Advance User
Sketch is the program all the big companies and start-ups use. Learn how to master it from a beginner all the way to a advance user. This course will teach you how to get started and have you designing apps and websites in no time. Learn all the quick techniques, how to’s, layouts, and if you’re a adobe user no worries you’ll catch on in no time since a lot of things are almost the same.
Not only will you learn how to use the program, but I will guide you how to design wire frames like you would in a real design position. From there you’ll take those wireframes and turn them into stunning visual designs. You’ll also learn how to write annotation like a design to actually prepare files for hand off to a developer or client. Finally, we will learn how to prototype in invision and turn your flat designs into interactive designs.
Working With Layers
-
1
Introduction: What is Sketch?A explanation and walk through of how sketch came to be.
-
2
Getting Started
Learn how to set up a project from mobile, to web, to a custom project
-
3
The Basic Tools in Sketch
Learn how to use the basic tools of sketch such as shapes, lines, and artboards.
-
4
Closing Sketch/Opening Multiple Pages
-
5
From Adobe to Sketch: The similarities and differences
A heavy adobe user? Used Photoshop and Illustrator?
Transition to sketch is very simple as a lot of things are similar (ex. Hot Keys).
-
6
Working with Artboards
Art-boards will make your life easier, Learn how to use art-boards with the following;
- Place them on the canvas
- Customize them from scratch
- Copying and paste them
- Add your own to the library
-
7
Working with Pages & Layers
Pages and layers are new pieces added to sketch learn how to:
- Create Pages
- Work with Layers
-
8
The Menu Tool Bar: The Top
Built in Templates. Learn how to use/find Sketches Pre-built templates.
- iOS
- Material Design
- Icon Design
- Web Design
-
9
Rulers, Pixels, Grids and more
Learn how to use:
- Rulers
- Grids
- Pixels
- Layouts
-
10
Update for Sketch Licenses -
11
Shortcuts for Sketch
Working with Symbols
-
12
Creating a Layer
Learn how to simply create a layer.
-
13
Manage Layers
-
14
Keeping your layers organzied
-
15
Using Symbols to be orangized
Work faster and keep layers organized with symbols.
-
16
Finding Items on the Artboard
In Sketch layers you're now able to find layers within your canvas by hovering over a layer.
App Design: UX Design And Wireframing in Sketch
-
17
What are Symbols?
What are symbols? Ease, They are pieces you can edit and be applied across the board all at once.
-
18
Creating a Symbol
-
19
Editing a Symbol
-
20
Change elements without it affecting the symbol
Make changes to a symbol without going into it.
-
21
Symbol within a Symbol
Learn how to create a symbol within a symbol and have the change be applied to multiple symbols.
-
22
Breaking Symbols
Sometimes when we work in projects we need to break a symbol to make them different from the overall style.
-
23
*Update* Sketch Program Updates!
The Art of Annotations
-
24
Free Elements to Use for Designing
-
25
Wireframing 101: What the Heck is Wireframing?
We dive in and get to know what UX Design is and how to Wireframe.
-
26
Hi FI Vs Low Fi
Find out the different between designing basically or with detail.
NOTE: If you'd like to use the elements I have please grab the logo here. It's Free.
http://www.freepik.com/index.php?goto=74&idfoto=835043&term=logo
http://www.freepik.com/free-photo/businesspeople-celebrating-success_861073.htm
-
27
Wireframing a Login Screen
We are going to wireframe out a login screen from scratch and use all the techniques we learned from our basic section.
-
28
Wireframe a Profile Screen
Taking more techniques from earlier we learn how to create profile screen. This will include using Symbols and saving time with them.
-
29
Wireframing from Point A to D
So we designing two screens a Login and a Profile, so now its time to connect the dots and figure out how to wireframe the rest.
-
30
LowFi Wireframe to HiFi Wireframe Design Part 1
We will learn and take our basic wireframe and build it up into a hifi wireframe.
Note: If you'd like to follow along download the assets here.
http://www.freepik.com/free-vector/collection-of-music-logos_808643.htm#term=music%20logo&page=1&position=4
-
31
LowFi Wireframe to HiFi Wireframe Design Part 2
-
32
Showing Functionality with a App
Designing Apps in Sketch
-
33
Setting up & Placing Annotations
-
34
The Terms of UX
-
35
The Artful Language of Annotations
If and when it comes to handing off a design to developers there will have to be some notes written in a particular way for them to understand. Learn how to write that language with easy.
-
36
Creative Annotations
-
37
Dressing up your Document
Bonus
-
38
Making a Creative Design From a Wireframe Part 1
Learn how to take a wireframe to the creative stage of Designs (Part 1)
-
39
Making a Creative Design From a Wireframe Part 2
Learn how to take a wireframe to the creative stage of Designs (Part 2)
-
40
Making a Creative Design From a Wireframe Part 3
Learn how to take a wireframe to the creative stage of Designs (Part 3)
-
41
Creating Visual States of Your App
When creating a app or website, it's important to create different visual state of how a user would interact with the design. I show you how to achieve this.
-
42
Exporting
Exporting never seemed to easy until now. There are many options when it comes to exporting. I show you how to do so in this lecture.
-
43
Prototyping your App to Be Real
We finally finished the designs, Now it's time to take it to a prototyping stage. We will make our design come to live in a interactive FREE prototype.
