Transcript for:
Principles of Graphic Design

I'm reading my 20 years experience as a professional designer to share with you the fundamentals of graphic design layout color topography in this Mammoth 3our compilation we've created my most valuable videos on the subject videos which have already enjoyed over 1 million views into a collection which will take you from Total beginner to a designer who's familiar with the essential principles we'll cover how to choose fonts and types set them how to select colors using grids key design vocabulary and many other tips along the way first up are my nine principles of layout the concepts that inform any successful composition this is the first in a series of videos on the principles of layout and in this lesson we're going to cover the first three ideas with examples just as a musician learns their instruments so they can more effectively share their Vision these principles provide uh boundaries within which creative expression can happen they're not designed to limit your creativity but to provide the opportunity for expression while still allowing you to fulfill the brief you've probably heard of these and we'll get into some more of the less talked about ideas in later videos but it's amazing how often these basic principles are ignored resulting in ineffective or just plain ugly designs so I'll introduce these three concepts very quickly and then show you how they all work together in tandem with some examples number one is focal point and this is the center of Interest not necessarily the center of the layout and this is the location to which your eye is drawn so for example here we have a white circle and it's right in the center of the layout but if we move this to the side it's still the focal point now obviously when you're watching this video you can see me as well hello but considering this layout it brings you over there even if we have multiple elements within the layout we're drawn to the filled Circle rather than the stroked ones it's solid it has more presence so that's a focal point could also be where things meet so here the point at which the two lines intersect is the focal point and you see this in things like photography so a well-known principle about focal point is the rule of thirds and photographers are taught to do this early so in this image the bird on the left is placed in the center its head is placed in the center center of the frame vertically and horizontally whereas on the right not only can we see more of the bird but the composition is more interesting because it is placed along these grid lines so that um its head or kind of that that point of weight around the neck is placed in the top third horizontally and the right third vertically and it makes for a more interesting image than the one where it's just in the center and you can apply this this to layouts too and we'll see that as all the principles come together at the end but let me give you these quickly number two is whitespace and this means a quiet areas of visual rest which give you other elements room to breathe and we saw this in the photograph of the bird the Blurred out background here provides the white space white space doesn't have to be white it just has to be a a quiet area and that allows us to focus on the part which is sharp and in Focus which is the bird itself so just as music needs Dynamics that's loud and quiet layouts need white space the impact of the orchestra at full volume only works in a room where the Acoustics are sufficient that the orchestra can play quietly and softly and uh we have that different feel and then when they burst into life with an incredibly loud powerful Dynamic it has that impact and it's the same with the layout areas of quiet areas of white space allow other elements to come to the four and it makes them more interesting it makes them easier to navigate around as well and the third thing before we bring these all together is hierarchy so this means giving priority to the most important elements if everything's loud if everything's on 10 again like music then nothing is emphasized when you're mixing a track you can't just turn up everything louder just makes a wall of noise so some things have to come to the four like when you're listening to pop music the lead vocals in the four and some things have to be more to the background and sense of hierarchy and it's the same visually now this is design 101 I appreciate that but how often is this ignored in the real world you want to orient your user that means let them know where they are and then lead them on Journey if you go to a a map maybe you're walking around a city as a tourist the most important part is you are here so they need to be oriented and be able to get their bearings of where they are the layout where North is perhaps and then where they want to go and with hierarchy there's obvious things like headlines tend to be more prominent than body copy uh but let's have a look at some examples so here on this hero section for this website the dominant element the focal point is the camera and let's just annotate this the camera here so this is the dominant element this is the focal point and then there's plenty of white space around the image but also around uh all the copy and such so it allows you to to uh to read it it gives parts of rest within this composition and the headline here is clearly more more prominent than the body copy underneath and so there's a clear hierarchy to it as well as a clear focal point so maybe with this next uh layout similar with this next website again so this time we don't have just a plain background the photograph fills the entire background however there's still clear areas of white space within this Photograph it's nicely composed so that the cliffs really stand out because the Sea and the sky give those uh White space areas but then within the quiet areas there's been space to place the logo the navigation the headline and the call to action very clearly so we see this image we get this feel and then we read the headline and it gives us a sense of the kind of website that we're on uh straight away similarly with this magazine layout we see first of all the focal point this big photograph which expands over from the right onto the left Page um of this Arch and as you're flicking through the magazine this catches your eye as a uh an eye-catching uh focal point for this photo essay so it's going to lead you into that so you see the picture and you get a sense or this is going to be something from this American Wilderness which it is then the headline is clearly uh more dominant than the body copy and there's also areas of why space not every cell within this grid has to be filled and that gives chance um for there just to be more of a sense of rest and it gives it a more of a premium relaxed feel to it as well now we can see this these are madeup examples okay that are quickly put together but you want to train your eye and be so that you are aware of these principles while you're learning and so that when you look at a layout you can see them at work and you can understand uh why a skill designer made the decisions that they did so let's look at some real world examples so this is the hero section on the figma homepage so straight away we see the headline it's at the top it's big it's bold now I've got a massive 5K screen here so we see quite a lot of the image but maybe on a smaller screen you just see a little bit of the screenshots here at the bottom uh below the four but we see the headline and there's plenty of white space around it and things are sensibly placed and they're not crowding each other so we get the concept of what figma is about they're making their unique selling proposition the collaboration aspect so that's very clear at the top uh and it leads us down through this same with web flow very similar they have a headline with with figma it was black on white here with web flow it's white on black or very dark and that's very clear and it's not crowded out by imagery the site you want without the dev time their value proposition is very clear and their logo is appropriately uh small there's enough clear space between they make their navigation very simple as well it's just a login or register so that you are drawn to these key elements and they're able to get across their value proposition before encouraging you to scroll down the Page by showing you within the app now you're probably thinking these are both in the design community of course they're going to have great websites and more importantly they're going to observe just like very basic principles of design but what about the Panton website I mean what is going on here like I come here and I don't know where to look there's so much going on I've got to work I've got to force myself to to look around to to figure things out what is the focal point here perhaps the light Booth over on the far right it could be this but we've got this type in the center so that's like in the center at the top so I'm sort of drawn to that but then the biggest headline is here so I'm not really sure I'm kind of all over the place and this hero section uh which is actually a carousel so these are rotating uh which will distract you uh even more so I've decided take a screen grab for you guys but then below we've got like a big solid rectangle here so this is very heavy and this has got like one 10 images in the thumbnail for this video next to something on a colored background I mean this types in all caps and colored up two things that make type harder to read just so much going on it's close to this now so it's competing so if they were just go back to these very basic principles focal point hierarchy wh space if they were observed and panton's value proposition in the sense of their brand came across I mean this is a brand for designers exclusively fashion designers interior designers graphic designers so it needs to look good it needs to feel good and Panton do a really good job with their products and their merch and that's not coming across in their website and yes they have products they need to push and things they need to talk about but that could be done in ordered grid layout step by step throughout the website or through a easily uh navigable menu but to arrive here this as a layout is uh an example of somebody not observing the basics I've got three more principles for you in this video number four on our list is grouping instead of spacing elements out evenly gather things that belong together this helps a reader make sense of the information we commonly see this on websites so the navigation often appears at the top the items are together and here we have this on the dribble side next to the dribble word Mark navigation to the different areas in the top right we have some separate items group often you get a search or a sign in or a basket on an e-commerce shop then below that we have the hero section we have have their offer their proposition explore the world's leading design portfolios headline and a by line and a call to action with some imagery next to it white space around it clear focal point is the headline things we talked about in part one and then below that are what they call the shots all the uh different uh designs placed in a grid so there's a clear grouping there of the navigation to together at the top then the hero section and then the grid of content below it and that might seem quite obvious but it's it's something that often when you you you have a lot of information from a client uh you need to do and it will help you graphically make sense of things there's a lot of messy posters out there but in this one this poster has a prominent headline the artist name and the Practical information is grouped together at the bottom the ticketing information on the bottom right and the when and where on the left and this helps emphasize what you want to emphasize and it also makes use of the next principle which is scale now a good way to example the uh explain this sorry and Rand did a great little short on this is if you have uh three elements that are all the same size a better way a more interesting way to present them compositionally is to have one large one medium and one small to have things at different scales so that is shown in these posters by the American studio dkng and this gig poster for Jack White the illustration is the large element the arst name medium and the information at the bottom small and the Sim similar composition is followed this next example this poster for the decemberist and lovely illustrative work but the composition is really vital to making these things work and that sense of scale makes it more interesting more dramatic more aesthetically pleasing so employ large contrasts in size if you want to add drama try huge headlines or small captions on images or full bleed images next to layouts with lots of white space these sorts of tricks you see in uh fashion advertising things like that I mean just grab any design mag or fashion mag I got Port magazine here in the studio and like the first advert sprad when you just open the inside is this Hermes ad and we have a lot of these principles we've talked about here focal point the model uh employing the rule of thirds uh there that we talked about in the last video but also scale so this is a full bleed image but it actually almost bleeds off the edge you know cropping uh off the model's head and body but then this small caption here helps emphasize uh that element of large scale so try out these kind of things on the web something like Apple's website the iPhone 13 Pro page we have the scale of the phone at this huge macro size um something more visually interesting and as you go through the site you see like the scale of the close-up shots uh with shots of the entire device with white space around it and as you move through a play with scale we have larger type uh for a paragraph or then we have this area where we have a dramatic difference in point sizes to produce this dramatic effect the headline is much larger type size than the body copy here and we also have this uh scale principle of large the photographs medium the headline and small the body copy and this site also we we we'll go through it in a moment makes use of the sixth principle which is sequence now a video editor understands the power of sequence how you transition from one shot to another do you go from a wide shot to a closeup uh the way things are moving if they're moving from perhaps left to right how does that affect the next shot if they're then moving from right to left will that feel a bit disorienting and a movie that is edited well tells a story and it leads us through and the sequencing of shots is really important to that and we need to think about that too as designers when it comes to layouts so if you're leafing through a welld designed coffee table book uh you have this cinematic effect because the layout moves around uh whilst leafing through although it's perhaps all or should probably be designed on the same grid but that little bit of moving around adds that visual interest it makes it more cinematic and web designers should think similarly about a user scrolling down a page so each panel uh whatever's in view in the window shouldn't be considered in isolation but it should work both in isolation and as part of a sequence uh telling a story so let's have a look at that on uh a couple of websites right now maybe first of all with that Apple website for the I3 Pro and as you scroll through you see these principles of grouping obviously the menus group together at the top and things like that uh but even the little you know links and things and the idea of scale we go huge type and then we have smaller type on these captions and the idea of sequence each panel uh looks well by itself you know the device dramatically on this big white field uh but then we move into uh full bleed grid and again we have those scale of the the closeups and the full wide shots uh on each of these rows and as you move through the layout's moving around and we have have all these principles employed but the sequence is telling a story and by being consistent with this very simple black and white color scheme just using one font and you know uh the consistently uh cropped images and such like that but it allows you to have that consistency but also interest because the layout's moving around now we've got overlaid images uh which is a new element you know we've got different color backgrounds as we go through and they each look strong as uh they could almost be posters each individual uh panel but they also sequence in this uh really interesting way because it continues to move around and keeps the reader engaged uh with the page let's have a look at something with maybe a little bit more of a a smaller budget this side stand with Ukraine and this is about uh sharing information uh from the war and we have these principles here grouping obviously we've got a top menu then we have sort of a navigation through the site here across the middle and and the sort of information on you know the time at the moment in keave and how many days the war has been been going on and such like that but these other elements of scale and sequence are particularly done well on this site so as we scroll through we see these images uh you know come into view but underneath as I I move these speech bubbles out the way uh we see a a large quotation in the background so there's a definite difference in in in point sizes here and again they're using sort of larger paragraphs next to smaller captions and then we have this huge date in the background which is bleeding off the page as we scroll the 24th of Feb comes into view and even the composition with these images uh moving through you know they off axis you know bringing a little bit of Interest following the rules doesn't mean you know boring boxy layouts and I think this uh shows here but it's an element of of sequencing it feels this storytelling like these images being thrown down on a table or something it feels like uh this thing is developing day by day as we are learning more about the story exactly what is uh happening it's really clever actually this site I recommend you you check it out there's this little um if I can get the menu to appear at the top here you can switch over to Russian truth instead of world truth and you can see sort of the alternative narrative uh that's going on and these you know quotes from Vladimir Putin and this kind of thing and their images uh from from uh the scenario so uh really interesting site we'll put a link to that down in the description but uh let me encourage you to think about as you're looking at your own designs and as you're observing other people's designs to see these principles in action number seven is alignment and you'll see all these come together at the end but alignment is arranging items on vertical and horizontal axes so with body copy we generally want to align that to the left that should be default that looks the best most of the time you only have the rag on one side and it's the most legible it's the easiest for people to read now you can Center align for short sections uh that can definitely work write alignment occasionally for compositional reasons for very short uh sections Justified text wouldn't generally advise it on the web can work in print but you need to be a skilled uh designer to fix all the rivers and different issues that's created in Justified text so you need to be a good typ Setter to do that so in general we left Aline and with all other elements there should just be some uh element of decision making seemingly random alignment looks amateurish now we can have compositional ele uh alignment for headlines so everything doesn't have to be you know Barrel straight down the left or centrally you know headlines that are seem to be like off axis on different lines or different angles and things can definitely work if it you know fits with these with these other principles but I'll show you some bad examples later as well as some good ones and hopefully that'll help uh bring it all together uh let's have a look at a website where this is done well and this is for gly type who are a type Foundry and this is their kiosk where they sell little bits of merch and although this is a very simple website the shall we accept cookies soon as it's a tight founder we will it the alignment is very deliberate so at the top where we have the name gly Chaos and then shopping bag on the right there is this rule horizontally which helps uh you know that this shopping bag doesn't just it doesn't just float around in space but it helps emphasize the deliberate alignment it's aligned to the right and it's also horizontally aligned along the same line these uh navigation to these different items are align to the left all the information here the headline of the product the price the description Etc is left aligned this button is the full width of the column in this case to emphasize that uh the layout in columns and you can even see uh with them being a tight Foundry hopefully they employ these principles but even within this actual uh document you can see these rules that are emphasizing the rows and the alignment is very deliberate here even uh throughout this document obviously you know with it being a type specimen they've you know uh kind of used all of the space and and that's kind of thing but they're still very deliberate some of the principles we talked about last time like scale and sequence on display here you see again in this type Library the rules everything aligned in a very consistent manner it looks very deliberate even when you go down to the footer the information uh below the line in the footer is on the same columns as these products here and it makes it feel very consistent and deliberate and it can be a challenge on the web with alignment because you have different screen sizes and such and you need to create responsive layouts but each screen size should be cated for and checked carefully to ensure that the alignment looks right in all these different places the next principle number eight is balance how do you make things feel balanced well for a lot of people they do it by symmetry symmetry is often employed because it's the easiest way of achieving balance and Center alignment which we talked about being suitable for certain formats short sections of text but symmetry is kind of a lazy not very interesting way of uh achieving balance and again with text it doesn't look the best it's not the best solution for for longer ranges of text so asymmetrical layouts which is the one below these are more flexible and they often look more elegant so you simply need to use counterbalancing elements to distribute the visual weight so in this example of this magazine this composition of this photo essay is more visually interesting than a symmetrical one because or one with all the images the same size because it's been arranged deliberately to achieve balance so the model on the right hand page is looking into the layout and is placed slightly to the right of Center within the frame the her gazes in the direction of the top image on the left Page and then the bottom left image is there to balance the composition across the spread by adding weight into this area and this layout was created using our final principle number nine grids command of the grid allows you to achieve all of the above it's the most useful tool for the designer who wishes to produce an effective layout the structure it creates order it conveys confidence in your work I grabbed another Magazine from here in the studio took a quick snap of it and you can see here this grid layout perhaps on display so on the right we have a full page image and on the left page uh we have the type uh but if I've overlaid you know roughly you know this is an image with the pages folded but you can see there's a seven column grid so each of the columns of type actually span over three columns three and three and then the one in the center there's a little box out caption which has then been Center aligned so there's a combination of different alignment going on here as well we have kind of a center alignment really because uh at the top where it says big interviews Global the section of the magazine and then below that the headline of the article and the by line and then that caption I mentioned so they all align on that Central Access and then the columns at either side are Justified so but we have the balance between the two because it's it's heavy with type and and then this full page image uh on the other side so so these principles of alignment and balance and grids are here as you cycle through a later page in this same magazine you see the same grid the seven column grid and again I've done this roughly there's probably gutters Within These columns that's the the space between each actual uh column you'll see that if you set up your columns in something like Adobe in design for print or figma or XD for the web you'll have that option of the gutter the little space in between check out Ran's video on figma that he produced recently if you want to look at how you set up those columns and and lay out a website but here what they've done is the type columns are actually left aligned with a rag and then they are two columns wide instead of three as in the on the uh lead page for the article so they've got three columns of type here you can see how images are across two or three columns on the left Page and they might span all seven like the one on the bottom left so with a grid you have a lot of options uh to uh play with in your layout to give interest in the last video part two we talked about sequencing a layout that moves around as you cycle through gives some interest or you scroll down similarly with the example we showed uh last time of this coffee table book so with a print or some sort of fixed layout like a PDF or something it allows the designer to set margins and row H as well as columns in a standardized Manner and that's difficult to achieve sometimes in responsive design although we saw with a grill type example you know making sure we take care of that horizontal alignment as well can produce a really pleasing result so every module in a grid doesn't need to be filled it's usually preferable to leave some empty we saw that in the magazine and we see see that in this book example another book I grabbed from the studio this is a book on the architect deed you can see just having some white space allows you to achieve you know a a balanced feel even if it's asymmetrical I mean this layout is symmetrical in this instance but if you see another spread from this same book this time the image is bleed out over the margins so there are different options you can have within the grid and having the Grid in position allows you to then make use of all the principles we've talked about using a grid does not make a good design it's a tool to help you achieve uh suitable result and tools are brilliant tools what we use you know musical instrument is a tool to make something that sounds beautiful you know uh a screwdriver is a tool for fixing screws you get the idea so bearing in mind all the principles all nine principles that we've talked about uh use your grid to to achieve these things to find you know that suitable Point focal point that white space around it you know group things together along that grid layout it really helps with alignment and achieving balance and those kind of things but you need to Bear all these things in mind you can't just uh plunk things into different cells and think hooray I've achieved a great layout still need to choose you know make decisions about where the focal point is and and things like that so let's have a look at a poor layout often we see these things think yeah but what about when it's not working what does that actually look like well it's hard to find these things I had to do a bit of a bit of a Google and uh I found this one for a student Christmas party and where to begin with this let's see what you can spot but let's move through these nine principles I mean where is the focal point I have no idea Whit space there's none of it it's like let's cram more stuff into every little area hierarchy I have no idea what's most important what really stands out I kind of see Walkabout in the middle which is like a pub a club venue I see Santa I see Chris I have no idea grouping this would really benefit from grouping remember our nightclub poster from before uh from I think might have been a previous video we grouped together some of the information the when and where the ticketing information information this could be pulled together in different sections to help it scale this is a big problem there's not enough of a difference between the point sizes now I'm looking at it I'm seeing all these other issues like curing look at the word party just what's going on with that P and the a but the point size is the scale so the scale of the imagery which is you know is it in the background is it in the foreground the logo and all the different type too similar there's not enough of a dramatic difference in scale to make more of a pleasing composition uh sequencing is not really relevant because it's supp poster alignment what what is this aligned to I have no idea it was kind of a compositional alignment with the headline but then it's it's all over the shop isn't it balance no just fill the spaces grids have definitely not been used so it takes a designer to you know really you pull this apart and and make sense of this and think about what this this poster is is trying to achieve and trying to do I mean you look at um really elegant design posters like the swifted project from Mike Joyce who's the owner of stereotype design in New York City and I know you're probably thinking okay yeah but this is for you know fans of music and design you know kind of obnoxious design fans who look down on the sort of gy you know ghost designs of the the previous mess yes but these principles are in play and you could do something that was maybe looked more engaging and fun for students who wanted a good night out while still applying these principles these posters have a clear focal point they make good use of Whit space hierarchy grouping scale is dramatically employed here the large graphic element El and and remember last time we talked about the uh large medium and small elements that's what we have on each of these posters and obviously he's used the grid uh to help lay things out and uh achieving balance throughout these designs so this is you know kind of a best practice example of how you do that but what about something like you know a post is one thing how do you do that through a website and bring all these things together I think some of the examples we've talked about in previous weeks display that but let's have a look at a another one right now let's go to another website away from this gly type website over to the website for the recent movie let's just refresh it House of Gucci this is kind of a minite uh to help promote this film and we have that dramatic sense of scale with this large headline uh and it's very large it fills the page but as we move through every panel uh has these principles in mind it tends to be you know Center aligned which works in this uh sense but we have this sense of sequence like if we hover over something other images come through and each panel so each section of the website you know becomes it it's its own little area and we get the sense of that by each one having you know a panel as we go through so if we click on one of these costume design there's lovely use of Whit space here to really let this headline uh stand out it's very clear we know what it is it's this person I guess the person in charge of costume design for the film uh talking about it here she is she's done a phenomenal job and the sense of scale the different Siz Point sizes as we move through not too many uh but just varying it from the headlines to the captions uh to the body copy from the interview obviously they've got phenomenal photography and such but it's laid out again we can see a grid you can see here the structure uh the gutters here between the rows and columns and these nice box outs and this is sequences we move through and again you don't need to fill every cell in a grid leave some empty this creates white space asymmetrical layout so watch how it balances this one was on the left the space here then this image is on the right right and it all works to really tell a story and give a really pleasing experience for the viewer because there's enough white space that um it feels calm enough for me to navigate through to spend some time reading this interview so when you can bring all these elements together that's when you can do things uh that are really interesting and uh we'll just bring a bit of uh joy to your viewer and your user as they move through your sites here in figma I'm going to give you a beginner's introduction to grids in digital design then we're going to jump into some more complicated editorial design style grids so you can follow along here in figma if You' like to I'm just going to make a new frame for a desktop size uh frame frame frame and here we can set up some grid so you can see here in the right column we have layout grid so if we click add it adds a grid in here and this is a simple uh modular Grid it's like a baseline grid of 10 pixels so it's creating all these 10 pixel squares and this kind of thing can be quite useful for things like apps or when you're designing given in a website icon design having some sort of Baseline for the size of things so you might have like a line you know a rule as we call it in graphic design you know that's always going to be you know maybe 10 pixels high and we maybe Use multiples of that so 200 wide 10 high for example for this um shape or let's just add a fill to that so we can see it that's not white and then you might you know say okay but my buttons they're going to be a different height they're going to be like 30 pixels high or something like this so if we zoom out and you could develop things along this sort of Baseline but to give us something a little bit more useful we also when it comes to something like web design and getting going as a beginner if you click on grid here you can see there's different types of grids we can also have a column grid and you can choose here the count means the number of columns so let's type in 12 columns you can change the color here if you want to uh have a different color for the guidelines for the columns and how opaque or that is we can make it a little bit darker and the type so this is stretching them across with a gutter a space in between each column the white space here of 20 pixels so we can change this however we want we can Center it so then now it's not stretching them it's giving it an absolute size so here it's 10 pixels if we change that to 100 you can see how they would stretch across the page like that and we have a little bit of margin autogenerated at each size now 12 I selected is a common number for columns and the reason is that when you're creating uh something with 12 columns you can have uh lots of different uh multiples 12 has lots of factors so here we have got one across so we can whoops we can do this as 12 I'm just using the command D to duplicate to repeat the action uh so here we've got if we just turn this grid off which is shift G 12 items that are one column wide each then we would maybe do something where we had two columns if if I can do this exactly to we've got six items that are two columns each then we could have three column wide for four items we could have four column wide for three items and we could [Music] have six column wide for two items and we could have 12 column wide for one item I've not quite done that exactly we go and also obviously you could go across the whole uh size of your frame as well beyond the margins so there are lots of different options here because of all these different multiples that allow you to uh create things within this grid so when it comes down to creating something more useful you know we might for example have a little square like this it's not quite a square is it let's make it square and then maybe have something that spaned over a couple of columns next to it you know may be some tie might be some points in a in a list something something like that so there's better ways to do these layouts but we're just demonstrating uh the grids so you can see you begin to you know create different little things like like this um that different options you might have an image for example that spans over uh more columns you know to halfway then some text to the side of it you know using the columns even as as uh spaces in between you know we could do something that was a couple of rows of text few rows of text over a couple of columns so you can start to create these different kind of things uh in digital design so that's just to illustrate the idea of a 12 column grid setting that up in figma how you can use that to make sure that things are aligned properly but I really want to get into the meat of this video now showing you how to set up modular grids and then L out your elements so for that we're going to jump over to Adobe in design so once you're in in design go to file new document we're going to set the intent as print number of pages let's do seven to give us some to work with facing Pages which is going to turn these into spreads the page size is A4 and the orientation as portrait we'll start with one column and set them up in a moment the margins again leave those as zero or set them to zero and we'll set them in a moment the bleed I'm going to make three M just for good practice that's what we should normally do in print but it's not really necessary for a demo and then click okay then I want you to select the parent now the parent is the template for those unfamiliar with Ines design so if we draw a box here which is cyan then that's going to appear as you can see in these thumbnails here on all the different pages okay let's delete that thing now make sure you've got both selected here you can just click on them hold shift click on them and then we're going to go to layout margins and columns so we're going to set our margins now so a top margin I'm going to select as 10 mil just to make this nice and easy and you can see here it appears at the top of our Pages now the bottom layout I'm I could set this is 10 mil but when you have your top and bottom margins the same it gives the effect of the layout falling off the page and all margins if I click this make all the same being the same size it looks very default and we want to add some life into this composition so best practice over hundreds of years of type setting tells us that we want to change these things so we're going to change the bottom margin to to 20 or double what the top margin is these aren't exact relationships that you have to use every time they'll give you an idea of the principles uh the inside margin I'm going to make a 1.5x so 15 mm and the outside I'm going to make the same as the top margin now you can set the columns here but I don't want to so I'm going to just leave that there and then I'm going to click okay and you can see the one column grid that we now have and how it's uh sits on the page if we draw like a black box just to really emphasize how this looks I'll put that onto both sides I'm just going to hold option while I click and drag that over I press W to switch to preview View and you can see how the area within the margin sits on the page just a little bit more uh interesting and dynamic than all the margins being the same so now let's set up some columns in fact let's save this thing and I encourage you to do the same thing we're going to go to layout create guides so I want to do my columns first and I'm going to select five columns on each page and the gutter which is this space in between the smaller space so you can see if I change that to something huge see it becomes where we can't even recognize the columns or something very small but I'm going to change that to 10 which is the same as my outside margins my my outside and top because I want to just have that feel of of them being the same between the images and such and then the rows I'm going to do six rows now the gutter here it doesn't have to be the same as the column gutter just as it didn't have to be the same as the outer margin size you can do whatever you like with this it depends on the requirements of your layout but as we're learning here how to set these things up I'm going to put them all the same as 10 and have that nice consistent margin around items here now make sure you fit your guides to the margins that you've set in this instance if you want to follow along if we do it to Page you see how they move around margins page that's going to start at the very corner of the page so within our area inside the margin this first cell is going to be a different size to the next one so make sure that's to margins and the reason I created the guides in here and not in the margins dialogue box is because I have this option here of removing existing ruler guides and it's easier to I find to edit via here so I'm going to click okay and that is our basic grid set up now I promised you a combined grid so I'm going to go layout create guides again and just do some simple things I'm going to select two columns with zero Gutter and that is going to give us a center line I can see if we just turn the preview on and off on and again align to the if you do that to the page that's going to be off to the center versus where our main grid is and it's difficult to see here where is the cell the gutter so make sure that's to the margins and we know we've got a center line on each page which I often find useful and one more thing I'm going to add another guideline at the bottom to align my page number two now you don't have to do it this way again but go up to to the ruer here click and drag and you can just drag guidelines down now I want this the same 10 mil from the bottom so that's 297 which is the A4 size so I'm going to do it at 287 did that move it'll tell me up here it's always hard with a stylus when you let go 287 on both sides so if I do want that same margin at the top and bottom just where I sit my page numbers I have that option so let's do that now I'm going to select the type tool I'm going to click and drag a type area into here and just type in a default page number even number on the left so I've type 28 I'm going to align this to the bottom and range it to the left when you type selected now it doesn't really matter what font you use something similar you know around 10 point 9 point something like that is fine for now for the purposes of this demo I'm going to drag a copy box over here and I'm going to arrange this type to the right this isn't really an InDesign demo it's a grids demo but I will mention a few things about IND design um because I know some of you will be unfamiliar with it so that is basically setting up our page numbers what they would look like so overall I'm quite happy that now it does look like we're going to have the feel of the margin being the same all the way around but because this will just sit in this field if I draw this box again it'll be okay because you will still get the feel that the bottom margin is larger as you can tell here with the page number being a small element with it within there so to make these actual page numbers what I'm going to do is just delete this or select it and go to type insert special character markers current page number and you can also see there is a shortcut for that which is option shift command n on the Mac and that's put it as a because you see this is a parent do it here with the shortcut a a but if we go down to four and five you can see there six and seven and I'm just double clicking on these previews our page numbers are in there fantastic now what we want to do is bring in some content and make this a little bit more interesting so if we select page two and three what I like to do with content is add this in to the side and have it uh close by so that I can know what I'm working with and the elements that I have to hand so I've prepared a little bit of copy and a few images so here's a headline this is for our Magazine spread so I'm just going to put a test text box here let's just bring a a couple of three text boxes and if you want to type this out you can it's very short I don't need to uh send you this this is just something made up to allow us to do this layout Okay so we've got this type and then we have some imagery which I'd maybe pull in but I I've just gathered a few photographs that we're able to use so when I have the content and some idea of what we're working with maybe we'll this is going to stay small so maybe let's just make these a little bit bigger just so we can get the sense of the hierarchy that this is going to be the headline these are the droids you're looking for and then this is going to be like a by line and then we've got the credits for the writer and the photographs for the article and then we'll probably add you know some body copy with some placeholder text so once I have that there I like to think about layouts and different options now for this I tend to jump over onto a sketch pad with a pencil and paper now here I've got a grided pad and I've drawn a bunch of layout just different options that might work for this now I've got the Grid in mind I know I'm using this five column grid so because I have some experience of grid layouts I know kind of how it's going to feel how it's going to work together but I thought about H what if it was a four column Grid or a six column or a five column grid and just done a few ideas this is always something I can change if you're setting up a new grid for a new project but it's just to think about some different compositions now even if you're not familiar uh with grids and you're not really sure where to start it is just good to start to do some layouts based on the things you know the things that are important well what about the hierarchy the headline needs to be quite big or maybe some imagery maybe that's going to be the largest thing and in most cases here I've got the imagery is the largest most dominant uh element then the headline and then everything else uh becomes the tertiary elements so I'm going to look at these sketches and now do a few different layouts based on these sketches maybe with some boxes maybe bringing in some of the content and see how we can actually set these items out across our grid I've decided to speed up this section and add the commentary later because it was a bit slow in real time but other than that there are no other edits there are no Cuts here here this is my first attempt at laying out elements in this grid so here you can see I'm doing some type setting with a large headline sub headline underneath and the grid is really useful at just giving you a place for things to belong things to align to again based on sketches I'm just looking back and forth here to my sketch pad and seeing which layouts I want to try out you can see here the larger margin at the bottom and the feel that that gives on the page and just trying different things to achieve balance to achieve a nice composition within each layout now I'm trying actually spreading over the fold in the middle which is a nice technique of the photograph going through the fold and again the grid just gives you a nice place to align to making sure there's that gutter around the tipe so it's still clearly legible trying a bit of a different layout here with another image and this is again based on a sketch I've got one where there is a a large headline of just one word that I've decided to span across the full width between the margins so I'm just drawing that out here in in design made that into curves so I could just bring it to the exact size and then this idea of an image within the grid that is overlaid with the headline and it just shows you how quickly you can achieve different layouts when you have a grid because it's suggesting things to you and based on the sketches that you've already got it's very quick to begin to pull things together and make sure that things are in alignment and achieve the right sort of feel that you want and the balance that you want on a page I thought now about maybe the next page in the article after the opening pages with the title you'd maybe have some sort of photo spread have some more copy and want to introduce some more images so I'm just laying them out here and you can see I've got a column with three rows of images and then the column next to it with two and this just adds a little bit more interest that I'll just created an example here where is if we had three and three it's a little bit static looking and it just adds more interest with what we have on the right and that's the great thing about grids they suggest this kind of thing to you and it's very easy and quick to set these things up having the correct margins around everything and suggesting this so now to achieve balance across this spread because the images on the right way over to the right and I'm not using the left column on the right hand page I've decided to have this image which spreads right off the page on the left and so even though that it's smaller than the others it distributes the visual weight by pulling something over to the left so it's distributed across the spread and here I've got the The Columns of text that run down and this was all done in about 18 minutes like I said first attempt at doing these spreads and this is not finessed if this was going to be a final magazine I definitely want to add some more detail maybe some little titles for each section but it shows you how quickly in just 18 minutes you can lay out a few sprad and you can begin to get a feel of how something will work within a grid and we can add some interest later next up you're going to learn how to speak like a professional designer but as you've already watched a solid hour just on layout I can tell you serious about improving your graphic design skills check out our Core Design skills program where I not only teach the fundamentals of design in a systematic way you'll also have the opportunity to complete assignments and receive expert personalized feedback on your work from our mentors of flux Academy adding practice and feedback to your knowledge of the principles is how you really get better there's a link in the description so have a look and see if it's right for you typography is the art of arranging type to make the written word readable and Visually appealing you need knowledge of type setting type design and type faces type setting is the process of laying out text on a page to do this well pay attention to the point size ensuring it is large enough to be legible but not too large you're looking to achieve an ideal line length because too many words on a line puts the reader's head on a swivel leading known as line height to web designers is the vertical space between each line of text tracking the overall letter spacing how far apart each character is from one another and kerning is adjusting the space between a pair of characters or glyphs you don't need to be able to design your own font to be a designer but some knowledge of type design is helpful know the features of the tight face is it a serif font that came with small Flex at the end of The Strokes or a sand serif without serif or a decorative like black letter script or handdrawn type dive into type Anatomy to help you analyze faces but you should at least know about ligatures that combine two or more letters into a single glyph ascenders descenders and x height the height from the Baseline of lowercase characters speaking of which what's the the difference between a tip face and a font the overall design of the set is a TI face for example elvetica but a particular WID and weight and emphasis would be a font like elveta Canoa bold condensed italic if you'd like to dive more into choosing fonts I've got a video called how to choose fonts which we'll link to in the description secondly color understanding color theory is crucial to creating captivating designs that stir and motion and deliver your intended message you should ensure that you're working in the correct color mode cmk for print and RGB for digital and be familiar with HSP Hue saturation and brightness think of hue as how we would name the color like green orange L Etc saturation how intense it is if you decrease saturation you add why these are tints and brightness how light it is if you decrease brightness you add black these are Shades to go further create your own palettes by learning about the relationship on the color wheel like monochromatic complimentary analogous Etc and the interaction of color the perceptual effect of the interplay of different colors when they are placed together in a composition yoseph Alba's book is the Bible on this if you want to take the next step I also have a video on how to choose colors composition how elements are arranged in a layout dragging things around at random is not the best approach adhering to design principles will produce a better result more quickly at design school they teach you the gestal principles of visual perception originated in Germany in the early 20th century ideas like proximity similarity closure continuation but as a beginner focus on hierarchy prioritizing elements based on their importance to guide the viewer's attention if you want to understand nine principles of layout focal point white space hierarchy grouping scal sequence alignment balance and grids and see examples of each I've got a a three-part video series on that too because they are terms you should definitely know the fourth area is image editing as designers we often work with images to enhance our layouts these could be vector graphics which are made of paths based on mathematical equations so that they can be scaled infinitely without loss of quality or they could be raster images also known as bitmap made up of pixels like digital photographs for example the resolution the number of pixels per unit area affects image quality and file size to ensure you're working at the correct resolution for your use case editing can involve adjusting the appearance of an image like color balance and contrast retouching stacking elements in layers and cropping removing The Unwanted parts to create the most pleasing composition if you want to go further have a look at my free crash courses in Photoshop and illustrator web now being a good web designer requires knowledge of how the web works you don't need to become a web developer but you do you need to know how to communicate with web developers good luck with that and have an awareness of what's possible on the web responsive design designing websites to adapt seamlessly to various screen sizes and devices has been mandatory for years now the digital design process usually involves proceeding High Fidelity visuals with wireframes basic sketches which outline layout and structure there's lots of acronyms in the world of web like UI user interface U X user experience CTA call to action a prominent element like a button which encourages the user to do something specific and CSS C cascading stylesheet and get it right the code that's responsible for the layout and styling of much of the web if you want to learn web design we have a free web design course playlist here on the channel our penultimate area is print now hold up if you're a digital designer print remains an integral part of communications and at some point you're going to need to print something and communicate with the vendor or print designer at the very least be aware of trim lines where the meteor is going to be cut safe area keeping key elements like text away from the edges so they don't get lost and bleed allowing your artwork to extend beyond the trim area to prevent small white borders showing throughout the edges due to the slight irregularities that occur when the paper is chopped after all this you might end up with PMS the Panton matching system which is a standardized color Library ensuring accurate reproduction they produce these books as well as fabric swatches for fashion and all kinds of other stuff it's the industry standard and if you're a graphic designer then get familiar with different printing methods too so at the very least you know what's possible for your clients graphic design movements and styles in any field you need to know some history and keep a breast of Trends this is true if you're fan of a sport a style of music or whatever industry you work in it's very difficult to communicate with others without this knowledge like being a basketball fan today but never having heard of Michael Jordan so this is going to be a very quick tour but here are some influential movements every designer should be aware of art Nuvo an artistic style from the turn of the 20th century characterized by organic forms and ornamental motifs inspired by Nature bow house originating from a German Art School between the world wars bow house embraced Simplicity functionality and geometric design Swiss modernism followed in the post-war era trying to bring order after the chaos its apologist advocated for the clean grid-based type of graphic layouts which went on to dominate corporate communication for decades postmodernist graphic design was part of the wider philosophical and cultural movement known as postmodernism in the latter part of the 20th century it found prominence and was marked by eclecticism and irony featuring handdrawn elements irregular collages and a disregard for legibility at the beginning of this Millennium skorm was the thing digital interfaces imitated the appearance of Real World objects to provide users with a sense of familiarity since then the web has led to an explosion in Trends which move at an Ever faster Pace although true movements take longer to develop and become recognizable as such firstly the First Act is before you start you need to answer these questions don't skip this to build a solid brief number one what constraints do I have there might be brand guidelines there might be limitations of a format for example in print then nextly what Guidance Do I have is there a written brief already what existing materials and resources do you have to work with do they give you any guidance in terms of your color choices number three what do I want the viewer to do so thinking about the action thinking about the purpose of this design and number four what do I want the viewer to feel what kind of emotions am I trying to evoke what moment is the viewer in when they're engaging with this design so answering those four questions helps you to build a brief and have some parameters by which to choose your colors so let's jump into the software and I'll demonstrate how we do this number one when you're selecting colors is to choose a primary Hue now what is a hue I like to think of this as the answer a 2-year-old child would give you if you ask them what color is this they wouldn't say Sapphire or Sienna or mustard they would stick to basic colors like green red blue yellow primary colors secondary colors and that's what a hue is it's it's the general sort of group uh whereabouts you are on the sort of color spectrum and you want to choose this based on psychology based on associations based on mood so color psychology is some prology need as a designer we have a free ebook on this which gives you a basic introduction to the subject and lets you know some of the representations like red is about passion danger love fire green growth Prosperity Health econscious sustainability blue trust reliability power relaxation peace so this will give you kind of an introduction to these ideas but you want to think as well about associations in uh different places different cultures like political parties where you are it could be religions it could be sports teams they have a particular Association and people feel very strongly about them so you might be careful what colors you're using in South Central Los Angeles or Belfast Northern irand or wherever you are there'll be colors to use and colors to avoid depending on the scenario so being aware of that when it comes to the design and where this design is going to go is an important thing but I'm conscious that you can't rely on any one element in design just type just color just your layout just your imagery to produce the desired effect it's all things working together just using yellow doesn't make something optimistic red dangerous purple doesn't necessarily make it Regal like this example I've got here in an illustrator the royal family to come across as Regal as Royal they may use purple but everything has to work together all the elements else it's not going to produce the desired effect so color is one piece of this so you should have made good progress at this point with this idea of choosing a primary Hue before you've even touched any software you're thinking about the psychology avoiding any negative associations or joining with positive ones the mood that you want to uh bring is it going to be a cool color like blue is it going to be a warmer color like yellow orange red and that should help you think about primarily where you want uh to go with this and then you want to choose that Hue and then move into selecting a particular color logically so I'm going to demonstrate that for you so here in illustrator I've got set up these two clothing brands and these are both econscious sustain able clothing brands that produce their clothing in an environmentally sustainable way and that is a key part of their offer and their proposition so when it comes to selecting a primary Hue and then choosing a particular color logically I like to use the HSB sliders which you can see here and this stands for Hue saturation and brightness so uh you can see how these work you turn on the situation it gets paler what we're doing there is adding white which which is making a tint we turn down the brightness we're adding black which is making a shade and so I like to select the primary shoe so do we want red or orange or yellow or green or blue or purple or pink for this brand well we talked about them being a green we use that as a description in in English if something's green it's environmentally friendly sustainable so we're going to go for somewhere around like a a mid sort of a green type color for this brand so then you would apply this and kind of see what it looks like so this is our primary color I'll make it the type for hip and the background for this clothing Collective hip is a a youthful young edgy brand for teenagers and uh people in their early 20s clothing Collective is a more mature brand for people who are maybe in their 40s so here we can see straight away that we have got this very saturated and bright green and for this hip brand kind of works already it's it's got this like very youthful feel to it so I'm happy with that clothing Collective not so much it doesn't jive with this word Mark and what we've talked about in terms of the target audience so we would probably want to dial down the saturation so it wasn't so heavy probably quite quite a lot and then also with this being a background I still this is kind of like a mink color now I don't really want that I want a Carmer sort of feel so I'm going to take the brightness down a little bit too then it's getting a little bit dark now because I've added black so I'm going to have to take the saturation down even further for it to function effectively as a nice sort of background color maybe the the brightness can come up a little bit so this is more the kind of feel that I'm going for so for the for ground which is still black I'm going to select this background so I'm starting from the same place and then just bring the brightness down and I've got something which contrasts you you might get to the point where it gets a bit too black and you want to bring that saturation up a little bit so there's a little bit of green in there but I think this just kind of off green thing so that kind of works for me I'd maybe go even even less saturated perhaps but we're getting to that kind of idea and this to me works this gives the right kind of feel that we're looking for it's more subtle with the green thing but they both have that uh green aspect but it's that's proceeding logically selecting particular colors because we're thinking about the contrast here between foreground and background we're thinking about what the effect of the saturation and the brightness uh produces a mood so we're not just saying green therefore we've done the job because it's eal conscious because this obviously next to this type it looks ugly but with this kind of type setting on hip it works so it's all about the the context and that's how sort of proceed through using these HSB sliders to find the colors that I want the ne the third of four steps is to then build a palette so you want to think now about how many colors that you are going to need so how many colors should you use in a design well you want to think about having options for a background and foreground colors if your type is going to be um in maybe a certain color I mean I tend to recommend using black for type or white on a dark background if you I wouldn't diverge much from that too much colored up type that's very saturated becomes difficult to read so just be conscious of that uh but you know we maybe need something else like if we're I don't know if we've got a button or something like that we we might want a color for that so let's let's pretend this is a button we'll just make it look sort of button is with this pill shape so this could work we could also maybe want another option for a different kind of button or to stand out a little bit more so we might be again pushing our saturation back up maybe a little bit of brightness just so it comes through and maybe just finding something that's going to you know really draw the eye uh and and bring us towards it so thinking about where you're at and the kind of design that you're doing you can establish sort of maybe some more colors some more options through a palette and I'll I'll show you another option in a moment with uh some more and how we sort of build that palette out but I recommend that you use uh the fewest amount of colors necessary so if you can only use a few colors that is better because there's less chance of mistakes and the more elements you bring into any kind of design the more like likelihood there's going to be a mistake so things aren't going to work well together so it requires some skill to sort of uh build out and use more and more different elements of different kinds so first of all you can start out with like one color plus black and white so this is a very effective technique you see it a lot with things like uh books so so like this kind of color scheme I should say like just like a a red with black and white on this cover got another one here and this is kind of a common thing that you see you see it with things like signage but also works and there's certain combinations like red and black and white or yellow with black and white which really works and there's a lot you can do with it immediately I've got some examples here on the web as well um this packaging here for Brooklyn Brewery for their pills no longer this is kind of a mustardy yellow this time but again with black and white and that is a very sharp way of uh doing it Borussia Dortmund the German football team famous for their black and yellow strip and you see here on their website they've brought that through all the way through so it's it's very black and white uh with using yellow as an accent for headlines or on some of the buttons and captions and that works really well Inter Milan another football team they've recently rebranded and they've gone for this very bright digital blue which was brighter than their previous blue and they're famous for their black and blue stripes and again this black and blue and white uh really works well together because the white can work over the black or the W or the blue so they make a big use of that in their interface obviously it's a lot in the photography of people in shirts but also here the next match is highlighted in blue the following ones are on the black background lot of the principles here also we talked about in the principles of layout series here on the channel if you haven't seen that you can see the use of grids here on this website you can see the use of scale with these large headlines combined with this smaller type and there's some uh really clever layout I really like this website but that's a really simple color scheme just one color plus black black and white is a really uh effective thing that you can do so what about if you want to now break out from that well let's look at some other types of color schemes so this is Adobe color and there are other similar and free tools that you can find online this one's quite helpful because it tells us on the left these different color Harmony rules in this column so here we've got monochromatic mono means one one color and monochromatic schemes are where we have a single Hue so if we change this color mode from RGB to HSB we can see all the way across the Hue is 2 for5 2 for5 that might be quite small on your screen hope you're not watching this on a phone you want me to see anything H but it's 245 all the way across but it's the saturation and brightness of change so one color we're using a single Hue all the way across but the variations of that and that's a very simple thing to do that's what we were just doing uh with our example with our uh clothing example where we used those other greens they were all one Hue and it was a monochromatic scheme to give us some different tints and shades to allow us to have different options within a user interface so that's a monochromatic scheme and it's it's important to to learn the language of design this really helps you as a designer not only in working with other people like your art director but also with your own thinking once you know the language it helps you to recognize things and and that deepens your learning so these let's just look at some of these some of these I find a bit bizarre like Square I'm not sure like to to get into this and apply this but something like analogous color scheme which is colors that are next to each other on the color wheels so like going from purple to blue or yellow to Green you know red to orange Etc this tends to give quite a sort of calming feel it feels like these colors should belong together and it's just like a broadening this kind of monochromatic type feel so it's it's often um easy to do something with this kind of uh analogous scheme so I quite like this and you can bring these in a bit closer Adobe color allows you to do this and you can Port these over straight into your Adobe software you can just copy these hex hex references into figma or whatever software you're using and and and you can go you know sort of wider it's not really an analogous scheme anymore you know very close just off from monochromatic and and and sort of broaden that so you can play around with that but that's a nice option I like using analogous schemes easy to make the colors work together another really useful one is compliment which is where you have colors that are on the exact opposite side of the color wheel and a lot of popular combinations you know christmy sort of Reds and greens a popular combinations like blues and oranges or of Darker blues and yellows you see these a lot this kind of looks like Ikea um so you get these sort of feel uh and these complimentary schemes where you have colors on the opposite side out of the wheel they give more of a vibrant kind of feel to designs I also like these split complimentary schemes where you go opposite and you don't go to the exact opposite but either side of that to bring a couple of colors there again you can bring this in aot little bit and that often gives you some uh really interesting uh options uh when you do this that's kind of ugly but there in certain places you get some uh different interesting kind of options uh there with the split complimentary I quite like using that as well so play around with this kind of thing and this will give you some starting points for building pet so let's demonstrate how we might do that so I've got a couple of Brands here one is coding Junior which is Hands-On coding camps for 8 to 11 year olds and then AR FCI artifici it's a terrible name isn't it I just made these up which harnesses the power of artificial intelligence for your business and these businesses are both in Tech so they have some similar features but obviously they have a different target market one is aimed at children and parents the other one is aimed at uh Business Leaders who would have the opportunity to make uh purchasing decisions about uh the partners and the tools that they use so because they share similar features you can pick up some you might choose some similar things so if we went through our process so first of all we're going to choose uh a primary Hue so I'm just going to turn the brightness up so this is off black and saturation so we can actually see the color throw it around the middle somewhere so I'm going to say blue because I'm going to think that trust is going to be a key element with both of these things because you want parents to trust that if children are going to a camp that it's going to be a safe environment and it's going to be good quality education and similarly with businesses uh purchasing and sharing their information uh with with you know AI computers they want to be able to trust that so this is going to be a key element so we might want some kind of blue and then so going on from that would be next to let me just saturate this a little bit more so maybe say here like it's nice to go maybe more towards the cion I I don't it just gives a little bit more of a just a a nice difference to it a friendliness to it rather than it being too much of like a royal blue so I would go for something like this and then I would think about this kind of scheme that I want to use so let's look at this cing junior first of all and maybe you know bring a couple of do you know what I'm going to do is just snap these things to make it a little bit easier so we talked about these color schemes so I'm just going to copy uh maybe like a reference here hex reference see if I can bring this into Adobe color where's our primary one here okay so this is our primary one here and I like this split complimentary thing because it gives vibrancy like complimentary does but I'm not sure about these kind of dark orange dark mustard kind of colors doesn't have the vibrancy that I want so I'm maybe going to split complimentary so I can get more of a yellow in there and uh it gives me some more options as well because I've got this orange as well uh in there in the mix so let's kind of see what we've got so I maybe just dial this and this this is where your eye and your taste as a designer comes into this uh there's always going to be that that element to it however many lessons that we teach I think somewhere around here is pretty cool so we've created quite an interesting scheme here it's also given us these shades for this yellow and this orange so I'll maybe just copy in the hex references it's probably as easy as anything for this quick demo so I've got the this yellowish one and then I've got this orange type one and what you want to do is is finesse this so obviously we're doing this for the purposes of a demo we're doing this quickly but I kind of like this it has that sense of like warmth optimism but also you know with the vibrancy you know across these these colors so I think there's definitely something in this but you'll start to finesse this once you bring this into your actual usage of where you're going to you know create this on a website or whatever your scenario is I think maybe is a background color you know I I quite like this so I definitely think there's something to this General Vibe black so I maybe thinking H is this is this going to be bright enough across this so it's having some some options we probably wouldn't use this as a headline maybe the orange we'd keep that in darker color um so we'd maybe like this but we'd maybe want to create some shades and some tints from this so may maybe actually we turn up the brightness turn down the saturation a little bit and and get kind of a color that'll work better for you know a button let me just try this it's going to contrast a little bit more from a black and so it's playing around with this kind of thing you know maybe we want an off black kind of kind of color um that is going to work that's going to give us some nice options for titling that don't look too black that's maybe it's even still too bright so it's playing around and it's using it in context so if you've got some illustrations you've got wider parts of your your interface it's just um playing with that and having fun with that to make that work now we talked about uh this other brand having some similar characteristics so what I want to do here is i' Maybe start from the same place and say okay these colors again for this brand but we need to make sure when we're building a pallet uh we have the right feel and we match these things together so what wouldn't work is when you have things these are all pretty high on the saturation and brightness uh is when you have things that just don't match up in the in the sort of tone they look odd and they start to look strange like if we had if we just bring these down cuz this is where I think this needs to go it needs to probably be uh a little bit less saturated um and this is probably more slipped there the feel that we want and it is a case of going back and forth on these things and you need colors with a similar tone so tone is like tint and shade together it's like adding gray so the blacks and whites just kind of looking like they're in the same place so you can see here now I've messed with this if we do like an rgp red and green they don't match with this blue and this kind of Goldy beige color here they just do not fit together so we need these things to all match up now we could make a green work in this scenario but we want to look at what's this like 570 let's start with that and sort of match these up and straight away that feels like it's it's coming in and it's going to match a little bit better and maybe desaturate it a little bit so it's not competing as much with this blue and and and it's playing around with these things and when you've got people watching you on video it always seems to be more difficult and slower but this should give you the sort of idea I'd probably go back to these original colors maybe the orange and again bring it more where it's it's in that similar sort of space and find in something where the tones match and this will give you more of the feel that you you're wanting and that and that you're going for so I think like if this was a a larger Kind of Blue Field then you can imagine more what this this thing's way going to look like if this was like an accent you can see this sort of color turn this snapping off is going to is going to work uh as a scheme because you've got a match of similar tones and shades so we're going a bit less saturated then we are here so matching those up is is really important if we had don't know maybe this would be part of the design like all these circles if we suddenly make these different sizes if we like make these red green it suddenly just looks like really ridiculous but if these can match up in in a similar way we can get something that sort of feels right it feels like it's in the the right sort of ball park we I didn't have that selected un like it belongs uh together this is maybe like a you know a blue that would go next to it and so it's it's just taking the time that one needs finessing but the idea of taking the time to match things up and having similar Shades work together is how you build whoops these sort of color palettes that are going to hang together and make sense let's have a look at this in use like on the headspace website we have a Double Split complimentary color scheme where we've got yellows and oranges across from blues and purples you could create something like this here we go Double Split complimentary and we've got like yellow and orange I need to drag this around blues and purples H it's not quite dialing in here but you can see sort of like purple across from yellow blue and orange and just to point that you do want to finesse these things and they finessed that quite uh nicely and have various shades of purple and blue and shades of yellow and orange but what you don't see here are really uh Reds and pinks or greens and Browns we do have a little bit of green in these little illustrations within the app interface but it's relying more on these key colors with orange being their key brand color and they've clearly jumped off from that you can get into some more crazier schemes so here we've got this pills where they've got this sort of uh green on green with a purple and then the uh peach and I think the issue here is that it might work in some cases sort of on the bottle but in the user interface these colors there's too much going on there's too many colors and it really it's just too much noise and it's not producing sort of a pleasing effect o overall I don't really like this olive green on this color here I don't even know what to call this it's sort of a peachy orange and similarly with this bioma I really like the packaging even though it's a bit um pixelated this image a bit low res there's something fun about the packaging it makes it different it makes it stand out it becomes you know there's a lot of white within skin care and it it gives you something a little bit different and makes it stand out but why do we need an interface which is pink and yellow and blue and all this kind of stuff going on it really crows it out and it's just too much much so you don't necessarily just because you have brand colors doesn't mean when it comes to your job of selecting colors mean you need to select those for the website because it can really be over the top and not allowing the the packaging to to sing and come through again these things work because the sort of the the the tones are right even though some of them like this this hot pink is kind of a lot more saturated maybe than this mint kind of color but the sort of the base colors you know sort of work together and have this sort of scheme and there's certain colors that are avoided or not used and that's enough but I would encourage them to look at something like Fender guitars so if we just scroll down a little bit we can see that the finishes of the guitars are very colorful but the interface is pretty much just uh white black and then red being the only accent color other than this kind of gray scale black white and gray so whether it's something like a headline has a big red background just the little titles that let us know where we are or it being the the the you know the point where you can click special offers or these bits to start a free trial or the company's logo or the button those key elements being in red uh just help guide us simplifies the interface even though the colors of the guitars are very vibrant we have this quiet interface around it and that allows us to see where we're going with cowboy the electric bikes company they've simil simplified this with these colors in the background just pick up on the colors in their bikes or they've picked colors to evoke the right sort of mood and I feel a lot more calmer on this website whereas on this site for the um skin products I'm like I don't feel calm doing my shopping I'm it's a it's a bit jarring whereas I'm enjoying my experience here on this Cowboy site you know it's very Apple like the interface but this use of colors is smart just picking up on the color of the bike making it a little bit darker for this gradient that looks like photo paper in the background uh it's just a really smart neat way of doing it and again these tones match from Browns to earthy kind of olive greens and they've just varied the uh brightness and saturation to get the right sort of tones for the usage whether they you b a background and and make itself work together so I really like that something like this site for sweet green want to show you lots of examples people always ask for more examples this again is just an example of how you can bring tones now this is a bit more uh modern where there's some bright sort of yellows that do pop out and do look like they maybe don't belong in the palette and there's a little bit of that um youthful anti-design feel that comes through but overall similar to what we were doing before you've got dark green text on a lighter green background and these colors the the brown and the green both have that similar tone to help them work together and this yellowish color which is still green you know so it's within that sort of um it's an analogous color palette from sort of yellow across the green and that you know Brown it it it pops out and it's used just minimal it's a small percentage of each uh composition so it works to be a highlight and something that sort of uh sticks out so this is a subtle use of color that brings interest to this interface say of it just been black and white but it doesn't overwhelm it this lower saturation look produces more of a calm feel uh in this scenario so what they're doing here effectively and something you'll want to do is establish some rules for usage so think about those UI considerations that we talked about where you're going to use buttons things being of the right contrast type being legible practical things and simple rules like what's going to be your dominant color your secondary your accent colors uh really allow it to work so we've talked in other videos on this channel about the 60 30 10 rules so 60% of the design being in one color 30% uh being in your next secondary color and 10% for the accents and a lot of the sites we've looked at today just thinking back like into Milan in each of these panels like here we've got uh blue in the background and then the white on top of it and they've kind of observed this in each panel like here it's mainly black and then we've got parts of the blue and white with um let me think what do we look at that was good I guess similarly with cowboy where you've got mainly the background colors are dominant and then white uh you've definitely see this with sweet green where obviously we've got a photograph here which is is dominant uh and then your accent is just this yellow that's your 10% and uh similar here yeah we've got got this green the light green in the background is the 60% the dark green of the type being the 30% and the uh G yellowish of the accent and the button being that uh 10% of the color usage obviously you've got the the image here as well which you know with a similar principle that's kind of 60% of the the space so it's like a dominant image and this type is in a smaller area so this is you know a good example of establishing this so you want to if you're selecting colors particularly for a brand give some idea about usage because if blue for example is your primary brand color but you've also got a yellow and an orange in there you don't want people making everything yellow yellow t-shirts yellow packaging you know yellow Flyers yellow website because you want blue to come through primarily so establishing no this is the color we're going to use primarily and how we're going to use it but don't use it to color up type and you can use it for a background or you should use it for buttons some sort of use that's important when it comes to selecting colors uh so that might just be for yourself as you're building a website but that might be also something that you you pass on through brand guidelines the third Act is reviewing your work and this will help give you confidence that you've made the best selection so first of all as yourself is it functional so does it work do the colors that you've chosen support the information do they lead to the desired action is everything legible is color used consistently throughout the design does it guide the viewer these questions about function with something like packaging we think of the ingredients the colors of the ingredients being used for the packaging and that's a simple way to guide the viewer to their choice maybe used a little bit more subtly on this recent repackage design for berts Chris where their brand color of this dark blue is still able to uh come through on all of their packaging and their word Mark with a big contrast in white type but this bold all caps type for each of the flavors is colored up just giving a little cue to the viewer that roast beef is brown prawn cocktails pink chili is red mature cheddar cheese is yellow Etc just G helping them make that decision that little bit quicker uh when browsing for potato chips similarly something like United sodas who've made a splash with this very minimalist typographic can design where each can is just identified by its color so blueberry is obviously blue and perel the flower is green and we've got cherry red and we've got blackberry and white grape Etc strawberry in pink and mango colored and this has given them a a whole brand just based on um colors been using to identifying uh in this very minimal scheme interesting here with their user interface everything down to their packaging to the actual interface of their website is in black and white we talked about earlier how these packaging interfaces were may be crowding out the packaging here the packaging is the hero and this black and white canvas really allows that color to stand out so I think that's been done quite smartly even something like notion known for their very black and white look and just the emojis that kind of stand out in the interface but the whole brand with these uh hand drone style black and white illustrations but even here what color are the buttons red they draw your eye try noce free they want people you're not logged in you're not signed up they want you to to join so they're promoting that action even throughout because they've got such a simple interface the little pops of color uh within the sorry simple website colors so the the interface bits of color stand out and then things like these logos for Brands and companies that actually use their product you see it a little bit quicker because you maybe recognize the figma logo so you just spot that even if you're quickly scrolling past uh and it allows it to do that because of Simplicity but red here the color is supporting the action and nextly you want to ask is it appealing so color is one of the primary tools that we have as designers to make things look appealing so something like strip which is you know a payment processing it's not the most exciting thing maybe it's quite functional quite Technical and they've got this almost black and white kind of interface but they've added this animated gradient at the top and this color just adds some appeal add some interest in into something that would look uh quite flat and uninspiring it also again allows the color logos of the companies to be used and stand out whereas if you've got a very colorful interface lots of Photography sometimes useful to put those things as gray so they don't compete with everything else but they have that option this time Brooklyn Brewery again another one from thirst agency and they for this uh pullar beer which is a cool name this hazy IPA it's described as being juicy and tropical and you get that kind of feel this to me evokes Summer and when you see these boxes on the Shelf it's something the color gives it that appeal you want to pick it up uh because not just bright colors but the colors uh all work together uh in a nice way there's some nice contrasting blue to Yellow to give it some vibrancy and it just the whole thing works together in this design including the color to give it that summary uh appealing fun uh kind of feel and make sure you also go through the Practical questions like is it consistent with brand guidelines if you have those check them and check them again to make sure your work fulfills that and have I answered the brief and this is a great time to ask this question because it will be the basis of your presentation whether you're just showing this to your line manager your boss or whether it's going to be showing to a client in a presentation going back to the brief and referring to the key points that were in there that can be your reasoning your rationale for why you've selected the colors that you have and it helps you explain that uh to your boss or to your client step one is to write down what you're looking for design involves responding to a brief so let's have a look at some briefs these from good briefs what I like to do when I see something like this is pick out keywords so for this for authentic meal they make luxury cars so it's about status Nostalgia oldfashioned so already that's beginning to convey a mood and give us an idea of the ballp part that should we should be in so what I like to do is write down what I'm looking for consequently what kind of response I'll be looking for so just start off with things about the mood is it going to be playful or serious restrained or expressive familiar or strange type has both functional and aesthetic qualities the function is about uh the the legibility conveying information communicating something but also the appearance of the type has its own aesthetic and it's going to evoke a certain emotion and C mood and that's why it's so important to get these things right about selecting fonts so it can be read where it needs to be read but it can also communicate more than just the content of the words that are there but what we're seeing something visually it's not just the same as as hearing the words being said so think about the mood and think about the emotion too and also then the use so what is the format going to be is this a digital thing or is it a print thing or is it going to be both does that open other options in print we know what the sizes are going to be so perhaps we have a a bigger range of fonts because we can test what that's going to look like on screen things are going to be responsive perhaps they might appear at different sizes they'll appear on different devices so that's going to be a consideration so maybe make a list as well of what you're going to require so headline fonts body C copy captions this might be obvious think well every website is going to have H1s H2S whatever but it's good to just have a note of that and I like to have you know one piece of paper maybe just written with a pencil of the things I need the kind of mood the keywords the emotion I'm trying to evoke and have that down and maybe start sketching out some ideas of of the kind of headline faces you might want and some of some of the layouts and having that reference as a piece of paper is your beginning it's that brief for yourself that you can keep at top of mind and writing down what you're looking for before you just jump into the computer is really helpful step two is to start with your go-to type faces now has been a very popular video on our channel that ramp put together about the only font you'll ever need trash the rest and when I put this deck together it's had nearly 250k views so a lot of people have seen this and can you really just use six fonts well this uh video was inspired by ran talks about mimo vinelli and in this book the vinelli cannon you know he talks about he actually did this exhibition you see this when it comes in a focus where he showed off a few basic type faces and these Classics like gamon bedoni Century Futura times elvetica were the Cornerstone of his work he was one of the most uh important designers in the English language in the 20th century and you really can do so much with just a certain set of of fonts and sometimes the abundance of choice it paralyzes us prevents us from moving forward but what I find really about having a list of go-to fonts you might not necessarily trash the rest but there's going to be a very small percentage of fonts that you use a lot or maybe 80% of the projects and then rarely you'll bring in other choices so you need a solid list of go-to fonts that you're familiar with that you know how to typ set that you know how to work with so you might have a set together like this and I think it's helpful to have them in categories so different types of font so if you want an old style or a transitional serif or more of a modern or display fonts uh the humanist sanserif so humanist means it it in some way reflects the calligraphic style the with the stroke of a pen sometimes you get the thicks and Thins and those sort of variant in The Strokes with the transitionals uh these became uh more neutral and then geometric we're getting very definite geometric forms like you can see the points of an uppercase a in aen triangular shape almost or the lowercase o will be a perfect circle like in in Futura so having certain fonts and you probably want more than these that here what's that like 12 you probably want to build up so you've got 20 40 60 maybe but you've got some in your head so if you think ah I think this will suit a humanist sand serif and we'll talk a little bit more about about this as we get through this video but having those options in mind and and knowing that you have some good options for for all of these is really really helpful because it just saves so much time and when it comes to your body copy and and setting that means like longer sections of text it's important to stick to typ faces with classic features and proportions your reader will thank you if you do this if you start using super wide type faces or very thin or ones with weird features that don't reduce very well at small sizes it's not going to be legible it's going to take people longer to read if they can read it at all and you want people to be able to scan through par graphs and and pick them up very quickly recognizing the shapes that we're taught to read you know from from when we begin to learn that so to be good at selecting fonts you need to know a lot of fonts and you have to have your own list of of Classics they could be contemporary they could be older but they need to be really strong fonts that are your GTOs and then when you get a brief like uh the the ones we went through like this one for luxury cars Nostalgia all fashioned you can think of and I wouldn't necessarily tick them off but I just look at this list and think okay what is appropriate to these and most of the serifs would be appropriate to Vintage authentic old fashion Nostalgia uh except maybe you know the more sort of display type ones like super Clarendon or some more mother um kind of display fonts that are you know very distinctive uh with the sand serif some of these could work but the more geometric modernist fonts probably not going to be in the right ballpark similar with this soft drinks it's about Elegance but at the same time being inexpensive and it's a worldwide thing so it's a mass Market thing a soft drink so most of the serifs are probably going to be out but you can see how with that element of Elegance you know you might you start to make judgment calls that maybe planting Works where Baskerville doesn't maybe something like super Clarendon works but bedoni is just too refined and it leans too much towards a luxury not a a mass Market affordable item uh most of the sanss are work but Unica might look a bit too utilitarian so you maybe want to avoid that won't have that friendliness that you're looking for this scuba diving company that again is for people on a budget but they want excitement but they want to be approachable so probably the serifs most of those are going to be out in this sense however uh maybe some sort of alternative not one of these a serif or some sort of display font can definitely still work U but most of the the S are probably uh going to be applicable too so you need to know these go-tos well how to types set them and then begin to trial them out so a couple of the choices here like for this scuba training maybe future and hardcore test which sorry basically helvetica I should have said you start to look at these and you think about the functionality of body copy That's essential being legible for for those uh and that should be your default option something that works and then think about you know where we're going to diverge from that and mess with the type setting so what about if we changed we felt future maybe works better and then we'll try typ setting the headlines in all caps in the Bold we so you maybe lay some of these out and just see if your go-to type faces can answer the brief I mentioned about that perhaps an alternative could work for this display uh font for this scuba brief and I want to really encourage you don't neglect serifs you know the simplistic when we're first learning about fonts is serifs are the old style fonts that were chiseled in stone so they're all about Nostalgia and Heritage and history and if you want to do something modern then use the S serif because they were designed later in history but that really limits you and that's not necessarily true you know as things uh develop it's about how you bring all the elements together think of something like this phone if you were to do uh a brand Identity or build a website that was going to sell this phone it's a modern phone it's a it's a new design this is actually the nothing phone you might have seen has been a lot of hype about it and it's got these LED lights on the back and they're trying to do something different and they are very much selling that narrative that this is something fresh and exciting so you might think modern therefore sound serif but if you actually look at their website they have this kind of dot matrix logo but look at the headline type where it reads pure Instinct that's actually a serif so just thinking modern s serif is too simplistic so we need to move beyond that and this is a more modern style serif the serifs are quite short on it and you see they've paired that actually with a monospace font that's ones where uh each character takes up the same amount of horizontal width which is not what you normally do in a font like usually a lowercase w would be a lot wider than say a lowercase j and this another panel from the website you can see with these quotes along the top these reviews it's set in this serif font and because it has these you know still got these modern elements it's got this quite tall x height to it which helps it read well it's it's nice and open and it looks modern and it looks fresh and it puts forward the design Le aspect of the company uh by doing something that's got a little bit of style and a little bit of design to it instead of for example just using helvetica you know or going with like something that looks very much like apple which is a competitor that they would be positioned against uh another project just to show you briefly like open web again this is something online it's digital it's about web publishing it's not newspapers so you might think modern s s but actually again An Elegant serif uh with very open counters quite tall X High and these small serifs just gives a clean and modern feel and it works really well but just gives it some more distinctiveness and some more personality and if if they were to just use proxim manova or avenir or Roboto like so many websites do and they work perfectly well but it would lose uh some of its identity here and it's given an identity uh by using a serif font in this instance so it's all about mood and and emotion and so the next step is to look for upgrades now starting with goto fonts is a massive time saer we don't want to be just opening a program and just like scrolling through all the fonts that we have uh on our computer or scrolling through a huge library of fonts like Google or adobe you want to start with your go to and you want to start with that written brief so you have an idea of what you're looking for and by the time you get to this stage of looking for upgrades you know exactly the kind of thing that you need uh can you improve or maybe ask yourself how could you improve on what you have given that you firstly limited yourself to just a small set of fonts maybe ones you're immediately familiar with what are the limitations of your go-to selections would a more distinctive font be more desirable perhaps you could bring a bit more personality through or a bit more identity make it more distinctive with a more distinctive font that's less common so it could be something like this layout where this display face where it reads 2017 to 2022 in anniversary gives it some visual interest in this piece when it's paired with these other sand serap fonts which are also quite interesting these small uh wide type if you can see that but that display face really adds visual interest or something like this Identity Design By pentagram for this Brewery this is distinctive enough this headline type and it's also got enough aesthetic quality to become the primary element of the brand identity they just rely on this font because it has that distinctiveness and enough quality to it uh that they can really just lean into that again if here they were just to use a reliable font like Proxima NOA that's not going to be enough here to establish the identity but by using something uh like this display font which is much more distinctive it does so it also can be just something slightly different like a simple Sans just just moving away from these most common choices uh that can be really make a change I mean can you tell the difference between these grotesques they're all transitional scier fonts but these slight differences can really be the thing that just lifts the design that elevates it it could be a quality upgrade you know don't use Ariel instead of using Ariel or vidana you can use something like helvetica you know proxim monova that we mentioned and that can just be that little bit of quality upgrade uh that can really help you or something from an independent type Foundry that just helps it stand out in that subtle way and it's not that the average viewer can tell the difference uh between a transitional San serif designed by an independent tip Foundry and helvetica they maybe can't but the overall aesthetic I really believe and I'm going to stand by it as a designer does make an impact on the viewer and these details are important aren't they we care about these things and uh that's why we spend our life watching videos about fonts so look for upgrades where should you look well you need to think about what are your available options so do you have a budget for this project it's pretty important question if not you're going to need freely available fonts and that means not just ones that people will let you download on your computer without a credit card but making sure you've got the appropriate licenses this is really important it's a legal issue it's also an ethical issue and something we want to support other people in our industry and type designers do brilliant work they are very very skilled and we should support them by making sure that we the correct licensing for the fonts so that's an important thing to be aware of and to make your client aware of and to check so based on your budget you can think about where to look now one of the most abundant sources of freely available fonts is Google fonts and I made another video video about that about entitled Google fonts suck because some Google fonts suck and some of them are average and some of them are really really good and that's true about uh most things like when you've got what is it 1,400 type families you're always going to get that sort of distribution but this is an incredible resource and if you're just looking at this A to Z you're probably going to struggle so you might think about uh using these search features where for example let's just look at the display fonts that we're particularly looking for here the specific upgrade that we need in our written brief or it could be start looking at things like the most popular fonts that'll just just give you a clue you know what other designers think and the choices that they've made and they might be ones that you want to then consider Adobe fonts is a great resource too if you have a Creative Cloud subscription they are included with that and they have a lot of these little pages that they put together where they have examples you can see all these colors and different type settings so you can get a little bit of a idea of some of the feel of how these things might work even when you go on to uh their Discovery Pages again you can categorize whether you're looking for a slab serif and how heavy you want it to be and how wide you want it to be and so there's quite a lot of detail here so it's always good to have that in mind we want to use our brain first to think about what we want and that's going to save time and then narrow down those choices and find something appropriate you have the big type libraries like monotype so if you want something like alternate Gothic Baskerville Franklin Gothic luin helvetica Universe things like that monotype linotype these are the guys to go to for that kind of thing and then independent uh type foundaries now something a platform that ran on the channel likes to recommend a lot is you work for them and the reason is that they collect fonts from all different typ foundaries and then they create these images where it gives you some sense of the feel straight away rather than just seeing alphabets or you know the quick brown fox set in black and white every time they've used some colors they've put all the graphics the type setting it's a little bit quicker for you to just kind of look at the feel now I I don't like being led too much by this kind of thing because I I'm a bit worried it's going to influence into my design but I think as you're as you'll certainly as you're learning and you are uh looking for fonts and and trying to see where they fit and and make that leap of imagination between seeing you know an alphabet and then how that's going to impact the emotion of a design these sorts of things are really helpful and obviously the fact that they gather fonts from lots of different places and finally would be independent type foundaries and this is house Industries some of their display faces and it's good to get to know your favorites different independent typ so if you want some something that's a really distinctive it looks like sign painted or handwritten that kind of thing house are a great source for that kind of thing but I mean there's dozens and dozens of tip foundaries that I love and tend to go to one would be pangram pangram that we're going to have a little look at now in some practical examples and you can have there more of a curated collection so tip foundaries might have six fonts or 40 fonts and it's a much smaller list to to go through and often they have you know an aesthetic or an approach that you just like or you know you've used one of their other fonts and it was very very reliable when you got into the details so you trust them uh when it comes to another one that it's going to be uh really well put together the metric curing will have been done properly and things like that so having a little bit of a look here at pangram pangram this font formula this Tye face I should say has stood out to me this is a versatile tight face with a bold racy look flexibility of grotesque okay impactful statement so I think for our scuba diving brand this might be a good option so a bit of an upgrade on Futura getting something more distinctive but that's still going to work really hard for us and so looking at this tip face i' Maybe typ set it with some different widths and weights or maybe try all caps for this more condensed one at the top and then there's a slightly wider one that's slightly Bolder and then at the bottom the widest one which is I think in medium weight I think the body copy is as well this is just because uh with this trial set there's like a limited uh amount of fonts within it so I'm just uh trying out a few of them here for the purposes of this video just as we would normally now intermission okay you might thinking this is great thank you but how do I know which fonts are good well the thing is designers have knowledge skill and taste so you need to increase your knowledge about fonts and then develop your skill in typ setting and using them within your layouts but also there's a subjective element of taste so it's not just making sure that you know this is legible and how it works really well on screen or I know how to typ set it properly but it's also that element of taste where you're able to discern something that is aesthetically pleasing that has the right visual impact that sets the right mood and you develop this uh by developing your taste and so it's important with a video like this to I'm sharing my process that I go through and it it takes a lot longer to explain really than it does to do you know I see a brief and I straight away begin to think oh I need a display face for that I'm going to use a humanist sander for the body these things come to mind quickly when it's something you do all the time but there's always going to be that element where your knowledge skill and taste the things you develop and watching videos like this can help with it but you develop that three experience over your career and then make judgments that said I want to help you practice so we're going to talk about how to evaluate fonts so we want to evaluate fonts versus the brief so are they appropriate for the thing we're trying to do that's what we've been talking about in the first few steps then we want to evaluate the font because it might be a great font but not good for our brief and it might not be a good font for your use case so again here there are more objective than and more subjective decisions it's it's a Continuum so you know we can say objectively in a certain font the lowercase L and the uppercase i and the one numeral are different characters instead of just lines like they are in some fonts therefore this aids with readability so that that's an objective fact but then when it comes to is this font more legible than the other and we can get into the vagaries of that and why they are then we start getting towards this font is playful this font is serious this font is luxury this font is exciting then it starts to move more towards the subjective and it can get ridiculous and you say comic SS is refined and rarified and you you're struggling to make that argument but obviously there's a Continuum of how objective and subjective these sorts of decisions are but you need to think about your use case so there might be practical concerns if you doing something like a website does it need to be published in multiple languages well make sure the font supports all the languages make sure it's got a full set of glyphs so all the accents and uml outs and tilders and everything that you need are there uh to reproduce those languages you will think about the audience that might be play to issues to do with legibility or it could just be for the field too is it a full set of characters so and is it a full font family so have you got italics and remember italics are not just slanted characters italics are separately designed uh characters that have a different emphasis things about them are the lowercase A's are different in uh uprights to ital so things like that does it have a range of Weights so if you've just got one weight that's limiting if you have regular and bold it's better than one but if you have a whole range of weights or it's maybe a variable font is becoming common now on the web then you've got a lot more options there do you have a range of wids within the tight face even even better you go from condensed and narrows to wides and extended fonts then we've got further options there so think about your use case and the Practical considerations and the more designled aesthetic considerations for that it might be a good font but it might not be a good font versus the brief and your use case next you want to look at fonts by their Source we mentioned before if something's free some of the things are going to be great a lot are going to be average and some are going to be complete trash applies to anything so if something has some more fences in the way like you have to be part of a subscription or you have to pay to license the fonts it gives you some indication of quality now you still need to evaluate that for yourself but for example if there's an independent TI founder you go to that only sell 12 fonts you've used three of them on projects extensively and they were all brilliant and they then release a new font well you can have some confidence it's going to have a similar level of quality control so it gives you some idea you can also look by recommendation so these curated places these platforms where there are lists of fonts uh fonts that are popular like we mentioned before for searching that's a a crowd sourced means of recommendation uh websites and blogs that would recommend fonts now now look at these lists you know if they recommend 10 fonts and straight away you're looking you think three or four of them are pretty ugly then maybe don't take their recommendations on on on the other ones but it's something that you can do you can look at recommendations list designers can put together at least it can narrow down some options for you and you can always ask a friend by testing so this is something that you want to do particularly if it's something new is just do some type setting you know set some paragraphs out make it small make it big look at it on your phone uh make sure you've got different characters just look at the king when it's just set you know metrically set with a king that's in the font how that looks and and just try things out and and see if you run into any sort of issues when you start getting characters you know running into each other and some kind of ugly curing going on or um ju just finding out that some of the characters you know aren't uh very clear what they're supposed to be things like that or they just don't reduce very well in size then you know it's not going to be for you you can also evaluate fonts by comparison so this is something that I love to do I'll take a font and I'll put it next to a classic in that area so if I'm looking at a transitional sand serif I'm going to put that next to helvetica if I if I'm looking at an old style I'm going to put that next to gamond and this thing it just really helps you you notice oh it's got a taller X high or the characters are generally wider or the C are more open or just different little details that will just uh help you evaluate the font and see where the designers made decisions to diverge from some of the classics and that might make you think about it being a more appropriate choice in your instance and finally you can evaluate fonts by I so in other words just manually so prior knowledge is required and and all these things I've mentioned before now are to try and help you to get get to this point where you can look at fonts very quickly and uh make some of these judgments and this requires some knowledge of type Anatomy classification that we talked about before what kind of font is it if you know it's a slab serif straight away or a monospaced or then getting into the detail like a humanist versus a transitional sand serif that will help you evaluate it because you know kind of the ballpark like where it's supposed to be what this thing is um and look at the characteristics of the font when you learn this sort of stuff type design is a good thing to lean into even if you're not thinking of you know designing you know big type families this is a really good book actually designing type uh which is by Karen Chen and that kind of thing it really gives you an idea because it it gives you all the kind of diagrams of how characters are supposed to look uh what they are uh you know the stand way of creating characters and their width and the different stroke thicknesses and things like that and that will really help you notice where people have diverged or the decisions that they've made and think about why they've doing it and you get much betterly then better than at evaluating fonts by I okay step four of five is to trial pair and compare so I really encourage you to use real copy and start typ if you don't have it just make it up and it just gives you a flavor of where this thing is supposed to sit so we had Futura and then a few uh different fonts within this formula type face that we're trying out and just look at them next to each other and just see which you feel is a is a strong option and how these things work together headlines and body copies so how do you pair fonts his that's a bad joke isn't it okay here's a few tips you can pair fonts from the same type face sometimes called font families so this is just one font Oro regular so it's the regular WID the regular weight but other fonts within that would be like our keyo or semi bold so now we're we've got a different weight now when you're pairing weights I recommend you go up at least two ways so we've gone from regular to medium to semi bold so at least two ways to get that difference in between a medium and a regular a light and a regular can be a little bit too close and then we could go up more than two weights and we start to get more of a contrast I quite like what's going on here or we could choose a different WID within this same type face so the condensed extra bow Aro and I I quite like this combination now this is a a free Google font by the way which is kind of got some similar features to formula that we picked out a little bit Square and um this is a a a type face that has lots of widths and weight so it gives us this opportunity to look at those sort of pairings so you can pair fonts from the same typ face or pair two or three distinct type phes distinct they need to be uh different and so if you're bringing more than two or three and I would never I would say probably never use more than two or three distinct type faces in a layout certainly maybe within a project or a brand identity something like that you know it's going to be too many if we get more than three I would avoid pairing similar fonts they need to be uh distinctive similar in a way of being um there being a dissonance or or a clashing so let me show you that so something like Poppins Century Gothic and future which are all geometric like Poppins and Century Gothic are very similar as you can see here um but they're not the same and that is a problem because it's like it's like a clash it's like a color Clash you got two colors together and they're not quite working and it just gives a little uneasy feel similar uh with these serifs although one is an old style and a couple of them are transitional the thing is they're still too similar and it it just doesn't feel like it marriage together if you're going to put this in a magazine or on a website we need uh some distinction here so this would be a better way to use it so if we just go back one we had plantin for the headline well if we actually used plantin for the H1 and the body copy but we used the the regular for the body you can see B condens for the headline we get a nice combination and then you could bring something in like noar CZ kvea and that gives us a nice little range here of things where these are clearly different you know confusing these two things so uh they don't give that uneasy feeling by them being similar but not quite the same and we're not sure why it feels a little bit strange so I would say A good rule with this kind of thing is when you're ping for is to have only one decorative type face per layout and I would only use decorative type for either head lines or as a decorative element like a huge numeral like I've been doing as we lead into these steps or as a background element or something graphical but one decorative typ face Max and pair that with some more neutral type uh so you don't um have too too many crazy things are going on at the same time you want to develop a design system for your pairs so there's a consistency so if that is a website developing clearly your H1 H2 H3 Etc your body copies your captions the same thing would apply through a magazine and that will help you uh develop that level of consistency and allow the tight faces to work together rather it just being like this mad visual jumbo which just ends up like a visual noise you can also pair tight faces with complimentary features so we just talked about being distinctive different from each other now we're talking about being complimentary so it appears there's may be a contradiction here so let's try and work through that so something like this here these things are clearly different Optima Ador Garland which is from Google and IB implex mono which is also available on Google they're definitely distinct but does that make make them a good pair no because they just have a completely different mood they're like from a different era to have a monospace font and then something that mimics calligraphy is a really strange combination and there's probably some scenario in which it would work but in general these don't Jive together so you want to think about the overall mood maybe fonts that were designed in the same type period or have the aesthetic of a certain type period or they just have the same style they're evoking similar sort of emotions or they they're going to work together or one which is more neutral like something like Universe which has that neutrality to it and it allows you to uh pair with it more expressive fonts so we want things that are complimentary so let's look at some examples of that so we talked about recommendations we actually uh wrote and designed a free ebook which is the best Google fonts for every mood we'll also put a link to that in the description of this video if you want to grab it and let me take you through some of these examples so we talk about different moods like something technical let we think of software uh technology digital that kind of space so one of the options we threw in was using Roboto serif uh and robotto sand now mentioned here that commercial type actually designed robotto serif and I really really like this um and they have thought about some of the the feels some of the proportions some of the the details of uh Roboto like how the O's are a little bit squared off um and other other on the SE shoulder of other characters as well like you say with the ease and that's picked up in the serif so these have got complimentary features but they're clearly different enough because one's a serif um it's a it's got this human is kind of thick and thin even though it's got almost like slabik serif so it's kind of in between and they work together but they're clearly different from one another so they make a nice combination because they got complimentary features as similar Anatomy so when you get into the detail of this you start picking up things like similar X Heights or similar features like just similar curves or different elements uh that can just be complimentary and kind of make them look like they're part of the same family like they fit together like they belong together in the same place in this handcrafted section like we choose a font uh like this one which is Laura and I recommend that a great R of pair fonts is to pick one font and then find a pair for it if you're trying to F oh only two fonts that work together choose that one that's going to work really well for you so it might be choosing a body copy that is in the right kind of feel but you know it's very functional then looking for a display face which is in the right ballark or often the other way around where you choose your headline and then you find some body to support it so um this Laura works well but then chose Rubik for body copy because of um it's just uh has a little bit of this handcrafted feel this distinctiveness it's a little bit non-traditional so it doesn't look too utilitarian we don't this like an instruction manual this is for for example this handcrafted feel like a a clothing brand like or as we go into this next example we've got things that feel like they're in that same era I've said so it's Roboto again but I think it was the only one I used twice in this book but maybe Oro but it looks like that mid-century kind of thing like Ultra could almost be like 70s uh it's a bit mad and and having this combination here again where we've got the super heavy with the regular weight contrasting weights but things that look like they belong from a similar era here's some examples of that how that would kind of you know play out and and work together you can see on this menu that they can uh work really well practically again you know luxury serif is where we may be associate but also like the fashion house thing of bold so again the combination here different weights fonts which are clearly distinctive from one another with this hip Direction I think this is the last example we've got AO expanded black so again it's wide and it's heavy weight so that distinguishes itself from this regular width regular weight body copy so it just helps uh with the graphical appearance as well as the the hierarchy but both of these fonts CU it's expanded and heavyweight that has a contemporary feel it feels like it's quite a current thing but also using this uh space grotesque which again has these very modern features like the weird has straight um bottom on the G and things like that the leg of the G these kind of things just make them feel contemporary and a little bit edgy so they belong together but we've stuck to certain rules about cont contrasting them as well when we put them together and the final thing let me run over briefly step five this has been a marathon tutorial really not a little throwaway YouTube video so I hope it's been helpful it's to test and test again to design and type set as many things as possible to ensure that your choices work across all relevant applications don't just have a little bit of L of myips and a headline and think yeah I like that one and you're done it's stop putting them into to layout so quickly put something together like a quick hero section for this website so we've gone with this formula and now I think this really has the feel of something which is distinctive enough it's not just you know a universe or something like that which just feels so neutral but it's definitely legible at the same time and so it's beginning to see how that works you know throw it you know onto some posters and things like that and just see if it works large if it works small print it out if it's great thing if you've got a printer so it's well worth having one even if you're digital designer just printing something up putting it on the wall seeing what it looks like at different sizes and try it in different sorts of digital layouts test it out on your phone you know do that figma prototype open it on your phone see what it looks like and that these kind of tests are really important to give you confidence in your selections number one stretch it fonts are designed by brilliant type designers who have real skill in crafting typ faces you can see in this example on the first row we have four different width from a typ face and each of those are individually drawn then on the bottom number three is the same size but then I've used the width number three and I've just stretched it to be the same width as each of the options above and you can see that these weird funky sort of things start to happen if we go over to the far left with number one you can see that the vertical stem of the E is narrower than it should be you can see it's a bit wider on the top and similarly but not quite as pronounced there on number two also with the shape of the S it creates an odd sort of shape instead of the more elegant forms of the top where the weighting of everything is is prop you see also with the T that same problem where the vertical stem is narrower than it should be in relation to the horizontal bar on top on the far right as well it's ugly the s number four the spine of it doesn't have that elegant swoop that we have on the top and again the E and the T get moved out of proportion stretching fonts ruins them and breaks them like every rule it's there to be broken as I talked about in a recent video it's just a about doing that with intention and that's my whole approach to learn the rules and then break them that's why we're here so this recent project uh by only studio just from down the road from me in the northwest of England but they created this for pirate who are uh rehearsal studios and radio space and and sort of Music relating to up and cominging artists and what they've done is they've used Ariel again a very default font not the most elegant font not the most most rarified font kind of a little bit ridiculed it's like the poor man's helvetica and they've deliberately stretched it through all these different applications so it just looks wrong like look at the H there on Hackney wick on the far right look here on the ease we're seeing this problem that we talked about um where we've got these horizontal bars that are far thicker than the vertical stems and just the how the stroke weight on the C and the O has been totally messed up and through all these posters and social applications and different things you can see it's you know really makes these fonts look super ugly but the clever thing about it is that this is very deliberate and because they've unified other elements because it's mainly black and white and this sort of point of view photography that's a little bit desaturated it has a holistic look to the whole thing and it also means that they can get away with breaking this rule because the the the website the brand sorry is called pirate it fits with it it fits with this sort of DIY aesthetic that's very rough and ready so it actually produces a desired effect but in general it creates all these kind of problems and stretching fonts is something you want to avoid number two inappropriate situation it might be a good font but you're using it in the wrong context this Google font Ultra can work really well in like in this little mockup that I've created created for this vegan restaurant but if we were to apply it to something like Swiss watches it just doesn't fit in the scenario and if we move to something that is more what we would expect to see in this category you can see how it doesn't offend it doesn't stand out and it really is just much more appropriate choice so might be a good font that doesn't mean it's good in every situation for example you wouldn't use a script type on a road sign number three insufficient contrast so this can be both the weight of the font so because the top example here is a very lightweight at this size for body copy it's difficult to read That's rectified in the second one the bottom one is the same as the second but obviously the background color changing just means the contrast is super super low now you might think this is an extreme example it's something you see on websites all the time where type is difficult to read and it's not something something that you have to fight with just use a contrast Checker this free one here is one that you can use there's our bottom example and then our middle example you can see green means very good it's much better and there's also one for Adobe you can get plugins for figma so you can have this with you uh while you're working but there's no excuse for it really there needs to be sufficient contrast with the the color of the type as in the the thickness of it and also the actual color that you choose use for your background and to set the font in number four ill-considered point sizes we have to think about these things deliberately so our body copy shouldn't be too small to read nor too large to read comfortably and if you're designing a website you need to make sure you check that test that across all different screen sizes and then having some sort of relationship when you've got too many font sizes on a website on a poster in a catalog it just starts to look strange it starts to look uh disordered and there's a little clashing so just having a set number of sizes or a set relationship between the sizes like a geometrical um or a mathematical relationship really help even the standard sizes that you get in um you know you've seen it in a word processor you see it in your design software where it's like 6 8 9 10 11 12 14 18 might be 21 in there or 24 36 48 6 72 that's based on the actual when type you know was a physical thing that type sets used to lay out they'd have the they were the sizes the point sizes they have in their case but they're useful because there's actually a relationship there between them and I think a lot of digital designers often throw around all these different weird Point sizes and it can lead to a little bit of a mess so try and have some order to your point sizes number five unsuitable tracking so tracking is the space between all the car characters on a line so you can see at the top wider tracking that's 200 and the second line there we have narrower tracking on 10 and when you track lowercase type widely it looks odd it's difficult to read so I would start with zero for body copy or all you type really and then just adjust it accordingly does it need to go a little bit narrower like the general rule is the larger you type the tighter the tracking wants to be you want to pull that in a little bit because the spaces in between the characters look larger as the type actually Point size increases so something to to look at but I often see this widely tracked uh body Copy Type on websites makes it really difficult to read don't do that widely tracked type I think only maybe for uh uppercase in certain in logos in certain headlines and things like that can be acceptable number six substandard curing so whereas tracking is the space between all the characters on a line King is the space between two individual characters or glyphs so these examples the top one the curing is set to metric and in aob software they use these two terms the metric is what's set by the type designer in the type face it's usually what you want to start with and on the bottom one the curing is Optical so in general I would use metric curing for body copy for headlines I like to K those manually just adjust the space between the letters Optical means to the I and this is the software having its its best go at King you can see it's just tightened it up how much shorter the words kerning is are on the second line than the one above even though it's both the same font and the same point size and if you want to practice your king and get better at it so you can get really sharp headlines or crafted logos I really me recommend the King game on the method of action website and this is a fun way to do it and because there's so many different fonts there it really gives you a feel of how you do that with and with serif and display fonts and go nuts with that number seven inappropriate line length so we don't want this to be too long or Too Short again so on the first Top Line This is too long and our head's kind of on a swivel like we're watching tennis at Wimbledon we don't want the readers to do that we want a nice uh scannable length and we don't want it either to be too short like the one at the bottom where it's only like about four or five words on a line that that's too too few usually start pushing that up to seven you maybe go up to 12 15 it really depends on the context but if you look at like website these are a great example so this is how this site look in full screen on my 5K monitor the CNN travel website and because it is such a large site they haven't used that full width because if the line length was like the full width of my screen they know that that would be really difficult uh to read so they've brought in the width of uh this whole column so that it creates a sensible line length for the type and you should do that too number eight ill judged leading so leading is also known as line height on the webs they used to put physical pieces of lead in between the lines of typ which is the way you remember how it's pronounced and what it means and you can see here with 100% leing so that means if your type is at 14 point you would have 14o leading that's 100% you can see that they're a little bit tight to one another these lines and it makes it harder to scan but if we just open that up a little bit to 130% which is where I like to start with body copy type it makes it a lot easier to read when you start getting larger than that depending on the font like we have at the bottom with 200 it's not always clear that that type is part of one unit now there are big spaces here but within in a layout that could be strange it's harder to read and it doesn't have the right grouping to it so that's something to start with around 120 130% and then adjust it dependent on the font and the point size and the situation you're in number nine inconsistent casing this one just winds me up we see this sort of writing on the web all the time which words in this title are going to be capitalized if you see that sort of heading on like the title of a YouTube video or the caption on a social media post or headline on a website on some sites it just seems to be like at random as I've done here like how they make these decisions or in this paragraph where it's like oh this the mission is a thing so I'm going to give it a capital m and then I'm going to put some words in capitals cuz you know they're really important and I want them to stand out it just looks really nasty it looks amateurish it looks cheap it looks pushy it just stick to good grammar whatever language you're working in and generally just use sentence case you can use title case but be consistent with it you can use or cap but I would start with sentence case and just make sure your casing is consistent throughout even if something you get from copywriters and clients it's something you can push back on and um proper grammar is always going to look better number 10 multiple emphasis one emphasis is plenty so so we don't need bigger sale to be anything else than in a different weight so making it a different weight and italic and underline and in a different color this makes it again look cheap and nasty and pushy you want to avoid multiple emphasis so we RAR need bold italic when it's within a a regular upright body copy we don't really need things to be underlined and bold just choose an emphasis and even stick with that through paragraphs or through sections if it is necessary you see in books italic tends to be the only emphasis that's really used number 11 two many at once using too many different fonts in the same composition so look at something like open ai's site here there appears to be just two fonts we have apart from the logo we have this Sans serif font which appears to be the same way all the way through in the menu items at the top and also this short paragraph and link and then we have a totally different type face this serif type face for the title of safety and responsibility and this is a nice contrasting pair and it works because we've not got too many things going on here but in this like butchered example if we change the font for the body copy and the button now we've got four different fonts going on plus five with the logo this thing starts to look really messy here's the before how it should be and here's the messy one with too many in there you want to limit to I would say two three fonts start with that until you become you know a real master typographer if you've been designing type for 40 years you're probably not watching this video unless it's just for entertainment if you're learning start with two or three and I mean fonts not just type faces so different font helvetica bold is a different font to helvetica regular whereas helvetica and garamon they're two different type faces so it's a whole set of fonts that make up a tight face and so even with that you don't want to use too many if you're using helvetica bold helvetica regular helvetica italic you don't necessarily want to use gamon bow gamon regular gamond italic you know too many things going on just really uh limit that within a composition and the final one number 12 is unsuitable pairing so we just s an example of a nice pairing but this can go wrong like here back to this display font Ultra that we talked about before if we pair that with uh something like planting this serif font here it's a bit uneasy because we've got these different types of serifs and we've got this thing Ultra which is very much like of time it kind of looks like a 70s thing it's very stylized then you've got this very uh classic serif and it doesn't really work so you probably want to go something that feels a lot more generic like un a sand siif that really pairs well with anything this is a grotesque sound serif and that will kind of go well with everything number one successful designers know more than software I studied graphic design from the ages of 14 to 16 as my technology option in high school but it was when I learned to hand code websites that I really became interested in web design at first I just wanted to make a website for the terrible Indie band I was playing in I thought more people needed to hear our music they really really did then when I got to University I ended up building a Blog that a family member who was a developer saw and then asked me to design a front-end interface for a product he was building and that was when I quickly realized I didn't know what I was doing knowing HDML and CSS and how to operates and basic software is not enough designers need to know the fundamental principles behind good design that's why here at flux we do more than software tutorials we continue to emphasize the core design skills that you need to succeed in that's the title Core Design skills of the new program we're working on mastering layout type color imagery having a solid process to follow is essential if you want to be a web designer number two successful designers work at speed in 2004 I started working full-time as a graphic and web designer and the following year I landed my first job at an agency the portfolio I had cobbled together was apparently adequate to land me the job but my very first day I had a scary realization I was so slow I hadn't mastered the core design skills so I was simply moving things around till they look right and that wasn't going to cut it in a busy studio so from that first evening and then for several months I spent all day after work in the evenings practicing learning repeating software shortcuts discovering new techniques schooling myself in the principles copying from the senior designer I was working with it was intense but I quite literally got myself up to speed number three successful design solve problems after leaving the city and moving to a web design Agency for a short while I then went inh house taking on a more General leadership and creative role and if you want to achieve anything significant you have to be prepared to take responsibility the person who makes mistakes rarely makes anything else the essence of design is to solve problems that's what separates designers from visual artists a successful designer looks for problems Embraces problems knowing the creative actart can over come number four successful designers sell Big Ideas whilst working in house I co-founded a music industry based creative agentry and grew my role from spare time to part-time to full-time and what I discovered there became my Touchstone for every project I take on successful designers create and sell Big Ideas we went into competitive pitching scenarios for everything from advertising campaigns to live production and in those presentations we needed to leave potential clients with the most memorable and compelling concept our job is not to make pretty things it's to communicate so find that big idea that will illuminate your concept because that's what people will buy and what will ultimately make it work number five successful designers don't rely on their process I sold out of my agency to my business partner and went to run the graphic side of the studio for a notable creative director fashion designer Couture level fashion high profile music artists Publications like Vogue and Hy Beast we were creating and this solid solidified my own design philosophy about conceptual work and restraint clear reasoning and the Crave director not only had a brilliant imagination but also a Relentless commitment to Quality I thought all designers were detail oriented but this was on another level and there was something he always said to everyone in the studio don't trust your process check how can mistake creeping if I take care well they do so check everything have someone else check it consistency of colors Point sizes cleanliness of codes spelling check and finally number six successful designers don't let admin trip them up I have a brilliant client that keeps coming back and one of the managers there said recently to their colleague oh Matt's great he's super organized now I wish they said super creative or skilled but you know what clients want someone who's easy to work with when you're design is just a hobby these things don't matter but when you become a professional you need to have the proper Insurance track your time keep physical and Cloud backups Financial records your keep your files organized so organize that another designer could pick them up and understand them it might not be exciting but these are the kind of things that clients appreciate and if they're not in place can trip you up sometimes very painfully I hope this helps you get you to where you want to be quicker than I did and that's why flux Academy exists to help you succeed as a designer hopefully these pointers that I never had can be things for look out for and practice and seek out as you progress in your career if you made it this far first of all well done for sticking with it I can tell that you're committed to becoming a better graphic designer your next steps would be to get practi in and have a look at our Core Design skills program just follow the link in the description and until next time happy designing