The Complete User Interface Design Bootcamp - Sketch UI/UX | Arash Ahadzadeh | Skillshare

The Complete User Interface Design Bootcamp - Sketch UI/UX

Arash Ahadzadeh, iOS Developer & UI Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
145 Lessons (9h 10m)
    • 1. Introduction

      2:06
    • 2. Introduction to UI/UX

      2:42
    • 3. Course Structure

      1:12
    • 4. Required Tools

      0:50
    • 5. Introduction to Design Basics

      0:28
    • 6. Layout

      2:00
    • 7. Visual Hierarchy

      5:02
    • 8. Visual Noise

      1:25
    • 9. Iconography

      1:01
    • 10. Typography

      3:09
    • 11. Color Contrast

      1:36
    • 12. Color Pallete

      2:17
    • 13. Spacing

      1:12
    • 14. Composition

      1:25
    • 15. Design Guide

      0:40
    • 16. Consistent Fonts

      0:57
    • 17. Consistent Colors

      1:00
    • 18. Consistent Icons

      1:35
    • 19. Consistent UI Elements

      0:44
    • 20. Font Resources

      0:48
    • 21. Color Resources

      0:46
    • 22. Icon Resources

      0:57
    • 23. Introduction to Sketch

      0:52
    • 24. Sketch Requirements

      0:56
    • 25. Sketch Environment

      1:01
    • 26. Layer Basics

      1:43
    • 27. Toolbar

      2:29
    • 28. Shapes

      0:52
    • 29. Editing Shapes

      1:39
    • 30. Boolean Operations

      1:11
    • 31. Text

      1:10
    • 32. Text Inspector

      1:07
    • 33. Text Style

      1:22
    • 34. Images & Bitmaps

      1:30
    • 35. Styling: Fills

      1:00
    • 36. Styling: Borders

      1:04
    • 37. Styling: Shadows

      1:18
    • 38. Styling: Blurs

      0:56
    • 39. Styling: Gradients

      1:27
    • 40. Styling: Shared Layer Style

      1:09
    • 41. Masking

      0:58
    • 42. Symbols

      1:04
    • 43. The Canvas

      0:55
    • 44. Plugins

      0:59
    • 45. Exporting

      1:53
    • 46. Introduction to UI Elements

      0:32
    • 47. Text Fields

      1:29
    • 48. Buttons

      2:06
    • 49. Sliders

      1:29
    • 50. Tooltips

      1:02
    • 51. Selection Controls

      1:19
    • 52. Chips

      1:11
    • 53. Cards

      1:04
    • 54. Dialogs

      1:06
    • 55. Lists

      0:58
    • 56. Tables

      1:08
    • 57. Navigation

      0:50
    • 58. Menus

      0:50
    • 59. Charts

      0:52
    • 60. Steppers

      1:03
    • 61. Snackbars

      1:21
    • 62. What is wireframing?

      0:59
    • 63. User Flows

      1:08
    • 64. Interactive Prototypes

      1:02
    • 65. Wireframe tools

      0:59
    • 66. What is a Color Style?

      0:31
    • 67. Primary, Semantic, & Accent Colors

      13:10
    • 68. Grey Colors & Gradients

      7:33
    • 69. Borders & Shadows

      7:01
    • 70. Inputs

      3:39
    • 71. Intro to Typography Style

      0:25
    • 72. Typography Guide Part 1

      5:03
    • 73. Typography Guide Part 2

      2:23
    • 74. Project 1 - Instagram Redesign

      2:40
    • 75. Registration Page (Sign Up Screen)

      20:38
    • 76. Personal Data Page

      11:19
    • 77. Login Page

      5:08
    • 78. Feed Page

      17:36
    • 79. Stories

      4:36
    • 80. Profile Page

      9:29
    • 81. Camera Page

      6:28
    • 82. Explore Page

      10:23
    • 83. Messages Page

      7:21
    • 84. Chat Page

      18:10
    • 85. Settings Page

      10:20
    • 86. Charts

      23:31
    • 87. Onboarding

      10:01
    • 88. Logo Types

      2:20
    • 89. Designing Our First Logo

      5:06
    • 90. Designing Our Second Logo

      2:12
    • 91. Designing Our Third Logo

      2:50
    • 92. Designing Our Forth Logo

      4:46
    • 93. Introduction to Adobe Photoshop

      0:32
    • 94. Environment of Adobe Photoshop

      1:21
    • 95. Basics of Adobe Photoshop

      7:40
    • 96. Adobe Photoshop For UI:UX Design

      5:54
    • 97. Project 2 - Finance App

      2:29
    • 98. Launch Screen

      1:41
    • 99. Sign in Page

      13:59
    • 100. Sign in & Sign up Page Part 2

      7:27
    • 101. OTP Verification

      9:45
    • 102. Profile

      10:25
    • 103. Homepage

      15:06
    • 104. Menu

      9:01
    • 105. Credit Cards

      14:12
    • 106. Transactions

      10:48
    • 107. Transaction - Detail

      8:25
    • 108. Transfer

      7:37
    • 109. Confirmation

      3:38
    • 110. Notification Page

      9:20
    • 111. Profile Page

      4:24
    • 112. Onboarding

      7:39
    • 113. Project 3 - Landing Page

      1:03
    • 114. Layouts & Grids

      3:55
    • 115. Hero Section 1

      9:35
    • 116. Hero Section 2 - Mockups

      4:23
    • 117. Key Features Section

      9:45
    • 118. Feature 1

      4:13
    • 119. Feature 2

      3:59
    • 120. Customers Section

      2:39
    • 121. Call to action

      4:03
    • 122. Footer

      7:10
    • 123. Introduction to 3D Modeling

      2:10
    • 124. 3D Shapes

      4:17
    • 125. Camera & Lightings

      2:16
    • 126. Materials & Textures

      1:55
    • 127. Creating a 3D Scene

      5:40
    • 128. Rendering & Exporting

      3:34
    • 129. Prototyping Tools

      1:06
    • 130. Prototyping in Sketch

      2:38
    • 131. Prototyping in InVision Studio

      4:26
    • 132. Prototyping in InVision Studio Part 2

      3:48
    • 133. Mocking up an app

      3:07
    • 134. How to use the Sketch app on your phone?

      1:01
    • 135. How to Create Your Own Online Portfolio?

      1:17
    • 136. How to use Dribbble?

      0:57
    • 137. How to use Behance?

      0:58
    • 138. How to get your first client?

      1:18
    • 139. How to start your own business?

      1:37
    • 140. How to scale your business?

      1:19
    • 141. Communicating with your client

      0:53
    • 142. Contract

      0:55
    • 143. Where to Find World Class Design Inspiration?

      0:48
    • 144. Image Resources

      0:54
    • 145. What is the next step?

      1:07
25 students are watching this class

About This Class

Do you want to become a UI/UX designer but you don't know where to start? This course will allow you to develop your user interface design skills and you can add UI designer to your CV and start getting clients for your skills.

Hi everyone. I'm Arash and I'm a UI/UX designer. In this course, I will help you learn and master Sketch app comprehensively from scratch. Sketch is an innovative and brilliant tool for User Interface design. It's used by everyone from entrepreneurs and start-ups to Apple, Airbnb, Facebook, etc.

By the end of this course, you will be able to create world-class User Interface (UI) and User Experience (UX) designs. Throughout the course first, you will learn about all the Design Basics, UI Elements, Typography, etc. and then we will work on real-world projects together.

Moreover, we will redesign the Instagram app completely and I will share with you all the necessary techniques and hidden secrets you need for mobile application and web design. Furthermore, we will design a finance app from scratch and then we will create a modern and creative website for it.

This course has been designed for people completely new to UI/UX design or let’s say design in general. We will start with the most basic principles and work all the way through, step by step.

We start the course by explaining the differences between UI and UX design. And then we will start learning about Sketch app in Sketch Academy section. After that, we'll create a simple low-fidelity wireframe to understand its usage and benefits.

I’ll go over all of the essential tools necessary for creating an amazing User Interface (UI) and User Experience (UX). Not only will you learn about Sketch app, but also you will learn about Adobe Photoshop, InVison Studio, Vectary, Dribbble, Behance, etc.

The Design Basics section covers all the necessary principles, including: Layout, Iconography, Typography, Color Contrast, Composition, Spacing, etc.

One of the interesting parts of the User Experience design process is micro-interactions. I will teach you how to use InVision Studio for creating this kind of interaction.

With over 9 hours of content across 150+ lectures, I will take you from beginner to expert, and teach you everything you need to know in order to use Sketch in a professional manner.

An amazing course for people with zero design experience, or for experienced designers that want to learn and master Sketch 5 and want to become a User Interface designer. By the end of this course, you’ll have a complete, real-world project for your own portfolio, and every student will have the knowledge and confidence to apply for a UI/UX designer job.

Who this course is for:

  • Anyone who wants to start using Sketch App in their career & get paid for their user interface design skills.
  • This course is for beginners & newbies in the field of UI/UX design.
  • For anyone that needs to add ‘UI Design’ to their portfolio.
  • Developers that want to understand front end principles to complement their existing skills.
  • Graphic designers who want to become a UI/UX designer.

Course highlights:

  • Mastering Sketch Software

  • Tips & Tricks, make most of Sketch Tools

  • Colors, Iconography, and Typography

  • BONUS! Get 2 brand-new UI Kits worth $3000.

Requirements:

  • We do not require any previous experience or pre-defined skills to take this course. A great orientation would be enough to master UI/UX design.
  • Sketch is a free-to-try software developed specifically for Mac computers and Mac OS. If you do not have a Mac and are using a Windows computer, make sure you are running the OS X virtual environment on your computer.
  • Adobe Photoshop (OPTIONAL)

So, what are you waiting for? Enroll today!!

fca0521c

f26e57c7

Transcripts

1. Introduction: If you want to become a U R ux designer, you are in the perfect place. Thes complete course will teach you all of the essentials with, well organized, an easy to follow tutorials. Hi, my name is a rash and I'm a UX designer. Together, you and I are going to learn how to become a user interface designer using the software sketch Thes course has been designed for people completely new to your UX design or let's say design in general. At first we're going to learn about the design basics and you elements, and then we will learn about sketch map and all of its hidden secrets together. Then you will learn how to create a simple wire frame. From there, you will learn how to set up your Stein guide and how to apply your colors appropriately to your design. You will also learn about all the principles off mobile application and Web design, then reveal a redesigned the Instagram at as our first project from scratch, and then we will design a finance some together, and I would share with you all the necessary techniques and secrets for designing a world class application. Moreover, you will learn about both simple and advanced micro in directions. We will also talk about mark ups and how you can create your own online portfolio without writing a single line of code. In addition, you will learn about three D modeling and creating augmented reality scenes. And last but not least, you will learn how to start your own business and get your first client as a UX designer. So during the scores, we will design to complete mobile applications and one website to develop your design skills and master all the necessary tools. Additionally, you will get access to two brand New York eats worth more than $3000 you can use them in your commercial projects. So I hope you're ready to learn new skills and become a user interface designer. I see you in class 2. Introduction to UI/UX: Hi, everyone. Welcome to the first chapter of these course In these section, we're going to be talking about the differences between you, I and UX design and the course structure that you can understand how the course is organized in order for you to follow it up properly. And last but not least, we're going to be talking about the tools and requirements that you need to know to proceed the course. So without further ado, let's get started. First of all, I'm going to talk about the differences between you I and UX design. Although both elements are crucial to a product and work closely together, their roles are totally different. Your ex design is a more technical and analytical field. However you I design refers to graphic design with more complex responsibilities. So let me give you an example. If you consider a product like a car, the chassis is the code, which gives it a clear structure. The other parts, such as doors, full filter etcetera, represent the UX design, which lets the car function properly. On the other hand, you ideas nine represents the appearance of the car. It's sensors, etcetera. In other words, you X, which stands for user experience, is about how a product should work. And you I, which stands for user interface, is about how a product should look. So you, as a product designer, should know how these two terms work together and how to distinguish between them. For instance, you should know what are the responsibilities off a UX designer. And on the other hand, what are the responsibilities off a U I designer? As you can see in the pictures, we have two different screens. The left one shows us how the product should work. For example, suppose that you have a screen with two buttons and to text fields. Okay, the U X shows us how these buttons should interact with the user, and the right picture is all about user interface, and it shows us how the product should look. For instance, here we have a button and a square. The your eye designer decides how big this button should be or which color is suitable for that square. These are the you I designer responsibilities. All right, thank you so much for watching this video. And I will see you in the next video 3. Course Structure: Hi, everyone. In this video, we're gonna be talking about the structure of the course. As a matter of fact, you can divide the course into two main sections. The theoretical part and the practical part. The theoretical part creates 10% of the whole course, and the practical part forms 90% of the course content. So instead of focusing on theories, we will focus on practicing the skills you learn by working and different kinds of projects . In the theoretical part, you will learn about design basics, your elements, business ideas at Centra. And in the practical part, we will design different mobile applications landing pages. And also we will talk about wire framing prototyping, three D modeling logo design and so much more. So if you're a complete beginner, I highly recommend to watch the theoretical part first and then proceed with the course. On the other hand, you can skip the theoretical part and jump into creating a project. All right, guys, thank you so much for watching this video. And I will see you in the next video. 4. Required Tools: Hi, everyone In these video, we're gonna be talking about the require tools for completing this course. In these course, we're going to use different graphic design tools to design world class user interfaces together. The main suffer which we're going to use is called sketch, which is only available for Mac OS. Therefore, if you do not have a Mac OS device, you may not be able to learn the practical parts. The other tools that you will learn about our invasion studio and adobe for the shop. We will also talk about useful websites such as dribble be hands, etcetera. If you don't have any of the above mentioned suffer, make sure to install them before starting the course. 5. Introduction to Design Basics: Hi, everyone. Welcome back to another section of thes course. In these chapter, we're gonna be talking about layouts, iconography, typography, colors, composition and so much more. If you want to become a professional and great, you are ux designer. You need to start off with design basics. So now that you know the importance of knowing design basics, let's start thes chapter. 6. Layout: Hi, everyone. In this video, we're gonna be talking about layouts in design. When it comes to you are UX design. The way we show the information in a nap or website is so important. As a matter of fact, there is not a specific right way to create your own composition, so you can easily create a layout based on your own need, as long as it is consistent and understandable to users. As you can see in the pictures on the right, both screens are well designed. Although the spacing is different, the composition is absolutely clear and consistent. You need to pay attention to consistency a lot. While you're designing a user interface, no matter what kind of platforms you're designing for the same rules, apply to all of them. All right. Now let's check these pictures out as it can see in the Left picture that the senses are quite consistent. For instance, if you look at the distance between the profile image and the top of the screen, you can realize that the value is 50 pixels and also the D since between the same profile image and the text field right under that is again. 50 pixels. As you can see, the layout of this design is quite clear. And the reason of that is because of the consistency of spacing. In the next lectures, we will also talk about spacing and the importance of that in design. Now, if you look at the right picture, you can realize that the design is also clear. In that layout, However, the only difference is the colors and the spacing. But as you may have noticed, the spacing is again consistent. All right. Thank you so much for watching this video. I will see you in the next video. 7. Visual Hierarchy: Hi, everyone in these video, we're gonna be talking about visual hierarchy. Visual hierarchy is about how we look at designs. Does it sound? Were. So let's put it in another way. We, as designers, should put ourselves in users shoes in order to realize how they see our designs. Content in any digital page layout will pursue a particular hierarchy. For instance, menus go to the top bottom left or right of the screen, or a combination of these headers appear above body tapes. In other words, hierarchy is a simple way of staying organized from most to least important. Remember that users defined hierarchy of any app or website. The item that first grabs the user's attention is at the top of the hierarchy. The visual specifications that the designer can utilize to influence users, understanding of the information, our size, the larger the element, the more attention it will attract. So if you're familiar with the HTML and what development process, you may know that we have six kind of headers from H one to H six. H one is the largest header, and H seeks is the smallest on. So when we want to get so much attention. We will use each one. For instance, suppose that we want to get the user's attention to a specific section or specific item, so in that case we will use the larger header. Or on the other hand, sometimes we don't want to get so much attention to a specific section or content. In that case, we can use the smaller header so size is so important. The next item is collar. Bright colors are more noticeable than muted ones. If you do not have enough information about colors, you don't have to worry about it because in the next lessons, we will cover all the necessary information about choosing the right color in your design. The next item is alignment. An element with a different alignment of others will attract more attention. So what does that mean? Suppose that you have a layout off, Let's say, four different videos or four different photos. If you align Onley one off those videos or those photos differently, it will draw more attention to it. As a matter of fact, in that case, the user can realize that something is different. The next item is contrast. Sharply contrasting colors will catch the eye easily. Contrast is a very, very important topic in you I design, and we will talk about contrast in next lessons. Deeply. The next item is proximity Elements, which are placed closely together, appear more related. And that's true. If you look at the pictures on the right side, you can see we have two different screens. Let's focus on the left screen. As you can see, we have two different sections, new promotions and new stories. Can you realize that elements in both sections are placed closely together so that users can easily understand that they're related together? The next item is repetition. Repeating styles can indicate that content is related. So what does that mean? Let's look at the pictures on the right. Can you see that we have four squares at three circles, so the user can easily recognize the relationship between those elements. And the next item is white space, which is another important term in ur ux design. More space between elements will draw more attention to them, so let's look at the pictures on the right. But this time we need to distinguish between the left screen and the right screen As you can see in the left screen, we have enough space. Or let's say, enough whitespace between our elements and our sections so the users can easily wife through the user interface. However, on the right screen, you can see that all elements are very, very close together. And there is not enough white space between all elements in that kind of layout. All right, thank you so much for watching this video. I hope you enjoyed it. And I will see you in the next video. 8. Visual Noise: Hi, everyone. In these video, you're gonna be talking about visual noise in design. Visual noise, as you can guess from its title, is all about a screen or part of a digital product, which has so much information and many elements on it. When you're designing an APP or a website, you need to pay attention to details a lot, because by the end of the day, we want to design a screen which is user friendly and easy to walk through. So make sure to eliminate all the unnecessary elements or information from your screen. If you're not sure whether your design has video noise or not, it is recommended to ask for users feedback. If you look at the pictures on the right side, you can see that we have two different screens in the left screen. There is no visual noise, and it is great in terms of you I design. On the other hand, in the right screen, there is too much visual noise. As you can see, there are so many text at the top, and then some items, which could be videos or photos than again some videos. And after that, some stories and you can recognize that there is not enough white space between those elements. Thank you so much for watching this video. I will see you in the next video. 9. Iconography: high in these video, we're gonna be talking about iconography in design. Iconography is a visual language used to demonstrate aspects, contents or functionality. Arkan's are meant to be simple and clear visual elements that are recognizable immediately . You do not have to redesign well known icons such as home icon, search icon, etcetera or, let's say, do not reinvent the wheel. You can get access to almost all kinds of icons on websites for free or ads reasonable costs. But what if you need it to design some icons specifically for your project? Well, in that case, you should design icons, which are in harmony with your design and other icons. Keep in mind that icons need to be understood easily by users, so make sure to show consistency in your design. 10. Typography: high in these video, we're going to talk about typography. What is typography? Typography transforms language into a decorated visual element. Typography is one of the most important parts of you are UX design, so it is worth your time to learn more about it. When you're designing an app or a website, limit the number of typefaces and sizes you use in order to keep your design simple. Start B two funds at most, one for the headers and the other for the bodies. You can use free or paid funds in your projects, but I highly recommend using free funds. If you will like to use paid funds, check the license carefully. You should inform your clients that they need to pay extra for using paid funds. Now, if you look at the right side of the screen, you can see that I classify the typography foundation for you. Let's check it out. Step by step. Right at the top. We have properties. Every text line in any program has a base line. As you can see, it is indicated here with the blue line, and also it has the letter spacing that you can modify it in your design off course. There are more properties related to typography, however, for proceeding T scores, it is enough to know these two properties. Now let's focus on letter spacing comparison on the left, you can see we have the default spacing. But on the right, I modified the spacing off those letters. Depending on what kind of project you're working on, you can modify the letter spacing as you wish. Now let's talk about the weight off each fund. Most funds have at least three different weight, but some of them have more. For instance, the fund can have six different ways. As you can see on your screen, we have here from light toe, bold and last but not least, declassification off fonts. As you can see, we have two different classifications for funds. The serif, which is the left one in the picture, and the Sand Saref, which is the right one. The picture. So what is the difference? For sure, you can distinguish between them, but let me explain to you in order to memorize the rule off serif and sans serif. Actually, Sarah funds have some kind off flat line at the top off them and also the bottom off them. Or you can say they have feet. On the other hand, sensory fonds do not have this kind of lines. Sands in English and French means without so sans serif means without serif. You as a designer are responsible for choosing the best wave of funds and also the best classifications depending on what kind of project you're working on. Thank you so much for watching this video. I will see you in the next video. 11. Color Contrast: Hello, everyone. In this video, we're going to be talking about color contrast, which is a very important topic when it comes to you I designed. Applying colors effectively is a skill that everyone who works it, visual compositions must have so you, as a your designer into know how to use colors in your projects. When it comes to applying colors, readability and legibility are the key factors. Researchers have shown that vibrant colors enable enough of contrast, helping to increase readability and legibility. Please take into consideration that too much color contrast make us difficulty in reading. I highly recommend that designers should create a meat level of contrast and for highlighting elements they can use high contrast ing colors. You can also use websites to provide you with a ratio when comparing two colors to see whether there is enough contrast or not. If you look at the examples under right, we have six different colors. As you can see, the 1st 4 are acceptable and have enough contrast, but the others are not readable. So when we're designing a user interface, we need to pay attention to callers a lot because sometimes you as a designer, I want to be as creative as possible. However, creativity should come after readability and legibility 12. Color Pallete: Hi, Ron. In these lesson, we're gonna be talking about color palette. Creating a color scheme for product might seem like a hard task, especially if you're a beginner. However, in reality, it's not as complicated as many designers think. What is the color scheme you are? Color scheme is a mixture of colors used in your user interface. Almost every color scheme contains the falling groups of colors. Primary colors, secondary colors, accent colors, neutrals, semantic colors. What are the primary and secondary colors? Primary and secondary colors are the base colors of your user interface. The colors, which are used most frequently in your you I design, are called primary Colors. Most designers usually choose brand colors as primary colors. As a matter of fact, it's recommended to have no more than three primary colors. Optionally. You can use secondary callers in order to distinguish your products and make more interesting you. I designs all right, but how to choose colors properly When you're working with colors, you should not create a combination of random colors because the result would not be the one you expect. In order to understand how to work with colors. First, you need to know what the color will ease and how it works. Here are important color combinations you need to know complimentary, which are two colors that are on opposite sides off the color with, and the next one is monochromatic, which are three shades, tones and teens of one based color. And the last one is analogous, which are three colors that are side by side on the color wheel. If you look at the right side of the picture, you can see that we have a color will here. As you can see, we have monochromatic. For example, if you look at the red, we have three different shades or, let's say tens of one based color, and also we have complementary. For instance, here we have purple and yellow, which are on opposite sides off the color with, so the combination of these colors is great 13. Spacing: Hi, everyone. Welcome back to another lesson off these course in this video, we're gonna be talking about spacing in design. Consistency plays a key role in you. I design. So when you're designing, you need to measure everything and keep it consistent. As a designer, spacing is up to you. But once he said it, you need to use the same spacing patterns in your designs. For instance, if you said the spacing between the header and body takes to eight pixels, you should always use the same spacing throughout your project. As you can see the picture, all the spacing has been measured accurately and makes the design clear. For instance, if you look at the picture, you can see that we have 50 peak cells from the top to new pictures title and then eight pixels from new pictures to the top off subtitle and going on and on. So in order to keep your design clear, make sure that you use consistent spacing patterns throughout your project. 14. Composition: Hi, everyone. In these video, we're gonna be talking about composition in design. What is the golden ratio? The golden ratio is a mathematical proportion between the elements of different sizes, which is thought to be the most aesthetically pleasing proportion for human eyes. The golden ratio equals 1 to 1.618 and it's usually illustrated with seashell shaped its piles. This number was used in creating proportions for architecture, paintings, photography, design, etcetera. But how to use the golden ratio in your design? If you have a screen with the with off 1200 pixels, you need to divide it by 1.618 and the result will be 741.6. And now we can say 1200 pick songs minus 741 equals to 459. So we have two sections with the with up 741 pixels and 459 pixels. As you can see on the right side of screening here we have a screen shot off the medium website. Can you see how it has been designed based on the golden ratio so it can get the user's attention to the right place at the right time? 15. Design Guide: in this video, we're going to talk about design Guide. What is a design guide? A design guide is a system that can help you to keep your design consistent. It can also accelerate your design process. The examples you're looking at are only a few components that can be used in your design guide. There are lots of things that can be included in your design guides such as you elements, topography, iconography, sizing and spacing. Color pad. It's etcetera, so having a design guy makes your life much, much easier. 16. Consistent Fonts: Hi, everyone, In these lesson, we're gonna be talking about funds in design. As a designer, you always work with different fonts, so you need to know how to use them properly. As it was mentioned in the typography section, it is recommended to work with two different funds at most to keep your your eyes simple. Whether the best funds for you, I designed number one San Francisco. It is best for modern websites and more by lapse number two Open sense. It is best for websites and mobile relapse. Number three concert. It is best for minimal websites and mobile APS number four Proxima Nova. It is great for modern content centric websites and mobile APS and last but not least, roboto. It is best for modern websites and mobile maps as well. 17. Consistent Colors: Hey, everyone, in these video, we're gonna be talking about colors. Applying colors to your your eye elements is one of the most crucial parts of the U. Y. Design process. Do you remember what was playing a key role in your eye designing your right consistency, so you need to keep your colors consistent as well. For instance, if you apply Blue two titles on one page, you need to apply the same color two titles on other pages or, if we apply, read to purchase button. You should use the same color for any other purchase bottoms on other pages. This is why we need a design guide and the style right. If you look at the picture on your right, you can see that we used a specific black color for titles, and we use a specific color for our bottoms, etcetera. So it is so important to keep your colors consistent 18. Consistent Icons: Hello, everyone. In this video, we're gonna be talking about icons in design. You may think that working with icons is an easy part of the U. I design. However, if you do not pay attention to details, you will not get appropriate. Result your some important points that you need to take care off. Number one. Test the scalability. Check if you're icons can still be recognized at small sizes such as 15 by 15 pixels. Number two properly sized there. Commended Target size for touch screen objects is 7 to 10 millimeters. Also remember to add padding between icons to preventing correct taps. Number three Internal consistency. Use the same color scheme for all icons and also the same styling attributes such as the size of borders. Number four. Perfect alignment. Always try to have perfect alignment in a con. Ah, graffiti. But sometimes because you have icons with different sizes, you need to balance them by yourself. If you look at the picture on your right, you can see that we have two different groups off icons in the left group. You can see that we have consistent iconography because we only use outline icons. But on the other hand, we have inconsistent iconography because we use both outline and solid icons at the same time, which is not true commanded. 19. Consistent UI Elements: Hi, everyone. In these video, we're gonna be talking about consistency of your elements. One of the things that you always work Fifth, while you're designing a user interface is au element. What are the EU elements? Bottoms, cards, text fields, sliders, dialogues, charts, steps, tables, selection controls, menus, snack bars, etcetera. As it conceding the picture. I chose only some of them for you because certainly I could not put all of them here. However, you will learn about almost all of them in the U Elements chapter. 20. Font Resources: Hey, everyone in these video we're gonna be talking about font resource is sometimes choosing the right funds for your project could be tricky and time consuming. So in these part, you're gonna know about the best online resource is to get your funds easily. The first website is called Google Fonts, which is so famous and you can find free funds there. The second website is called my phones and you confined free and paid fonts, ter and last but not least, you can check out the Adibi Funds website which you can find paid Foncier. If you're having troubles repairing funds, you can also use type off or fun pair. 21. Color Resources: Hi, everyone, in these lesson, we're gonna be talking about collar. Resource is now. It's time to look for our colors in order to use them in our projects. Most of the time. Finding good colors is a difficult has for you, I designers, especially if you're a beginner. Here are some absolutely useful resource is for finding colors. Number one collar haunts number two Adobe color, which is so useful by the way Number three I don't know how to pronounce it, but I think it's coolers or collars. Number four Web Grady INS, which is another good website for finding Grady INTs. If you're looking for them, make sure to spend enough time finding the best possible color palette for your projects. 22. Icon Resources: Hey, everyone, in these video we're gonna be talking about Icon Resource is for your design project. As mentioned before, iconography is an essential part of the U. I design process, and it is so important to know where you can find engaging and a standard icons. Here are some useful resource is for finding icons number one flat icon, but you can find paid or free icon, sir. Number two, I can find her, which is another good website for finding icons and last but not least, nuclear, which is an application, and it gathers all the icons for you in one place. Remember that you should use the icons, which are easy to recognize by users. So take your time and check out all the available icons that you may want to use in your project. 23. Introduction to Sketch: Hi, everyone in these video, we're gonna be talking about sketch What is catch? Sketchy? The Professional Vector Editor, which is designed for those who want to turn their ideas into incredible products. As I mentioned before, sketches not suitable for raster graphics. It's a vector editor, which is developed for US UX design, and it's really good for this purpose. If you want to try it out, you can get a try, allergic of it and then purchase of one year license by parishes and get you will get all the updates until the end of your subscription. So if you're a fan of Adobe for the shop, I need to tell you that it's not a good software program for you are UX design. However, it is useful for editing your images in order to use them in your projects. 24. Sketch Requirements: Hi, everyone. In this video, we're gonna be talking about sketch requirements. If you want to use Cage as your designed toe, you need to access at least one off the Mac OS devices. It doesn't have to be the latest or greatest version, but it needs to be ableto have Macron's High Sierra or a newer Michaela's. If you want to make sure that you can update your macros from time to time, it's recommended to keep your Mac OS updated to delay this version. Whether you're sure about your operating system or not, I recommend that you should get the 30 day trial worsen before purchasing any license. So in that way you can be 100% sure that everything works perfectly. If you're working with more complex documents involving multiple pages and hundreds of art boards, a powerful Mac will definitely improve the performance 25. Sketch Environment: Hi, Ron. In these video, we're gonna be talking about sketch environments. Sketches. Interface is designed minimally right at the top. You can find the toolbar that contains all the important tools and actions underwrite the conceding specter that lets you modify the properties off the selected layer. The layer list is the pain on the left side, and it lists all the art pores and layers in your document. Last but not least, the canvas is in the middle where you will see on your designs. So, as you can see, we can divide a sketch interface into four main sections. Toolbar that contains all the essential tools you need. Layer lists, at least all the layers and our board's inspector that lets you customize the properties of your layers and lastly, canvas that shows all your art pours in one place. 26. Layer Basics: Hello, everyone. In this video, we're gonna be talking about layer basics the later least contains all the layers on the current page. We, as designers worked with layers all the time, and it's so important to know how they work. As you can see, you're able to insert as many pages as you want with the help of the plus button at the top . Whenever you add something to your art board, it appears in the form of a layer in the layer list, no matter what it is. For instance, the headline in this layer list is a text layer, and you can recognize it from its unique icon for hiding a layer you can hover your mouse over. That's a specific layer, and then I I can't appears immediately. By clicking on that, you can hide the layer and wise versa for renaming a layer. We should creek in its name, and you can change it easily. One of the most important things about layers is the way we organize them. I sent so many designers that do not care about well organizing their layers, and it's not good at all. Here is why, when you're collaborating with a team of designers. The way you manage your layers matters a lot, because if it's entirely other team members cannot understand the hierarchy of your project . And in order to modify anything, they have to spend considerable time. So make sure to name your layers once they're created and keep them as organized as possible. The other important point is the order of placing layers in the layered early so that the layer at the top with appear above the other layers in your arse board. 27. Toolbar: Hi, everyone. In these video, we're gonna be talking about tool more. The toolbar in the sketch contains all the tools you need to create your incredible design . When you install sketch on your computer, there is a defaults toolbar, but the good news is that you can easily customize it as you wish to customize the toolbar . You can right click on it and choose customize toolbar from the options. So let's take a look at the tool war and see what our default tools are right on your left . You can see the insert pop up menu, which lets you draw a new layer. The data will apply random image to shape players or text content to text layers. Creates symbol lets you convert the selected linger or group into a symbol. We will talk about the symbols in future lessons. The zoom buttons allow you to see more or less off your document, depending on the zoom level. The group and then group buttons let you organize your layer lists, which is so useful the next five Martin's, which are editing controls, allow you to modify and manipulate your selected shape. A mask and scale also become active when shape is selected, and these stones will allow you to clip layers to shapes and resize them respectively. Flattened bottom is for applying transformations and flattening a shape to single layer and resetting its origin. The next set up icons are the Boolean operations, which are used to combine shapes. We will talk about them in next lessons. Then we have view menu, which allows you to show and hide visual aids that can be used wild working and complex projects. For instance, it can show grits, layouts, rulers, etcetera. The preview button is for Previ in your arch board in a new window on IOS Devices or Web. The cloud icon is for sharing your design with your friends, clients or colleagues through the sketch cloud. Last but not least, the export bottom that's you export your assets. Alternatively, you can use short cards to choose the right toe, and it can really help you to accelerate your design process. You can find a list of most important short cuts at the end of this module. 28. Shapes: Hi, everyone. In these video, we're gonna be talking about shapes. Shapes are the most common type of layers in your design. There is a wide diversity of default shapes provided with sketch such as stars, rectangles, oles lying etcetera. To add a new shame to your art board, choose a shape tool from the insert pop up menu and then shape, click and drag anywhere in the canvas to insert your shape while you're dragging to insert the shape sketch will demonstrate how large the inserted shape will become. You can also find more details about your shapes in the inspector, and you can change the variables as you each. Some shapes have extra options, such as the ability to add more signs to a polygon around corners. 29. Editing Shapes: hi, everyone in the video, and we're gonna be talking about editing shapes. Sometimes you need to add. It shapes in a way you want, and it's a very simple thing to do. Sketch allows you to edit change easily and conveniently. First of all, that shoes rectangle from the insert public menu. Second of all, we need to draw it on the canvas, and after that we can double click on it or press the enter key to begin editing. Once we are in Edit Moon, we will see a circle point in each of the corners. Now let's click and drag on any of these points to change their position, and we will see how the shape changes. We can also add additional points to shape by hovering over the path between two points and clicking to insert. To delete a point click. The selected impressed the back space key on your keyboard. The path between points can appear as either strength lines or cares. It depends on the type of point that is connecting them. If you double click and appoints on a rectangle, the point type will immediately change to create a care of path by doing that. You will see two handles on either side of the point that control the character off the path. These are called handed control points in order to understand how they work. Think of them as if they were pulling the path towards themselves. There is a good short cut for changing the point type and at his prancing numbers between 1 to 4 on your keyboard. 30. Boolean Operations: Hi, everyone. In these video, we're gonna be talking about boolean operations. Sometimes you look for a shape which does not exist in a sketch. In that case, you need to create your own shape. Although you can create a shape by using the vector toe, it's much easier to make a shape by combining basic shapes together. For instance, think of a cloud which is around the rectangle combined with a circle. Haven't you talked about that before? There are countless shapes that we can break down into basic shapes. Now what? See how Boolean operations work? We have four different Boolean operations. Number one union. The result is a vector that is the sum of both vectors. Areas number to subtract. The result is a vector where the area off the top shape is removed from the one under it, Number three intersect. The result is a vector consisting off the parts where the original shaves overlap and last but not least, difference. It's the inverse off an Intersect operation 31. Text: Hi, everyone. In these video, we're gonna be talking about text you can add takes by choosing the textile from the insert menu in the toolbar or press T. Then the pointer will change to the text into tool icon, and finally, you can click anywhere in the canvas to insert your text layer. At that point, as you can see here, a new text layer will be inserted with type something already selected, ready to be replaced. If you want to create a text box, you can click and drank, and then you will have a fixed size textbook. So in this case, when the text gets to lying to fit inside the box, it will create a new line. Unlike in normal text, which increases its with two feet the content. When you select the tanks and click on the text menu item, the sketch confined a number of options available. You can change the time face Tallis eyes bold or on their line, your tax layer and much more. For more complex modifications. You can also use Karen Ligature baseline at Central 32. Text Inspector: Hi, everyone. In this video, we're gonna be talking about Tax Inspector one of early. Select the text. You will notice that the inspector has changed to show you all the properties which apply to text apart from what was mentioned before can also modify most of them, including typeface, font size alignment, etcetera, right Inspector section. However, if you want to use bullet points, you should use the tanks menu at the top. One of the most important things you should pay attention to while working with tanks is the line value which basically adjusts the line heart. If you're not sure how much your line height should be, don't worry. There is a good formula that you can use in order to gets an appropriate line height. The formula is fun. Size multiply by 1.5. For instance, If the font size is 20 points, then the line value should be 30 because 20 multiply by 1.5 Is ik on 2 30 33. Text Style: Hi, everyone. In these video, we're gonna be talking about textile when you're working on a complex project which contains a lot of tax layers, many of those layers would contain the same takes properties. So a sketch allows you to create a textile and applying to those tanks layers. You may ask yourself, what's the point of using the tanks styles? Well, let me explain it to you with an example. Suppose that you've been working on a website for one month and you have used a specific funding your project. Then you would get a phone call from your clients, and he or she would ask you to change the funds off All buddy, thanks to something else. So in this case, if you have used a textile for your body text, you could update it once, and the changes would applying toe all across the project. Isn't that pretty? Cool? That's awesome. So in order to create a new textile, we can easily click the text that reads No textile Indian specter and choose create new textile from the many. And whenever we're going to use that text time, we can head over to the appearance section in the inspector and change the no textile toe. Our text layers side 34. Images & Bitmaps: Hello, everyone. These video. We're gonna be talking about images and beat maps as sketches. A vector editor. You may be wondering how you could edit your images without jumping between different design tools. Well, there's nothing to worry about because the sketch allows you to use the most common beat map editing capabilities to make your life even easier to start editing your image, you need to select it by double clicking on it. The inspector will show you to selection tools. First of all, you need to select an area on the campus and then peak the tool you want. Here we have two different tunes Selection, which selects a rectangle area on the image and magic wand. With this tool, you can click and drank anywhere on the image to select an area. Once you have selected an area of your image, you can either cards or copy the selection and use it for a new beat map layer or use one of the options in the inspector, for example, here we have invert crop and feel, but using invert the area that was not selected will be selected now and wants Ursa or using crop. It crops, the layer toe Onley include the selected area and by using feel it lets you feel the selection area with colors, and after that we need to click on finish editing, and that's all. 35. Styling: Fills: Hey, everyone in this video we're gonna be talking about feels one of the most important pains off sketch is the inspector. Here. You can find a variety of options and tools that will allow you to apply effects such as shadows change the color of a layer etcetera. In these parts, we will learn how to use feels in your design in order to use. Feels should creek on the add button. In the Field section title, you can apply a range of different fields toe layers, including solid color Grady Ins, an image feel. In addition, you can add as many fields as you want to your layer, which will be stacked on top of each other from bottom to top. The feud options from left right are solid feel linear, Grady int radial, Grady int, angular Grady int and, lastly, image field. In the next lessons, we will dive into each of them specifically 36. Styling: Borders: Hello, Ruin. In this video, we're gonna be talking about borders. All layers in sketch can contain as many borders as you want except text neighbors. You can modify their thickness colors, etcetera, just like feels. In order to add a border to your layer, you should click on the add button in the border section title. Not only can you customize their appearance such as colors, thickness, etcetera, but also you can choose how they should be positioned. The border position can be modified on closed shapes by being placed on either inside centre or outside of the shapes Outline. Additionally, there are some border options that you can use, such as ends and joins, that let you control how the border should end and how it should join the joining points. You can also use arrowheads, but using the start and end options and dash nines for using the dash and gap options. 37. Styling: Shadows: Hi, everyone. In these video, we're gonna be talking about shadows. Nowadays, you can see shadows in almost every kind of design. However, knowing how to use shadows appropriately is so important. There are two kinds of shadows in sketch shadow and inner shadow. They behave in much the same way. The only difference is that shadow will spread outside of the shave it applies to, However, in her shadow will cast inside the shape. You can adjust shadows as you wish, by changing their ex and why value and also modifying the Blair and the spread amount. Not to mention that you can change the color of shadows. Do whatever you want. I'd like to give you some tips about using shadows. First of all, keep the capacity of your shadows as low as possible because otherwise it doesn't look right, and it seems so exaggerated. Second of all, don't use dark shadows for color for objects. Try to use the objects collar as the shadow collar and decrease its capacity. Because in real world, for example, a red apple doesn't have a dark shadow. It has a slight red shadow. You learn how to use shadows properly in future lessons 38. Styling: Blurs: Hi, everyone In these video, we're gonna be talking about Blair's in general, there are four kinds of Blair effects that you can apply two layers in a sketch. We can choose between them by clicking on the title section in the Inspector and choosing from the pop up menu number one gas assembler. It's a common Blair type that will accurately Blair in all directions. Number two motion blur. It blares a layer Onley in one direction, and it gives the user the illusion of motion number three zoom Blur. It blares from one specific point out, and lastly, background blur. It blares any content that appears behind a layer. Unlike other kinds of Blair's Migron, Blair requires you to modify the capacity of your fields in order for defect to be seen. 39. Styling: Gradients: Hello, everyone in these video, we're gonna be talking about grade. Ian's Great inns are so popular nowadays because it helps designers to attract users attention. As I mentioned in the field section, you can use three different kinds of radiance, linear radio and angular grade. Ian's. However, the most common Grady Int is the linear Grady int, and you can find these kind of radiant in almost 90% of designs in one way or another. One important thing about radiance you need to know is that you cannot combine any random colors to make a Grady INT. For instance, you can use analogous colors from the color will in order to create a good radiant. Alternatively, you can get inspired by nature. For example, it's possible to get your colors from the photo of a landscape. To do that, you could use online tools to accelerate the process. I'm gonna give you some tips about using radiance number one. Don't overuse Grady ins in your design number to double check the contrast of your content because sometimes you're using a great and beautiful Grady int. However, there is not enough contrast between your content and elements, so make sure to double check your elements and also your content colors in order to see whether the your readable or not. 40. Styling: Shared Layer Style: Hi, everyone. In these video, we're gonna be talking about shared layers side. You can create an apply a layer side toe any layer just like text times. It can help you to save a set of stylistic elements, which can reuse them across any of your layers in the project you're working on, just like text size, layers size allow you to keep the appearance of your layers, both consistent and up to date. If you make any changes to their appearance to create a layer side, click on the text that reads no layer style in the Inspector and choose. Create the layer stone from the many. Then you need to choose a specific name, and that's all. You can also add a layer style recent layer site and also detach from layer side update layer style updates on the layers using the same layers. Recent near sign removes the changes made to that layer side and finally detached from layers. Sign keeps the changes you've made to death layer but removes the layers stung attributes from the layer 41. Masking: Hi, everyone. In this video, we're gonna be talking about masking masks in a sketch, let you select and show parts of other layers. For instance, you can mask an image layer to circle, and if you'll give the image a circle shape, there are many ways you can use masks in a sketch. However, the most convenient one is to select your shape players and click on the mask button in the toolbar. Remember that the order of placing your layers is so important wind working with masks. For example, if you select three shape players in click on the mask button, the two layers above the last one will be clipped to the third layer. Another way to use masks is to give it a Grady int, which is called All From Ask to do that. We can go to layer menu, mask a mask mode and then on from ask from the Manu 42. Symbols: Hi, everyone. In these video, we're gonna be talking about symbols. Symbols is a great featuring a sketch that allows you to reuse elements easily across your our ports and pages or even multiple documents. We can break down symbols into two parts. A master, which takes the appearance of an art board and an instance, which is a flattened representation off the master. As a matter of fact, a symbol instance is a single layer that mirrors the content from its master. You can recognize it with the help of a purple icon. It's sinking arrows. We can create a symbol simply