Learn UI/UX Design By Creating Your First Mobile App! | Angel Davchev | Skillshare

Learn UI/UX Design By Creating Your First Mobile App!

Angel Davchev, UI/UX Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
14 Lessons (1h 14m)
    • 1. Intro Angel Davchev

      1:01
    • 2. Class introduction

      2:23
    • 3. User persona

      4:13
    • 4. User flow

      4:13
    • 5. Splash screen

      2:36
    • 6. Logn screen

      2:54
    • 7. Party list screen

      12:19
    • 8. Single party screen

      9:52
    • 9. Book tickets screen

      13:13
    • 10. Calendar screen

      5:41
    • 11. Video screen

      4:05
    • 12. Ticket screen

      6:24
    • 13. Empty screen

      3:23
    • 14. Conclusion

      1:56

About This Class

Hello, my name is Angel Davcev, I'm a UI/UX designer from Macedonia with 5 years of experience in the industry.

I'm proud to publish my first ever class on Skillshare, where I will teach you UI/UX design techniques by creating a mobile application for booking tickets. I've recently been to Berlin and I was amazed by the urban culture the city has, so I've decided to include some of that in my class. For these series we'll be creating a mobile application where you can book tickets for techno parties.

You will learn about user personas, user flow, design principles and many different tips and tricks to bring full experience for the end user. Finally, you'll be given a challenge where you can test what you've learned in this class.

The assets and end design for this class can be found on this link

You can find me on my website where you have links to my social media, etc.

♫Music by Dj Quads♫
● @aka-dj-quads
● twitter.com/DjQuads
http://www.youtube.com/channel/UCusFqutyfTWRqGhC8kHA5uw
● open.spotify.com/artist/2VZrdImbvB03VWApYtBRr3
http://www.instagram.com/djquads
Music provided by Free Vibes: https://goo.gl/NkGhTg

Thank you for choosing this class!

Regards,

Angel

Transcripts

1. Intro Angel Davchev: hell, guys. Welcome. My name is Sonya. I'm teaching this class. We can learn how to design a mobile application areas. Wife makes me. I'm a UX designer myself. Well, over five years of experience in the English launched many amps from the market for both wept and wild flat. One of them hold. Let's was featured in Forbes magazine received the ruling Katie Award in 2000 and 16. User experiences ever growing Profession companies from around the globe part search for good use designers to help them through their problems as they use designer. Your job is to make the user comfortable using your path. I'm happy to have you on board and a hope that you will learn a lot from this class. Stay tuned for an exciting journey by 2. Class introduction: Welcome aboard. Ladies and gentleman, Thank you for taking this class where you can learn how to design a mobile application for booking tickets using various U. Y in new X techniques. This glass assumes that you have previous knowledge off a design software such as photo shop illustrator for Adobe Experience Design. If you don't have previous knowledge, don't worry. You can still follow along. This glass is aimed towards people want to learn you are in your eggs design and mobile design. Whether you're a beginner, intermediate or even a pro, I might have a trick or two up my sleep that can increase your knowledge. Learning is never enough. You will learn what issues, er persona. And why is it important in user experience design, You will learn what is user flow and what's the purpose of it. And finally, you learn how to design the actual application. The software that we're going to use. 12 This series is called Sigma and conduct authority for free at signal dot com. Fig more is among the most popular soft worst for you. Why and you eggs design and you can you use it in the browser. However, I recommend that you don't know the desktop application. Now. If you don't want to use stigma because you're using another software, like full of Shop or sketch, maybe that's fine, because you can still follow this class. Each video will have its own assets panel. Here you will find various images and icons required for you to complete the videos. Since our class doesn't feature topics like I can design or photography will use these assets they're free to use. And you can see the links Recon doll, other assets if you like. Finally, you'll require positive attitude to complete this class. And remember, learning is never enough. Thank you for joining my glass and let's get started. 3. User persona: in this video, we'll take a look on what is a user personal. And why is it so important in user experience design? I've already prepared the usurper Sana for this video, so we're just going to discuss it now. What in the hell is a usurper Santa? Think of it as a fiction representation off your ideal customer. In the marketing world, there's a term called Target, and that is a group of people that share same characteristics. Behavior, heavy age range and income that can be targeted as potential customers for your business is the user experience world. The user persona is something similar to that. When building a brother, you should always research and define who is going to be a user. Things like habits, needs goals, age, etcetera. Deploying new user for Sana By building a template, you have a clear understanding off what your product should look like and feel like If you want people to use your product, you should build it so they like it. Remember, you always build for the users because the user is the one who drives your business. If your user can navigate through your APP. Hero, diligent period as user experience designer, you should follow the users behavior and build the product in that way. As a general rule of thumb, think of the users as little kids who are easily lost if they don't see an arrow pointing their direction. Now let's examine our user persona. If you Google usurper son of templates, you should find something similar to this. The purpose of the template is to personify the group of people that we came to be the users off our application that will make a job a lot easier once we have a clear understanding off what we should build and for who we're building it. Let's say that our user research team has provided us with enough data for us to build this template. As you can see, our user is called Tobias Swenson. He's a 24 year old student from Gothenburg, Sweden. He's an outgoing person, likes to party in the weekends and travels to new places when he can. As you can see from a picture, which is down with it from, um, splash dot com, the bias is rarely seen without his phone. He's really active from the social media, but it's also explore and outgoing. Studying this template tells us that although he's tech savvy, buying a ticket for techno 14 Burling shouldn't be a hassle for the bayous. His young energetic and likes to see real value fast. Just like any other millennial. He likes his social media whether he taps through stories on instagram, tweets or scrolls. Timeline on Facebook. Knowing that we realize that the log in screen should have social media channels included and seeing Tobias as a person who is active gets frustrated by slow Internet, we should probably exclude logging with email, since it requires multiple steps that conflict with the behavior off our user. Typing in emails, fast words and confirming passwords through email can be frustrating for the bias, because he might be borrowing Internet from a cafe to buy tickets for a party. Throughout this, videos will refer to the user persona template. When we're going to be making decisions in our design, that's it for this video. Pause it and examine the usurper some of template as long as you like. Thank you for watching, and I will see you in the next video 4. User flow: Welcome back, guys. In this video, we're gonna learn what's in user flow and why is it important and user experience design? I've already designed the user flow for a project. Let's look at it carefully and examine each part. Years of flow is the path user takes in order to complete ago in a website for an application. In our case, since we're designing a ticket booking application, the user flow is guiding the user to buy tickets to his favorite concert. Designing and user flow is a crucial part in any application, since it defines a clear visual guide on how the application should look like and how the user will navigate with each rectangle represents a separate screen that will exist within our application. The arrows indicate the relationship between the screen. Firstly, we have our user entry point, which is the Splash Queen. This is the screen that appears as soon as the user wants you the application. After the implication loads in the background, the splash screen fades away and were presented with the log in screen. The log in screen is important for our application, since the goal for application is for the user to buy tickets. We're gonna need him or her toe law into our application in order to obtain kiss or hers personal information. After the user logs in, he's presented with the party Lee screen. Here, the user can find a list of parties that are available for the day. As we can see, the user can proceed to the calendar screen where he or she can select a day in the calendar and see the party's available for that particular day. From here, the user can also access to Tickets Queen. If the user hasn't bought any tickets, he or she is shown on empty screen. Now designing an empty screen is an important trading user experience design. As a designer, you should always include some appropriate graphic, a text the indicated empty state and a call to action that will never gave user and won't leave him on a dead end. In our case, if there are no tickets available in the tickets queen, we should add a call to action that says something like Buy tickets now and we'll take the user back in the cycle. Okay, So back to the party list screen when the user taps on at least item in a party Lee screen . He is redirected to the Single Parties Queen, which contains details about that particular party such as party venue, the ticket price. When the show will start, as well as a small video sample for that particular deejay from the single party screen, the user can navigate to the video screen, where he can watch the available video sample and get familiar with the DJ's music. The more important thing the user can do in the single party screen is to book tickets for that particular party. He is then taken to the book tickets screen, which he or she can choose how many tickets to purchase in the credit card info. After that, he or she is shown a success message. If the purchase was successful or an error message if the purchase wasn't completed, showing a success or error message is crucial for the user, as he or she is. Giving feedback about whether the tickets were purchased or not given feedback to the user is one of the most important things in user experience design because as a designer, you should never leave the user in a state where he or she doesn't know what's happening. After the tickets are successfully purchased, the user is then taken to the tickets queen, where he or she is shown the bought tickets. This concludes the path the user takes. He completes the full cycle using our application. And this concludes our video. See you in the next one. 5. Splash screen: in this video, we're gonna learn how to grate a splash screen for a project. The splash screen is an integral part off anymore while application, because it's the first thing the user sees. Once he watches the application, it service both ways. It covers the entire screen while the application loads in the background. Unless the user get formula with the implications brand, one of the main screen is loaded, the splash screen fades away. Now let's create a splash screen for our project. Select Direct Channel two or press are in your keyboard. Draw a rectangle that covers the entire screen. Change the name of the layer BG for background and moving to the bottom of the layers. Stack genius Color to one B 1540 Now let's create the lower for application. Select the lips to include ones. Click this changeling to constrain its proportion and changing size. 260 pixels center enough. Remove its field and that Ah, 40 pixels stroke to it. Duplicate this circle and so, like the previous one. At one effect, with a drop shallow with 44 pixels, blur and remove the values from ex and why change its color to TD to be Pacey. Now move over to the assets panel and select this image. This is a free image of dull all it. From splash dot com. Move it to our splashed Queen and lowered to the lair staff. Select the first to leaps and the image right Click Select used as mask. Select the Mess Group and the First Ellipse. Group them together. Change the name to Lovell Image. Now let's use the type tool and typing Burling. Definitely. Tickets change the color white its size to 30 pixels and center tomorrow. Break the word so Berlin and Technol are in one line. Tickets is insane. Select both Berlin and techno works and changed the front weight to bolt. Select the tickets work and changed its weight to light. Great. Now we can center it up. Select both the logo image and Berlin techno tickets. Good them together. Call this lower and center it up on our screen. Great. Now we have our splash Queen 6. Logn screen: Welcome that, guys. In this video, we're gonna learn how to design a log in screen for a project. Now, ah, log in screen is not a crucial part foran application. But in our case, it is. Since they're happy is about buying tickets. We're gonna need some user information studying greaser persona. We see that our user likes to use social media a lot. So instead of designing, belonging, screen why user name of password. When we type in the password, we're gonna use social logging. Social logging is an easier way for people to log into an application. Since the information is already provided to a social media channel. Let's design a log in screen right now. First, let's elect a longer and with a big up top Now we're going to create the bottles for a social media logging, select the rectangle tool click ones and typing 345 pixels for the with and 60 pixels. For the height, change the corner radius for pixels and center this up. Let's change the color toe. Three B 59 My name, which is a hex color for Facebook. Unless that in effect to it a drop shuttle with 10 pixels blurred, five pixels full of I value and 20% capacity. Great now. So let the type tool and typing come continue with Facebook and place this or the basis of for bottom changes weight, bold and size 24 pixels. Now, since Bellis Loy is a condensed form, let's change the letter spacing to 4%. Let's change the fill toe white center yourself from Yeah, and let's move over to our assets panels. Let's select this Facebook. I come, I provide it and drag a door to our cameras, select the Facebook icon and the basis of her bottle and center them up, grouped together to for the Facebook bottom. Great. Now let's duplicate this bottle by selecting it, holding bolt on your keyboard and dragging it down. Let's changes to continue Gmail. Now let's send them up with the other work. Now let's walk the Facebook. I come with the Jimmy like a knife provided in the assets panel. So, like the Jimmy like on and dragged over to account, select the basis off the bottom and center them up. Now, finally, we need to change the color to this basis, and change is changing. To see several 1610 Great. Now we have our blogging screen 7. Party list screen: Hello, guys. Welcome back in this video, we're going to design the party Lee Screen for application. The party lists. Queen is essentially the main screen of our application, since it's an access point to many different screens, such as the calendar screen, the ticket screen in the single party screen. The main purpose off the party list screen is to provide the user a list of available parties, even they so in Not talking and let's get down to business. Firstly, select your rectangle tool and draw a rectangle across the entire screen. Change its name to be Jeep for background and move it down in the last order. Let's change its color to 071 9 to 3. Now let's use on the image to enhance our background. Visually, I don't want this image from all splash dot com, which can do is well for free. So let this image in drag. It'll work to our cameras three sizes and position it according with real liking. Now let's move the image down in our layer stack. Great. Okay, let's add another feel to this image, which is going to be a linear ingredient with the same color as the background on both color stops select the first Grady in point, and we moved its capacity to zero just this until it blends well with the background. Now we're going tohave ah, Heather to our screen. Later, we're going to convert this to a component. Feel more allows us to create components, and we use them across multiple screens that will ease our job a lot. Plus, when we make a change, it will reflect on all the components copies. Select the rectangle tool again and draw a rectangle that's full with the changes. Height, 140 pixels. Rename this BG for background and moved a layer down in layer stack. Click this eyeball next to it to hide the layers. Background Group is using control Genome your keyboard, and we named this group toe Heller. Now select the time to in typing parties in Berlin. Change the phone. Babel snowing the phone size 30 pixels, the front weight too bold. The letter spacing to 4% since Bevan's noise a condensed form and finally changed the color toe white. This is going to be our title. Move the title into the hair stroller and move it up top. Select the eyeball again next to the ground layer to see the background. Now move the title 20 pixels from the bottom of the background told Eyeball again on the background player. Now let's copy with title by holding old and moving it upwards. Change the phone sized 18 pixels, move it to the left and moved 14 pixels from the top of the title. Okay, we're going to change this to a date. For example, 17 November 2000 and 18. Let's position it accordingly. Now let's go over to the assets panel and grab the icons that I provide selective and move them over to our cameras. Let's move them into the killer's folder and position them to the edge off the screen to the right. Aligned them with the top off the day and let's change their color toe white. The cycles are going to represent the ticket screen and the calendar screen, respectively. Okay, so selectable and moved, Um, 15 pixels from the edge of the screen. Great. Okay, let's select our header Fuller. Now what's great to conform on television selected and click, this icon would just create a component signal about creative informed, although our folder Let's move to the Left and Let's Kobe but holding old and drinking right onto our campus. This now creates a copy all of our component, which we can we use across all our screens. Let's see how the components works. We've made a mistake misspelling the work parties into our title. Let's change it. Mountain Tore Messer from Born and lets you call the changes reflect onto our copy to the right. See, that's how easy these work with components in signals. Now the only thing left for us is to create the party list itself. Select or a single, too. Click once on typing 325 pixels for the week and 120 pixels for the height. Just this to the center of your screen and change the color toe. One beef 1540 Change the coronaries four pixels and let's at on effectively a drum shuttle . 10 pixels blur five pixels for the white will you and 24 7 40 opacity change delayer BG for background. Move over to arrest its panel and select this image, which have Donald it again from one splash dot com. Just go to splash dot com and typing techno into the search bar. You can find plenty of images to play with selective image and drag it over to our cameras . Let's adjust with 95 pixels, 97 pixels for the height. Move this accordingly into our panel and adjusted 10 pixels from the left off the edge. Let's change the corner radius to two pixels. Select both the image and the background and group them using controlling G. Let's rename this group to list. I told. Select the type to again and typing. You know Kravitz. Let's change the alignment to left until middle. Change the color toe white and change the font size 24 pixels. Position this and the line of 10 pixels from the right off the image Coffee Destexhe by holding old and dragging it down. Change the font size to 18 pixels and the phone wait to book changed the field. So passivity to 70%. And let's change this to Burke Hind, Pamela Rama and Bar Select both the birth kind text and Kravitz and group them together. Call this painful and move it into our list item. Select this group and duplicated by holding old and dragging it down. Let's zoom in and let's swab the decks. Move this to the top and move this to the bottom. Now change. This starts and change this to 1 p.m. Changed his phone size toe, 18 pixel and this phone size 14 pixels and then just them accordingly. Let's renamed his group Start duplicated by holding old and dragging it to the right. Let's move them 20 pixels from each other. Change this one too price, which will indicate the tickets price and change this to something like 18 year old. Rename this accordingly. Now the only thing left for us is to design a call to action. Ah, cold direction is something that incites action for the user. For example, buy tickets. Grab the text to in typing gift tickets. Let's change the form of a bus. The fun size 14 pixels. Let's move this left. Put it inside the West title and change its color to e. D. Two d. J. C. Change the front way to vote and let's zooming to adjust this to the ball. Now I've added on Arrow icon to the assets, so let's grab it and went over to our camels. Okay, lets position of here. Let's move it into our list Item group. Now let's move it. 10 pixels or five pixels from the get tickets. Let's select them both and group them. We'll call this city eight. Which stands Call to action, More door to the edge of our background for list item and magic. 10 pixels to the left. Great. We know we have designed our list item. Finally, we're gonna convert this list item to a component. So we can we use it again? Let's select it and let's click on, Create conformance, move it over to left and co paid by holding Holt and dragging it back toward camera. Let's send to It was duplicated four times, holding old dragged down and with something like 10 pixels do the GAM and finally, four thing. So it's all those titles. Nudged him down to the bottom of your screen and move them. 15 big social. The bottle. Okay, so we now have the list items for our parties. I'm gonna post the video on Populate the data now. Welcome back. As you can see, I calculated the data for a variety with various deejay names, venues, ticket prices, etcetera. I've also changed the images off the different parties. Now signal doesn't allow us to add images or other elements into our components instances. The way we solve this is to put all the images into a master component. Go to the list item and click off the Aibos off the images you don't want to show and that's it. Guys would not have the Bartoli screen finished. So far, we've learned many things, such as how a list item should be organized with images, information and call to action. Finally, we learn what are components in Fig? MMA? How to work with them and why are they important in design? Thank you for watching. I will see you in the next video. 8. Single party screen: Welcome back, boys and girls. In this video, we're going to design the single party screen as mentioned before in this queen. We're gonna put the details about the Selective Party, such as the name of the deejay, the party location, the date, the time the deejay starts at as well as the ticket price. We're also gonna put the sample video of the deejay so the user can get a better feeling or what kind of musing? That deejay place from user experience. Perspective. This is an important feature for our application. Finally, in this green, we're gonna put a call to action bottom so the user can buy tickets for this party. Okay, let's get started. First things first. We're going to use the full screen image so we can enhance the background visually and give it a dark white, which is complementary with the move off our application. As usual, I don't live this image from sunsplash dot com. I'm going to provide it in the SS panel, move over toe assets panel. So, like the image and move it back over to our canvas, dragged down into the lair stack in, position it accordingly. You like Let's add another field to this image, which is going to be Polina Grady. Um and we're going to use that same color for both off color stops. The color is going to be a few of 71 9 to 3. And let's change the opacity off the car stops. The first color stop is going to be 66% capacity, and the 2nd 1 is going to be something like 93 smooth Grady Inbar. Until you like next, we're gonna use the hair component from our previous lesson. Copy the hair component by selecting holding fault and dragging it onto our campus. Now, since the single party screen is a subsequent formula Party Lee screen, we need to provide our user away to never get back to the previous queen. The way to do this is to have a back bottle. Now, since we cannot modify our components and stuff, we're gonna have to modify our masters component. You know, our assets panel? I provided a back. I come selective and Dragon old tour masters conformance changing color white and position accordingly. On top of the date, as you can see into our components, instance, we can see the back icon. Now. The only thing left for us is to hype the date. Click off the eyeball next to the date in order to hide it. Great, we now have the back button for our screen. Next, let's add the title to it. Go to the assets panel selected decoration graphic, which I've provided and moving over toward cameras. Now open up your type two and type in. You know, Kravitz change the phone size 50 pixels. The front weight is vote, and the color is white. Aligned these two decoration graphic and moving something like five pixels from the bottom of it. Select them both grooved them and change this to a title. So, like the title group moved over to the Heller and moving 50 pixels from the bottom of the hair, let's quit our detail. Squeak. Select the time to again typing dates. Change the fun sized 18 pixels, a line to the left, change the color white and change the opacity. 40% aligned these with the title holder Bolt and drag it down and changed his store. Specified date, which is 17 off November 2000 and 18. Change the capacity of this field 100% and change the phone size to 24 pixels, aligned them and moved something like five pixel from the bottom of the date. So let them both and group them together. Make a copy of this group by holding old and drag it to the right. Move this group something like 25 pixels to the right. Change this to a location. Change this to Burke Hind Panorama Bar. Change the week off this word so the bar work will go underneath. Select both groups, copy them by holding old and dragging down. Moved on something like 10 pixels through the bottom. Let's change this info accordingly to reflect the one off our previous screen. So start, which is going to be one past me, my and ticket price, which is going to be 18 year olds. This so it will match here. Let's move the ball. Two groups for about five pixels more. Okay, great. Let's go dumb on together and call this group in full and moved something like 30 pixels from the bottom off our title. Now let's have the video. Simple coffee. One group from the in flu by holding old and dragging it down, moving outside from the group and call it video with something like 40 pixels from the bottom of the Mpaluku. Let's change the opacity of the upper work to 100%. Let's delete the lower work. Now move over to our assets panel. So let this image which I've provided and move it over to our cameras, drag it inside our video group and adjusted like five pixels to the bottom of the ticket price. Change the ticket price to simple Jim official. Just the with off the image to 210 pixels, the height to 120 pixels. The corner radius four vessels AP another feel to it. It is going to be a solid color black by 50% capacity. The final thing is to other affective image, which is going to be a drop shadow. The blur will be 10 pixels. The why well, you will be five pixels and the capacity will be 60%. This will make the image stand out from the background. The final thing toe at here is the play bottom. Move over for assets family, Select the play bottom, which I've provided and drag it or to our cameras. Put it inside the video group. Let's Century by selecting the play bottom and image and sent to it using our alignment icons. Great. We now have video sample. By clicking this, the user will be taking to a new screen cold. The video screen. Now the only thing missing toe our design is the call to action bottom Copia butter from our log in screen and moved over to our campus, aligning to the bottom of the screen and moved something like 15 pixels from about. Now let's rename this to City A for call to action. Let's delete this icon. Change this to gift tickets. Let's change the color of it to you're so in one line. 23 Let's change also the color of these backgrounds to this been car, which is et tu de they see now. The final thing to do here is to create a component out of our call to action in order to use it on other screens, click the quit component Tyco and let's drag it over outside, copied by holding old and drinking back on tour came with let's position it accordingly. 15 pixels from the bottom of it. That's it, guys, This concludes our lessons. I will see you in the next one. 9. Book tickets screen: Hello again, boys and girls. In this video, we're going to continue building on top of our previous design, the single party screen. We're going to design a ticket booking part that is going to be presented in a model that slides from the bottom of the screen right after the user clicks the call to action. But get tickets. The purpose of this is beneficial for the user because he won't lose focus by getting navigated. Two different screen in this more will ask the user to enter his or her name and credit card details in Rio to make a purchase for the tickets when working it sensitive data such as credit card details. It is paramount that you don't believe the user in the Voy not knowing what is going on with his for her money. That's why DF needs to provide the user with feedback on what's going on. Okay, let's leave the talking and let's get down to business. First things first. Make sure that you have a copy of the previous screen because we're going to delete some stuff after you've copied the previous queen delivered the title. The info greet in the video sample, but leave the call to action bottle. Since we're going to use later on, just click the eyeball next week to hide it. Next, select the background image and applying effectively. The effect is Leibler 20 pixels for the M O. The reason why we're blurring the background. They work the focus of the user to the sliding bowel. The background will still be there, but less prominent. Now select your rectangle to and draw a rectangle that's full week but change its height to 600 pixels. Click this cycle next to the corner. Brady's sweat Independent corner radius to direct angle in the 1st 2 input fields had 15 pixels and leave the rest of zero. The first time foot feels referred to the top left and top right corner respective. Just this layer, so it such is the bottom of the screen. Now let's change the color toe one B one wife for zero and let's up another feel to it, which is going to be solid color black by 40% capacity. Lastly, let's change the color motile dis layer the exclusion and dragged a rectangle in the layer stack. Now open up your type two and type in book a ticket. The fun size of it is 18 pixels. The front wages bowl and the color is white. But change the opacity. 40% duplicate this by holding old and dragging it down. Rename it to mean, Oh Kravitz, change the font size 40 pixels and change the opacity of it back to 100%. Now let's have just this and we'll read five pixels down. Select them both and move them over here. Adjust him and drop them like 10 pixels. Now open up the rectangle to again and click once. Change the width to 95 pixels, and the height to 75 changed a few to the same hopping we're using for a call to action bottles, much these to the top right corner of our model. And let's have a choir individual at 15 pixels in the second input field to smooth out only the top right corner. Now let's drive a copy of our label by holding old and dragging it on torpedo backgrounds. Select both the background and the label and Sentara change the color of these 2071 93 and change the opacity to 70% bringing this to total track of Cope Jalloh V by holding old and dragging it down, change this to 18 year olds, change the font size to 34 pixels and bring back the opacity we want from good percent. Center them both. Select everything grouping together Coley's Hitler. Okay, let's make a quick adjustment to this. Select both Nina Kravitz and book A ticket texts and the line them to the edge of the screen. Now moved up 15 pixels to the right. Great. Now we're going to design a number stepper, which is going to provide the user with the option to buy one or several tickets, Select this group and duplicated by holding old and dragging it down. Delete everything inside of it except this label. We named this toe how many tickets now over to our assets panel and select Increase and Decrease Aiko's, which I've provided. Move them over to our canvas and I like them to the edges of the screen. Move the plus I come 10 pixels to the left. Select the minor cycle and justice in the line with this text. Now select them both and center of them all great. Open up your type two and typing one. This will be the initial amount off tickets change the front size to 50 picks off and the color white. Center these and select both the icons and the fix and select and Landau vertically grouped together. And don't over in this group. Who named this group to number stepper. Okay, now alignment. 30 pixels down from the edge off this rectangle. Okay, When the user taps on the plus and minus, he will adjust the amount as the number off tickets changes. The price should change as well to reflect real time changes. This is crucial for the experience of the user. Select the number Stepper group and duplicated by holding old and drag it down, moving 30 pixels down. Select this group with icons from the number and delete. Rename this to user name and changed the label, too. Your name. Select the right single, too, and draw a rectangle that's 345 pixels in weeks and 50 pixels in height. Change the corner radius to two picks off the color white and the capacity to 10% position . This five pixels down from the edge off the label. Now open up your type two in typing the name of our user, Which is the bias, Svensson. Okay, let's change the front two Circular STD. Change the letter. Spacing 0%. The form size is 20 pixels and the color is white. Now, Circular STD is a more readable form than Baba's noi. Place it 10 pixels to the right from the edge of the rectangle. Okay, this is going to be our input field again. Duplicate this group by holding old and drag it down and again with 30 pixels. Okay, We named this toe card number and renamed the label as well to card number typing a random 16 digit number that is grouped in four groups by four digits and separated with dashes. This will symbolize the card number, gold or assets, Penhall. And grab the monster card low and drink it into our card number. You would feel move it. 10 pixels to the left, from the edge off the right off the rectangle. Okay, we're adding the logo so the user can get a visual feedback that this is an existing card and everything is OK. Remember when working with sensitive data such as this. It's paramount that you provide the user with feedback. Great. Now let's go over it or assets panel again and grabbed the error icon and move it over to our canvas. Place it in the same spot as the MasterCard logo, but hide it by clicking the eyeball next to you. This icon will appear if a credit card number is involved. Furthermore, well at on error label below the input field that says card number is Valley. Try again. Let's change the form to 12 pixels and use the same color as the error, which is E B 001 B. Let's hide it for now. Que let's select our MasterCard logo and place it into our card number group. Let's hide the air icon by clicking the eyeball next to it. Select the card number group and duplicated again by holding mold and dragging it down and moving 30 pixels down from the edge off input field for the card number. Now this roof will be the expiration date for credit card. Rename it and change LaBella's well. Now we're going to delete the muscle car logo, the terror level and the error icon. Since we don't need them. Change this to October 2000 and 20 which will indicate the expiration date for a car. Now there is no need for this rectangle to be this big Celeste. Adjust with it. Now select this label and a rectangle and center them up. Great. Now select expiration date group and compete again by holding old and drag it to the right this time and married 30 pixels to the right. This will be the cards seriously number which is going which is found on the back off the card. Now it's a treat Egypt number. But we're going to hide it by putting asterisks in step. Select them both with the rectangle and center down up. Okay, lets I'm hide our call to action bottom and let's change the sticks to check out. Okay, now we have our book tickets. Queen Design. See you in the next video 10. Calendar screen: Well, hello again. Boys and girls in this video will diving deep and design a calendar screen for application . The calendar screen is a place where the user can pick a particular date in the month and check to see if there are parties available for that day. Now let's talk some real case scenarios here. There isn't a party available every single date most my clubs work on for the weekends and rarely on a weekday. That means our calendar should allow us to pick dates that are weakened or close to it. In our case, we're gonna start from Thursday all the way up till Sunday. That means Mondays, Tuesdays and Wednesdays are off To differentiate between which days are available and which are not, we're going to use a disabled state. A disabled state is a state where elements are not selectable. That means we're gonna have to make them look different from the other element. This is usually achieved by changing the color and the capacity of the element. Okay, enough talking. Let's get down to business. Firstly, open up your rectangle to draw a rectangle that covers the entire screen. Rename it to DJ and move it down to the bottom, off the layer stack. Change the color of it to you guessed it is your 71923 Okay, As you can see, we have a copy over Heather Component placed onto our cameras. We're going to design the calendar screen to be a full screen model picker. To achieve that, we need to make some changes in our health. As you remember, we cannot make changes, store installs, so we need to update our master components, go to her assets panel, grab the clothes icon and put it over into our masses component, aligning to the top and right. Make sure it snaps to the edges and go over to our components in stuff. As you can see with Rep replicated that I come into our instance now hype the calendar icon on the ticket cycle, since we don't leave them finally changed the title to our instance, too. Pick. They Now let's design are actual calendar. Move back over to RSS panel and grab this arrow icon. Place it on to our canvas and aligning to the left, make a copy, elevate by holding, holding, dragging it to the right right. Click on it and choose flip horizontal to flip it horizontally. Open up your type two and type in the month. Remember, the phone size is a very big source. The phone wages bolt but changed the color to the hopping that we've been using for bottoms . Center it onto our screen and select older icons. And the work November and group them together called his group Calendar Heather. Now we're going to create the calendar days. Grab your type two again. I'm typing the work in both in for Monday. Change the phones, waits to book. Change the phone size to 20 pixels. The car is white with 80% capacity aligned. This work to the left edge of the screen. Now I'm gonna post the video and duplicate this six more times to represent the seven days of the week. Welcome back. As you can see, I've created the days of the week and I group them together or name them calendar days. Now let's create the actual dates we have. Type two again and type in one. Change the front weight back to both one size 30 pixels. The color is white and full capacity place this under our Thursday is that's the beginning of the month moving 30 pixels down. Okay, I'm gonna post the video again and create the dates over calendar. Save some time. Okay, guys, welcome back. As you can see, there's quite a lot going on. So let me explain. I've aligned these calendar, Heller and Calendar days 50 pixels from the top off pick a date. And this calendar days are 50 pixels from the bottom off the calendar. Heyler I've grouped all the roles indicating the dates and space them 30 pixels each. As you can see, the days from Monday till Wednesday are a different color indicating that there cannot be click. This is the Disable State. The pit off earlier all I did was change the opacity 30%. This circle here indicates the foot state. It's a 50 to 52 picks ocean diameter and the color is the same thing that you use for bottles. Finally, we have our call to action that applies the Selective date and closes the mobile. This bottom appears on Lee. If we selected the date that's it. Guys would not have the calendar screen design. I will see you in the next video 11. Video screen: Hello again. Ladies and gentlemen, welcome back to our series In this video will design the video screen. Here the user can see a short video simple representing a deejay of the selected party if you remember from a previous video on how to design the single party screen with added a video from male with a play bottom. When the user taps that Tamil, he's redirected to the video screen. Now this queen expects a full screen model, same as our calendar screen. The user can see the video and control the video timeline using a sidebar as per usual enough talking. Let's get down to business, Open up your rectum and draw a rectangle that colors the entire screen as usual, renaming to BJP background and, as usual, moving down our layer stack. Let's change the color of it to our favorite color, which is 071 93. As you can see with heaven instance or Hiller components that need to change, click off the eyeball so the calendar icon, the ticket icon, the date and the title click on the eyeball off the clothes icon. When the user taps the clothes icon, the mobile closes back to the single party screen. No move or to our assets. Penhall. Grab the image and move it over to our cameras. This is the same image that we've been using in our single party screen, and it's going to represent our video, make it four weeks and change its hype. 265 days off. Positioning to the center of the screen. Excellent jointing left to design is the sick bar. Grab a right angle to click walls and make it 345 pixels in with and centrally up. Make the height three pixels and change the color of it. 103 four for a. This will represent the sick bars that grown duplicated by pressing control C and Control V and change the color of white. This will be the sea bars elapsed time. Make it 75 pixels in with Now, grab on a leave stool and quick one. Click the chain icon to constrain the proportions of the circle and change the week 25 pixels. This will automatically change the height to 25 pixels as well. Change the color of the circle white and place it to be Etch off the elapsed time. This will be the sick bars control, which the user can slight. Change the videos Time Finally, open up your time to and typing zero coal 16 slash one Coal 30 Changed the fault to circular STD. The letter Spacing to zero The full size is 16 pixels on the front. Weight is meeting and the color is white places to the right edge, somewhere below the Sigmar. This number represents our Elect's Stein and the video link selected. Select the lips and the rectangles and group them together. Rename these big bar organizing Baylor and that's it. Guys would not have our video screen design. I will see you in the next video. 12. Ticket screen: Welcome back to the serious boys and girls in this video will take a look on how to design the ticket screen as we mentioned before. The ticket screen is a place where the user can see his purchase tickets. Think of it as a special kind of wallet that exist on your phone. Now let's talk to design off the actual ticket. We're gonna make sure that were authentic. So we're going to design the virtual ticket to resemble a real time one. We're going to use the same data from our party. The ticket has been purchased for, such as the name of the deejay, the venue with a ticket price and when we would start. Finally, we're going to use a barco for our ticket. The barcode is required in order for people at the door using special kind of barcode readers to authenticate the ticket. We're going to use online to generate the Barco, simply Google up free bar code generator and click on the first or the second result query . There you can generate the barcode image and you can double it as a PNG file. Furthermore, I'm over why the barcode image in the assets panel. Now, as usual, enough talking and let's get down to business. Firstly, usual drill. Create the background, using our rectangle to and our favorite color. Select, direct and go toe. Make a fool and full height. Right? Single Rename it BG for background. Moving down our layer stack. Change its color to 07123 Now, since the ticket screen is an inner screen in our application, we need to provide the user away to never get back. Now, if you recall from our previous lesson regarding the single party screen, we've added a big bottom for Heather component. Go to the Heller Component Systems and click off the eyeballs off everything except the Big Bottle, and the title changed the title to my kids or my wallet if you prefer it that way. Okay, lets designed the actual ticket. Now grab directing Goto again and click walls change the background color to white changed with toe, 345 pixels and the height toe, 465 pixels. Center this up and change the corner. Brady's four pixels Now in our assets panel, we have the same image we've been using for background in the single parties Queen selective and moved over to our cameras. Make sure it's the same with as the rectangle and for the height we're going to use have the height off the rectangle to do it. Selective and typing. 465 pixels divided by two in our input field. Over here, we can create the mathematical equations toe automatically calculate the height off the image. Okay, now let's add corner radius to this image as well. Click here to add independent corners and typing for pixels. In the 1st 2 inputs, this will act for pixels. Corner is to the top left and to the top right corner, respectively. Now comes the fun part. Select the lib stool and click ones. Clip this changeling to constrain the proportions of the circle and typing 35 pixels for the week. Select the circle in place it to D H R. To get you will see the red lines snap. Okay, select the circle and copy by holding old and dragging it to the right. Make sure that the copy snaps as well. Great. Now select both ellipses and group them together. Make sure you make a copy off them by pressing control C on your keyboard. Now select both the rectangle in the circles by holding ship and punching. Subtract selection. You see, this makes a ticket like rectangle. Move the subtract below here, and make sure that you based the previously Kobe circles. He'd control the on your keyboard. Now place this group above the image and select both the image and the circles. And he subtracts elation again. Group everything together. And we named these ukip beat. We now have a real time to get over here. Now let's place the data. Copy the information from our single party screen and based it. Don't your camera make sure it's central line and moving 30 pixels from the top. Now everything is the same except this the name of the DJ in the name of the venue our center aligned. The final thing to do to our ticket is toe at the bark off. More to RSS panel, select a barcode which I've provided and place it on to our canvas. You can also, as I've mentioned before, make your own bar code by going online and search for free bar code converters. okay. Final thing to do is to group everything together and police a ticket. We can also make a component out of the ticket. So click great components and movies out copy, but holding old and dragging it back toward camera. Now, if you purchase more than one ticket, let's make a coffee. Hollow it to be authentic. And that's it for today's lesson. Guys, I will see you in the next video. 13. Empty screen: welcome to the second video above the ticket screen, the empty state screen. In this short video, we learn how to design on empty state for to get screen. Since the ticket screen is accessible from our home screen, a k a. The party screen. There's a possibility that this queen won't have any content, sees the user. Haven't bought any tickets yet for this purpose we're designing on Empty State, which will show if there aren't any tickets in the figure screen. If you recall, we mentioned this in the user for video. How an empty screen should look like the elements are some appropriate graphic, a message that explains why there's no content here in a call to action that will make the user do something in our case. Buy tickets. So without further ado, let's get down to business. I assume that you've already created your background, using the rectangle to on our favorite color. If not, do it now we're using the same Heller. There's a ticket screen where we have a big bottom and a screen title now in our assets panel. I've provided the graphic for this lesson. Grab it and place it on to our cameras. As you can see, this is the same Michael were using in our hair component to link us to the tickets Queen only larger and a different color. Place it in the middle of our cameras. Now open up your type, too, and typing. Looks like you don't have any kids. Boat changed the four sides to this. 30 picks off the phone. Wait, He's regular and the color is white. The final thing to do is to center. Align this text and make sure it fits in our screen by breaking this words. Now place it. 30 pesos don't are graphic and center lining for Kemalist. So it both the graphic and the text and group them together center aligned them to the mill off our cameras. Now the final thing to do is tow at the call to action, copy and paste the code direction from our previous screens and changed the content to book tickets. Now make sure this is center line and 15 pixels from the bottom. That's it, guys. We've made it the final design for application. I will see you in the next video where we will discuss the things we've learned so far and prepare for the challenge. Thank you so much for your attention. 14. Conclusion: Welcome to the glass conclusion, guys. First of all, I want to say Congratulations for finishing this glass. Thank you for being my audience. I sincerely hope that you love something from these Siri's to recap. We learn how to design a user flow, a user persona and many types of screens that for a mobile application throughout the videos at sprinkled useful tips that contribute to a good user experience. Remember, the user is a key to any business, and you should always design for the user. I think off the application as some fancy contraption that serves as a tool for the user, the easier he can get things done, the better for both him and the business deaths. Were you stepping user experience? Designers make sure the users feel comfortable when using their applications. And now the challenge actually two challenges. The first part is to design the success screen and error screen. If you recall when the user buys the tickets, he is redirected to the success or errors queen. Depending on the outcome of the purchase, the challenge is to design those queens use the techniques that you've learned in these videos to achieve these or you could think that you have a better solution. Go ahead and use it. The second part is to design Ah whole booking app using the techniques that you've learned so far. The up can be for where they were. You like hotel booking, plane tickets, booking table booking, etcetera. I live it up for you to decide once again. Thank you for being part of my class. And I hope to meet you again in future Siri's by