all right let's do this time to make some beautiful UI there's absolutely no way this is not going to look incredible Chuck in a frame it's add a couple card elements make it look beautiful we're going around those Corners oh we're on a roll this is going to look sick gorgeous easy splash of color do you know what I think I might be an artist amazing up top absolutely nailing this okay I think we're done let's see what we got every time I know UI is hard we all want to be able to jump into figma and effortlessly put together beautiful UI designs but for a lot of designers myself included doing good UI just doesn't come that easily in fact it takes a ton of practice to get good at it if you're new here welcome to the channel my name is Leander and I've been a product designer based in London for the last 5 years after doing a career switch from project management into design UI was something that I really struggle to get comfortable with it's one of the reasons why I almost didn't make the switch into design I kept thinking to myself oh I never went to design school I don't have any kind of artistic background doing any visual design is going to be impossible for me even during the first couple years of my career as a designer I really struggled with UI and it felt like this dark art that I just would never really understand and it wasn't until my third year that one of my mentors gave me the secret to unlocking the ability to produce beautiful UI designs and the answer to this might surprise you copying yep it's that simple just copy other people's work now let's just take a step step back the goal here isn't to pass other people's work off as your own if that's what you're thinking let's just use Architects as an example real quick Architects constantly draw inspiration from other Architects building designs and housing designs honestly how many different ways are there to design a door a door is an example of a design pattern that just works good UI design is basically the same thing there are design patterns that have been used for millions of designs before today they just work and it's our job as usui designers to be able to reproduce those UI patterns and to use them at the right place place the right time so today's video is all about practicing being able to reproduce these beautiful UI patterns the beauty of this exercise is that most of us already know what looks good you don't have to be an amazing UI designer to know that the challenge is being able to reproduce what looks good first things first let's head over to mobin if you don't already know mobin is a great place to find beautiful UI patterns that are actually being used in production environments in other words some of the world's largest companies are using these design patterns in their production applications and on websites this is a much better alter ative than using a website like dribble and mobin aren't even sponsoring this sure dribble designs are beautiful but they're not actually being used by real world users and if we're going to practice doing good UI we want to practice by copying things that are actually being used by users and take the user's needs into consideration that said let's say that we want to get better at mobile application UI patterns I'm going to grab a design from here that looks enviable nothing like Airbnb is the gold standard for design once we've got our UI we want to copy let's paste it into a figing file I'm going to grab a couple of different screens just so I can copy a little bit more of the Airbnb app rather than just one now before we start actually copying I want you to think about this exercise like riding a bike with training wheels the point of copying the design is that it's going to train our eyes and our hands to be able to reproduce UI that is genuinely beautiful and effective the better we get at copying more designs the more expansive our design Arsenal gets and the better UI designers we become and the less we need those training wheels what this means though is that we need to copy correctly and in this case that means copying the design from a distance so no tracing over the design that we just pasted in there that's cheating cheaters so we're going to leave this design over here and try to reproduce it on a new frame right here now as we're copying this it's good to start analyzing how these elements are constructed to rather than just being able to reproduce each of these elements like the search bar at the top and the icons and the little scroll indicator it's important to think about why Airbnb decided to design them in this way what are they trying to draw visual attention to and why aren't they using a ton of color you know the more we copy this the more we're going to start to understand these visual patterns and when it's appropriate to maybe use less color or more color in airbnb's case the search bar is right at the top of the screen and it has a really nice kind of gray faded drop shadow behind it they obviously want to drop attention to this because users like to use the search bar other than that some things that we'll notice is that the app really doesn't have a ton of color splashed all over it everything is in black and white except for the pictures of the places that you want to go as a user using this app I'm more interested in where I'm going to go on vacation and the home that I'm going to be renting and so that does make sense to be the thing that draws my eye the most the primary button here the map button is all in black and that draws quite a lot of visual attention as well so as I'm scrolling down these properties as the user the map button is fixed there and I can click on it whenever I want to switch from a list View to a map view if we head over to the map view screen you'll notice that the thing that is drawing the most visual attention is these little pricing bubbles they all have a drop shadow so they're raised off of the canvas and the text is much thicker so the designer has chosen a heavier weight for the copy here to to really make it clear how much each of these properties is going to cost and to draw the user's eye to those bubbles another little visual detail that we can pay attention to is that the current selection so cabins is the filter that I'm on is darker than the rest of the icons and that makes it clear to the user that that is the current selection so all these little visual details start becoming clear and the more we think about these kinds of things and the more we copy them the easier it's going to be for our brains to recognize these patterns and call back to them without those training wheels on and we'll know things like oh I know that card elements typically look really nice when they have an 8 pixel Corner radius and I know if I want to draw attention to a certain bubble and want it to jump off the page I apply a drop shadow like this let's copy the rest of the design now and then I'll show you how to check your work and see how close you got now this is the fun part you can really turn this into a bit of a game where you see how much better you're getting every time you do it take the original design and we're going to reduce the pass through to about 50% and then just drag it over our reproduced design and this is going to show us any visual differences between those two designs and you can then assess where you weren't quite on the mark and why so there are a couple of things that I wanted to talk about that I didn't include when I was originally filming this obviously there are quite a lot of areas here that aren't on the mark in my design I wanted to mention one of the real benefits of this that I think I kind of glossed over earlier in the video is not that it teaches you to find the perfect icon that matches exactly what airbnb's icon is going to look like Airbnb uses custom icons in their own libraries and things like that and the expectation here is not that you find those libraries and chase them down and get every single little detail perfect it's much more important to focus on what you got right in terms of broad UI principles and rules what I mean by that is it's going to reveal areas where my alignment and my spacing didn't match airbnb's original design and those are the types of things that I think are much more important to focus on because the things that you're going to start to notice when you do this more and more are things like there are general rules for spacing so a company like Airbnb is going to have a spacing rule where everything is spaced in factors of eight pixels for example and that's a really common thing to do in design that's a way that developers are used to coding things it's a really common library and it's just a design principle that a lot of companies are going to adhere to so you're going to start to notice things like that and here I obviously I adhere to that rule in some cases but I kind of broke that rule in other cases so if we look at how far away this word rooms is spaced from the Icon this is 22 pixels right so it's not actually a factor of eight and if we move if we move this up a little bit and we get it a little bit closer to something like well eight on the money these are things that you're going to start to notice as you get better and it's there's still things that I mess up on and this is why I think it's important to practice this kind of stuff there are just certain visual rules like this that make things look neat and Airbnb obviously adheres to those rules and I obviously don't because I'm not good enough at this yet but that's why we practice depending on what we missed at this point it might make sense to try again with the same design or to grab a different design and see how close we get at copying that one all we're doing here is training a muscle and keep in mind that training a muscle takes time and it does take some dedication so if you're not immediately amazing at this don't beat yourself up just keep practicing and stay consistent I try to do one of these copy practice sessions a week and it just helps me keep my figma skills sharp makes me feel like I'm staying current with all the latest design patterns and the latest design Trends and it really just makes me feel like I'm keeping the UI library in my head and those UI patterns that are at my disposal current and expensive now I'm going to Spill the Beans a little bit here I feel like I'm revealing like a trade secret or something but something that you should know is that every great designer copies during their design work this is not just a practice exercise every single time I approach a new UI task I scour the internet for inspiration I use websites like mobin and I try to find examples that are relevant to the thing I'm going to design and I absolutely draw inspiration from those examples sometimes I straight up copy elements into my own design and that's completely fine the art here really comes down to picking the right elements for The Right Use case at the right time and for the right application that's something we really can't copy if I just copied airbnb's design verbatim that probably wouldn't make sense because more likely than not the company that I work for is maybe a travel company or maybe some kind of rental company but it's not going to be exactly like Airbnb and so I can't copy all of these elements exactly and arrange them exactly the same way because my users wouldn't be able to accomplish what they need to accomplish and that's it you have everything you need to practice your UI design shops head over to mobin grab some designs that are relevant and get to copying keep in mind that as you're copying it is worth thinking about why the designer chose to design things in the way that they did and again the more you do this the better you're going to get at it the faster you're going to get and I'd love to hear how it's going for you let me know if you're noticing any improvements in your ability if there are any frustrations during this process if you're finding out new things about yourself as a designer if you realize that you're not actually as good at using figma as you are this will definitely help with that too whatever it is drop it in the comments below and keep me posted until next time best of luck with this and see you very soon we all want to be able to jump into figma and effort Le put we all want to be able to jump into figma and effortless put we all want to be able to jump into figma and effortless UI design is hard we all want to be able to jump into figma and effortless effortlessly put together we all want to be able to jump into figma and effortlessly effortlessly we all want to be able to jump into figma and effort I can't say it effortless effortlessly effortlessly that's really hard that's really hard to say