Improve Your UX Design Workflow: Sketch An Interface For Your Mobile Application

1. Introduction: when you have an application idea or a feature on to try to explain it, your team for clients or even your friends. Everyone will have a different picture in their imagination off your idea, and sometimes this can lead to misunderstanding, and it cost some time and effort to deliver The idea that you have in mind sketching is a fundamental part of the X designer process and Mr Practice. For designers, there are sketches you can propose explored and communicate your ideas in the early stages off the designer process. My name is Dimas Data and um, a UX designer and different and development, and I'm going to lead you through this class from sketching basic shapes into sketching interactions and navigation. You can't draw. That's fine. You don't have to be an artist. Imex catches for good ideas. By the end of this class, you will be able to sketch user interfaces for your application For the class of project, you will be sketching a simple user interface for a mobile application in messages to sketch a food delivery application for your favorite restaurants. You can learn more about the project in the project section 2. Why Do We Sketch: So why do a sketch? Let's take a look at this example. These are some sketches I made for my port value of site, and as you can see it, just screen contains a specific components or ideas. So basically, I use the sketching to generate ideas before I started design and development steps you can write down the features are the components of each sketch on throw as many ideas as you want. So here I was generating ideas. I met different sketches for each page to choose the best design among them and apply it. You may use the sketches for brainstorming sessions with your team to generate ideas are proposed and communicate ideas with your clients. Now let's talk about the tools you need in this class. Basically, we need a pen. I should be for a ticket. Lines are this twin pilot? How do you can use a pencil? We will use microphones as well. Apply some color for buttons or did your attention to specific elements. The second thing, we with me, this some papers. Sometimes I sketch in my undoubted sketchbook, but in this class, I will be using to plane a four paper you can use the dotted paper I provided in the class material section. I have also included some templates. You can bring them out and use them to sketch. They are very useful, and we'll save your time and help Pedro shares more accurately. We will use some sticky notes into for interactions in the upcoming glasses. 3. Sketching Basic Shapes: Let's start by sketching the basic shapes that every design consists of. I'm gonna warm up by doing some straight lines. Let's a sketch, the borders or the construction lines from a ball screen. As you can see, I am throwing declines, and they don't have to be perfect. Consider moving your arm and pen with your shoulder rather than with the available Orestes . This will allow you to do no longer and straighter lines. If you have a difficulty during a straight line in all directions, protect the paper to easily draw a line in the direction you'll find the best for you. You have to keep in mind that sketches should be quick and simple, since we are doing everything ideas or concepts. Now, let's throw some circles. Drawing circles is trickier. I recommended throwing the circle two or three times in the air before throwing it on the paper. Practice, practice and practice throwing those lines and circles. If you want to make an element looking clickable like a button, you can give it some shadow to make it stand out. Let's throw a button that stays send and give it the shadow you can use a great color instead of black. As you can see, it stands out and looks a clickable. Let's throw another button, and it's going to say submits, Give it the shadow and hit ego. It stands out and explicable. Hatching is another technique used to create chilling effects by drawing closely spaced lines. Let's take an example I'm gonna draw aside, meaning that overlays on top off the menu. I I would add some items inside the side money. Let's draw a straight line that his bottle into the side menu and then started throwing a quick answer the agonal lines side by side to create the shedding effect. So, as you can see, hatching is a simple technique that helps making element to stand out. 4. Sketching UI Elements: in this lesson, I will show you how to sketch you I elements such as texts, images, foreign controls and some off the commonly used icons. So let's start by throwing them on my screen. Sketching fixed is pretty simple, just that there are some who is internalized to represent a text. You may use the real text inside you. Why, when you need to draw attention to it, or just a little horizontal lines If you don't have a specific text, sometimes we to prison texts as a wavy line or its exact like this. Now, if you want to sketch heading toward a title, you may do this by drawing correct angle and fill it with a zigzag line. Or you can just use a marker to fill in the rectangle. No, let's a sketch images. I would just draw a rectangle, and then I would throw to the agonal lines running through the rectangle. Let's a sketch a few more images, sometimes sketching images, and this way could be boring so you can throw simple variants off objects. For example, I would represent images by throwing mountains and the sand on top. Forms are used to collect information from the users. We use them and the registration pages updating use their influence and so on. I'm gonna draw them of on screen. And before I started sketching, I would just add the title of the page so that when I have a number of other sketches, I can easily find it. You may leave a little space to other title on other notes, like the date, So I'm going to start by drawing a circle. This would indicate that the user can click on it to update their profile image. Then I would draw a rectangle. This would represent an input field that the user can feel. I will give it a placeholder that say his name. Not Is that, unlike buttons, we didn't give it a shadow. Input fields can be used to fill information such as name for number and password. Now I'm gonna draw another rectangle for the user. It's like the area from a number of areas. So what we're gonna do is to draw on auto like this. This letter will indicate that this is a drop down menu that has multiple items to select from Let's throw another field, defend the user address. The address can contain Building Number Street Name another information that required a control a bit larger than Input Field, which is a text area. Now I'm gonna show you how to sketch other foreign countries, such as check boxes, radio buttons and switch buttons. Check boxes are simple. Just a dramatic tengan on the small tick inside. Like this. Check boxes argues that use multiple items not to draw a radio button drew a circle, then another small circle inside it. Radio Buttons argues that shows only one item. Now, if you want to switch on option on and off you can you switch buttons, for example, didn big notifications on or off. We present it like this on oval shape on the circle. Inside it are you can represent it like this rectangle and another small rectangle inside. You can write on it. I'll give it some color. I'm gonna draw another one to show the office states. Now let's at the bottom. That's a safe and give it some color. And the shadow. Now we have a paged on death user details. Now I'm gonna show you how to sketch some off the commonly used icons. Icons are simple. The representations off real life objects. I'm going to start by doing the search field. So here's the search icon. It's just a circle on the short line. That's what they do. Another one, a circle. And then I should like. It's pretty simple. The next icon we're gonna draw is the user hiker, so I'm just to throw a circle on. In the inside. There will be a smaller circle that represent the hint, then took off lines represent a body. Let's go there with a few more times pit and the body. Now let's hit the road. The location icon. Just throw a balloon shape at a small circle inside. Just like this. Don't not to throw the icon that's used to open the side menu. This icon in school it's called Humber Good Menu, because it looks like hamburger on it. Simply fight to three parallel horizontal lines. Lastly, we gonna grow back next up and down icons like this. So as you can see everything in the year I sketches, including icons, is just a combination off lines and circles 5. Sketching Interactions: Sometimes you may want to use interaction elements such as tool tips, models, side menus or other elements, but you don't want to redraw the whole screen. For that, we will be using sticky notes or small papers and pens. If you want to pin it on a pin board. Yeah, I will be using different colors and sizes to represent different types of elements. Let's a sketch meal ordering pitch. I'm gonna write the title here. The first thing we will have is an image off the meal on, then its name. It's got to be good, for example. Then we will have a drop down menu for the user to select the sauce. They want to act to the worker. I will use this sticky note to write the possible source options. For example, not sauce tomato, our special sauce. Now, this indicates that when the user clicks on the drop down button, this options will be displayed. So when you want to explain what clicking certain elements will trigger, you can use this method. The next thing we will have in this screen is a text area to add notes, andan information. I can Okay, so when the user clicks on it at all, they will be displayed. I will use. This is smaller, sticky, notes Andre. Information will be displayed, for example, not because this would have the user to know what nose to enter into text area. Now we will have a button to order this meeting. I will give it the color and the shadow. Clicking this button will show a message either a sexist message. I got an error message on it will be displayed as a modern or a pop up on the screen for the success message. I really was this green sticky notes. It would contain a title, some text and the button to view the order returns. So, in case of sexists, this must, as you will be displayed now for the message. I will use this Karanja sticky notes. It's with Contain a Titan, some text and about interview details about this area. So this method will be helpful in generating ideas and brainstorming sessions, or when you want to explain logic and behavior for the developers in your team. No, I'm gonna show you how to explain actions. Then why they use it, such as a clicking sliding, zooming in and out. Let's take an example. This is the guard fish, and it contains the items that the user wants to order on the button that has some text. He checked him in. The card contains an image and the text it's, and when the user slides the item to the left, a button will be visible. Let's do an icon. Did he move icon? When the user clicks on it, the item will be removed from the court. Now I would throw a hand andan auto to show the sliding direction, so when they use it, it's lies. The item to the left. The remove button will be visible. Let's go ahead and do another hand. This represents a long press. Now let's throw em up. And this time I'm going to demonstrate the zooming in action again. I would get out of hand then two other was pointing and contrasting directions like this. This will explain zooming in action on the map. If you find it throwing cans challenging, you can trace or copy hand image. Or you can write annotations to explain behavior or gestures. The last thing I'm going to show you in this lesson is how to sketch navigations. Let's take an example that's this is a restaurant menu page on it. Contains means each mean in this menu has an image, a name on its price. When I click on a meal, I would be directed to another page that contains many details such as image, name, description, maybe a number of other images of this mean Onda button to order it. So to show the navigation, I will draw on auto and give it the shadow. Not just that this photo is not the part of the U I. It's just an indicator to show navigation. 6. Thank You: thank you guys, and I hope you enjoyed this class. If you have any questions or thoughts, please let me know in the review section on. Remember that sketching is about getting ideas out. It's the quickest way to explore and share thinking with others and getting feedback. I would love to see your idea starting to sketches. If you need any help creating your project, you can watch the previous videos and take notes, and hence and you can use the attached print oven documents for a little more help. Take pictures of your process and share it in your project to inspire others and get feedback.