Visual Design | Design a Job Site Part 4

[Music] [Music] [Music] [Music] [Music] [Music] [Applause] [Music] [Music] [Music] so [Music] [Music] [Music] [Music] [Music] [Applause] [Music] well hello everybody and welcome to the live stream we got people coming in from all over the place got people on behance on twitch on youtube on facebook what's up to everybody my name is jesse showalter and you're here watching my live stream today we're continuing on in our live stream series of designing a freelance job website kind of home page or landing page we've been trucking along and doing that we got mr miro saying hey yo from sudan what's up from sudan let me know where you're coming from in the world on this fine friday maybe it's thursday for you maybe it's saturday depending on what day you are watching this thing alexander says hey from london how's it going thanks for sharing amazing articles and videos thank you for being a part of it thank you for joining me on this live stream all right we got people coming in from india from sudan from london what's up to abernail what's up to alexander if i hear mr miro joseph vibrio and a bunch of others hey thank you so much for joining us what are we doing today like i said we're doing lots of fun stuff we're building that job website so let's take a look really quickly on my screen what have we done so far i'm doing this whole thing inside of figma and we've gone ahead and done a little bit of research the link to this file is actually in the description or at least it should be the description of this video you should be able to click on it and join me and actually watch me work right you can't edit anything but you can watch me work live if you'd like to and so we have a little bit of research we did we did that over in a miele note board then we did a little bit of wireframing actually in a fig jam file look at abber nails in the file right now and we brought that i went over went ahead and brought that wireframe into um my normal figma file you can see what we're kind of trying to accomplish here a freelancing website right logo navigation you know headline and lock up and everything like that with some human kind of interaction stuff happening there lots of fun floating elements we're going to be doing a search bar of some kind some social proof trusted by da da da then we want to say hey what types of jobs are available some success stories simple ways to land the client and finding work that we love so basically listing out all the different categories and of course some big kind of footer now today we'll probably be tackling kind of the start of the visual design setting up your artboard your file establishing styles probably the hero uh the search and maybe the trusted buy maybe the jobs section maybe we'll probably stay in this area right here then last week we did a little bit of mood boarding right we did a little bit of rough move boarding and a little bit of style tiling uh the difference being we went around the web and snapped different shots of things that we like things that we enjoy things that we're kind of going for and put it in this kind of messy mood board structure here titling what each one is and then i actually went back in and retweeked the colors and everything to this but we created a style tile a style tile is really that next step right from a mood board it's the in between of a mood board and a visual design that lets the client know this is kind of the direction we're going for here okay we're heading in this direction these types of colors you know this is not final design but it could be right it's on the on the way it's on the road to getting to where we want to be okay we created some interface components and buttons some elements some lockups of text and maybe even some examples of different elements in our design so you know for a client you might create one or two of these maybe three if you're feeling spicy and you want to give them a lot of options i'd stick with two but really kind of geared towards that direction you want to head and then from there we're going to start building our visual design now today is going to be a little bit of that rough draft we're going to go in and like i said build a few of those sections we're going to start kind of creating a bit of a visual style today if you haven't already make sure you like subscribe hit the bell notification icon so you know when another video like this one comes out but today we are going to be building a little bit of that beginnings of the visual kind of structure and style that we'll be reusing now we might continue to go off of what we have here in the style tile we'll try to honor it for the most part but we also want to give ourselves a little bit of freedom to play here okay because we're doing this so quickly and we're not really necessarily like really dialed in and committed to the style tile we'll give ourselves a little bit of freedom and that's okay all right but if you're doing with this client you're probably doing this with a client you probably want to stick to what you've shown them what else do i have all right i have the starts to a visual design board i've basically pulled in a bunch of images that i might use for that big hero image okay some fun people people that might work well and i've removed the background from some of them now a really easy way to do that is to take a selection like this one and then use a plug-in called remove background and all you got to do is set it up get your api key thing i got to set the api key i don't have it here on my laptop i did it over on my pc earlier to get these but or you could take these images and head out to remove.bg and it'll just smack the background right out of them so i have some resources to use there i also have that library we've established we established this way back in video one or two i think right i think we're on video four or five now so um i i looked at these colors and i was like oh that's right i really liked this color palette that we set up here so that's what i went ahead and went back into my mood board and updated some of my colors with is using these colors in the library i've also updated everything in my library so you can see i actually have some of these headlines headline one two three a little body copy and i took all of those colors all of my colors as well as my neutrals down there and then i have placed them into my color style so i can reuse those as well okay i see a lot of you joining me in the figma file that's really fun really excited that you're here so with all that being said now we have everything we need to move into visual design few things to note about our live stream today at the end of our live stream you are going to want to submit your work or make sure you have submitted your work by joining the discord server the hey creative discord server this is where i mean i think we're rocking i mean close to three or four hundred members now of this free discord server all you gotta do is sign up and go to the portfolio or project review section right over here okay and submit your work and that's where i'm going to be pulling actual work today to take a look at at the end of our live stream okay so that's one thing another thing is we also throughout the stream we'll be doing question and answer time so if you have questions you can put them right here in the chat or you can jump over to the discord you can post them there i'll try to pull some from both lastly if you're interested not this week because we have a little bit of a mix up with schedule we're figuring a few things out but i do have an exclusive membership club that i would love to invite you to if you're interested in live streams like this and having more interaction with me getting access to my design files and extra behind the scene resources then consider becoming one of my members you can either be a supporter insider or one of my design champions for about the same price as one you know fancy latte each month so consider becoming a member my members not only get access to everything i've mentioned but they get actually access to the exclusive design champions only uh channels inside of discord we do live member hangouts where we actually kind of do role play we answer questions i address you know pricing freelancing jobs interview prep all that kind of stuff with my members so consider becoming a member the link is down in the description for you to check that out all right everybody ready we're going to dive in we're start doing a little we're gonna start doing a little design work here today let's hop to it all right so um okay again we have that that artboard open really quickly before i start i'm gonna take a sip of my legend spicy neotropic ginger drink it's my favorite nootropics are just there to make your brain work make the old brain work the right way all right so i'm just moving a few things around making sure i got the chat feel free to ask questions at any time right and uh i would ask that uh you know just be just be respectful in the inside of the figma file and don't distract me while i'm working because i am about to work please be in there check things out watch if you want on a screen but uh you know just be careful just be just be respectful all right why don't we set up uh here's what i'm gonna do actually because i just like to work side by side i'm gonna grab my wireframe i'm just gonna paste this in there these these images we have are very very large to work with which is nice this image is like 4000 by 2000 pixels it's real it's really really big it's pretty pretty decent size okay and you can see our artboard over here looks menini that's small or tiny in hawaiian lingo so um all right i'm gonna press a for artboard i'm gonna hit desktop over here i'm just gonna choose a normal desktop that's 1440 by 10 24. love jesse whoo thank you very much i appreciate that all right and i'm just going to move these over and into place now we know that our our artboard is going to stretch so why don't we stretch it right now and the first thing we should probably do is set up a little bit of a grid and a layout system okay so here's how i like to do it this is not the way you have to do it but i'm just going to draw a rectangle and i'm going to choose a size that i want like maybe so let's let's try 1200 okay can that's that's kind of representing our containing element that would run down the page we see this okay so the containing element that runs down the page all right now uh from here we want to select our artboard let's call this our job web site okay artboard and i'm going to turn on my layout grids okay when i do that i get some options i get either grid or i can come inside there and i can choose columns or rows i'm going to choose columns i prefer a 12 column layout for a website okay so i'm going to change this number to 12 and you'll see 12 columns happen now right now our our layout grid is stretching right that might work for you now here's uh you know it might work for you if that's what you if that's what you're into okay and what that can mean is as our as our artboard stretches so goes our whatchamacallit our grit okay that's one thing you can do let's really quickly let's hide i'll show you a little trick if you want to get spicy okay what you can do is draw a frame inside instead okay and then you can tighten it to our shape and then let's get the shape out of there we don't need this but we can call this our grid okay lead that to the top and then we could turn the auto or excuse me the uh the grid inside of this we should be able to turn a layout grid on and choose columns 12 columns and now it stretches out right now we can move this frame around and it has a responsive grid inside of it right this is actually really really great workflow if later on you're going to do the mobile and then like a smaller kind of like tablet size like maybe we'd be over here later on and we'd say hey we want to make sure that this stretches now the only thing you'd want to do is you want to make sure that it stretches to the left and the right now when we stretch so does our grid as well i like this approach let's do this approach today i don't usually do that but let's have fun with it let's so we're again we're selecting the frame right and we're making sure that it its constraints are sent to left and right so it's stretchy stretchy when the master or parent container stretches so will the the the actual like grid itself now if you don't like that you can set it to uh the constraints of this thing to be center instead if you'd like to um and that's another way to do it all right but this is a really simple way let's just smack that grid on there and let's just drag it down the only thing you need to know here is that at that point you probably need to lock your grid so you don't mess with it right so we can play with it like that so you know what i'm actually just for fun i'm gonna get that out of there just because i don't i don't want it right now uh it's gonna cause maybe a lot of on and off and i like this i like being able to select my artboard and hit ctrl g and turn my my layout guide on and off like so so let's edit our layout guide a little bit i'm going to do that thing again that i did before let's do something like 11 let's do like 1180 okay so i'm just changing the width of my rectangle i'm centering it i'm coming back in and editing my grid and literally at this point i don't want to stretch i want to center the grid okay and then we're going to change the width to match like the the size we want right and again we could be here and then change our rectangle that's our containing element whatever you want i'm going to do 1180 that's a nice thing 20 pixel 20 pixel gutters right 80 pixel width uh grids or columns right perfect with a 12 count beautiful just like that okay now i can get rid of this and i can just hit command g on or off i'm just showing you multiple ways to set up your grids inside of your projects okay you do it however you feel comfortable doing it maybe you like that responsive workflow there's gonna be there's gonna be things that apply to it later on down the road but for now right maybe you just like a simple column grid inside of here we could do rows we'll talk about that later but right now we have a little bit of our our setup that's our artboard setup okay uh let's do this i found actually a couple of resources in the figma community i found this one called open logo okay and uh this is by nathan covert given props for making a bunch of open source free logos that you could use and they're kind of meant as placeholders inside of your projects right not to be used or sold and then we also have this other one called better logos it's a community file has a bunch of social media companies different logos we're going to use that for our for our social proof later on so if you want to hunt those down better logos open logo you can find those okay i really like this wave so i'm actually this is i'm kind of vibing with the wave i'm gonna copy it and just bring it in as exactly what it's supposed to be as a placeholder command c over there command v i'm gonna pop this in and i'm gonna use one of my colors why don't we just pick our kind of bluish color and that'll be the start to our website like wow like amazing right we're building a website okay all right from here let's just fast forward and like make our lives a little bit easier i'm gonna go back to my mood board okay and i'm gonna grab a few things like i'm gonna grab this text lock up this little hand drawn thing here and i'm gonna head back over into my visual design and i'm gonna pop that in now my text is definitely white here so let's choose a color and we are going to we should be able to use a color where's our color like this and let's pick we have this kind of blackish color it's actually called midnight okay and right there yeah we so we have this kind of darker color called midnight that works well we're just kind of butt that up onto our grid like so now let's bring in one of the secret you better be nice out there you're distracting me i'm going to kick you off my figma file if you don't be nice and stop distracting me all right um i have this picture i kind of like you know all of them are really really cool we should play with all of them because they're really really cool images here and here's here's the the vibe you could tell i was looking for right i'm looking for a happy person okay um i i prefer some like a smile i want them to look like a freelancer and maybe they're interacting and pointing at something this is just a good start for us okay so i like a lot of these any of these could be used this one's a little bit tougher because it's so low right and and there's also some different like debris in the way like books and a desk and stuff like that so i prefer something like this when i use that run background plug-in on it it cut it out perfectly or one of these right now i really like her she's super happy super stylish she's got a cool vibe going on but i i kind of prefer something that maybe it just looks a little bit more like um looks a little bit more like a freelancer now she has a cool vibe as well i like that i really liked this one um it's really really cool actually and she's pointing so this oh i might have to figure out my api key and run this really quickly because i really really like that one this one's fun but keep in mind lighting is gonna be a big factor now we're talking art direction right lighting is a big factor all right so when we put a design into a website um the lighting has to kind of match right and if the lighting is very very um very very uh like um like ambient very different it has like a weird glow to it that's a certain vibe our whole website kind of has to match it and so that's why i like to try to stick with things that look a little bit more like natural light or studio light in my opinion tends to excuse me look a little bit better inside of hero sections of websites so with that being said with that being said i'm gonna move over here really quickly and i'm just going to boop [Music] do a few things do a few things okay yep i'm coming down here and all right i'm going to just really quickly okay i'm just taking care of a few things excuse me sorry uh i apologize but secret is uh is just you know i'm only gonna do people invited to this file just for a time okay uh yeah so that turns off access sorry um you blame it on secret if you want but it was uh it was bugging me the amount of movement and typing i'm sure you were having fun secret but we had to we had to cut you off right you had one too many and it was it was closing time so i don't know why people are still in there it's interesting okay well we might have to how do we fix this can view can can view the prototype only only people invited this file right that's all we want live viewers copy share export from this file boy oh boy everybody's in it and i don't know how to get you out of it that's okay um all right with that being said everyone behave be nice otherwise i'm gonna start a new file and kick you all out it's here we go uh i'm going to take my model let's start with this model okay and bring this model in really really big obviously right okay so let's just kind of shrink it down and put it into place there excellent i'm gonna zoom in even more cake so we can see our kind of our our wireframe coming to life here a little bit okay i'm gonna actually just click on the image here and i'm not gonna fill but i'm gonna crop and that'll allow me just to pull this section down and kind of hug the edges of my image a little bit okay because we don't need all that extra headspace we really don't all right with that being said really quickly i'm just going to zoom out i'm just going to do a rectangle really quickly and in i know a lot of times i'm like hey only use frames for things but in this case i would say maybe a rectangle is a good call because all we're going to be doing with it is doing a little vibing with some colors all right so with that being said let's just make sure that our rectangle is behind everything it should be i'm gonna turn off our grid okay we have this kind of dark gray rectangle is it behind everything it sure is okay it's just a really yucky color so here's what i'm gonna do i'm gonna do something like maybe we'll come in let's change the fill to a linear gradient okay at the bottom let's do what do we have in document colors here something like is that our blue local colors here's our blue okay and we'll do like a light version of the blue and at the top we'll do that same light version of the blue except we're gonna bring the opacity of that down like a lot and then we're gonna bring the opacity of the whole thing down right it's at a hundred percent we just want it to be really subtle okay just really subtle so far all right and i promise it's gonna work out let's just grab these elements pop them up here turn our grid back on and now we can kind of start manipulating our figure right our character that's there okay that's all looking kind of cool now let's do a little bit more we need a little bit more visual interest i feel like and we're starting to establish styles actually which is kind of cool we haven't even built the navigation or any of that kind of stuff really quickly as we're going let me know what you think we should name our freelance website i think we had some cool names okay um but uh yep but oh somebody said graham says you can hide multiplayer cursors oh how do i do that graham um i do view uh-huh hide multi you know we can always just do this hide oh where's cursor's at no i can't find it show multiplayer cursors or hide it says it says right now they're hidden i don't know we'll see um all right i'm going to add a little bit more visual style here i'm going to hit o for an oval or an ellipse there again let's make that the same color and then let's add a little effect to it this time let's turn on something like maybe like layer blur and let's just blur this thing out okay something like that make it really big and when we make it bigger we're gonna have to blur it more blur it out like that and then we can bring the opacity of it way down let's shove it up here in the corner boom boom bring it around in the back of everything yeah just a little bit of visual interest it's still a little bit bright for my taste let's go all the way down and just bring it up a little bit like that it's like 20 22 something like that we can add another one of these somewhere over here okay and we'll just make sure that it's in and kind of tucked behind okay now we have kind of like that cool kind of fading gradient kind of spot treatment it's not really like a mesh gradient but it's kind of working okay um why don't we uh we got some names here freelancer okay we could call it freelancer what's up toscas who's watching this on twitch what's up to uh mr miro and salah and adil thanks for joining uh somebody said nice trick with the grid thank you appreciate that all right we're gonna do a few more things we'll stop and take some questions here but let's let's get this cooking a little bit i'm gonna take my text here copy and paste it a little bit what do we call it somebody said freelancer i think there's already a site called freelancer what about free uh free free work free birth free free bird like like this song sing free bird i love it okay that could work right it's a fancy name it doesn't make a whole lot of sense but here we go drag that down like so okay uh huh show multi yeah multi cursors are hidden there we go bye-bye that was graham that was it it said show but for some reason i had to press it to hide it okay so with that being done i'm going to let's make this a little more of a semi-bold and let's just because it's a logo let's let's play with the character spacing and that'll just kind of set it apart and make it a little bit differently semi-bold still a little bit how about yeah i like medium let's go medium okay it's tiny it's like 30. it's not actually that tiny let's do something like 26 bring it down that makes me feel like this should probably get brought down a little bit we're not doing a branding video today but we are trying to just make something real quick okay with that being said boom we have our branding called free bird that's what we're naming it okay uh a deal says how do you join the figma file there should be a link down the description jump on in i've hidden all cursors so we should have no problems although i might need to turn sharing back on anyone with the link can view all right you can jump back in because you can't mess me up now and distract me all right uh let's take the same piece of text paste it whoa where'd you go right down here we'll build a little bit of a navigation here in a minute um so yeah yeah freelancers uh we're gonna have to fix this though because we have this crazy character spacing and then we might as well start implementing a little bit of body copy so it's either that's pretty small i think i think we have our body copy at 18. let's check it out it's actually 16. let's go in and edit this actually a little bit and make our body copy 18. does that work that could work let's you know there's always a debate right do you want your navigation elements or your your links up at the top to be the body copy size or should they be a little bit bigger we'll start here and we'll play with it and we will see okay so let's take that um i'm going to yep just like so and uh yeah yeah yeah yeah that could work and then what i'll do is press shift a right and it kind of turns it into a button that will expand i know you're like why would you do that because then i can do this right here and take both of them and press shift a that's turning on auto layout so when one of them expands the other one expands as well okay um what's uh what's okay we have freelancers we have uh find a freelancer okay this one is find a client like that love that okay love these and then we'll just do another one uh let's see um um uh let's do a blog why wouldn't we do a blog okay let's do something like that let's just center the whole thing in the middle i don't do a lot of these center centered navigations like that maybe that could be fun let's head back over to our mood board let's snag this uh search bar really quickly again it may not be final it may be final we don't know we're playing right now we're exploring visually we're centering the whole thing we're kind of overhanging it oh my gosh it's starting to look like a website just a little bit in it okay i'm gonna turn back on my grids here and if we're gonna have it here we might as well just honor some some rules that we're kind of setting in place but it also has a little button inside which is kind of nice right uh let's turn it off that's ctrl g for me on my keyboard let's go in here and let's select a color that actually works more we're using more of this this kind of uh minty green well this is kind of minty as well interesting interesting okay yeah let's we'll just use whatever we're gonna call it foresty minty green i don't know dark minty green what do we call that color we called it aurora dark i think okay all right um we have to start asking ourselves some questions though like what and the question i feel like i need to ask is what's the call to action color here what's the main primary action is it this blue do we want it to be the blue uh if so we have to really make sure that we don't overuse the blue right and really save it for primary actions for instance maybe we want our button to be green instead does that pop a little bit more does it stand out do we want to use that or do we want to do something a little bit more like a yellow or like this gold color we have or we could go to like the pink the pink actually pops things pop in pink i think right what would we what would life look like if we replaced that with a little bit of pink and blue i don't know now we're playing but we're getting a little too far away from the the original scope from the original mood board right so we want to kind of stick with what we have here all right for because of that let's stick with what we have okay and maybe we just need to reverse order the way that we use things maybe green needs to be there and maybe our our blue color needs to be there do we like the darker blue or the lighter blue kind of digging the lighter version of it a little bit okay uh with that being said we should have i think we have a ui component that we built right so let's drag that in that's a button okay and it should have variance to it so let's just drag it over it's a really big button okay so we might need to go to our uh where did you go to our library and see that we have a button that has multiple variants okay now what do we have in our multiple variants here we have default and this one's called variant two we could rename this to be outlined okay outline boom and maybe maybe it's large and it's outlined so we can create multiple variants and and properties inside of here let's call this one filled okay and this whole thing is this property one this frame four should be called button like that okay now when we go back to our visual design we can see that it's called button right here okay and then it has either the filled or outlined state there okay um so that's good you can call those whatever you want you this is actually and we don't got time to do this today but this is actually the start to building your own personal little uh uh design system or at least a pattern library right okay so maybe and again this may not be the best way but we could call this one filled and if you want to add a new property to it you can actually double click inside of here and you can see what that looks like property one equals filled okay we can call this one style equals filled and we just need to re make sure we rename the other one called style equal outline okay and we can add another one on there if we want to um we can say comma size equals large okay for both of these so it's outlined and it's large okay and you're like why are you doing that well because now we can choose large or small outlined or filled right okay so let's create another variant of this like that and we want to say let's add a new size here this is going to be small see what i'm doing there all right so how do we make our small button well all we have to do is shrink it down just a little bit like this and if the text inside is 18 drop it down to something like 16. boom like that okay now we have a filled small button okay and then we can create a new variant based off that one and this one will be your fill your outlined okay uh small version so what do we do uh we had what was the style on this this guy back here this guy was uh two it was outlined with a two pixel stroke okay so boom boom take that just like that pop that in and remove the inside and of course our text becomes that color as well okay you're like oh that was a lot of work what are we like a lot of work for little buttons well now we can choose we can say hey do we want this to be filled right or let's just scroll up so you can see do we want filled or outlined do we want to be large or small oh wow the component system is very very nice okay so we could do something here like uh uh sign up okay that's two words let's go sign up like that and you know we're really talking like primary action should be should be and let's get rid of this button actually in here we need to do another another one of our actual component buttons inside here don't we we don't want to be using random things let's get you in here there we go uh and let's make sure we use the large filled okay now again we could later on we could do another property inside of here that says you know large filled color right maybe we want to be able to have green or blue that could be nice i like that idea but let's do one of these deals over here so we're just gonna thinkpink make one copy paste pop it in this one will be uh a log in button okay now with that being said why don't we just shift a make sure everything is lined up using our auto layout boom and move it over to the side okay now these two things are kind of locked together nice um okay that's a good start and uh we're getting there we need to add some some elements right um that kind of play with our character or figure so now folks it's gonna become playful time but before we do that let's do a little bit of question and answer time all right just coughed and took a sip of my drink to get that cough down let's ask a couple of questions or answer a couple of questions okay so uh yeah somebody said the menu separated nav looks odd to me the main call to action is a button and has visual hierarchy not sure why you do it that way i'm just playing right now right i just put it there i might push everything over and do a little bit more of a left right kind of a line thing so yeah um totally totally totally free somebody said for the name to call it free nerd i love that okay here mr miro has a question it says i want to know if you designed the website on 16x9 aspect ratio there is a screen the 16x10 do you need to redesign it okay so i go when it comes to screen sizes and device sizes i don't personally design websites in a 16x9 ratio because not everybody is watching it on or or looking at your your um your golly i can't talk today not everybody is is looking at your website or your creation or your design on a big cinema-wide 16x9 okay that's why even inside of figma if you say hey give me a desktop size it's not going to go 1920x1080 it's going to go 1440 by something right which is going to end up stretching out so 1920 that's really why 1440 is more realistic and even inside of my 1440 art board or my frame that i have here right i've created a 12 what was it 1200 or 1180 or something like that container that everything is running inside because that's probably pretty standard that's a little bit more realistic as to what people are using as far as their devices okay that's a great question though so uh sorry last thing to answer that question i adopt a little bit of a brad frost mentality which is make it until you break it so i don't think in desktop you know tablet phone specific phone i think make a design that works and then when it starts breaking fix it fix it okay hopefully that forces you as you're designing to make designs that work for the most part work as much as possible and not only in specific individual instances okay all right any other questions it's time for you to drop them into the chat can you tell when to use can you tell us when to use padding inside of auto layout inside of figma i usually get confused like when to keep the padding zero or how much padding should i give a component okay there's a little bit of subjectiveness there but there's some techniques we can talk about okay so for instance if i was down here and i wanted to make like a new button for instance i could put the word button right and a really easy way now inside of figma to make buttons is with auto layout shift a boom we have some immediate padding right around our uh button and you can tell that because it says right here there's 10 pixel padding space right excuse me the padding is here so we can stretch our padding out okay i'm probably the great thing about auto layout is let's just style this really quick let's just fill it with a color so we can see okay great oh yeah yeah let me zoom back out so we can see everything okay so the great thing about auto layout and let's just really quickly just make this a button that's even feasible and let's change it so we don't get messed up and think it's the actual button we're working on let's do something like this okay so you got this button and you need to talk about padding and spacing you're probably going to want to a good like size for a tap point is at least 26 pixels 30 pixels right okay so we know we can measure this thing it says the height of it is 52 and and 73 is the length right now that's of course variable because as we stretch it out now it's 151 pixels in width right but we know that our height is 52. so we we can mess with that using our our uh padding right you can take all the padding away and now it's just the bounding buck box of the actual text that's giving you padding maybe you want a little bit maybe like four okay you can see the size here in our height right here you can see it changing watch as i change the padding so changes the average height so i would do something like this i'd do something like four on each side top and bottom and then maybe i'd do something like 10 or 16 you know on the left and right to give it nice good padding unfortunately it starts to become a question of something that we call the hard grid or the soft grid right do you do you respect the bounding boxes all right inside of the design tool or do you respect the grid right or the layout and and the mathematical perfection of it it's up to you but just make sure you're working with your engineering teams on it so you know that's a hard question to ask how do you use auto layout spacing padding all that kind of stuff you definitely want your tappable points to be somewhere in the range of like 28 pixels 32 pixels i feel like is a pretty standard one but that's pretty tappable the best thing to do is create your design inside of an artboard open up figma mirror right and test it does it look really small and another great way to kind of understand basics is number one read the ios human interface guidelines the google material design guidelines understand what they say there about tap point spacing padding all that kind of stuff and then number two just be a voyager an observer of lots of design so grab screenshots of your favorite applications pull them over air drop them or whatever it is like over into your design like that you're working on put them in an artboard and go oh look i'm going to remake that button why is that button that size why do a lot of buttons seem to be a common size because they've figured out what works all right let's do another question what is the max number of revisions that a client asked of you ever been through the ringer oh my gosh thank you t20s grunt for that question and thank you for the super chat my friend super appreciate that well to answer your question what is the max number of revisions that a client's ever asked you for ever been through the wringer i think one time i had a client ask me for 13 rounds of revision it was a project that should have been wrapped up in two to three weeks and it took me four or six months i think i remember but that was a really long time ago and you know whose fault that was it was my fault it was my fault because i didn't put the amount of revisions that were needed i had low experience i didn't know how to present or deliver to a client so i was constantly giving them this guessing game they're like we don't like that we don't like that and i wasn't mature and and um and i didn't have enough experience to say i know how my process works therefore i know how many revisions i should be offering you i know when to say something is in scope or out of scope of the project so i just didn't know a lot but oh my gosh and at the end of that six months they hated me and they just hated me and it was so hard to get paid it's i tell you right now if you have a great contract right with great expectations inside of what the client should expect and what they should not expect what's in scope what's out of scope how many revisions to expect and not to expect if that's the case they will love you it's a greater chance they will love you at the end of the project okay so keep that in mind the the the pathway to a happy client and you being a happy designer really and a happy freelancer is really in your contracts and your proposals right clarity somebody much smarter than me once said that the key to frustration is unmet expectation you want to really frustrate people don't give them an expectation and they'll be frustrated you want to have less frustrated people give them good expectations all right so that's a great great question all right um oh somebody said what should we keep a standard price what should the standard price be of a four page website man that's a tough question because now we're talking about pricing how do you price do you price hourly do you price by the project does it value based pricing like what do you do right it really depends on the person i don't know a deal is asking this question maybe you will charge something like 500 for a four page website or a thousand dollars for a four page website whereas i might not start that project for less than ten thousand dollars fifteen thousand dollars right what's going into it is there content that's required do i have to come up with the content am i gonna have to hand hold you on what what you want this content to be and and where you want this form to lead do you do you have all this marketing stuff set up do you have images do i have to source them oh there's so many questions right so how much of a pain is this client going to be do they have their stuff together right if you're saying my sole purpose is to design a four-page website you're gonna have to come up with a price that makes sense to you right and and i guess you could if you want to you could try to boil it down to hourly i don't like charging hourly right it always makes me upset it leaves clients feeling bad right and it also it punishes me for the years of experience i have and and how fast i work and it makes them like count the clock in the hours like why is this taking so long it's another hour i'm paying you 100 an hour oh my gosh i just don't like it so i'd prefer to do something that's more project based but if you need to figure out your project based pricing you can base it on hourly and then add your value on top of it so let's say and this is a really good really good side note on why you should always track your hours on how long it takes something you need to know how long it's going to take you to design a four-page website this means emails consultation video calls presentation all the administration setup delivery as well as the design don't just charge for design just charge for all the stuff that goes along with you running your business let's say at the end of it it takes you 200 hours okay and you charge i don't know let's make it really really simple something like a hundred dollars an hour okay i'm just gonna pull my old trusted calculator out here so 200 times 100 equals 20 000 okay that's 100 an hour 200 hours worth of work maybe you're like oh my gosh that's insane jesse no way okay maybe it takes you 50 hours to do it times 50 dollars an hour that's 2500 okay even if it's 2500 you still need to add your value on top of it okay what's the outcome of this website is it gonna increase their traffic or their revenue what percentage is it gonna do these are questions you should probably ask inside of your initial client meeting because if they're saying we make 50 000 a year and we're hoping that if we can reorient the website to increase our revenue by 25 what's 25 percent of 50 000 right that's a decent amount it's a decent chunk change so you can say hey would it be worthwhile right for me to do this website it's not just the work it's the value that it brings now you've made your way from hourly to project to value based pricing so again it's bad because i don't have an answer for you but you have to figure out a price that works for you okay if you're just starting out that price is probably going to be something more like 50 bucks an hour 40 bucks an hour right um and you have to quote the hours realistically put together a project-based pricing off of that okay and then you can increase your pricing as you go but i don't think if you're starting out and you're freelancing and you're truly trying to make a living off of freelancing nobody should be charging less than 50 an hour right depending on where you live maybe a little bit less but but because you have to pay for your own gear you have to pay for the air conditioning and the lights you're not just paying for the service you're paying to run your business right so no less than 40 bucks an hour i would say okay and then you can move up into the 50 60 70 but you should be increasing your rates also that's a great question okay um all right now let's get back to work we that was a great time thank you for the question and answers hey if you haven't done it already make sure you like subscribe hit the little bell notification icon leave a comment on this video and a thumbs up you know that way uh other people know that these videos are helpful if you find them helpful let other people know maybe they'll find them helpful as well you'd be doing them a favor as well as me all right let's jump in uh let's get rid of this little example button and let's start we're still kind of building here and we're not going to get too far today i can already tell you that it's okay because i want to start keeping these streams under under an hour and 20 minutes right or right around that time so we're gonna we got to leave time for reviews at the end portfolio and work reviews all right um all right i'm just gonna bring some some uh some different icons in here and we'll replace them later but we ain't got time today so i'm gonna hit crop right i'm just gonna drag that down beautiful bring up my grid stack it all the way to the left do another one over here and then just drag the other ones up okay um and yeah we'll space them out we'll line them up and then we will just center them they don't have to be perfect it's okay all that works great okay now you'll notice that our um our whatchamacallit our shape is drifting down see that into our our bottom area now i kind of like that but we might keep that but what i need to do really quickly is just multiply these through so we can see it okay so we don't get that weird white box yeah i kind of dig that it's like the the search box is breaking the plane and by the way this is an awful search box i'm going to fix the search box 100 but i like that the search box is breaking the plane but some of our colors are too i'm trying to figure out there's got to be some ways because we have kind of a squiggly or a wavy kind of logo and we have some hand-drawn assets let's start talking about the types of assets we might get going in here to kind of make this a little bit more fun okay definitely some cards some logos a few things like that but definitely some shapes so let's start with a shape really quickly shall we i'm going to hit p for pen tool i'm just going to do a little bit of a wave like this and i'm going to match it up with a wave like that okay let's uh let's choose our color we'll go with the blue um and then let's stretch up make it two pixels and let's just make sure that it's round on the edges okay with that being said we have a little line here don't freak out don't panic i'm not keeping it like that but i am going to duplicate it and bring it down below about 12 14 pixels away from the first one let's go 14 and now we should be able to duplicate duplicate duplicate i'm holding command and hitting d it might be control if you're on a pc it's up to you i'm going to group that together and now we have kind of like a wavy element look our little free bird waves were kind of imitating a little bit right okay let's bring this up and just shrink that down and let's hit k and scale instead so we don't get these giant strokes okay that's kind of fun i'm liking that let's do a shape like a an oval um you know what we could do let's bring our lips back boom boom let's do another one and yeah they've got a little oval going on there but what's the okay and i'll tell you what we're gonna do we're gonna remove the layer blur there and just do something like this we need to add a little bit of color in here though unless we want to yeah we need to add a little color so let's go to this light green color or maybe a little bit more like that okay and we don't want this to be so big and i feel like again we want to be really selective probably with our blue and our greens we might instead again i'm just playing if you're like oh my gosh this guy's all over the place i'm just playing right now just have fun just experiment to like the yellow do we want the darker yellow let's do that let's make this really small let's tuck this behind her that's a fun little shape okay i like it i'm gonna command c command v um well let's add let's add a little card of some kind shall we okay we got kind of a style going on here with our frame so let's just come in to here pink like this okay we have another search box here that we want to get rid of all the stuff inside of we don't need all the stuff we just need the box that has that pre-made shadow on it don't we love it okay so what i like about this is the top has kind of this light kind of neutral blue i don't know if you can see it on your screen it's there it's a thing okay but when we put something like this frame where did it go let's lock her because we don't want to mess with her anymore let's bring this up above like we put this box here that has just a little touch of drop shadow it kind of it stands out right it comes off that back just a little bit not a lot let's like tuck uh let's tuck that actually behind our model like that and let's go find something okay maybe uh maybe you can get a job uh with patreon okay maybe that's like that's somebody who's hiring here okay i'm gonna hit okay and just shrink that down and then let's just uh let's just even this out let me make this 120 by 120 a nice square with our patreon thing in the middle okay take the whole thing let's just make it a little smaller it doesn't need to be so big right okay maybe it hangs off over here on this side now you got to be careful because i'm not digging the colors that are popping inside of my think so maybe we need to do them in gray i don't know let's play let's play and see okay i'm gonna go back to my mood board i'm gonna grab one of these other little card things that i made jump back over here i'm gonna hide this for now because i'm not loving it okay this is an interesting thing right like as you as you build little collages like this and hero images you are artistically playing a little bit and that's that can be a good thing but you have to you have to explore and make sure that they're the right selections for the job all right so with that being said let's see if we can we have our button it's our outlined small button see how oh see how i did that like before that button that i didn't that i put in there i had like smacked it together and customized it well now i'm bringing consistency even into my interface okay which is actually really really nice oh my gosh let's bring this card down let's bring this thing over again let's get this little line and make it our green something like that and now let's play with this card okay we're gonna grab the frame and just take this is where that spacing comes into play let's just take that up a little bit and hit the baseline with our text and we're just creating like a little mini kind of job card okay and let's make sure that everything is lining up on the left hand edge like so this could be like a little version of a job card now we don't have to keep it as big right once we have it kind of designed we could shrink it down because we're really just creating elements right maybe oh that could go great back there just tuck it behind her head boom boom and should our circle go over it i don't think so i don't think so where's our little yellow guy i think that goes over it okay we should put all these directly behind our model in our layers panel so that people can actually see them right okay i like i like putting the card with a shape behind it there's a lot of dimensionality happening here okay so let's do another one down over here by no means are we like saying that this is the end all be all but this is the start of our visual design our visual exploration hey somebody who really didn't like this so let's bring it over shall we and while we're here why don't we just we'll do this one and call it log in and we'll take the text and we'll make it blue let's get rid of this guy beautiful let's center everything up like that all right push it over let's find our grid there somebody didn't like our center line think that's okay that's all right um we do something like that okay a little bit more on the standard side now maybe we need a little bit more spacing in between let's space them a little bit more something like 16 pixels of spacing in between that looks a little bit better it was really cramped before really cramped okay and now that i'm here i am realizing that i really think that this should be green i think and just kind of pop a little bit like that okay um i wonder like just some outline black shapes might work i'd like that so let's do something like a rectangle and we'll take the fill and we'll put a stroke that is that midnight shape and i like them thin like that okay so i'm just going to kind of turn it shrink it down now i think there's probably uh there's probably a um a plug-in that if i made a bunch of pieces i could use the confetti plug-in i could totally do that let's call this a a style can't we style that we can we got that um yeah that's ellipse okay that looks good okay whatever okay let's do let's do a couple of little circles we're just doing all the little bits and bobs here okay here like this actually we want the stroke stroke like black like that inside okay great um just a few of these to just really our background shape should be locked command shift l to lock that let's pop a couple of these around you know bigger smaller maybe another one of these that's really small but really subtle like hiding behind there let's bring the opacity of this one down and i kind of feel like these are a bit bold so all of these the opacity of these should go down because we don't want to be so intense about you know branding elements you want to they want to be in the design they don't want to be the design right so okay let's do one more like a little shape like that okay put it off to the side okay so just a little collage is it the end-all be-all is it the best thing that ever happened in the history of things that have happened no by no means but we are we're getting somewhere we're doing some things okay so i wish i could i don't know where i put my model but she is locked up tight and i'd like to maybe just increase her size a little bit okay now we we also could play with some of these other models really quickly if we were if we wanted to try like let's take this gal she's pretty cool uh got a cool style to her um and then let's pop her in place wow that is that image is massive let's shrink it down it might be nice to bring some vibrant color in here right because our model is wearing some muted colors though the current model that we have so it might be nice to bring in some of these fun bright colors like this i do like that the other girl is wearing uh or holding a laptop i don't know how does that look does that look a little bit better that looks a little bit more enticing it's the color right like let the subject matter kind of pop let's take all of these and shrink them down because they are so massive we're just doing a little art direction stuff now you guys still with me out there all right let's zoom in um who else who else who else here's let's try this gentleman okay i don't like the lighting on him but you never know you can try and when we're doing this stuff we can have multiple versions of a hero right to show our our clients okay move him in yeah he's again he's kind of wearing muted colors it's not the worst thing that ever happened but again he does have the laptop i am vibing with him that's pretty cool dig it okay that could work let's do one more because we're just we're just having fun playing now um well let's see we used those ones who else let's try gosh this this person with the desk is cool but it again i'm just worried about that vertical let me show you an example of the bad lighting right okay come in here it's like this guy's lighting is not as good as the other ones right but you can see see how this girl's lighting is even worse i feel like and you could probably take this into photoshop and fix that up if you wanted to but it just see how like it doesn't look like it matches right it just doesn't look like it belongs i'm going to be really honest this one's kind of this one's kind of winning for me right now it's really fun um we could change her colors and stuff if they're too vibrant uh but that one's fun let's just try this one really quickly because we're here and we're doing the thing we're having the fun okay let's pop her in maybe she's down here see she's really short and she she has to take up a lot of space okay oh gosh that's not her skin tone looks really really well it works really well with these colors doesn't it but she kind of like i wish that there was more of her like lengthwise and then we could get her to be a little bit taller i wish that that was a thing so um okay let's i also i don't love what she's doing with her hand right it's real i feel like i'm being real nitpicky now let's uh let's go let's just go with this gal because i think her colors are working really really well okay so we'll stick with her super fun okay and we're running out of time so let's do a few other things here we might have time to come down here and again we want to continue a little bit of that branding we don't want to overdo it but we do like having some of those pieces so let's just scale that thing up and we can kind of put these off to the side and bring them way down just really light here you can't even see it probably at home but i can see it on my screen all right so that's the start we got here i like these kind of dots that were or these kind of faded gradated dots that are happening we want to make sure we use those later in other things let's see what else might we might we be working on here okay um we've got a couple of questions that are coming in to the chat we're definitely gonna need some iconography those are gonna be big time for us but this might be the place what do we have in our wireframe here um we had jobs for you right we a little bit of this like card style that we're starting to create why don't we just really quickly we don't have much time left here but why don't we just stretch you out make you big a little bit again like this start building some cards again we're going to use the grid here aren't we we're going to scale you down just like that and now we should be able to start building some cards um yeah these are going to be these are just not the right style though i don't think i don't think they're the right style but let's just let's just play with them really quickly okay and then and then we got to go we got to go i'm holding down option dragging another one over command d doing one more see how when we use our columns right we're getting just a little bit of oh let's drag this behind oh mama like that stretch it out a little bit like that we just get a little bit it's too much though let's bring the opacity of it down it's like six percent you can just barely see it but we get a little bit more of that like the contrast behind our cards right you see the contrast there it's light we could bring this up even a little bit more if you at home can't see it something like that maybe now we're more like eight percent that works for me too okay so we'll have to come back next week uh next friday and we will be working on our uh on our next sections and we're just kind of building things out okay remix icons are great i'm gonna do one more q a and then we will head into a time of portfolio review because we're coming up on an hour and seven minutes almost out of time here thank you so much for joining me on the live stream i want to thank you to anybody that's signed up to become a member during this live stream because next week we're having our live video hangout our members only live hangout thank you to t20s grunt who gave me a little super chat there uh it says always thankful for me sharing the knowledge keeping up the great work appreciate you brother thank you so much uh or sister don't know here we go uh and then let's jump to a little bit of question and answer time all right a deal says what is the best freelance platform to start working as a website designer hey i'm not a big fan of freelance design platforms now it's not to say that you can't do it but i think it's a good place to start maybe freelance design platforms like freelancer and fiverr and guru and e-lancer um they're a great place to start but i don't want you to hang out there for too long right i know there's some people that make livings off of fiverr and off of freelancer.com and i totally get it uh but there's a lot of scamming going on there there's a lot of bad clients that are asking for free work or free spec work um if you're gonna pick one probably go with fiverr or freelancer the other ones are a little meh um but so fiverr freelancer i'd say okay maybe start there but then you gotta move on right you can start start building yourself a portfolio and move from the realm of fiverr and freelancer to building your own freelance projects be getting your own clients so a few ways you can do that if you are doing work on fiverr freelancer or one of those sites a few things you should be doing um you should be doing work that can go into your portfolio you should be building your portfolio you should be getting testimonials from each one of those clients i know you can get little reviews and feedbacks it's not not everyone gets them make sure you get them right if they work for a company get their company name right um i did a whole thing on like freelancing and and a whole live stream on that so you can watch that about getting testimonials and working with clients but you need to get use freelancer as a platform to get all the ammunition that you need to head out and do your own thing so but i would recommend those okay should i do a user map in my designs homs asks should i do a user map in my designs you might be talking about a site map you might be talking about a user flow diagram i may just may be releasing in the next few days a video on the basics of user flow diagrams but i do think it's important that when you're doing a website you do some sort of like content diagramming site mapping user flow diagram user flows are usually uh more used for applications and software getting a user from a to b through a certain funnel you can also use them for specific flows in your website for instance maybe you really want to lead somebody to sign up for your newsletter well you can create a user flow for them you can also create a sitemap wireframes but yeah you should be putting in all the work not just the visual work but the thought work right for how we use uh or how we uh lead users through our designs through our websites or our applications all right that's a great question curtis one of my members curtis is one of the boys curtis morrow is in the house says i set up their website years ago under wordpress and fortunately the no like and trust me so i was able to insert myself into the process of helping them navigate wow helping them navigate appropriate resource i think it may be a good time to pitch a website redesign along with them yeah absolutely if you have established clients it's always it's always a good thing to circle back around and address any of the new needs that those previous clients might have you might have new rates they might have new needs they might you know be missing out on something they've never done before for instance social media marketing facebook management you know whatever it is but you can bundle those things together with that trusted sale that you made before so if you built them a website and they loved it pitch them another website go hey it's been four or five years website needs a refresh we can move to a better platform and just refresh it how it is and while we're there i noticed the thing that could really help actually is to up kind of up your social media game i could help with that right so you can upsell right the service that they already know and trust you for you can upsell them with other things all right so that's a good thing to do all right uh let's let's see fajar says what is your favorite plugin to help you on in the design process okay uh there's definitely i got some favorite plugins i'm just gonna look at them right now okay um i'm a big fan of let's see better font picker because that helps me pick better fonts um let's see i really love content real right allows me to drop like lorem ipsum but not lorem ipsum things that are better uh big fan of let's see uh figma measure right especially if i'm passing things off to like development teams that's a big one uh let's see the remove background one that's a big one overflow i actually really love overflow as a tool it allows you to create uh user flow diagrams and presentations so i i use overflow quite a bit rename it i cannot live without rename it okay because it allows me to rename all my layers and keep things really organized also i used to use spell checker but now i just use spell with three l's it's the way better spell checker so just use spell because it'll spell check your entire document for you stark that's for accessibility uh for vision simulator and all that kind of stuff really really good let's see scale is and type scales really good one ui faces got to have it unsplash gotta have it um and then if you're looking for handoff stuff zeppelin is a good one as well those are some of my favorite plugins inside of figma hope that answer your question okay um uh let's see let's see one more question let's move to some reviews for today are we missing any of these good questions above um let's see [Music] tracker frame seniors before we couldn't find oh gosh okay a deal says i'm a new website designer i'll also do free work for experience from where should i start you should start anywhere really anywhere that you can do free like i mean and again don't stay there for too long but you need to get your foot in the door and that usually starts with doing some free work so i'd say start with concept work project work spec work personal work right build yourself a little mini portfolio and then move on to a decent client you can do free work for uh there's been people in the chat before that have said go non-profits churches right who are looking always looking for creative work hey maybe you support an animal shelter or church or whatever it is i could do free design work for you i'm just looking for experience for a short amount of time get a testimonial from them right add the work to your portfolio then you want to do cheap work and then you want to do paid work okay so on and on you go keep stepping up that ladder but i'd say after you do three projects right of decent size so like maybe you make a landing page for us for a non-profit maybe you do a you know a bunch of your own free stuff like your own personal stuff and then you do like a free website for somebody and maybe another free website for somebody now it's time to go do some cheap websites right it's time to start doing some thousand dollar websites or 1500 websites maybe and get your foot in the door those four pagers that were mentioned earlier and then from there you can say okay now i've got paid clients because i've now had to learn the freelancing experience the business the proposals the what what is scope and what does scope creep how do i get paid what type of deposit you watch my whole freelancing um uh live stream i did about that but that's really what you're trying to gain there is the experience then you can take your work experience and your freelance business experience and go get you a good client go get you a good paying client okay that's kind of the plan there so great question hey and with that being said time for some reviews of work we've had a few people join inside of our discard but i'm just going to open up some fun stuff that's happening inside of portfolio reviews i'm open up some dribble shots some behance shots some different things we got anas taha maybe right here in the chat who joined us how about a project thing okay cool love it i'm opening these up right now in the background and then we are going to get going again if you uh if you don't know where where to submit your work you just follow the link the pinned link in youtube or in the early parts of the chat you'll find it it's and there's a link down the description to the free discord server right where you can meet other creatives maybe consider becoming a design champion like these folks over here like russ and veronica and devin grizzer and boonhome those are some of my design champions they have access to the champion chat over here but everyone else has access to the general stuff the rest of the channel so let's open up a few of these we pulled in portfolio reviews this is abernail abernail the the 10 year old design superstar doing a little bit of the kind of animated card thing i did a i did a challenge like this on my youtube channel so let's check it out let's take a look at it really cool love the presentation of it he's a little bit of 3d transform i bet inside of adobe xd it's looking really slick the cutouts the characters are rad love it i don't even you know usually it's like when in doubt like left align it out right but in something like this the center align typography doesn't bother me you know why because there's very little text here the button center line the character center line and just a little bit of text that's okay but never use center line text for big large pieces of body copy but abernail knows that you can use it for little things so he's done this great presentation and mock-up of one of my favorites little kung fu panda little po the panda action happening there okay yes i love it love love love it with a little bit of 3d transform action abernell great job love it everyone give abernail in the live chat give some hands up some emojis and some fire because we love it all right this one is by tomas zelonka let's see this is called meal it it's a mobile application meal organizer application love that okay let's see the presentation of this is great you know why it's great because the money shot's right there it's the colors are beautiful it's it just boom it's rocking right he's taking the time to present it but immediately get down you get a little bit of what is this like a little bit of of like information on the project but we also get some mixed media there's a little bit of life happening here a little bit of animation which never hurt anybody when you're building a case study right okay so it's uh no more problem productive days in the kitchen our app will help you save your time money and life oh that's a great value proposition let's get down to how it works again when you're presenting your work folks when you're presenting your work take the time and brand it okay create a case study like this that uses the brand color right it keeps you engaged it's a good engaging mixture of text and imagery and then mixed media animation prototypes keeps me engaged it tells the story i want to keep reading okay it tells me how it works layouts are good the design itself really nice let's dig in and look at a little bit of the design if we can okay oh let's go full screen on this okay all right let's talk about the design itself um love it i think it's great i think the color choice edge is bold it works great i actually really love these new kind of navigations where the active state kind of lights up i would do an outline and not a field state because it even though it is a button it looks like the button you should be tapping right now and it's kind of messing up or you know right it's it's misleading us what's the primary action right here it shouldn't be to retouch the home it should be to plus to add something right so wherever the primary action is that's what we really need to care about okay um the other thing if i was gonna be really critical right but this is just for constructive feedback is you know a little bit of contrast here would be helpful i think you might need some secondary action styles figuring out what that that is dribble or excuse me uh twitter actually just did this because their bright blue button to post was starting to get mixed up with the follow button right which is the main action on twitter is to post it's to talk it's the broadcast but it was getting mixed up with same blue button so now they've moved all secondary actions to either filled or outlined black buttons right to denote that's the secondary action but this thing is the first so important primary secondary we got to make sure we keep those kind of in check that we know what each of those are okay let's go let's look at this one okay a lot of content on the page okay um okay i think it's just spacing a little bit might be here again primary actions what do you want us to do do you want us to tap here tap here or tap the filters this is where those secondary action styles could really come into play um also be careful about using your primary action color in all these really like kind of tertiary actions now right these could be gray these could be a shade of gray they don't need to be like this all right uh all in all i think really really well done you just maybe are abusing and misusing your primary color all of this could and should be a normal text color like a dark color okay everything can't be orange if everything's on fire then nothing's on fire if everything's important then nothing's important i don't know where to look right but the layout is really really well done the concept is really really well done and i am impressed and because i'm impressed i'm gonna appreciate this give it a little bit of love everybody should go give this a little bit of love find it in the discord and go give it some love this one is from uh md shaheed didn't we looked at this one last week sorry we don't want to look at that one again this is jat or jeet sahu a web designer from india got a lot here's what i love when somebody says i'm a web designer and then you have tons of web design yep you're doing the thing you are doing what you say you do let's look at some of these and check it out look could have used a little bit of a little bit of jeet's advice today as we built our fun little kind of top section because he's doing that really well fun organic shapes right little like shapes all that kind of stuff doing a great job with primary and secondary actions um doing a great job let's just zoom in on this doing a great job on using color i like the color right um i think i would have liked this hero section just be a little bit bigger and also i'm not sure if this is a a branding right make it look a little bit more like a branding maybe i don't know it maybe it wasn't a branding project but do a little work grab grab those at the free assets we used in in our project today to throw a false branding in there okay um okay great i like this i like the little widgets and all the little things you've made spacing is a little bit of an issue in here this is beautiful and kind of the the feeling that i had kind of follows here right it's a little bit compact it could have used a little bit of space here in the header but down here you see immediately you got some sort of little whoopsie up there that's okay but down here immediately you see we have a problem with spacing right we need to space things out and have more designated sections is this supposed to be a section with a get started call to action and then this is supposed to be another section oh it's just cramped it's really really cramped also if you're going to do tables watch out for drop like drop shadows behind each row or column and get really really messy really really busy this could have been a really nice clean kind of table chart here i would have loved to have seen that just in general watch your drop shadows drop shadows are a little heavy this layout is a little boring in comparison to the rest of this great layout that you have going on up here so you know fine one of the cool things about about doing creative work it's kind of like what we did today right we took a piece of work we started creating a visual kind of like layout and style for it i gotta come back and iterate on it right i gotta come back and assess it get some feedback in the discord hey what's the weakest ask pointed questions what's the weakest area in this design somebody goes actually your testimonial sections are kind of weak they're not as cool as the rest of it okay i'm going to go back and rework those now what's the weakest oh well now that your testimonials are fixed that hero section that could be a lot spicier oh i'm gonna go back and all it does is sharpen a sharpener sharpen us fix it better bake it make it better right and so asking for pointed feedback is always a plus always a plus but i would say great job to jeet on this one everything about it's great um i like it maybe maybe release this form right from its confines that'd be good we've got time for one more this one is anastasia hello i'm a product designer focused on creating effective user experience it's equitable for everybody equitable all right interesting i like what's going on here it's really really simple let's go tracky mobile ui and ux design it stays on the website gives us a little bit of a case study all right get some animation here or something interesting okay did you do that animation if you did cool uh create smart watch which has special sensors sending diseases interesting okay the branding really simple really clear okay the color choice is really fun really nice use of color i like you know i i think that if you're gonna go all in on these kind of colors then your uh branding actually or excuse me your elements you put inside should kind of match a little bit and be a little bit more on par um okay starting to lose me a little bit because i don't know what it is that i'm looking at okay you're doing a little like some note card like uh exercises here and figuring out what's important research outcomes mobile screens okay we get something we can kind of analyze and check out um they're nice screens um i wish i just you know what's funny is like i i think the screens are actually really nice the ui design is really nice i'm just trying to figure out what the app does ooh those animations are a little rough i'm going to be honest if if you can't do those animations nicely don't do them at all i'd rather a normal push or slide transition because those are those are a bit jarring okay so careful we can use auto animate but we can also overuse auto animate in my opinion okay so maybe it doesn't need to be like that you don't need every individual okay so like there's like micro interactions there's and micro animations and there's macro interactions and macro animations and you don't always need everything to whiz and fly and bang and spin sometimes we need to be a little bit more subtle and mature i do like that this my shirt's kind of matching this case steady a little bit that's a thing um i think the layout is nice i'd love in your case study if i could get a little bit of a better explanation of what this thing does um yeah it's just the case study itself is a little bit messy in my opinion it's hard to read and if it's hard for me to read it's probably hard for somebody who wants to hire you to read right yeah we just need to work on our case study a little bit a little bit okay but some of this information could have gone to the top learn i think one of the things you probably need to work on a little bit anastah is is learning how to narratively tell a story if we can learn how to narratively tell stories it's going to be a big deal i want to say quick what's up to veronica masaraka one of my amazing design champions in the chat what's up what's up here with curtis and some of the others they're gonna be joining me next week for uh our live video members only hangout um i sent out actually a survey to them a little fig jam file to we're gonna work out timing and everything to make sure that as many of them can make it because they're a lot of fun hey with that being said that's really it for the end of the stream today thank you so much for joining me we're gonna be right back here next week continuing on with our visual design of our freelancing job website uh check the link in links all the links in the descriptions to join the discord possibly become a member um join us in our live streams next week get access to the figma file you can get one-on-one mentorship with me all that kind of fun stuff again make sure you like subscribe do all that fun stuff so if you enjoyed it other people might enjoy it as well get the word out right it kind of feeds the youtube algorithms there and and helps them out but with all that being said thank you so much for tuning in today i hope you are having a blessed week an amazing friday i hope you have a restful weekend we'll see you right back here next week thanks for joining me you

Channel: Jesse Showalter

Views: 2,757

Rating: 4.9741936 out of 5

Keywords:

Id: 3GXgWN-CT_M

Length: 88min 18sec (5298 seconds)

Published: Fri Sep 10 2021