Adobe XD Tutorials

Understanding Visual Hierarchy in UI Design – Live Project Follow-Along

hello everyone so just give it a maybe a minute or so and we will begin as people come in hello August and okay some of these names I am not even going to try

to pronounce yes here we go or here we are this time is gonna be a little bit different I will I explain shortly how's it going melam wait

mellow man cheeto that's probably completely butchered it Wow oh yes I did I thought I had it right for a second so we're gonna get started real shortly

visual hierarchy that's I'm going to spend probably 45 minutes to an hour talking about that can you believe that that's a good question I haven't even thought about that in two sentences

we'll see I'm gonna try to describe it momentarily all right we have 82 people here it's been two minutes since we started so I'm gonna go ahead and switch things over don't screw it up Gary there

we go there I am and then we're gonna give our overlay here nice alright so I basically today is the beginning of a new stream a new type of strange the very first one I'm calling them a follow

along or a project follow along where I every two weeks and by the way I am streaming weekly now but you know next week is going to be the usual live design review where you submit your

designs and I just review them and could tecum it but then the alternate week will be which is what I'm doing today is something that's gonna be based on a certain topic as it pertains to

front-end design slash development and maybe even in the future back-end stuff as well so today it's design oriented for sure and we're gonna talk about visual hierarchy and this is something

that I talk about very all the time when I'm doing the live design reviews because um you know it's something that new designers new UI designers commonly get wrong I and that's what I'm going to

be focusing on today in describing what visual hierarchy is and then demonstrating you know what it is as well so this of course this stream is sponsored and all these future streams

are sponsored by Skillshare and you can see in the little overlay over here I that you can get the your first two months free 100% free you have to put in a some type of payment but those term

two months will be free you can cancel before then if you wish and today's topic is based on right here this course which is visual hierarchy and spacing and web design so what I'm

going to be doing is talking about the concepts that are demonstrated in this course but in a very rough manner so what I suggest everyone do even watching after lock watching this live stream go

ahead and take advantage of that offer from Skillshare I for the free two months and watch this course every Skillshare course has a project that you can do you can see there's a 62 to let

that other students have submitted based on what they learn and I want you to do the project and also I come to my discord server right here after you do the project and you have a week to do

this before the next stream and I want you to submit your project right I in I guess we'll put in our YouTube live chat right here all right submit your project in the YouTube live

chat and I will feature them at the beginning of next week's live stream using what you learned all right so I take advantage of that and so let's go ahead and get started I want to make you

I'm using Adobe experience design in this I you don't have to you can use figma you can use illustrator you can use Photoshop I don't even care maybe mspaint wouldn't work out too well

for this but use whatever you're comfortable with and I just want you to follow along as I do this that's what it's called a follow along in just sitting there watching somebody design

something that's that's that's more ideal than doing nothing of course but the way you really commit this stuff to memory if you're a new designer is to actually do it physically with your

hands on the mouse and keyboard while watching so hopefully if you can I you have a second monitor you can do this while you're watching this or if you're watching this and when you didn't watch

it live you can just go back and forth between windows I want you to definitely follow it's gonna help you for sure to really create awesome UI designs alright so I'm

gonna check the live chat make sure everything is going well alright it is I just want to make sure like hey Gary your audio isn't working ok so first of all what is visual hierarchy so visual

hierarchy is not specific just to UI design I'm only focusing it on UI design in this context because it's relevant to the you know the type of stuff that we do on this channel we I do web designs

and app designs and coding as well so visual hierarchy is something like I said it talked about often and it's basically a way of prioritizing the different elements that exist on your UI

design and you are emphasizing them through visual aesthetics in a sense so this could include categories such as spacing like your margin and padding I it includes color and contrast it

includes a different typography it can include animation and this is all stuff that's covered more in depth in that Skillshare course alright so I what we're gonna do here I'm gonna make this

artboard real long so their height right now is 1080 I'm gonna make it like 4,000 and also to get rid of this viewport height I'm gonna make it 4,000 as well no not four hundred four thousand there

we go alright so what we're gonna do here is I'm gonna have I'm gonna start just with a two column layout and all the principles I'm showing you are gonna apply to whether whether it's one

columns or three or four columns but just for now we're gonna start with the two column layout and on the right side I'm going to have a photograph alright so we're gonna really try to make this a

really professional-looking contemporary style of a UI slash layout so I'm gonna get rid of the border here and I'm going to use a an Adobe XD I plug-in called photo splash so if you don't have it

just go to discover plugins assuming you're using XD of course and type in photo splash and then just install it here and the way you use it we go to plugins

we'll go to photos splash alright and you could do a keyword search up here or you could just do random stuff alright so for me I know let's see here oh I like that okay we got a wolf okay so

it's just a quick and easy way this plugin allows you to just get assets and rather than have to go to the browser and search you know whatever so this is a fifty fifty two column layout and

let's say for this particular maybe this is a client that you're designing for or yourself you want to have a subtitle a heading in a paragraph all right so this is where visual hierarchy as it pertains

to type is so important I so we're gonna put it in this section right here alright so first we're gonna start obviously with the type tool and I'm just going to put in the title and it's

just going to be something random and in fact the way I'm gonna do this title is I'm just gonna draw out left-click and drag an area right around here and notice the amount and padding that I'm

giving or white space I'm getting from the left of this element and the right of this element you don't want them up close alright so I'll just type in something like enjoy the forest let me

thank enjoy the with the wolf's so stupid alright I so I'm gonna increase this so we have we have it on roughly about two lines alright and for this I want to I really want to make it modern

so and make it feel like it's a very high class so I'm gonna use a serif font I called play flip play fair play fair display just look at that I love this font and I'm going to take the contrast

and make it maximum by making this black now if you want this font just go to Google real quickly and type in play fair font download and the first result I think is this a fonts

grille and just download the TTFN right here you don't have to login or anything and install it alright you don't have to use this phone of course okay so here's our our our headline and if you want you

can't adjust the line height I'm gonna bring it up just a bit and the next element that we have and this is where visual hierarchy starts to come into play in relation to type the next

element that we need to have could be either you know we could place the the paragraph here or subheading like right underneath it or we could put it on right on top but we need to separate

these elements visually and that's what the visual hierarchy is so for instance let's take this I'm going to duplicate it with control D and let's say up here we're going to put a a subheading and

the subheading doesn't necessarily have to be a typical subheading it could be like the date it was posted I'll just say posted on July 12 1983 that's ridiculous

that that's my birthday by the way so the first thing before I make any changes to it we have two elements here think of these as different elements and clearly this looks horrible it doesn't

make sense but why doesn't it make sense because both of these are of the same exact characteristics in terms of the font in terms of the height and you really your eye doesn't know where to

look and that's what visual hierarchy is we have to separate it and we have at our disposable multiple elements and/or multiple categories to separate these things visually alright so the first

thing I want to do right off the bat is to change the size the scale is like one of the easiest ways to really reinforce and create a consistent and strong representation of visual hierarchy on

your designs so let's scale this down quite a bit all right so I have it at 26 and up here you could actually maybe put it way up here if you wanted to and we'll

experiment once we have all three of the elements on your in terms of position because again position is another in spacing is another element that you can use for visual hierarchy let's just put

it right here actually four down just for now so the only thing we changed is just the scale and we can see it works much better because we know it's obviously more important I the title of

the story as opposed to the date right so let's I take this we'll duplicate it and drag down and we'll put in just some lorem ipsum text and that is another plugin that I have here that you can

just I go to discover plugins type in lorem and you'll get this plug-in right here and I'm just going to put this one to click quick lorem ipsum trim height alright alright so now we have some

let's remove that that line height there all right so if we leave it just in and of itself like this obviously the font size is the same these two elements are exactly the same I it's not ideal I

think we can change this up even more so to reinforce you know these three different elements will have their own different unique characteristics about them so right off the bat I think it's a

little bit difficult to read this type and so this is where we're gonna try mixing font styles I so we have right now everything is just serif let's switch to something that is just

sans-serif let's try something like we could use montserrat if we want I'm gonna try a source sans Pro this is another font that you can download for free and I think we're also going to

change the type or the subheading as well to the same font you don't have to but this is just a something that I want to do okay so right now we do have visual

hierarchy sort of working but looking at it I think we can separate it even more so using some of those different categories that make up visual hierarchy we've used scale we've changed the type

I let's also change I think we will change the color here as well so or in this case it's going to be the contrast right now it's a maximum contrast but I think I want to separate these elements

from the title just a little bit more and so the way we'll do that is take these two elements and we'll take I the fill and we'll go down just a little bit right around the the hex code is five

four five four five four and I also think the line height here can be separated out and a little bit further so I'm gonna take the line height and increase it and it makes it easier to

read and we also have the space if this is the amount of text that we have to work with and we have this massive area here then we can go ahead and increase the line height like that so I

personally I think this is pretty good but we can actually I adjust things a little bit further by working with positioning so we could put possibly the the the subheading or with the date or

whatever you want to call this it was posted up here you could even try putting it up here you could take these two elements and they're their own block you can put them right here there's a

lot of different ways you could do this and there's really not a way that is most ideal over the other unless you do testing and you have traffic and you could do a/b split testing to see which

which of these positions yields greater results if you do have a specific goal in mind I think they're trying to get them to click on a call to action or something but still as long as you mind

these principles then you'll be good and what I'm talking about principles is the visual hierarchy element and also I the I want you to think in spacing as well the white

spaces so the way we need to think about things like this and this course that I'm recommending everybody check out a skill share it goes into depth about this but I think of everything in terms

of blocks so I'm just going to put out a block here to get rid of the fill I'm gonna increase the size we're just gonna make this something that really sticks out like blue all right so this is a

block here this is also a block it's our two columns and I we can also think in terms of blocks with the elements inside of them so when I select this this is this in and of itself can be a block or

depending on how you structure it structure structure these two elements these can be a block and then this is kind of separate but all together these are blocks as well these three elements

and when it comes to your spacing and your white space or your padding in this case inside of this block you want to give things room to breathe what I see often that new designers get wrong is

they will take maybe this type and they'll push things real close to the edge and if you have a ton of content or a ton a ton of type that you have to get in there that's generally you know you

there's there's no other way about it but sometimes people will put things right to the edge and it just throws off the design it makes it III refer to as giving your elements room to breathe so

don't even you want to make sure and the the the the author from that course I he has a specific lesson in there refers to is usually as a general rule of thumb when it comes to your containers and

types inside of it I you delegate about 60% of the container the width of the container for the type and then on the sides 20 percent and 20 percent over here roughly

so like I mentioned before definitely take that course so you can get a more in-depth look at it so the way I'm going to I position this ultimately I'm going to get rid of that container up here we

could start up here and then we have a lot of white space down here we could take everything and maybe put it to the bottom of the container if we wanted and I think that's what we'll do

alright so if you're following along hopefully you are because like I mentioned it's gonna help I then go ahead and try to get to this point you can pause if you want as well it's not a

big deal and then we're gonna continue on and I want to I want to continue on with this design in and try to give you some different looks and different ideas about potential layout scenarios so let

me check out the chat see why do I have two hundred eighty thousand I don't know why I do I've been doing this rig for ever I'd like five hundred thirty videos or something alright cool all right so

let's continue on alright so what I'll do now is we're gonna take this same picture I'm gonna duplicate it I'm gonna put it right here we're but except we're obviously I'm gonna have the same

picture let's go back to photos splash here alright and let's just put in another one oh that's perfect it's another like woodsy photo I love that plug-in alright so now let's say the

next in terms of prioritizing the content and what's important you know we have we have the the headline and a little bit of a paragraph here now let's say the next thing that they we want to

put in is some type of quote from some person maybe it's from this person in a photograph where could we put a quote well you might think we could just stick it right here right I we could put it

here and that would work but if you really want to make the design more unique and interesting you have other options available that you can use you don't always have to think and just

concrete blocks that this has to be here and nothing can go over it ever so what I decided to do I or I think I will do is we're gonna put in a rectangle well for you right around here

alright and I'm gonna get rid of the stroke and we'll experiment with the position of this but this is just gonna be a single quote and it's gonna be kind of large type I think and we're just

gonna put it right on top of this container or this photograph and especially with this photograph that was that I chose it works because there's no focal point in or important area there's

nobody's eyes or heads-up hair we're not cutting off heads or anything just the tree and it will work quite well so if we're talking about the position in this container would it make sense to put it

right here well on what I'm looking at is this this can element right here this photograph and notice how we have this amount of white space or spacing on the Left there's padding but we have maybe

half that space up here and that kind of throws it off in my opinion so I might just push it down so that's roughly even in terms of the white space from the top of this container to the left of here

now I may adjust that in experiment because that's ultimately what you need to do experiment with placement big time now I'm gonna take the type tool and we're gonna put a quote all right so for

the quote I think I'm just going to put in let's see here got rid of that by accident we'll use lorem ipsum again to plug in and we're gonna make this large large

large large maybe not that large but we're gonna come down I'm gonna use that the the type the title font play flat play fair I can't say that font name for some reason something like that and I

think will I use the italic version alright and I don't want it to be quite this much type maybe right around here and we'll put quotes around it and we'll take down the opacity maybe right around

there now I'm also going to put in like a quick author's name of sorts and so I'm let's take this down and so now we're dealing with visual hierarchy again because we have two elements right

we have the type I've we have the code itself and then we have to put somewhere you know the person's name of the quote to attribute them so where could we put this and what size should it be and what

type should it be it could be the same what color and contrast would it be well we can already see up here we've established sort of a pattern with how we're dealing with I you know a main

sort of type up here when it's using that serif font and also a subheading sort of section so these two elements are kind of related to what we're doing here with the larger element that's

based on the serif font and then a little subheading or which is gonna be the person's name and when it comes to consistent or UI design you want to be consistent it just makes the the overall

composition much more appealing to look at so I'm gonna put in just a dash here and then John Doe now the type looks bad for that obviously we've not worked in any of that visual hierarchy that's so

important so let's start doing that let's first change it to source sans bro which is our sans serif font and then we'll scale it down all

right I don't like the J of this source sans Pro but we'll hop that we'll deal with it we'll have to live with it make it bold what size is this by the way it's 26

this is 26 all right um now right here trying to think if I like that yeah I think we definitely do need to reinforce the the visual hierarchy through color and contrast with these two elements we

did sighs we did typeface let's do color and contrast as well we could either make this like near black or black itself and that would work or we could keep it kind of around this mid area and

we could either make this I you don't want to go too much lighter than what we have going on here simply because people won't be able to see it certain people do too colorblindness and all of that

good stuff we will not be able to see it so going even this light for this element right here would be too light don't go that light when it when it comes to a background that's light or

white like this if we're gonna use this color which is sort of a mid gray I think we might go a little bit darker then we'll make this one a little bit lighter and so now we can see we've

created a good separation between these two type based elements which of course is visual hierarchy all right so where does this end where is that end looking at this so it's a little strange having

this big container there this rectangle kind of cutting in and then we don't see anything over here we could we could read it further reinforce that through let's see here I guess we'll take

another rectangle and in CSS I guess we could say this would be like a drop shadow that we can implement and we'll make this and we could have also done it with the drop shadow here

that's probably that would make more sense let me do it that way of doing things inefficiently so we're gonna have a shadow here we're gonna take the blur is going to be zero

hopefully you oh yeah you can't really see it because I'm in the way yeah the B or the blur is zero we're gonna have the X is the one that's gonna be higher nope sorry the Y I mean coming down maybe

right around there kind of like that and then if you want to adjust the opacity you can want to be quite light like that alright so I like that yeah that's good alright so let's say we also have a

requirement and maybe having something in this area which would make sense and this time maybe we'll just have two elements and it will just repeat this over here we'll duplicate this and

remember spacing very important what's the next element that we need to consider when we're spacing this the this block right here well it's this section right here and more specifically

really it starts right here because we have an element that has a horizontal line that's going across so we could space it in different areas we could put it maybe up here we can once again line

it to the bottom and that would be ultimately more consistent with how the overall design looks at this point and also because we only have two elements here instead of three because it works

this this way because we're separating them these are these are their own elements and this is so far down I think we could probably get away with putting this just down here like that and again

some of this is subjective but I'm really just trying to focus on what's objective so I think I like that and if you want to do something you can break these rules a little bit if you

really want to try to give it more of how would I say it a graphic appearance or you're doing things that are more unique you can break these rules so for instance we have a quote here and

sometimes you'll see this I when it comes to quotes let me just put in a quote right here I'm gonna make this large and I'm gonna change I'm just going to cycle through with my down air

keyboard key here down arrow rather I try to find a good-looking oh god I'm not going into those ones a good-looking sort of quote a double quote rather well I'm not gonna sit here too long doing

that what we could do is no that's horrible I am gonna try to change it up to get a better one I have some horrible double quotes here geez what is going on we'll just use this one what you can do

is you can have maybe like a large quote where here and this in and of itself wouldn't work simply because it there's too much contrast and obviously we're going real close to the container which

like I said before wouldn't make sense for your primary content especially if it's something people need to read but if we take it down the opacity it looks a thousand times better and it adds

something to your design that's sort of interesting I don't like that quote but I'll leave it there so you can get the gist of it alright so I'm gonna check the chat and make sure everything is

going well we're at 31 minutes all right so again if those of you I who are joining or joining this dream after I began this this project that I'm doing is based on visual hierarchy and a skill

shared comm course that you can take for free if you join using my code that's overlaid on the other side of the screen here and that is right here visual hierarchy and spacing and web design so

it's it's a full course that's going to give you a lot more information more structured information about visual hierarchy in web design so I'm just giving here my own take on it and so

especially if you're new designer watching just one tutorial or stream isn't going to cut it you need to continually try to focus on areas that you're struggling in and when it comes

to UI design I think one of the biggest thing new designers struggle with is this this idea of visual hierarchy and spacing all right so let's continue on and I'm gonna put in a section let's say

for instance we want to have a another two columns except for this time we're not gonna have a photograph maybe we will have an area where we capture emails for like a newsletter or

something now again we want to try to when it comes to good UI design you want to keep consistent you want to keep consistent across multiple areas in design you keep consistent with your use

of type your use of color and contrast and your overall style and spacing as well so having said that let's put in a label here I think we'll put in something like I get the latest news and

yes I know that looks and in turn entirely much too large let's go ahead and scale that way down and that's not the type we're using we're gonna use play fair

all right well first of all what I can do is just take this and duplicate it and I'll type in get the latest news all right and so for this section we have to ask yourselves okay what are one of the

most important pieces of content so far in this design we have our headings right here we have the type here we have the the the the quote and get the latest news is this is as important as the the

titles of these different sections of content I would say no so I'm gonna scale this down so the way we've enforced that visual hierarchy on these less important elements is through scale

and as other areas that I've talked about so we'll scale us down something to write around here and what you want to do if you're dealing with a serious project that has a lot of different

artboards use you want to use the assets section over here where you can add into colors that are associated with your design the character style specifically so if you click over here and you click

add character style it's gonna add this style so that you can easily change it across multiple areas and just change it in one section without having to do a lot of legwork all right so that's quick

tip there for Adobe XD so get the latest news I think that's good right there and again we're thinking about blocks when when you're spacing things out this right here is a block all right so we're

thinking about how to space this I'm looking at the left and the top and making sure that they're even all right so now under here we'll have like a a a text field of some sort and there's a

lot of different ways you could take this a lot of that subjective as long as you're you're adhering to good design fundamentals so I I think what we'll do is make a real minimal sort of eye area

maybe let's see it maybe it'll just have a single black line and we'll have placeholder text which of course is all achievable in HTML using the paid placeholder attribute and I'll

put in here using the source sans Pro font which is the the sans serif font we'll put in enter your email alright so here we go with visual hierarchy as it pertains to

type once again this would not make sense because you want the eye to first see get the latest news and because that's the most important element in this particular block right here so

enter your email should not be the same in all facets so through visual hierarchy we're gonna change it again so and once again we want to be consistent by using the same type elements and

apply them in much the same manner so I'm gonna delete that real quick just because it's a little bit redundant to keep on typing that stuff and I'm going to duplicate this subheading up here so

let's change that up again I'm gonna put in enter your email all right ready run there and look at that already so we changed it I you change this up quite a bit obviously again it's it's a

different type it's a different size it's less in size and it doesn't contrast as much so it creates a separation visually between these two elements and that essentially is a

visual hierarchy so I think right around there is pretty good again you also have to consider when you're thinking about spacing you get you don't just space consider spacing from the outside

elements but also between the elements themselves I see a lot of new designers push things up too close and it's like oh come on man why would you do that you got to give things room to breathe so

that looks pretty solid right there and then we'll put a very simple call-to-action button and another thing that's a part of consistency in establishing sort and sort of design

aesthetics is when it comes to buttons do you want rounded corners or do you want like that or do you want it to be straight up just squares you know with with no border race a lot of times new

designers will try to work in border radiuses they'll put in drop shadows to putting glows simply because they can and to think more is better but that's it's usually opposite of that I'm not

saying that you know rounded corners are always a bad thing here it's a subjective preference but if you're going to apply it in one area you need to apply it in others and one reason I

would use these rounded more of a square approach with right angles is because we do see right angles all over the place here already it with no border radiuses like in the photographs so that's why I

would use just a straight-up square like this or a rectangle rather so let's make this just black and we're already establishing sort of a color theme with this and this is really monochromatic

outside of the the photographs themselves so I think straight up black would be a good call to action button color because it does stick out there's no other black on the page that's you

know that encompasses this much space so in terms of having a good call to action this works perfect so let's just put a type or a button label here I'm just typing get it now make this white for

maximum contrast scale this down and one consideration we have here now is do we want to use this serif font for the the label or do we want to use source sans Pro I think I probably want to use

source sans Pro for that it just makes it a little bit easier to read I think all right so another thing that you may be wondering to yourself is if we're thinking in terms of a

container and blocks and we're spacing things inside of them in terms of padding let's get rid of that fill then shouldn't we move this section or this button rather like this and then maybe

over here remember this is going to be two columns this is going to be one column and then there's a column over here perhaps over here we're gonna have some

type of descriptor or something about to get the latest news or something like that we're gonna duplicate this well put it in and it might be just a couple sentences about what they're gonna

receive over here you could also put this underneath it might make more sense but really I'm just trying to fill out the space over here something could go over here so you could do it like this

but I ultimately think if we scale this back out right here it still works and the reason it works is because we don't have a definitive edge that's clearly defined right here in and of

this container what we do up here and bringing out the edge of this button to that edge works still so you can definitely play around with the padding as long as it works and things still

have room to breathe you can see this get it now button it's not too close to this type I in really it's just kind of acting I in the same manner and vertically in space wise as this image

up here so I think it works quite well all right so I think we're gonna do one more section and then we'll conclude this live feed so let me just I'm gonna save this off screen here and check out

the chat make sure everybody's still hanging there we'll do post oh it was source code fro of course uh source code Pro that's why it was looking different I was wondering it's

like damn that J looks strange source sans Pro yeah that would annoy me too if that were you so thank you for pointing that out haha alright alright so I alright hopefully you guys have been

following along with this of course you can just pause if it takes too much time or if I'm going too quickly because again it's gonna help you commit this stuff to memory by doing it rather than

just sitting there watching me I know it's a pain to have to do it and especially if it's for just for the purpose of learning I mean he looks who likes doing that but I trust me it's

gonna help you big time more so than just watching so the final thing we'll do everything we've been dealing with rate so far has been like kind of two columns and such

let's do three columns underneath there so how would we work in three columns and what will it be I so like what what type of content will represent well when it comes to landing pages when you're

working with maybe three or four columns of content you can't have whatever it is inside of those those elements to be like a ton of type or anything so a lot of times it'll be just kind of quick

little tidbits of information that the feature that may go into detail about different aspects of the service or whatever the page is about and sometimes they'll have icons that accompany them

with just maybe a couple sentences underneath so we'll have three columns and we'll do that so right now there's a lot of white and we know we're not going to be using another photograph down here

so one way I like to you can separate your different sections of content is by color alright so we're gonna take a container right around here and we're going to separate it very

lightly just I what does that color code it was f2 f2 f2 right around here now one of the things that you should be aware of when you're working with this I I'm looking right now at the the overall

spacing of this block of elements around at this container right here this block so you can see it's uneven there's less space at the top than there is at the bottom so we can adjust that in multiple

ways I think the best way to adjust that would possibly be to perhaps move this over or down I think right here we have an even amount of space between the left

and right so we want to have an even amount of space between the bottom and right as well so we need to move this up just a bit alright so actually one one area that I've screwed up on I just

noticed is look at where this type right here look how much white space there is here and then let's come down here and just draw that sort of line and look how much the get the latest news is in so

that's inconsistency and we don't want that so what we'll do is I will take this I'm just going to group them so I don't have to select everything individually

okay right there is where it should be ideally oops and what we'll do now is just bring this in so now that it's lined up to the left this element should be like right around here and then this

one can come down now I yeah right around there there we go much much much better yeah I screwed that up there I wasn't really paying attention to the top so that's why consistency in all

these different elements especially spacing as we just saw is very important it'll help just even on a subconscious level help people understand that at the it'll be a great design or it is a great

design alright so down here getting back to this we're gonna have three sections of content there's a lot of different subjective ways to go about it and one's not more right than the other in many

cases but as long as we adhere to this good solid design fundamentals then we should be able to do it quite well alright so let's go ahead and we'll just start with the tight base section first

one of the things that can help you by the way when you're dealing with a lot of columns to help organize them is to take the artboard here in Adobe XD and turn on the grid layout by default it's

at 12 columns with a 16 gutter width and 122 column width all right and if we have three columns we know that they'll need to occupy four columns but they don't necessarily have to expand all the

way out to four in fact you don't want that because there won't be enough weight space I'll do that though just to show you as a demonstration how bad to ends up looking so I'm gonna go ahead

and wow look how close I got to that left column without even seeing it I got lucky there let's put in lorem ipsum text here real quick and we're going to go to our plugin

we're just gonna put uhm right there alright so this is for and I'm gonna Center a-line knees and you can experiment of course without you know maybe it's just left lining them we

don't want this to be bold so we're going to set this to regular and just for right now let's say we want this to be like it right around there I will say this is good we'll duplicate it we'll

put it into the next section and then the next section here and let's get rid of the blocks here or they grid so that we could see what this looks like and it's not going to be good this is not as

bad as I thought it would be actually because we do have some white space between these elements but it's not enough you really need to give things more room to breathe when it comes to

type based information that people need to read so if people need to read stuff and you have you know multiple elements our multiple type elements that they need to read you want to bring them in

much more so let me show you a better way of doing that just take the repeat grid tool and just drag this out and of course well I'm not sure what the toggle button if there is

a toggle button for the grid I should learn if there is I got almost perfect here all right so what we can do is then double click on any of these and hold alt and scale them in and you want

something more like this alright so coming back out here that looks much much better in my opinion there's a lot more space between these elements all right so we could

also have a an icon and in terms of visual hierarchy as it pertains to something like this we don't want to separate these elements because we're giving them equal importance or equal

priority all right so let's get some by icons here we can go to icon finder calm I think there's a plug-in actually you can use for XD I haven't used it yet though and we could

just type in um I don't know LOC it's not going to be relevant based on our design you can also choose free and then license type of no link back and I'm just going to choose a nice

outline based I thing will do this SVG right here so the SVG will download you can open it up in your Explorer or show in folder of course that has to show up and then I will drag it somewhere

off-screen increase the size alright so this is also a visual hierarchy right here because we have two elements we have an icon and we have a type how important is an icon as opposed to the

type it's it's not as important obviously it's just it's there is just kind of a quick visual reference so the size it definitely shouldn't be like this I see a lot of designers screw this

sort of thing up where they make the icons it's just real big unnecessarily big and they're giving it so much importance I mean it's really not that important if we're talking about the

type I that's that a company is it that's the most important stuff that people need to read right so I we're gonna reinforce the visual hierarchy through changing the scale and also

possibly the stroke color as opposed to the contrast here right here so right here this type is of a dark gray you might want to make it a little bit darker because this isn't completely

white this background so on so the contrast isn't quite as much and then the color of this we could see maybe right around there would work we'll experiment with it just a bit I'm not

sure if I like this quite not quite yet I think it's fine right here around here I think through scale alone and in position and putting it up will work quite alright yeah okay let me just take

this in replicate it a couple times I am gonna make it just a bit lighter just to separate these out to a little bit more so I'm gonna take this we will repeat the grid

right around there looks good I'm not gonna bother making these unique you can you if you want and remember remember your spacing we have this container here and you want to make sure that you have

equal spacing from the top to the bottom and left in right and it looks like this should come in just a bit looking from this section to this section and of course if you want to be absolutely

certain which you should be you can get out guides and such to ensure all that stuff is equal down just a bit right there and then you could leave it like this but you can also again you can you

can hack things a little bit and make them more interesting visually so what we could do is we could take a container here like a rectangle or square of some sort we'll leave a stroke here and you

can get unique with this eye you can just do different things and play around as long as you make the contrast not so significant most of the time for instance we can you know we could just

put a container in here for each three of these that would maybe just be too unnecessary but if you if you are not unique enough but if you want to be different

you could do something like this and make some sort of javascript-based hover effect where it's like a parallax when you hover over them let's take the opacity down and Stroke up just a bit

where's the stroke there we are so the thicker you make the opacity the more or the thicker you make the stroke the more you'll have to take down the opacity generally I mean you can

experiment by the way just by going all black to see how that works but personally I don't like that I think it draws too much attention to the frame itself so I'm gonna come down you could

try doing white as well maybe adding a stroke or a drop shadow Artech shadow not a texture I've got a box shadow on to this and see how that looks I but I think I'm just gonna go

slightly darker than this background here but it's still barely quite not noticeable but it gives it an interesting look and you can break those rolls as long at you know in terms of

padding and spacing inside containers and we can break outside of the container as long as what you're doing doesn't conflict too much with what's happening in other areas so this over

here I may not want to make that quite is I'm off centering it just a little bit let me delete that one something almost sorta like that I still I think I have the these things off just

a bit nonetheless it's an interesting look that you could I you know further experiment with in that right there is it alright so let me save this will get up closer just so we can get a good look

of what's happening here so again we have visual hierarchy applied to these three elements we can see they're all quite different on their own even though right here we have another way to

enforce visual hierarchy of courses through text transform CSS property or all uppercase letters and that's one way you can separate items visually we could see it more so here and again you could

experiment with placement and it would still work in other areas as long as you're not doing stuff funky stuff like that or like this or like this you don't want to do stuff like that you have to

give things room to breathe but you could still play around with this that would work this could possibly work right here so you have options just as long as you're adhering to the basic

fundamentals so over here we saw that we have like a little watermark that we applied again everything's spaced out we're separating things visually through type color size

scale and all of that good stuff so in the end it comes to create a nice sort of composition that feels very consistent and it works quite well alright so it has been 57 minutes that's

perfect alright I'm going to just check the chat out here a little bit because I haven't been reading them so let me pop out the chat I'll get to this in a second being that we're about to

conclude what I want you guys to do now if hopefully you followed along and if you didn't you know hopefully you can watch I may be later and follow along and

definitely check out the sponsor which is Skillshare and this is the course that I'm recommending people try out after you join for your free two months using my link right there on the side of

the screen in the description to youtube follow this course and it's gonna need to really outline much more so what I'm talking about or what I was talking about in the stream kind of off the cuff

in a more organized manner and then follow the projects there's a class project and these are all the user submissions and I definitely suggest taking that in doing the project and

within the next week if you do the project and you go to my discord server which is right here and go to YouTube live chat post a like a screenshot or a URL or whatever to that project and I

will feature and a show I'll go through the projects I on next week's live stream alright so the first step in order to be to be able to do that is to this join up here it's for free for two

months at Skillshare take the course and then do the class project and then submit it and then I will feature yours into a quick critique of them on the next week's live stream my throat is

like dying practically here alright so I'm gonna check out the chat here a little bit okay so we had quite a bit of text here right-click show hi grid all right thank

you I'm just going through this all right cool guys I'm gonna check out my other section here yeah so next week we'll do the live design review and then two weeks from then we'll do another

different project follow along and you guys can submit your ideas for that if you want all right nobody's talking yeah I kind of I I don't feel a high energy today either going to a waterpark in two

days all right all right everyone I hopefully you enjoyed it I'm looking forward to seeing your projects by the way to post them in the YouTube live chat and I will see you guys yeah next

week and also obviously I'm gonna be having tutorials I threw out next week as well before the livestream all right I will see you guys later

https://skl.sh/designcourse15 – First 500 people to sign up will get their first 2 months free!
— In the very first of this live series airing Friday the 7th at 11:00 AM EST, you’re going to follow along as you learn about visual hierarchy in UI design! You can share with me your work as a part of this project and I will feature a select few in next week’s live stream.

– – – – – – – – – – – – – – – – – – – – – –

My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro’s Twitter: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF

– – – – – – – – – – – – – – – – – – – – – –

Who is Gary Simon? Well, I’m a full stack developer with 2+ decades experience and I teach people how to design and code. I’ve created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

Now, I focus all of my time and energy on this channel and my website Coursetro.com.

Come to my discord server or add me on social media and say Hi!

– – – – – – – – – – – – – – – – – – – – – –

Subscribe for NEW VIDEOS weekly!

My site: https://coursetro.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro’s Twitter: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others

– – – – – – – – – – – – – – – – – – – – – –

Who is Gary Simon? Well, I’m a full stack developer with 2+ decades experience and I teach people how to design and code. I’ve created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

Now, I focus all of my time and energy on this channel and my website Coursetro.com.

Come to my discord server or add me on social media and say Hi!