4.33 out of 5
4.33
2721 reviews on Udemy

Mobile App Design In Sketch 3: UX and UI Design From Scratch

Design Mobile Apps from scratch using Sketch 3. Master Sketch 3, UX methodology, icon design, and user interface design.
Instructor:
Rob Percival
26,476 students enrolled
English [Auto-generated] More
Create mobile app designs from scratch
Approach app design with UX consideration
Know best practices for UX research
Master the newest program for graphic designers, Sketch 3
Create custom icon packs
Start a new career as a UI/UX designer

———- NEW COURSE UPDATE 2018 ————————————————–

THE COMPLETE DESIGN COURSE IN SKETCH WILL BE RELEASED AUG 31ST 2018

THIS COURSE WILL NO LONGER BE SUPPORTED SO IF YOU WANT THE NEWEST VERSION OF THIS COURSE WITH EXTRAS, GO TO MY COURSE PAGE AND FIND THE NEWEST DESIGN COURSE.

Learn the basics of user experience, app design, and tools you will need to build the most beautiful and user friendly mobile apps on the app or google play store using Sketch 3. 

  Build a strong foundation in Sketch 3 and user experience design with this tutorial for beginners.  

  • Sketch 3 Introduction & Tools

  • Sketch School 101: A deep dive into Sketch 3

  • UX research and design with best practices.

  • Build one of the most user friendly and beautiful apps on the app store.

  Learn a new skill that can change your life.  

        Sketch 3 gives everyone the ability to build professional looking designs with zero experience. You must either have a Mac, or be running the OS X environment on your windows computer. Sketch 3 is free for 30 days. 

        You will become a full fledged mobile app designer by the end of this course, and will have the skills to design anything. You will even be able to export your work for implementation into actual mobile app development. 

        Mobile app designers are averaging over $100k a year(U.S. numbers) 

  Content and Overview  

        This course is great for people with zero design experience, or experienced designers that want to learn and master Sketch 3. With more content than any other Sketch course, you will learn app design fundamentals and establish a great understanding of the concepts behind user centered design. Additional resources, quizzes, and assignments will be given through out the course to continually test your knowledge. 

        Starting with an introduction to the Sketch 3 interface, we will quickly dive straight in to designing our first mobile app screen. By learning by doing, you will establish a strong understanding of the basic sketch features and tools. 

        With these basics mastered, the course will take you through what we call Sketch School 101, and UX School 101. In these sections, you will learn everything required to master Sketch 3, as well as the basic fundamentals of user experience research and application. 

        Then it is time to apply our knowledge and newly acquired skills to creating our own app, from idea, to researching, to mocking up, to designing, and finally prototyping and deployment of assets to developers. 

        Students completing the course will have the knowledge to create beautiful and usable apps that leave people with a smile on their face. 

        Complete with image downloads and sketch files, you will be able to work alongside the author as you complete each step to achieving a verifiable certificate of completion upon finishing the course. 

Introduction

1
Intro

Why Sketch 3?

1
Photoshop VS Sketch 3

In this section, we will go over some of the differences between Adobe Photoshop and Sketch 3.

2
What is the greatest difference between Sketch 3 and Adobe Photoshop?

I want you to get one point out of our first lecture. The following question will address that one point.

Getting Started With Sketch 3

1
Getting Our Feet Wet With Sketch 3

In this lecture, we will move around Sketch and learn the basic tools and functions.

2
A Few Other Sketch Pointers

In this lecture, we will go over a few other pointers that will make our lives easier with Sketch.

3
Sketch 3 Resources

In this lecture, we will go over the ultimate Sketch Resources website.

4
Sketch Basics

In this quiz, I will ask you a few questions to make sure you understand the basics of Sketch 3 and navigating the interface.

Learning By Designing

1
Update: Artboard Preset Changes.
2
Acorn Screen Sketch File
3
Starting First App Screen

In this lecture, the student will create the very top of the Acorn app screen.

4
Pagination

In this lecture, the student will create the unique and beautiful pagination in our App Screen.

5
Finish Top Content
6
Starting The Graph

In this lecture, we will begin to create that analytics. We will also organize and clean up our workspace.

7
Adding Dashed Lines & Values

In this lecture, we will learn how to use advanced settings to modify a simple line. We will also put our numbers in place so we can begin creating the analytical graph from the Acorn Screen.

8
Challenge 1

In this lecture, you will take on your very first challenge!

9
Solution One

In this lecture, we will go over how to create the numbers along the bottom of our graph for the very first challenge!

10
Lines For Our Graph
11
Cool Effects

In this lecture, we will add the cool faded effects that make this screen look so cool.

12
Finishing The Screen

In this lecture, we will put the finishing touches on the Acorn Investment screen.

Sketch School 101

1
Welcome to Sketch School

Lets go over a brief introduction to sketch school 101 and talk about a few of the benefits we saw in earlier lectures.

2
The Interface

In this lecture, we will look at the anatomy of Sketch and the 4 main parts that make up the Sketch body.

3
All About The Layers
4
An Introduction to Shapes

In this lecture, we will begin talking about shapes in Sketch 3.

5
Editing Shapes

In this lecture, we are going to learn how we can manipulate shapes to accomplish specific goals.

6
Boolean Operations

In this lecture, we are going to discuss boolean operations and the role they play in crating shapes that are not included in the default sketch shapes.

7
Transform, Masking, Scissors, Rotate Copies, Pencil

In this lecture, we will discuss some of the remaining tools that help us manipulate shapes.

8
Intro to Text & Text Rendering

In this lecture, we will go over the basics of manipulating text, and learn how text is rendered differently across devices and platforms.

9
Shared Text Styles

In this lecture, we will talk about how using text styles can save us a lot of time and hassle.

10
Text Path & Outline

In this lecture, we will continue to talk about the important tools for manipulating our text. This lecture includes text paths, and text outlines.

11
Bitmap Images

In this lecture, we will talk about the limited, yet big improvement in dealing with images in Sketch 3.

12
Symbols

In this lecture, we will discuss symbols and how they play an important role in speeding up our work flow.

13
Introduction to Styling

In this lecture, we will go over some of the basics of styling within our inspector and a few tips and tricks.

14
Styling

In this lecture, we are going to go over the basics of styling, including:

Fills

Borders

Shadows

Blur

Color

Gradients

15
Organizing: Groups, Artboards, & Pages

In this lecture, we are going to talk about how groups, dartboards, and pages make our lives easier for exporting and how they allow us to maintain organization throughout our workflow.

16
Canvas Settings

In this lecture, we are going to go over how to use grids, guides, and rulers. We will also look at the measurement capabilities in Sketch 3.

17
Exporting Assets

In this lecture, we are going to take a look at all the different ways we can export assets out of Sketch.

UX School 101

1
What is User Experience?

In this lecture, we are going to go over the basics of user experience and the general concept of UX.

2
Where UX Started

In this lecture, we will dive into ergonomics and why UX was not always perceived the way it is now.

3
Usability

In this lecture, we will learn about usability and its importance in user experience.

4
User Centered Design

In this lecture, we will dive into user centered design and the simple process for UCD.

5
10 Principles of User Centered Design

In this lecture, we will discuss our 10 principles of user centered design in detail.

6
Business Needs vs. User Needs

In this lecture, we will discuss why the business needs are just as important as the user needs. We will also talk about how to balance the two, and what to do when they objectives of each differ.

7
Qualities of a Good UX Designer

In this lecture, I will go over the key attributes that make a good UX designer.

8
UX Design Process

In this lecture, we will go through the multiple steps we need to knock out as we conceptualize, prototype, and review our first application design.

Color Theory Basics

1
Commandments of Color Theory
2
Color & Branding
3
The Power of Color

Color Theory - Examples & Discussion

1
Examples of Different Colors in Web Design

Typography

1
Introduction to Typography
2
Different Typefaces
3
Typeface Properties
4
The Anatomy of Typeface
5
The Ten Commandments of Typography

UX School Applied: Discovering Our App

1
Your Assignment

Welcome to you very first project. As an employee of Yahoo, you are tasked with reinventing the way people consume content by creating a brand new mobile application. Lets see what you are made of.

2
Discovering Target Users

In this lecture, I will discuss how and why to find the ideal user that will most likely be using your product.

3
More Information About The User

In this lecture, I will highlight some more questions you can ask about the user and the importance of finding as much information as possible by asking questions.

4
20 UX Research Methods

In this lecture, I will go over 20 different methods that can be used to discover your users behaviors, thoughts, and opinions.

5
Creating Personas

In this lecture, we will learn how to create personas and see why they play a role in understanding our users on a deeper level.

6
User Flow Chart
7
Drawing Mockups

In this lecture, I will go over what a drawn mockup would look like and how to link together each screen together.

8
Mockups In Sketch

In this lecture, we will se how easy it is to create mockups in Sketch 3 using a UIFrame kit. We can simply drag and drop elements to create complex mockups.

Icon Pack

1
Resources - Sketch File For Yahoo Digest APP
2
Video Camera Icon

In this lecture, you will create a simple video camera icon using two shapes, a triangle, and a rounded rectangle.

3
Location Icon

In this lecture, we will make a location icon using two shapes, both of which are circles.

4
Pie Chart Icon
5
Music Note Icon

In this lecture, you will learn how to use rectangles to create a simple yet cool musical note icon.

6
Analytics Line Icon

In this lecture, you will learn how to use the vector tool to create a simple yet cool analytical line icon.

7
Half Moon Icon

In this lecture, we will create a moon icon using two circles and subtracting one from the other.

8
Sun Icon

In this lecture, we will use the rectangle tool, the circle tool, and the rotate copies tool to make a cool sun icon in an efficient manor.

9
Summarized Paper Icon

In this lecture, we will create a more in depth icon that involves a multitude of different shapes and even incorporates color.

10
Clock Icon

In this lecture, we will create a colored clock that we will use on one of our tour screens.

11
Color Box Icon

In this lecture, you will create a cool box with rectangles and different colors.

12
Gear Icon

In this lecture, we will create a gear icon in a similar way that we created the sun icon in an earlier lecture from this section.

13
Icon Challenge

In this lecture, you are presented with a challenge. I want you to download the png file attached and recreate the color wheel in Sketch with individual layers. Good Luck!

14
Challenge Solution

In this lecture, I will show you how to use complex boolean operations to achieve the challenge.

Designing Our App

1
Tour Screen One

We are finally ready to tackle our first screen. In this lecture, we will use many of the icons we have created to make our first tour screen. This is one of four.

2
The Second Tour Screen

In this lecture, we will implement a few more of our icons, as well as revisit the importance of shared styles and the role they play in time management later on in our design projects.

3
Tour Screen Three

In this lecture, we will duplicate our last tour screen and switch some content around.

4
Last Tour Screen

Once again, we will use the same elements we have been using to create the fourth and final tour screen. This will also have a custom button for customizing our notification settings.

5
Customize It Screen

In this lecture, we are going to shift our previous screen up, and add some interface that allows us to select the times we want to receive our morning and evening digest.

6
Let's Get Organized

In this lecture, we will start exporting our screens and make sure we are saving our assets in an organized manner.

7
Default/Home Screen

In this lecture, we will tackle the default screen. This will showcase our stories with the first being dominated by the main image.

8
Adding To The Home Screen

In this lecture, we are going to continue working on the home screen by increasing the size of the artboard and adding additional articles.

9
Finalize Home Screen

In this lecture, we will finish the content at the bottom of our home screen by adding a counter and an icon.

10
Settings Screen

In this lecture, we will begin putting together the transparent settings screen.

11
Finalize Settings Screen

In this lecture, we will finalize the settings screen.

12
Second Settings Screen

In this lecture, we will create the screen that is prompted when we actually select on the settings icon.

13
Individual Article Screen

In this lecture, we will complete the very last screen we need to move on to prototyping our app.

You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.3
4.3 out of 5
2721 Ratings

Detailed Rating

Stars 5
1485
Stars 4
820
Stars 3
303
Stars 2
70
Stars 1
43
b3aa60cc24777cc9ac6200ac4d68cfcf
30-Day Money-Back Guarantee

Includes

16 hours on-demand video
4 articles
Full lifetime access
Access on mobile and TV
Certificate of Completion