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.
4.4 (1,293 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
19,186 students enrolled
$30
Take This Course
  • Lectures 148
  • Contents Video: 16 hours
    Other: 1 min
  • Skill Level All Levels
  • Languages English, captions
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 2/2015 English Closed captions available

Course Description

---------- MASSIVE UPDATE 7/30/2015 --------------------------------------------------

Double the content is now being added!

---------- UPDATED 5/21/2015 --------------------------------------------------------------

---------- UPDATED 4/14/2015 --------------------------------------------------------------

Rob Percival will take you into Xcode and teach you how to implement actual designs into x-code. You will be one step closer to becoming a full functioning front end designer!

-------------------------------------------------------------------------------------------------------

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.

What are the requirements?

  • Mac is required to run Sketch 3
  • If using a Windows computer, you need to make sure you are running the OS X virtual environment on your computer

What am I going to get from this course?

  • 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

What is the target audience?

  • This course was meant for newbies in graphic design, all the way up to experts that want to learn sketch 3

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction
Intro
02:44
Section 2: Why Sketch 3?
09:04

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

1 question

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

Section 3: Getting Started With Sketch 3
14:11

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

09:00

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

04:11

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

3 questions

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

Section 4: Learning By Designing
Update: Artboard Preset Changes.
02:48
Acorn Screen Sketch File
Article
14:15

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

10:39

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

Finish Top Content
05:55
08:08

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

18:51

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.

01:34

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

10:01

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

Lines For Our Graph
09:21
09:12

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

06:18

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

Section 5: Sketch School 101
02:59

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

06:25

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

All About The Layers
11:08
01:51

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

06:46

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

04:03

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.

06:26

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

08:12

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

02:25

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

02:21

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

05:03

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

06:23

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

04:46

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

09:43

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

Fills

Borders

Shadows

Blur

Color

Gradients

09:34

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.

09:52

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.

10:34

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

Section 6: UX School 101
05:24

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

05:14

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

03:49

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

03:59

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

07:32

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

03:24

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.

06:32

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

03:10

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.

Section 7: Color Theory Basics
Commandments of Color Theory
05:42
Color & Branding
03:20
The Power of Color
03:47
Section 8: Color Theory - Examples & Discussion
Examples of Different Colors in Web Design
09:19
Section 9: Typography
Introduction to Typography
04:47
Different Typefaces
04:22
Typeface Properties
03:19
The Anatomy of Typeface
04:23
The Ten Commandments of Typography
04:08
Section 10: UX School Applied: Discovering Our App
01:00

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.

05:11

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

01:52

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.

08:49

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

07:03

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.

User Flow Chart
05:03
04:27

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

07:23

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.

Section 11: Icon Pack
Resources - Sketch File For Yahoo Digest APP
Article
02:17

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

02:18

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

Pie Chart Icon
03:39
03:11

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

01:45

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

02:14

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

03:13

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.

06:44

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

03:06

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

03:14

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

03:04

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.

00:49

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!

05:33

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

Section 12: Designing Our App
18:07

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.

11:14

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.

02:11

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

09:31

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.

15:55

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.

04:31

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

18:10

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

13:40

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

06:28

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

10:40

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

07:01

In this lecture, we will finalize the settings screen.

04:23

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

04:24

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

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Rob Percival, Web Developer And Teacher

Hi! I'm Rob. I have a degree in Mathematics from Cambridge University and you might call me a bit of coding geek.

After building websites for friends and family for fun, I soon learned that web development was a very lucrative career choice. I gave up my successful (and sometimes stressful) job as a teacher to work part time and today, couldn't be happier.

I'm passionate about teaching kids to code, so every summer I run Code School in the beautiful city of Cambridge. I also run the popular web hosting and design service, Eco Web Hosting which leaves me free to share my secrets with people like you.

You wouldn't believe the freedom that being a web developer offers. Sign up and find out for yourself why so many people are taking and recommending this course. I genuinely believe it's the best on the market and if you don't agree, I'll happily refund your money.

Sign up to my courses and join me in this amazing adventure today.

Instructor Biography

Andrew Eddy, Graphic Designer, Entrepreneur, & Instructor

I am a graphic designer, entrepreneur, and lead instructor at the Academy X design school. I am passionate about working with startups and have launched several successful businesses. Learn how to design from my "jump right in" teaching style.

"I am a nerd. I love everything technology, and making the virtual world a more beautiful place is my passion." -Andrew

I currently live in Atlanta, where I am the CEO of a security software company. I began designing mobile applications and websites in college. UX/UI design came so naturally that, I knew it was the career for me. I like to say I am a Economics major with a computer science addiction. I won the College of Charleston Entrepreneur of the Year award when I was a senior in college.

I have worked as a graphic designer for an array of different size companies from startups, all the way to fortune five hundred companies such as Coca-Cola.

I have experience designing logos, branding, UI design, UX research, rapid prototyping, and web development.

I have been a freelance web developer since 2009 and have contributed countless beautiful websites to the internet.

I have served as the creative director for an emerging financial technology startup.

I have served as a UI designer for a non profit, SPLASSH, a company that crowdsources projects about the way we consume information about water.

My motto is to teach by doing. In my courses, you will jump right into the subject and learn to design by actually designing. Recreating app designs and learning as you go is the best way to learn in my opinion.

My goal is to give my students the ability to change their career with the skills they learn in my classes.

Ready to start learning?
Take This Course