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

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.

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.

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.

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:

Fills

Borders

Shadows

Blur

Color

Gradients

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.

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.

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.

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.