 All right guys, I'm the boss. I'm a designer. I've been a designer for seven years and now I run my own company here in Singapore I before we start I just love to hear about the composition of the crowd So how many people here are designers or are starting out or want to be designers anyone here? Right a few people great any software developers here a couple okay great and any people who don't work in tech at all All right great and any any people who are still in cool school college anyone or is everyone working? All right great perfect great, so So my name is Vibhas. I grew up in India. I studied Product design at a art school in San Francisco and ever since then I've been designing at Indian startups I started with a PTM housing and Gradually I realized that the bigger company you work in the less work you actually do So I started moving to smaller and smaller companies until now. I'm at a two-person company, which is me and one other guy So we do all the work, so it's a lot of fun So I just want to give you some perspective on UI UX, you know, so What is it? What is UI and UX so a simple way to think about it is so UI UX You know this this whole thing it started when people started using web apps a lot when people started using phone apps a lot and Design increasingly became an important differentiator for your business Your business can live or die based on how well your product is designed and what does that mean right? So there's two things UI is what the interface looks like when you look at the uber app When you look at any app if it looks good if it looks appealing if it's designed Well, that's UI and UX is what your user experience is when you actually use it Even a great-looking app can have a very poor user experience a simple way to think about it is if a Cookie the way a cookie looks that's UI when you eat the cookie what it tastes like that's user experience That's a very simple way to think about it So how did how did all this start what so you know seven years ago? I was in design school and Designers were starting to be given a lot of importance and you know increasingly designers have become more important you can get paid really well if you're a designer and This all started with very early with companies like Apple Amazon Google which began to show the world that Differentiating your product through good design can be really good for this for business So that's when the world realized that good design can mean you your company making a lot of money So designers became increasingly important and That's why you should care because you can Have a very influential important career If you're a good designer So So I think all designers when they start out when you start your career out You start out over here Everyone start the most the simplest thing you can learn is how do I make my software look good? You apply principles of graphic design The whole point of doing this exercise was that so whenever humans create something They're very protective about it. Your first instinct is that I'm gonna show it when it's perfect Your first instinct is to hide it, right? That is the worst choice you could make as a designer, right? The quicker you can show it the more dirty it is Like make it out of sticks and stones like show your design Even if you don't have a piece of pen and paper the quick because the quicker you can show it people will tell you what's wrong And now Ron has already gone back to the drawing board He's made a new sketch as opposed to if we'd given him 24 hours. He would have gone and Invested more time in it designed it engineered it and then if you try to convince Ron his idea is bad He's way more invested in it now. Why will he change it? He'll try to argue with you They'll say no, no, no, you're wrong. I promise you this is gonna work So the less attached you are to your designs the more objective you are You know the more open you'll be and always be ready to like kill your ideas We all have ideas. We're very very attached to for example this side I actually personally really really like this idea what that you first you say what time do you have to reach your destination? But if the business people on your team and everyone decides a bad idea, then you know, you don't quit your job you don't You don't leave the room. You're like this. I'm out. You see how you find the next solution, right? You find the next thing to get attached to All right, so Now down to the action Now I'm gonna show you guys some basic stuff about visual design, right? So so far we had How you do user interviews some sketching how you think of concepts, right and Now let's talk about visual design so one important thing to remember is that You know people have been designing interfaces for like 20 plus years now, right? So It sometimes is a good idea only sometimes to like build on on their knowledge So you go out and you look at other stuff people have done Because some problems will have been solved But you know don't always do this because then how are you gonna come up with the fresh ideas? But sometimes it's good for reference, right? so a Website designers commonly use some who's familiar with dribble here anyone there's a few people great so a website people commonly used to look at Designs is called dribble, right? You go in here and everyone posts shots of their design. So You can look at a similar category to what you're designing or you can look at completely different categories So if I was designing a maps, you know a transport app. I could get inspiration from like an email app or I could get inspiration from Something completely or transport apps themselves, right? So this is a good place to look so, you know, there's some examples here But this is just for reference, right? So I want everyone to go to figma.com How many people don't have laptops? Okay, you know when everyone is signed up Yeah It's a free software. It lets you design make design interfaces within your browser itself. No download required so Okay, how many people have managed to create a blank project and reach this screen? zero oh So software like figma it didn't exist like five years ago and figma is a very lightweight software That lets you prototype interfaces Ten years ago people used to use Photoshop for designing interfaces when Photoshop was built for photographers. So The industry has grown so big that there's now very great software like this So figma starts with an art board So we're designing for phones. So we're gonna place a phone size frame, right and then What I like to do is so Can everyone try this please just take a photo of your sketch with your phone with your phone and try and get it onto your computer so you can just It's a little calm. Yeah Hard to go now See if you can just email it to yourself And then you drag it you can just drag it into figma All right, so let's start designing the first screen, right? So this app is called pick the best Where do you go? Where do you where do you want to go? Where are you now and by what time? so on the on the first screen it makes you choose Specified these three things and then it shows you the options, right? So So you press R to draw a box. That's how this works Press R and then you can just drag a box out onto the screen You can choose a color any color you want you can change the color by going in here So let's not choose any of grab's colors. Let's say this one is Let's bring this one So then to add any piece of text press T And then you just drag out a text box now right now. I'm typing you can't see anything and I think it's because Sure sure so Right here you see frame or just just press F and you'll see this menu on the right and Then you just pick iPhone 8 or Suppress F So usually it's one frame per screen and then even for multiple states you can have different screens So now we have some text. Let's change the color to white It's called pick the best So you use this button to center text. Let's make it big too big right guys, so so Does anyone know anything about fonts? fonts How many people know what a font is? Great. All right. So font fonts are all the different ways You can write a piece of text all the different styles designs are called fonts, right? So Here's all the different ways we can write it. Does anyone have an opinion on why one is better than the other? Is this one good who said no? What why is it not good Not legible. Yeah, that's great. So everything has to have a function, right? It has to be easy to read What what this one? You don't like it went on It's a bit childish Exactly. So font font designs you use them appropriately each font evokes a different Purpose if you were making a finance app or something then you use you know Or a wedding invite or something then you use something like this Certain fonts look childish certain fonts look professional and so you when you're you know in your everyday life You observe these things when you look at the newspaper Spend two seconds thinking about the font choice and how it makes you feel and when you go to drop your kids off at The school look at the fonts and think about how they make you feel all these choices are very deliberate and Similarly when you're designing your app, you have to be very deliberate about these choices. So This app is called pick the best right? So I'm just gonna pick a font where So I've just picked a random font which I thought was was good One second So I have my I have my sketch nearby for reference. This is what I keep looking at So then again for forms You know forms we again, there's many different kinds of forms you can do. This is another thing you have to look at Let's look at different websites. Let's look at TripAdvisor So look at the search bar on TripAdvisor, right? That's a certain design. Let's look at Airbnb So you see this one is totally different the way they're doing their forms and their pop-out experiences. So There's lots of different ones. You have to look at the one which works for you best And I'll show you how to do animations and all that stuff in a second as well. So let's just do As much as you can with their designs try to be subtle So when you're making a box Don't just give it a full black frame. I mean unless you very deliberately want to think about subtle tea, right? There's thousands of shades of gray in between like white and black. How can we make this more subtle? Maybe that's all that needs We give that form a little shadow So Now we have to tell the user So very simple, right? We're just taking Pieces of text and putting them in boxes. It's dead simple. So The last one maybe we don't want it to be as simple as just a text input What other ways of picking a time can we now? Let's go and look at what other designers have done So we go to dribble and we search for a time picker Let's see. So this is for a hair salon So this one someone has this is more for appointments. So someone has just used big boxes, right? For different slots you can do. Let's see. What else? This is another classic one. We all see on our phones It has a rotary dial sort of thing and also at the bottom. This is pretty interesting This says 30 minutes 1 hour 3 hour 24 hours. So those are sort of quick shortcuts You could have this one where you sort of scroll horizontally You could have something like this. I Really like this one because it seems really dead simple if I'm calling a cabin going somewhere Chances are I want to reach within an hour probably at least within Singapore unless you go into Malaysia You will be there within an hour. So Let's use something like this. So always like don't be afraid to look at things and use them for reference There's nothing wrong with that So we're just going to keep this to the side and so for our third one We're going to try and make something like this right so now The best way to learn graphic visual design is by looking at other people's work and try to copy it try to get it As close as possible now if I were you and I was just starting out I would look at this and I would try to copy it and I'll try and write the words down. I'll say okay 11 05 Okay, then I'll make a few more copies of it and then I'll say huh Mine doesn't look half as nice as that one. How do I get it to look like that, right? Let's start noticing the attributes of the text, right? What what do you guys notice about this one right here? Does anyone want to say anything? It's pretty great out, right? so How to create hierarchy in text that's a big that's a big big thing to learn So when you look at this picture the first thing which screams out is the 11 15 a.m That's the big text and the other one is less important How do you think how do you make things more important and less important just if you master that trick? You will be able to create beautiful designs Because this is not beautiful. This is functional The designer wants you to be looking at the big piece of text has made it more important. So we take this one Let's make it black That means a heavier weight. These are all the different weights in text light medium black Let's make it bigger than the others. So the second tool we're using is size You notice that the a.m. Is much smaller than the rest of the text Right starting to look a little bit closer You'll notice that the a.m. Is in a lighter weight than the normal text so make it medium So there if you press control and see there's a color picker color picker tool So you can just pick colors which you see around so let's say we want to use this color So now that's closer Okay, starting to look a little bit closer So now we take the others we bring them down like this And now let's try and make the other pieces of text look like that one so So this one is called letter spacing This one lets you space your letters out more So you guys can see we're starting to get closer to something which looks nice, right? And you can endlessly mess around with this design Now let's look at the next screen Now a big part of design is also imagery and how to simplify things for people right so The only language everyone in the world speaks as images so there's a site called the noun project and What this site tries to do is give you an icon for everything in the world so let's look at a Training for example So it tries to give you images that you can use for any of these things, right? So now let's look at transport options here So you just right-click copy image and This is what's great about figma. You can just have the image There you go So now you guys will see I'm just posting the images in I'm just placing them in and so so now of course one option when you're making the screen is to just Make things like this right but like I think we saw in someone's design who had made a Table people read things much better when there's some order within the chaos, right? For example, let me show you guys a website I found recently look at this website Kind of chaotic right but still they've lined stuff up in grids trying to make it easy for you to browse those titles of all those stories We're going back to our design How do we line stuff up in grids? So if you press ctrl? one sec So if you go to view and show rulers It lets you drag out these rulers and These won't actually show up in your design. These are simply helping you line stuff up So now I have this really nice grid where I can line up all these icons. Let's look at the original design again It was like this, right? So let's so for each of my each of my images you can see I'm just trying to Make sure the height of each one is same and they line up with the one next to them and the one below them You usually want to you want to measure this so if you So you can read at the bottom there. It's 76 by 57 So the size of the rectangle we just drew so let's try and maintain that size everywhere So 76 by 57 so we keep this one here So that means our rocket is too big Anyway, so on and so forth. So similarly you'll start to notice that Once you do these once you do this things become easier to absorb rather than if you just chaotically put stuff anywhere Okay, so in this design this person has shown all the vehicle types within the vehicle types Within the vehicle, they've written the name of the brand or the service provider Under the vehicle they've written the cost and the time associated with each right Let's do that so again for text we're gonna create a create a hierarchy so Which text do you think is more important the name of the brand the price or the time? Does anyone want to say which one is more important? Price is more important for you. It does. There's no correct answer. So does anyone want to say all right? So for Lewis price is most important So we're gonna make the price Bold in black and we're gonna tone down the other choices So we will make the smaller Grab Maybe we give it a Grab color so you can associate it with crab You can even use the grab logo if you'd like so I'm just screenshotting their logo and using it directly All right Would you say in this in this design right here? The price is still more important or the logo is more important Which one catches your attention first price? Very good and And we'll say five minutes So right now this looks like a lot of information and it's simply because they're all fighting with each other for your attention They're all I would almost say almost equally important. Of course, that's objective So the more you create a hierarchy by making these choices in your head of which one is more important The easier design becomes to absorb. So let's say Really want to tone this down So this one's called a corner radius you give a corner radius to something when you want to make it more friendly Like your like your iPhone as a corner radius if it had hundred percent sharp edges, then you would get stabbed every day But you don't so another concept is opacity. This is another tool you can play with So you see these are all the different opacities at which This thing can exist so you decide which one looks best to you Which one works best for your user and you make that choice Now let's make a choice. Maybe since Lewis said price was most important Maybe we say the price we're gonna put in a In a dedicated bar at the bottom of each design and this bar. Let's make it the color of the logo So you can see slowly your design is getting better right slowly so it takes time But again right now. We're just trying to make it look good This doesn't necessarily mean that when you go out and you test it with people. They'll actually think it's a good idea They'll actually think They would want to use this interface right now. We're just trying to make it look pretty So you can duplicate stuff by holding down the alt key right now, let's Make some other companies for So as a designer you have to get really good at stealing stuff. That's one of the big skills required So I just go copy image Bring it into my design Make it the right size So you can see now we've started to sort of design this screen Right, we've tried to try to give all the relevant information. We've tried to give you a Picture the name of the brand the price the time and the idea is when you click one of these buttons You immediately go to the next screen so Okay, let's say you've reached this stage right and now you want to test your designs now you want to see How do I show this to someone so they can actually play with it and I can get their feedback? So we're going to use another software. This one's called principle So let me show you this one is Mac only but There's more options available for Windows like Adobe XD and others so Principle that you animate your ideas so principle also starts with a blank screen but principle assumes that you've already designed your App on another app like we just did in Figma for example So what we're going to do is we're going to try and bring We're going to try and bring our design into principle and principle lets you Interlink screens between each other. So let me show you very simply what that means Okay, so now what what I'm telling principle is When I click here take me to that screen And you can see it does that principle also lets you make components Which means if I want to create a micro interaction on this component Whenever I tap on this component I want it to Let's see what that does So you can see I've created a little press state right here for my component And this works on my phone as well