Mobile App Design In Sketch 3: UX and UI Design From Scratch
———- 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.
Why Sketch 3?
In this section, we will go over some of the differences between Adobe Photoshop and Sketch 3.
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
In this lecture, we will move around Sketch and learn the basic tools and functions.
In this lecture, we will go over a few other pointers that will make our lives easier with Sketch.
In this lecture, we will go over the ultimate Sketch Resources website.
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
In this lecture, the student will create the very top of the Acorn app screen.
In this lecture, the student will create the unique and beautiful pagination in our App Screen.
In this lecture, we will begin to create that analytics. We will also organize and clean up our workspace.
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.
In this lecture, you will take on your very first challenge!
In this lecture, we will go over how to create the numbers along the bottom of our graph for the very first challenge!
In this lecture, we will add the cool faded effects that make this screen look so cool.
In this lecture, we will put the finishing touches on the Acorn Investment screen.
Sketch School 101
Lets go over a brief introduction to sketch school 101 and talk about a few of the benefits we saw in earlier lectures.
In this lecture, we will look at the anatomy of Sketch and the 4 main parts that make up the Sketch body.
In this lecture, we will begin talking about shapes in Sketch 3.
In this lecture, we are going to learn how we can manipulate shapes to accomplish specific goals.
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.
In this lecture, we will discuss some of the remaining tools that help us manipulate shapes.
In this lecture, we will go over the basics of manipulating text, and learn how text is rendered differently across devices and platforms.
In this lecture, we will talk about how using text styles can save us a lot of time and hassle.
In this lecture, we will continue to talk about the important tools for manipulating our text. This lecture includes text paths, and text outlines.
In this lecture, we will talk about the limited, yet big improvement in dealing with images in Sketch 3.
In this lecture, we will discuss symbols and how they play an important role in speeding up our work flow.
In this lecture, we will go over some of the basics of styling within our inspector and a few tips and tricks.
In this lecture, we are going to go over the basics of styling, including:
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.
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.
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
In this lecture, we are going to go over the basics of user experience and the general concept of UX.
In this lecture, we will dive into ergonomics and why UX was not always perceived the way it is now.
In this lecture, we will learn about usability and its importance in user experience.
In this lecture, we will dive into user centered design and the simple process for UCD.
In this lecture, we will discuss our 10 principles of user centered design in detail.
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.
In this lecture, I will go over the key attributes that make a good UX designer.
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
Color Theory - Examples & Discussion
UX School Applied: Discovering Our App
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.
In this lecture, I will discuss how and why to find the ideal user that will most likely be using your product.
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.
In this lecture, I will go over 20 different methods that can be used to discover your users behaviors, thoughts, and opinions.
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.
In this lecture, I will go over what a drawn mockup would look like and how to link together each screen together.
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.
In this lecture, you will create a simple video camera icon using two shapes, a triangle, and a rounded rectangle.
In this lecture, we will make a location icon using two shapes, both of which are circles.
In this lecture, you will learn how to use rectangles to create a simple yet cool musical note icon.
In this lecture, you will learn how to use the vector tool to create a simple yet cool analytical line icon.
In this lecture, we will create a moon icon using two circles and subtracting one from the other.
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.
In this lecture, we will create a more in depth icon that involves a multitude of different shapes and even incorporates color.
In this lecture, we will create a colored clock that we will use on one of our tour screens.
In this lecture, you will create a cool box with rectangles and different colors.
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.
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!
In this lecture, I will show you how to use complex boolean operations to achieve the challenge.
Designing Our App
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.
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.
In this lecture, we will duplicate our last tour screen and switch some content around.
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.
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.
In this lecture, we will start exporting our screens and make sure we are saving our assets in an organized manner.
In this lecture, we will tackle the default screen. This will showcase our stories with the first being dominated by the main image.
In this lecture, we are going to continue working on the home screen by increasing the size of the artboard and adding additional articles.
In this lecture, we will finish the content at the bottom of our home screen by adding a counter and an icon.
In this lecture, we will begin putting together the transparent settings screen.
In this lecture, we will finalize the settings screen.
In this lecture, we will create the screen that is prompted when we actually select on the settings icon.
In this lecture, we will complete the very last screen we need to move on to prototyping our app.