 what's up guys today's lesson is all about user interface design principles it's super exciting it's about six or seven i'm gonna go over and at the end of this lesson you're gonna have a much maybe better understanding of the key things you should be looking out for when you start ui design what things and i do i think the most important i've been doing it for 15 years so over that time i've definitely evolved as a designer and i look at different things now i look at things differently than when i started so hopefully i'll give you a little glimpse into some of that stuff so let's get started the first thing we're going to talk about is maybe it's a new thing maybe five or six years ago the industry completely changed and i'm going to talk about ui design languages and these have other names like design systems but we need to talk about it briefly because if you're looking to go into ui design this is going to completely affect your whole career really so i've worked on a couple of different teams who make ui languages so i made the one for barkleys i have worked in other companies who do these big ui languages and now i use one a ui design language is simply it's a consistent set of elements that as a designer you will use when you go into a big company i mean you know it's not even big companies anymore it's just a company that has like more than one website then you're gonna you're gonna have to use a ui language and it's not a bad thing it's actually a good thing in many ways so a ui language consists of things like buttons they all look at typography it'll have like things like tables and all the elements that you use when you design the website and at first like i remember if i if i would have had this when i came into the industry i would have been a bit frustrated and been like i can't put my own spin on things but the reason why i've changed my mind over my career and i think ui language is a good now because i've seen companies who have like 30 different websites and they all look completely different because you'll get every every designer you know wants to put their own spin on things but when you're in a big company it's actually a hell of a lot of wasted work really because across all these websites you think about a u designer website you you have the development team maybe there's five or six developers and other people they have to then make what you design and they implement it and then it's not reusable and that's the key word here reusable and that means money for companies at the end of the day so if i have a design language now and i've got 20 or 30 sites or maybe even two or three if i do the work up front and design the button design the logo design the icons then they can be reused in perpetuity like no matter like forever and ever no matter who comes in and it's a good thing because then if you make an update it can be applied across all of your designs and you can all keep to the same design ethos but that's why i've kind of changed my mind on it and also when you work in tools like figma sketch adobe xd they've got really good ways of creating a design system and you know if there's 10 designers you all share the same files and the reason why it's not as frustrating as it might first appear is because it actually allows you as a designer it gives you a bit of freedom actually from thinking about elements and it lets you think about the bigger picture and this is always the most important because when you don't spend time producing producing producing like buttons text the same things over and over again you actually think about different things so it's the 20 percent that you think about but that's the important 20 percent and it really makes a difference but we'll talk about a couple of other things but that's just an introduction to what a UI language is and you'll probably come across it in your career you'll either make one for smaller companies or you will use one for bigger companies and that's fine it creates consistency creates usability and it just ensures that everything's a bit more just a bit more even but what I want to talk about now is what is actually more important than the 20 percent is hierarchy so this is by far the most important thing that I've learned over my career as a designer that you should think about and it's the hierarchy of how you place things on a website so this is a bit of mix of UX thinking and UI together and I know a lot of people are hybrids and mixtures and we all like to think about different things because we're not cheap but when I talk about hierarchy it's every page that you design whether it be an app whether it be a watch design or whether it's a website there's something that you want someone to do on that page and that's not manipulation it's just you wouldn't have made the page if there wasn't an action for someone to perform at the end otherwise it's a waste of time for everybody so really think about when you create a page what the action is you want someone to do and put that front and center and then build the whole page around telling someone why they should perform that action so if you wanted the someone to click sign up to do a contact form or something put that button at the top and you know what I'm not scared of big chunky buttons make things big so people can see them I've sat in enough user tests to know that things are too small on the internet and we need to cater you know I think people when you see something simple it makes you feel relaxed because I've seen designs sometimes and you know what there's like a table and like 40 things on it it makes me feel overwhelmed but when there's two or three things and it's neatly laid out I feel more relaxed and I'm certainly more inclined to perform the action that you want me to and it's not a bad thing because I might want to perform that action as well at least I have the relevant information up front to know what I'm getting into before I do that so really think about hierarchy think about your titles your descriptions where things go and think about having a primary call to action so a cta is a button that's what we call it a call to action have that at the top and then favor on down the page it should be supplementary call to actions which will reinforce the main big idea so the person the user might not be ready to commit at first but as they read down more information the same call to action should be repeated you can use different words but maybe contact now contact us do you want more information you know it could all point to the same thing and that's why you really need to think about hierarchy it's super important and because now you have a design language you can actually think about some of the things that actually emotionally have an effect on people it's really important really really important so sorry I've got my little book down here so I'm just taking some notes the next thing I want to talk about yeah so I've already talked about like sizing and then creating emphasis on a page and this can be done in a couple of ways so when you create a website you have different hierarchies of text so you'll have big titles smaller titles and then you'll have body copy and things like this and what I don't want you to be scared of is making things big like I've just talked about big chunky buttons whenever I make a website I literally make the biggest button I can because I know more people are going to click on that than not I mean this is something you can test as well like there's a there's a great website called IFTTT if they stand that and for years and years I've loved their website because it's just simple it's just big text on a white background with some colors to emphasize what I'm actually doing it makes me feel calm it makes complex because a very complex website because you're combining things together and you do you actually perform in a task but because it's simple really don't be scared to think about simplicity as a as a UI designer because it just makes people feel better don't think you need the biggest the flashiest the most dynamic text on a website because none of that stuff matters because people are coming to your website not as a piece of art but as a piece of functionality and that's the reason why books are so popular you know people still read books even though they're films even though it's just text because it's the story that you're trying to get across at the end of the day and as a designer really try and strip that back and try and just show the most like simple information you can and you'll go very far in your designs so the next thing we're going to talk about is um along with sizing you need to think about responsiveness as well and a lot of this will come inside the actual design language so you might not need to think about it so much but if you create one so we work on three different main screen sizes now and you know there's about a million billion different devices but whenever people design websites you can either design mobile first where you start with the smaller screen and work up or you can design desktop first start on the biggest one and work down because the the information will be laid out differently on the different devices so you might have like a horizontal it's called a hero at the top of the page it's like an image with some text on it but that will look dramatically different on a phone than it will on your on your desktop because it will go more vertical on the phone and that's how things tend to do if you have three things next to each other on a desktop website they tend to stack vertically on a phone so phone pages are super long whereas work desktop pages are wide so you need to think about some of these things but what the most important thing is is that you view them on the device because sometimes you'll design something in your screen app and you'll think it looks because there's so many I have a 5k iMac and it's like I can see really small text but then when I get on a phone or something it looks too small so make sure you check it on a device think about responsive design and because you know a lot of people are using mobiles now even more than using their desktop and you know you'll hear a lot of people like so many people have said this to me over my career they go you should design mobile first but I'm just gonna say what I think it's the uncool opinion but I've always started desktop first and you know it's never it's never bothered me to never hindered how I design I designed desktop first and then I stack everything for mobile and then check it and there's like philosophies about these things but just ignore it and just do whatever feels right to you don't let other people change the way you design because at the end of the day it's just opinions there's no right or wrong so you know at desktop first it doesn't really matter whatever you want to do if you want to start with mobile you start with mobile it's it's perfectly fine the next thing we just need to quickly talk touches accessibility so whenever you design something on the web there's a lot there's a lot a lot a lot of people who have disabilities who use the internet and there's things in the user interface that will affect people with disabilities so I've seen this so you know in London when you're on the tube if you've ever seen it there's like a tube map and there's a series of six different lines and they're all just lines and originally I think don't quote me on this but say they're all different colors yeah but someone who's color blind will come up to that and they'll look at it and they might not be able to distinguish between red and brown for example and when those lines are over cross or they get jumbled up the actual map is really really inaccessible to them and it's quite important because they don't know where they're going and and this could be on the screen design as well there's there's websites where you can check accessible colors and you can put the hex code which is the actual mathematical value of your color into it and it will tell you whether it's a website font which means it's accessible but the way the London Underground got around this is they put dashed lines they put like horizontal dashed lines they put solid lines they put double lines so they give each line a different actual stroke as well as a color and then it looks like for people who have normal vision or can say all the colors it looked it looked even better because they could distinguish by two different things so really think about accessibility especially if you design a big website like I've done some websites for like the BBC which has a billion people look at it here so you really got to think about some of these things because it might not be so important if you design like a boutique website but when you design the big one there's so many people that you need to cater for something that you definitely should think about so the next thing we're going to talk about is typography so this is fun like you could do a whole course in typography but when you design a website there's you don't need to know too much about typography because there's basically two types of typography there's sans serif and serif so serif fonts have a little it's like it's like a decorative touch on the letters and it's a bit more old fashion you'll see it in books like Times New Roman so you'll have an s and it'll be like you'll have little things on it and then you've got sans serif which means without thing I don't know what the actual Latin is but it means without and it's a lot more modern it comes from like a like a movement in swiss design and they're two main type of fonts and you can combine them on the website sometimes you look at fashion magazines and they'll have serif fonts everywhere so the title will look old-fashioned and then you'll have more modern type throughout it so just understand the two basic things what do you want to be designing something maybe you're a lawyer or a solicitor then you'll want to go with a serif font it looks just a bit more traditional and professional but then if you're a designer like me I'll just have sans serif fonts all over my website because it's a bit more you know it's modern but like it comes from like a hundred years ago so that's kind of how things work now it's very very slowly over time so there are two types of fonts and you know think about your colors to a certain extent so whenever you have black on white it's actually quite harsh and I did lots and lots of research in this one I was working for Wired magazine we designed for the iPad and we actually we actually tried different colors of black so you can have black you can have dark gray dark gray and we found the best color was 60 60 60 in RGB values and it's slightly dark gray but it looks a lot better than black it's not as harsh and it looks good so maybe just experiment with that you can have different shades of black um or 50 shades of gray so um yeah experiment with them try and and see what you think but this I probably and I don't use too many fonts so um maybe use like one or two fonts on a lot of websites I just use one so you can use like a website a font called Gotham and there's Gotham light there's Gotham italic Gotham bold and as long as it's all in the same like family of fonts it will look great so don't do Times New Roman and Comic Sans together it's just the blending of the two fonts they have different meanings and different feelings and it's not great so try and keep them in one or two font families for some of the things that you're trying to create the next thing yeah let's talk about color this is this is a good one I've actually got a full video on a color theory for designers so you could talk for 25 minutes about this color affects people emotionally it affects how they feel about things and there's some great resources if you're thinking about putting color together for a website so adobe have a website and what you can do is you can go on there and there's lots of different um people have already made them you can go to the explore section and see the different color palettes that people have put together so maybe you'll use five colors on a website you need to think about how they blend together think about the overall emotion you're trying to do so if you're doing a bank maybe you'll use blues and greens because that's a bit more peaceful and it's a bit more professional people think about money when they have those colors if you're doing maybe like a crazy surfing website you might have bright yellows bright reds and a blue for the sea so you'll try and recreate the sunset but think about those check out adobe color because you might have a look at the trending ones that yeah you can have colors out of trending so you might look at the trending ones see what other people have created and you might find one that just works for you so really think about color and think about each color has an emotion so check out color theory it's really interesting if you're interested in this but each color gives someone an emotion and it means different things in different cultures so yellow means happiness in some cultures but in Greece it means sadness so really think about where you're doing the color for and find the nice color scheme that matches so the next thing we're going to talk about are so the last two things are images and illustration so these are things that you can apply to your user interface so you've got a nice simple site you've got nice fonts you've got a simple color scheme then this is where the magic happens I guess because you should see how like amazing a website is transformed by a good choice a good so it's called art direction when you choose a photography you don't need to be a great photographer for an illustrator I work the magazines and you work with a lot of you work with the people who go into photography and the people who go into illustration your job is to choose the best that matches your overall style and put it in so I'm going to give you a couple of resources so the first one is unsplash.com whenever you put photography on your website you need to be a million percent sure they're using royalty free images you can't go to google and copy and paste images because a lot of them are copyright and you just don't want to get into any legal trouble you want things to be done a certain way don't go on don't go on these stock photography websites I've seen people copy them and then like there's a watermark over and go and photoshop and change you just don't do any of that it's it's not respectful to the person who's talking because it's their business and unsplash.com everything is licensed you can use it wherever you want it's all super high quality you can download these massive files so the problem with ripping other people's images is they're all low res anyway so they're not great but check out unsplash.com it's the world's best place or not the world but it's my favorite place for getting them royalty free images and there's so many that you can choose from to make your website amazing so check out unsplash.com and then the next thing we're going to talk about illustration so very similar undraw.com is another place undraw.com is a place very similar to unsplash where you can get amazing royalty free illustrations designed by a great designer there's so like I look at technology ones and there's so many hundreds to choose from and you can get them get the illustrator file you can change them a little bit I've seen websites where they change the color slightly on them but yeah the key is choose like you can even pay for them adobe have a great stock image portfolio if you have some budget a lot of people don't that's why i advise going to unsplash but just be aware that a lot of other people will use the same images if you're using unsplash or undraw and it might look the same as those websites so if you've got some money going over to adobe stock pay just some great photography it'll be a lot less used and more unique to what you're doing but these two things bring your website alive and you can even apply like filters to your photography so there's a design trend at the moment called duoterm where you're only using black and white and one or two colors and a lot of people say you use an orange as your color you'll apply like an orange filter across the whole image so even that the images all look different they blend in with the style of your photography on the website you might like the matrix you saw the green hue over the images you know it had that kind of film graying vibe so think about maybe you could apply this film if you want i don't i just use them raw or but think about like there's certain things when you use images so a lot of people have a hero like we talked about at the top which is image text so you can't just have text on top of the image it doesn't really work sometimes you need to put like a black in between it like a 50 black so it deepens the the country looking for contrast between your text and the image you can do it sometimes say you add like just a sky like a blue sky with a little sun in it you could put white text on it so this is the bit that i get everyone on stock is text over image especially when you're working responsively so you're going down to a mobile the tech like the image crops at different spots and the text will stack so that's why i advise you to put like just i'm not one of these people for fancy things i don't like a blare or anything just put a black and just put like a 50 opacity on it it'll look great play around with the opacity and it'll make things better for you so they're all the principles i've got written down i hope this lesson or this introduction to ui language or ui design has given you like a taste for it so just think about it you know it's all about reusability simplicity accessibility fonts colors images emotion bring all those things together don't make it too complex make sure your hierarchy is right i'd say that's the number one thing make sure it's simple make sure it's readable elegant and you know you can create a lot of great designs by being simple and allow your artistic flares to come out and other things like posted design or things where people aren't really using them but they're again a bit more emotion from them so until next time guys keep designing and keep things simple