Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Sketch 3 Basics and Step By Step Design Exercises

Name: Sketch 3 Basics and Step By Step Design Exercises
Rating: 4.5 (99 reviews)

Learn the fundamentals of Sketch3 with easy step-by-step examples. Switch from Photoshop & Illustrator & build iOS apps

Created byUKILLIT Design

Last updated 3/2015

English

English [Auto],

What you'll learn

UNDERSTAND FUNDAMENTALS OF SKETCH 3
DESIGN SIMPLE APP and WEB USER INTERFACES (UI)
CREATE SIMPLE ICONS
APPROACH MORE COMPLEX TUTORIALS AND PROJECTS

Course content

11 sections • 32 lectures • 3h 2m total length

Introduction to the interface3:11
An introduction to working canvas, toolbar, list of layers, inspector, pages and artboards.
How to deal with layers4:22
You will learn several ways to insert a generic layer including special tips.

Introduction to standard shapes8:56
You will learn everything about the 8 different shapes provided by Sketch and be able to face the following lessons including complex shapes created using Boolean Operators.
How to deal with borders6:40
You will learn all about borders including how to create, position and style them.
FOR THE BRAVE - CHALLENGE 10:30
SOLUTION - CHALLENGE 10:39
DOWNLOAD THE ATTACHED FILE

Introduction to boolean operations4:03
Boolean Operators represent a powerful yet simple way to quickly create complex shapes and icons.
FOR THE BRAVE // CHALLENGE 20:49
In this challenge you will have to create a circle with border using boolean operations instead of the shape border attribute.
SOLUTION - CHALLENGE 21:03
DOWNLOAD THE ATTACHED FILE
Vectorize stroke4:49
Now that you know how to create a border layer using booleans, you will learn how to do it automatically using Vectorize Stroke. DOWNLOAD THE ATTACHED FILE
CASE STUDY 1 // Recreate a Gear icon from Apple.com5:48
DOWNLOAD THE ATTACHED FILE
CASE STUDY 2 // Recreate a Bus icon from Thenounproject.com7:42
A step by step guide in which you will recreate from scratch an icon from the website TheNounProject. DOWNLOAD THE ATTACHED FILE

Keep your file clean and well organized: groups and naming3:39
You will learn how to group layers for organizational and technical purposes.
How to measure distances6:40
You will learn how to quickly and effectively measure distances between layers and objects. Super important to become a pro, speed up your way of working and ensure to deliver quality designs.
Rulers and guides6:17
Master guides and rulers in Sketch to precisely position letters with red alignment lines and smart guides, while turning rulers on or off and using shortcuts for faster precision.

Introduction to the transform tool1:30
You will learn all about the TRANSFORM tool and get ready for the upcoming CASE STUDY where you will recreate an icon using it in combination with Boolean Operators as well.
CASE STUDY 1 // Recreate a Glass icon6:03
Put in practice the new learning about the TRANSFORM TOOL and create a cool GLASS ICON. The case study also requires you to know - standard shapes - booleans operations - create a shape with border with booleans. DOWNLOAD THE ATTACHED FILE
CASE STUDY 2 // Recreate the Italian Highway traffic sign7:30
You will recreate an icon ( the italian highway traffic signal ) with requires the use of the transform tool. You will also start using the inspector to transform a shape.

Introduction to text layers8:35
CASE STUDY 1 - How to apply multiple styles to a single text layer3:59
An example in which you will learn the right way to apply different styles (weight, font, colour, etc) to different parts of a single text layer.
Shared text styles10:06
Learn to enforce consistency across text layers by creating shared text styles in Sketch, and manage product name, price, and description with containers, margins, and alignment.

Create the app wireframe15:08
Create a three-screen wireframe for a Facebook reader app, emphasizing structure with neutral colors, and outline login, feed, and article screens with placeholders and navigation elements.
Design the app login screen9:26
Design the app login screen focuses on turning a wireframe into a polished login interface, selecting fonts, colors, and backgrounds, and exploring photo backgrounds, readability tricks, and simple UI elements.
Design the app feed screen16:22
Design the feed screen by building a reusable block with photos and text, using a plugin to fill content, and apply a gradient overlay with a blurred navigation bar.
Design the app article screen11:24
END OF THE COURSE0:31

Requirements

A Mac computer that can run Sketch 3
Sketch 3 ( AVAILABLE IN FREE TRIAL ALSO )

Description

First published on November 2014

________________________________________________________________________

This Course Had More Than 1100 Delighted Students

- One Of The Most Important Things Is To Get The Fundamentals Right

- This Course Is Special Because It Teaches Using Step By Step Examples

________________________________________________________________________

30 DAYS 100% MONEY BACK GUARANTEED FROM UDEMY

Not Happy With The Course? You Can Ask Your Money Back To Udemy Within 30 Days From Purchase, With A Simple Click

________________________________________________________________________

The course teaches you how to use SKETCH 3, which is probably the most powerful yet simple new generation design software available at the moment.

Sketch has been specifically created for APP and WEB DESIGN. That is why Sketch has been chosen by top designers at GOOGLE, DROPBOX, FACEBOOK and TWITTER among other top web companies and startups.

The course is designed to be taken by absolute beginners and is also valuable for intermediate designers who want to transition from other traditional softwares such as Photoshop, Illustrator and Fireworks.

Have fun !!! :)

Who this course is for:

This course is meant for BEGINNERS who want to learn designing apps or websites the right way from day one
This course is meant for DIGITAL ENTREPRENEURS who want to become independent when they need to design and prototype their app ideas. This way it is possible to accelerate the product creation process, dramatically reduce costs connected with reiteration and testing and have full control over your idea design. I estimated these saving - and personally experienced them - to be between 8k and 20k depending on the app scope
This course is meant for DESIGNERS who want to transition from Photoshop, Illustrator or Fireworks
This course is meant to be PRACTICAL and to provide you with the TOOLS needed to start crafting a real app, icon or website. If you are looking for a course about DESIGN PRINCIPLES - E.G. how to choose the right colour combinations or proper fonts for your app - then this is NOT the course for you. In case you are a beginner, I personally suggest that you start with this course and later on refine your designs studying those kind of principles. It is more fun and more intuitive.

Sketch 3 Basics and Step By Step Design Exercises

What you'll learn

Explore related topics

Course content

Introduction to Sketch2 lectures • 8min

Standard shapes4 lectures • 17min

Boolean operations6 lectures • 24min

Scale tool1 lecture • 3min

Make it right3 lectures • 17min

Transform tool3 lectures • 15min

Masks2 lectures • 12min

Rotate copies2 lectures • 11min

Text layers3 lectures • 23min

Create your first wireframe and design5 lectures • 53min

Requirements

Description

Who this course is for: