Master Sketch App: Turn Your Ideas Into Real Apps - UI/UX Design | Arash Ahadzadeh | Skillshare

Master Sketch App: Turn Your Ideas Into Real Apps - UI/UX Design

Arash Ahadzadeh, iOS Developer & UI Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
24 Lessons (29m)
    • 1. Introduction

      0:39
    • 2. Introduction to Sketch

      0:51
    • 3. Sketch Requirements

      0:56
    • 4. Sketch Environment

      1:01
    • 5. Layer Basics

      1:43
    • 6. Toolbar

      2:29
    • 7. Shapes

      0:52
    • 8. Editing Shapes

      1:39
    • 9. Boolean Operations

      1:11
    • 10. Text

      1:10
    • 11. Text Inspector

      1:07
    • 12. Text Style

      1:22
    • 13. Images & Bitmaps

      1:30
    • 14. Styling: Fills

      1:00
    • 15. Styling: Borders

      1:04
    • 16. Styling: Shadows

      1:18
    • 17. Styling: Blurs

      0:56
    • 18. Styling: Gradients

      1:27
    • 19. Styling: Shared Layer Style

      1:09
    • 20. Masking

      0:58
    • 21. Symbols

      1:04
    • 22. Canvas

      0:55
    • 23. Plugins

      0:59
    • 24. Exporting

      1:53

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 quickly and 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 learn about all the Sketch's tools and you could confidently start designing your app or website. 

So what are you waiting for? Start the course now.

Transcripts

1. Introduction: Do you want to become a U R ux designer? But you don't know where to start. Thes course will allow you to develop your user interface design skills. Hi, My name is a rash and I'm a UX designer. In these course, I will help you learn and masters catch hap quickie and comprehensively from scratch. Sketch is an innovative and brilliant tool for user interface design. And I'm gonna show you how to use it efficiently as a You are UX designer, so you will learn all the tools you need to become a professional user interface designer. I hope you're ready to master sketch I see in class. 2. Introduction to Sketch: Hi, everyone in these video, we're gonna be talking about sketch. What is catch Sketchy. The professional director editor, which is designed for those who want to turn their ideas into incredible products. Sketch is not suitable for raster graphics. It's a vector editor, which is developed for you. I UX design, and it's really good for these 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. 3. 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 4. 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. 5. 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. 6. 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. 7. 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. 8. 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. 9. 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 10. 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 11. 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 12. 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 13. 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. 14. 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 15. 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. 16. 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 17. 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. 18. 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. 19. 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 20. 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 21. 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 by selecting an object and clicking on the create symbol button in the toolbar. Then you will be prompted to choose a name for your symbol and in the end press okay, You can find your symbols on the symbols page, and you can customize each instance with overrides. You can find the overwrite section in the Inspector 22. Canvas: Hi, everyone. In these video, we're gonna be talking about canvas sketches. Canvas is infinite in size. It's basically where your arm wars will be place and you can easily navigate around by using the scroll will on your mouse or a track pad, you can scroll in any direction. Additionally, you can hold a space bar and click and drank the canvas to pan around. If there is no object selected, you can also use the arrow keys to pan the canvas. There are times when you want to zoom in and zoom out in order to see more details or the entire campus, respectively. To do that, you can use the zoom item in the toolbar optionally. You can hold the command key and use your scroll will on your mouths. The maximum zoom level is 256,000% and the minimum one is 1% 23. Plugins: Hello, everyone. In these video, we're gonna be talking about plug ins. Plantings are an important part of any design tool. You can extend the sketches functionality by installing plug ins. All plug ins have been developed by third party developers and can be downloaded for free or parishes from the developer. You can find the newest plug ins on the Extensions page of sketch website. Once you're plugging is installed, you can access it while you're the plug INS menu in the menu bar. Sometimes, after an update, plug ins may become incompatible with sketch. In that case, your sketch me crash and you can fix it by disabling plug ins. To do that, we can hold down the shift key during launch time to disable all plug ins you have installed. If you choose manage plug ings from plug Ins menu, you can access the plug ins preference pane where you can manage your plug ins. 24. Exporting: Hi, everyone. In these video, we're gonna be talking about exporting. When you have finished your design process, you'll probably want to export parts of your creation or even all of it in a sketch. We can easily export your design in no time to see all your exportable finds can click on the export button in the tool war and then mark what you want to export to mark any layer group or art for exportable in sketch, make sure it's selected and click on the make exportable bottom at the bottom of the inspector. After that view will appear and you can modify and define the settings for export, and these savings will be applied when the layer is exported. If you click on the add button, once against cash will add another scale to your export. If you have more than one export scale defined, then you need at least one prefix or suffix depend to the start or end, respectively, off the exported files. Name to tell them apart. Typically, objects exported as a two X scale will have the saw fix off at two eggs as this meets the naming conventions required by Apple when designing for the operating systems. If you're designing for Android, however, to eggs is represented by the Ex edge DP I prefix. We can choose your designer find format by clicking on the format. Button exporting is not limited to files. You can also export some of your design as code. You can easily copy the CSS attributes and SVG code by selecting any number of elements in the canvas and then hold the control key and click and choose Copy CSS attributes or copy SVG coat. It's an amazing feature for Web designers.