Mood boards | Design a Job Site Part 3

[Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] so [Music] [Music] [Applause] [Music] well hello everybody and welcome to the live stream i'm so glad that you're here we got people jumping in the chat right now jennifer rogers says hello jesse and chat hello to everybody we got jordan alexander in the house let me know where you're coming from in the world it's a beautiful friday i've got a little tiny shot of coffee and i have a bunch of water that i'm ready to drink um we got uh dalwood imran is in the chat excellence attagon is in the chat with that excellent name hey to everybody today's live stream is a continuation of a series that i've been doing where we're creating a job site like a freelancing job site kind of like a fiverr or a freelancer type deal uh alvaro's in the chat grave rave is in the chat what's up what's up everyone's coming from youtube we got a couple people right now watching on facebook on twitch and a little bit on behance we're streaming everywhere we're doing the thing uh but that's what we are doing today man i'm so excited hey before we get to like far down the rabbit hole of designing this thing play piano says hi from uh from idea probably india i think that's the indian flag it might be i don't know my flags very well but i think it might be all right i want to share a couple of great things that i'm reading and things that i found so let's talk about what i'm reading really quickly uh to angel velasquez in the chat and play piano and oniyawu and pratham what's up what's up from india how's it going uh i have been re-reading the win without pitching manifesto by blair ends cannot if you are freelancing you want to raise your rates you want to be successful in the freelancing game cannot recommend this book enough it's amazing it's a little manifesto of statements that everybody should be doing i've also been re-reading this little gem called the if we can pho i don't know if the one thing that's backwards that's okay but the one thing by keller papasan and it's all about focusing on goals that's a great little read right there and i've also checked this out i was cleaning out my my office here in some of the some of the drawers back there i found this guy who's got one of these still laying around this is the adobe uh creative suite 5 master collection right on disks oh the disks right back when laptops still had disk drives that you think we don't do that anymore but i found this thing and i'm so sad because there's no use for it i've held on to it for years it can't look at what it came with it came with adobe flash dreamweaver it came with can you see well i don't know if you'll be able to see this it came with fireworks oh man that's actually kind of the predecessor we should do a little video about adobe fireworks i miss it kind of the predecessor of uh of adobe xd kind of right yeah all right well hey that's a fun little little uh trip down memory lane uh before we get too far too far into this hey make sure you've signed up for the discord server it's free to join the hey creative discord server and it is where uh you will meet tons of other awesome creatives it's where you can post your work ask questions we got topics like graphic design web design ui ui ux illustration animation and then things about your career is a great place to be but if you post your stuff inside of portfolio review here or in project reviews i'm actually going to be doing some portfolio project reviews at the end of this live stream so make sure you join because i would love to take a look at your work and this is the place i'm pulling it from from here on out that is it also another quick announcement you heard me say it in the trailer to this video if you're interested consider becoming a member i've started a new exclusive members club and my members get access to members only posts like you can see on this little timeline here members only post behind the scenes footage and and early access to content as well as as well as access to things like my members only resources these are all the design files that i ever do for adobe daily creative challenges for my own personal projects for youtube videos and lessons and tutorials so you can go through this growing resource that's all for you as my members my members get these but in today's episode we're actually there's some links down in the description to a figma file a fig jam file a miele note document so this part of the live stream they'll stay part of the live stream until the end of the series and then they'll jump into the members only resource center all right so uh angel says i used to have the cs6 web edition suite yeah that's amazing i love it um somebody said college flashbacks i know college flashbacks frame it that's a good idea oh that would be a fun project actually i could make like a little uh like a shadow box that has like the discs in there because there's plenty of discs right and uh put those up with a little bit of artwork maybe i'll do that with one of my earliest pieces of photoshop work which is atrocious go back and just kind of relive that thing um ah and works says what app do you use for live streaming to multiple social platforms i use restream.io uh not sponsored by them just use them you ask the question not me all right let's move on let's get started let's dive into our project and see where we left off hey make sure that you like subscribe do all that kind of fun stuff hit the bell notification icon so you know when the next live stream like this one comes out hint it's coming out next week just so you know but you know hit that little youtubey stuff uh there's a link down in the description and uh that link will lead you to this figma project also to this fig jam where in the last episode if you missed it we actually we actually did a little bit of wireframe we brought in some inspiration we made our own right we said get out of here inspiration this is what we're doing we made a bit of a rough wire frame here and actually i was thinking about in between oh maybe i need to do like a little bit more of a high-res wireframe i don't think so for this case i don't think so right but we do have this one where we have research and wireframes kind of going and ah who knows maybe i will but now i'm going to create a new uh page called i just named that mood card not mood card mood board all right side note i never know how to spell the word mood board i've been designing for like 13 years is it two words is it one word is it hyphenated i see it every which way you let me know in the chat let me know what you think two words one words hyphenated tell me because i just don't know the things um yeah today there should be no technical difficulties there should not be i literally after last week's atrocious behavior i spent like five hours figuring out things that were wrong with my live streaming software i bought a brand new macbook pro to figure out if that was the issue and i think i've figured out all of the things and i've streamed a few days in a row on adobe live and haven't had any problems there so hopefully we have no problems here as well okay so hopefully no technical difficulties if there is i'm gonna pick up this pc that i use for streaming and i'm going to office space this thing and just throw it out the door and buy brand new pc as well because i hate having my time with you guys i love you guys i want to be here for you guys okay um let's jump back into our mood boarding project here all right i'm just going to hit a for artboard and drop a presentation a 16x9 nice big presentation out onto my artboard there or onto my canvas okay um i'm using figma i love figma big fan don't ask me if i love figma more than adobe xd i i just i don't have an answer for that i'm not a fanboy of one over the other i'll tell you what i don't love uh don't love sketch anymore but i do love these two products very very much so all right and pretty soon we'll get into some question and answer time but let's get some work done what does mood boarding look like for me we're let's we're going to talk about i'm going to i'm going to do number one i'm going to do this one's going to be called uh mood board and then i'm going to do another one i'm going to call this style tile and you know what let's just be consistent let's just go two words capitals on either or both of them either one i almost said each one of them each one of them is it a friday morning i'll tell you what all right now what did i just do why what what's with the two okay well here's what i like to do i like to zoom out okay and i like to have two artboards when i'm doing my move boarding i like one of them to be an actual messy mood board a real random messy mood board i'm gonna go out and grab inspirations color palettes stuff i'm gonna chuck it into this thing and it's just gonna be a messy collage board remember right okay here's the perfect example of what i'm about to create okay i'm about to create a mood board of stuff this is what my water bottle looks like okay that's what i want my mood board to look like i want to be messy inspiration get it all on there to get general look and feel and ideas i'm gonna do one of them i'm not gonna do multiple i'm gonna do one of them all right now number two what's a style tile oh a style tile is a mood board on steroids it's the next step it's where you refine it a little bit i'm going to take that style tile i'm going to create a clear color palette i'm going to bring in some art directions some images that i think will actually work well on the site types of images it doesn't have to be final selections but the direction types of images i'm actually gonna create a couple of interface components right maybe some buttons maybe some typography selections maybe some navigation elements if there's a drop down needed a drop down accordions i'm gonna do whatever it is because we're designing websites here right folks we're digital designers so i'm gonna take this messy mood board inspiration thing and then i'm gonna drill it down to be this nice clean actually here's a perfect example it's gonna be nice and clean a little bit more structured it's not gonna be a final design speaking of that get you a little espresso with some cream in it all right okay so no mr miro i don't mean style style scape i mean style tile okay and here's here's what here's why i mean style towel because i still rock the style tile okay where is it style tile look at that let me get me out of the way zoom in what is this it's i mean this is old this is old okay really really old they need to revamp this okay but what is a style tile it's when a mood board is too vague right it's when a mock-up is too precise and it's when a style tile is just right okay this is literally a practice that i latched onto like in the in the early to mid 2000s i was like boom like we're doing style tiles i love this approach i've stuck with it because it's not something that has this website might have aged a little bit actually it's kind of coming back in style but you used to be able to download this photoshop file and create here's some examples of what i'm talking about of a style tile look at this old school lightbox this thing is old right so again this is not the website you're designing but it's a good example of what a website could be wow how timely is that there's donald trump that's hilarious um okay no politics no politics talk okay that was a newspaper website example all right this is made by samantha atoy okay samantha toy okay let's just go over and just look at samantha on dribble there's samantha warren from san francisco california follow you on dribble samantha because you're crushing the game right now we love you all right so with that being said that's what we're creating today we don't have to download you don't have to download any file it's fine let's just work off of what we got let's start with our messy mood boarding process somebody said aloha from berlin aloha right back to you guten tag from texas that's what i say to you that's awesome that's amazing you guys are so much fun all right um i'm gonna go out and before we start digging in what if you have any questions now is the time to some for some of those questions all right it's question and answer time it's question and answer time somebody said are you paying to gain the extras i don't know what that means maybe oh m1 okay no so the new macbook pro that i have uh i could not wait i heard the macbook pros right now all the macbook airs i believe have m1 chips in them which is great fantastic but the macbook pros do not and i just couldn't wait i had my old macbook pro for like four or five years it was at the end of its lifespan and i think it was causing us us issues technical issues so i got rid of it i know it doesn't have m1 chip but i'm rocking a new macbook pro 16 inch i9 processor 32 gigs of ram two terabytes inside of it um all the bells and whistles it's pretty pretty high-end macbook pro hopefully it'll last me for the next five years okay so that's good um all right all right all right not found either this file doesn't exist you don't have permission to view it ask the file or order to verify the link or update the permission you should have you should have the permission anybody with the link can view okay anybody it's what it says on my end anybody with the link can view okay so i'll check the link in a little bit to see but it should you should be able to because look look at all these look at all these fine folks currently sharing they can all view i'm the owner they can view right anybody with the link punk there it is okay so you should be able to view all right um let's see any other questions is this how you start a web design project great question from rian merza yes this is how i start a web design project right we start with research right we do competitive sets we go out there and look what's in the market okay we try to find the x factor we we write things down right we start collecting content also um which we kind of fast forward through that process a little bit we do a little bit of wireframing based off of our research which we did in the last episode with lots of technical difficulties and then we move here we're doing visual inspiration and direction now we have to gather all of that because we're starting to get visual we're starting to put the pieces together and as designers yes we have to we have to do it all right so that's this is how i i would start a web design project play piano asked the question do you like the new voice feature in figma i'm going to be honest i'm intrigued by it i saw the little headphones i clicked on it i got a little like a little discord audio chat kind of thing popped up and i was like whoa crazy so i don't know i i don't know what would happen if i do it right now if i press it right now could you all hear me talking through the figma file i'm about to try it and then i'll hang up okay i'm gonna oh man here we go if you don't know what we're talking about infigma we have a new audio whoa whoa we have a new audio feature right here okay so i'm just gonna yeah yeah yeah i'm gonna zoom in a little bit connecting let's see we're connected i don't know if you can hear me i don't know what's going on out there in the world not sure okay but what is what's what oh i get to turn my mic off oh yeah yeah access to my oh everyone should now be able to hear me in their figma file if i'm causing any sort of chaos in your life you let me know it's pulling from my macbook pro microphone i got speakers here so i can hear other people okay interesting yes okay so it's you know you can get into a file and then you can leave like and you can chat around about stuff pretty cool i'm gonna leave we don't need it pretty cool i mean once they introduce like a little bubble a little video bubble like what i'm in right now like there's a what is the there's a company out there that's doing that kind of i think they're called team viewer team viewer maybe maybe it's team viewer no this isn't it there's enough there's there's a company out there that's kind of doing that a little bit right that's like you can create these little bubbles and pop them on your screen and keep the conversation going throughout the day kind of cool for remote work anyways that's we are neither here nor there we are all sorts of over the place but i love question and answer time that was it we had our question and answer time let's get to work let's go to work right now folks remember to like and subscribe all that good fun kind of youtubey stuff all right so here's what i'm gonna start with my messy mood board i'm gonna jump out to the web i'm gonna start shopping okay now in our previous episodes we kind of talked about how we liked cool colors we liked greens and blues so we're gonna go on a little bit of a search and this is seriously i mean i love this is coolers.com and i'm on the pallets section i'm exploring i'm trying to find cool stuff so um we can search for terms like what if we just search for the term freelance what what do we find oh interesting very interesting i'm not saying we we are going to stick with any of these palettes but it's fun to start it's fun to start uh searching let's base it off of some blue a blue freelancing palette no blue freelancing palettes found let's just go off of blue then okay we're gonna do a little bit of work um rhiann says as a ui ux design oh i kind of look at this one bro look at the blues and the yellow i wasn't thinking blues and yellows but it's kind of fun huh okay that's kind of cool um yeah you know uh do you need to learn animation tool is the question that's being asked yeah probably um prototyping tools what i would say okay so um yeah so probably something like if maybe principal maybe get really good at using figma for interactions and animations if you want to get really spicy that you can maybe move out too something like adobe after effects you could if you wanted to all right what did we say in our research okay and maybe we don't have our mirror board open uh or miele note board open okay so i'm gonna jump back here i'm going to log in really quick to my milano board but that's a great yeah proto pi okay let's ask that question again let's just answer that question again really quickly okay the question is as a ui ux designer do i need to learn some animation tool like after effects for better animations yes and no the no comes when if that's not your bread and butter if it's not what you're gonna do on a daily basis learn what you need when you need it but but if you need it right if what you can create inside of something like figma to create simple interactions and some animation stuff is not enough for you then you need to figure out what's the right level because after effects is a whole other world it's a whole nother bag that you can get really deep into down that rabbit hole maybe something like proto pi or principle or proto dot io maybe those are a good kind of method for you a good next step right before you jump into the deep waters of adobe after effects but if you want to impress you want to bring a little spice to something animation might be a great tool for you okay so let's jump back over to our miele note which is a great tool by the way um here's what we said inside of our miele note project we liked blues and greens because we saw it a lot so let's try to stay true to the brief okay we are looking for blues and greens give us blues and greens together oh see what happens when we use a good tool like this man this saves you tons of time maybe i'll have to do another video at some other time about creating your own color palettes but i am kind of digging this right here now what's cool is we can inside of coolers we can zoom in and say hey just show me this palette real quick right and we get like each of the colors kind of popped out you get them in hex hsb rgb hsl cmyk all that kind of fun stuff which is really really cool i love this i love this a lot i want to save this palette but i might have to log in and create an account do i not have an account for this what's wrong with my life let me just just see i do i do have an account for this i had to open up my one password which you know pretty good deal um if you if you don't have one password it'll save you a lot of time okay one password is what i use to kind of keep all of my stuff there and i'm just waiting for some sort of confirmation code i don't know we're trying to figure it out any other questions jesse if you had to pick one what would you choose figma or xd i told you don't ask me that question i already said don't ask me that question because it's just not it's not the both of them are good use what works for you bro use what works for you is what i say to you um if if you need me if i had to answer i lean i like both of them i can't even answer sorry it's just not going to happen okay um it's just not going to happen because i just love it i love it i love both of them so much okay so anyways this is not going to work i can't get logged in that's fine we will just this is the one that i really really liked right here okay so i don't know i'm just gonna start building so i'm gonna copy i'm gonna head over to mood board i'm actually gonna get my background from being so dark i don't need to be that dark okay but i'm gonna hit a rectangle bingo and just paste these colors in i'm gonna duplicate boom boom boom i love command or control d in fake but just it duplicates and puts them perfectly spaced in a line holy cow we're running out of energy we're running this is the only technical difficulty we'll have i promise i promise is the only technical difficulty we'll have okay so you keep asking questions i'll be right back i just gotta plug my charger actually i was going to i was going to put you on a hold screen but i think it'd be funnier if you just see me panic i think this would be much better all right so i'm just getting that it's it's the new charger okay with a new cord my old one had like the really long extension on it and now i have the brick that just extends like this so you know i'm gonna pump up some music we'll be right back we'll make it happen ready bump the music up a little bit like that [Music] ah that's all it took all right we're back folks i'm gonna crank this music back down we don't need the music to be so loud anymore all right um okay let me know out there if the music is still too loud i'll turn it down even more if i need to probably something like that all right here we go so now that we have it let's jump back in sorry for all the distractions y'all let's get back to work so um yeah we just duplicate those over in figma love it okay and now we can just copy straight from here and pop these in i'm really i kind of it this color palette kind of man i didn't mean to find one so quick i meant to do a little bit more searching but i really dig it there's because there's kind of light and dark hues of our blue and green color so i kind of like it it's fresh it's a little younger it's not so stagnant and kind of old as maybe like for instance like that's real dark you know like it's just a little bit more on the fresh side and we want that to be a little bit more us right okay so with that being said let's just say for instance we like the color palette okay we're going to keep going we're going to find more elements that we really are into all right but we're going to get real messy here right now so now i'm going to jump over to behance i'm going to start grabbing things that i like i like these hand-drawn elements i like these organic shapes right there's some more organic shapes what else do i like obviously i like to see images of of um like devices i probably don't want to do like like old school devices like that um let me see what else do i really really like i like kind of some three dimensionality here like these things are kind of popping out so i'm going to open that up i'm just holding down my command or alt key and just opening all these up in a new tab this is messy inspiration time right where we just start gathering stuff okay what else do i really like uh i'm gonna go what about uh what about a job website we're gonna direct kind of pulls from other things it's not the worst thing you could ever do here's an example has a search bar in it that i i like as well and this is really people focused there's some people hiding there in the background which all oh there's kind of a people-focused deal that's really similar love this we're just grabbing a bunch of stuff okay now we're gonna now we're gonna go back to our milanote file so let's close where'd miele note go boom we're gonna bring miele note what did we have in our content needs right we had social proof headlines that reference trusted freelancers so now we need to look up some of these things right let's look up uh yeah let's look up social proof okay so this is me drilling down like zeroing in on individual elements and just creating this messy collage kind of mood board that i could then as a part one kind of send to the clients but i would never send this part one without the more refined part two okay so social proof social proof let's go website social proof but let's go social proof on a website what do you give me yeah yeah yeah this is not really what i'm looking for not really what i'm looking for i tell you what let's go over to dribble and we'll type in here website social pop-up proof okay uh okay let's and let's see what we can find yeah yeah do we see any social here's a perfect example of social proof i see it see these little guys this is what i'm looking for so i'm literally gonna snag and collage snag and collage that's the idea here here's some more social proof i see it okay that's good what else do we have uh we have search focused we need search bar inspiration okay so let's go search bar this is how it starts just stick with me okay i don't like that i don't like that i'm thinking more of like a travel travel search bar like this in my mind i see it right like um and this is a good this is a good moment to stop and talk about experience just just blood sweat and tears kind of experience right the longer you spend in this industry the more you know what you're looking for you know what to call it you know where to find it this is a call for you and me to stay dedicated and and really saturate ourselves in our craft and in the industry so that you can speak about things clearly think about things clearly the more ammunition and tools you have in your toolbox the easier it is for you to pull them out and start fixing making and finding things okay so that's just quick reminder like find you know spend the time learning the industry and the craft there's one that see that see that little search bar in there we're gonna pull that thing open in a second and start playing with that we like it uh what's uh this is kind of an example maybe maybe i'll open that one up um and then we just oh here's exactly what we're looking for i see it already i see that kind of overlaid search bar deal that's what we like okay what else do we have we had search focus social proof job examples yeah yeah i think we have enough we could probably pull from our other examples we already had testimonials give me testimonials now dribble okay we use inspiration sites right we we to reference austin cleon's famous book we steal like an artist right we bring in lots of inspiration and resources we figure out why we like those resources we don't copy them directly we figure out why we like them and then we start building things um that that we've done the thought work why do we like this why does this work what about this works and we start bringing it together into a new amalgamation of design that's what it's all about okay so let's jump back in now we are what were we looking for now we were looking for testimonials let's go back over to dribble and go testimonials okay and that's because i didn't spell testimonials right let's spell testimonials right and maybe we'll actually get something then we're going to click on web design so we have web design specific testimonials always use the filtering always use the filtering here's kind of like an idea for testimonials like kind of a big image there what else do we got what else do we got this could be a thing i don't love this i do i do however really like what i'm seeing here just these little snippets of what i'm seeing here now if this is like too zoomed out for you you're like how can you tell jesse you could just like make these bigger if you want i'm pressing command plus on my uh on my keyboard and that allows me to kind of zoom in and see things a little bit on the bigger side if that's what you want to do if that's what works for you okay i'm looking i'm not seeing testimony i kind of like what i see there i might kind of snag some of that bees look this is actually bringing together lots of things that i like this guy right here okay organic shapes color overlaying three dimensionality testimonials boom let's snag that one that one's really really nice um this is kind of i mean back to the search bar and the travel kind of deal that's nice this is kind of skipping a little bit but this is testimonials and we see a little bit of offerings or like cards or types of yeah let's let's snag some of those see how much inspiration we're grabbing right now um i don't like that at all that's pretty standard okay what else come on mila note what else we got we got process show me process dribble okay i'm gonna go here and go process yeah buddy we need to see some process stuff take us over to web design process stuff oh look look what i found nice one two three four five six stepper i like that let's zoom back out what else what else what else that's really beautiful we're not i mean i'm not gonna take it but it's good it's a good deal okay what else what else what else process are we also popular yeah we're under the popular tab which is good let's see process that's kind of fun kind of like illustration style but we probably won't be doing any of that stuff for our site website web design process maybe we need to type web design process let's try this web design process also this is like little 101 on like finding inspiration when you when you find a vein of of what works for you stay in that vein right it's like mining for gold you find a vein of gold you like stay in that vein just keep digging there right i jumped over to dribble we moved away from behance we like what's happening inside of dribble stay in dribble okay as long as that vein keeps kind of like producing uh we're not really getting much processed steps maybe is what i know so our vein is starting to dry up right now there's more of that that's good that was the one we already pulled um yeah maybe maybe maybe web design process steps maybe maybe maybe maybe not okay we're kind of missing it a little bit we're drying up here i'm gonna jump back over to be hands let's go to behance how about web design process i'm going to type that in right there what do we get what do we get yeah okay oh that's kind of interesting uh there's like those are like onboarding screens i wasn't really thinking that way see these guys right here like kind of fun like again back this back to like the illustrative style which we're not really doing right okay we might have to skip this one we'll come back because we don't want to lose the momentum what else we got categories of work distinction between client freelancer i think that's fine we have enough to go on let's make our messy messy mood board here ready for the way that all this works we're gonna kind of move things off our screen it the time has come to start clipping like a madman are you are you ready before we do that before we start clipping let's answer a couple questions rihann asks the question as as a ui ux designer do i need to learn a website builder like wordpress or wix absolutely not in my opinion right because if you're a ux designer you're really focused on research strategy users like psychology like figuring out how to get a user from a to b you're about wireframes and empathy mapping and and and note card like uh and user journeys and user diagram or flows right so user flow diagram sorry i said that the other way so if you're about ui design you're about the visual nature of it you're about wireframing and mood boarding and ui design and buttons and design systems you're about that aspect of it if you want to be a freelancer and then produce websites for people at the end of it right then maybe maybe you want to be able to build your own website if you don't i encourage everybody i love front end development big fan of hand rolling my own websites but i'll tell you right now if you don't know front end development but you want to build websites you can start building ten thousand dollar websites right now using webflow right you can land a ten thousand dollar website client using webflow design for them visually develop it inside of webflow they got cms's they have e-commerce they have password protect everything you could possibly need and you just create a webflow site i have a link down in the description it's an affiliate link i'll be honest but i love webflow i use it for all my projects i think you should probably use it too so check out webflow because then you could take it from start to finish and a soup to nuts kind of holistic experience for your clients if you're freelancing or or if you're working at a company maybe you want to have another skill set to offer you can say hey hire me because i can actually not only design but implement them in something like a a web flow builder or an editor x kind of builder and if we need to put up a marketing site i can do that for you right that's a great skill to have that's a great question okay um dunya yay says where can we sell our ui and ux designs that's a great question one of the biggest things that you're probably going to sell you're because you're probably not going to sell like websites as much maybe you'll sell some templates but i find the biggest seller or the things that i buy most are icon packs um ui like templates wireframing templates think of it like the gold rush okay like back back in the the 49er days in california right a lot of people were rushing to dig for gold okay that's the that's the designer out there who's trying to find the client dig for gold land the good client right the smartest people who are actually the ones selling shovels during the 49er gold rush right these are the people who are selling resources templates wireframes icon packs because it's so extendable instead of me having to find right like one client another client another client i have multiple clients my clients are actually the designer who are coming and finding my product to help them build their client or to build their project right so you know if i can make an icon pack that will save you hours and hours of time like i wanna i won't mention it because one of my i have a favorite icon pack i paid 149 for this icon pack i gladly paid it and i use it in almost every project unless the client wants something else because it's an amazing icon pack right so definitely sell assets don't sell final designs sell assets okay that's great um let me see angel says should i invest in a ui ux design boot camp or mimic designs and learn from them maybe your membership could fill this void maybe it could i think bootcamps can be helpful i think here's the thing about learning you need to know what type of learner you are right do you need assignments do you need accountability do you need a classroom do you need that structure then a boot camp might be for you i don't think anybody should be going to a four-year university anymore for design it's just not a thing a boot camp is the maximum right because it offers that structure maybe you are the type of person on the far side other side of the spectrum that's able to learn from podcasts youtube videos opening up a document getting your hands on stuff okay then then you're on that side maybe the something like the membership is in the middle and it fills the void where you have community with other people right you see me put out a design tutorial and then you can grab the design file and follow along right and you have a community of people alongside of you they kind of link arm in arms so it's light amounts of accountability a little bit of push pretty soon actually inside of the membership i'm going to start releasing design challenges as well monthly design challenges so maybe that's something for you that you'd be interested in if you join then you'll get a series of assets and you'll be challenged to accomplish something and then we might even have some prizes at the end of the challenges so consider becoming a member because we're probably gonna start doing those pretty soon okay um sahil says what are some important aspects that a beginner ui and ux designer need to know okay great let's you got to kind of separate them a little bit ui ux the beginning aspects of each one of them because what's important in each one of those okay i would say if you're a ux designer um the the some of the core foundational things that you need to know is user flow diagrams and wireframes okay user flow diagrams wireframes and maybe minor research like competitive sets you get those three things down user flow diagrams wireframes and competitive sets like one two three you have got a good core good base of what user experience design is get really good at those things you get better right the other things will come right empty mapping like no card like like procedures like you know uh user personas that stuff will come later but those are i would say those are the foundational ones if you're a ui designer here's what you need to get really really good at i would say the three things for a ui designer that need to be foundational and core for you it's typography okay um ui components and standards so reading through the ios human interface guidelines the google material design guidelines figuring out how small is too small for a tappable button for a touch point like what what does a navigation bar look like and how should things interact that's number two so typography kind of saturn status patterns and standards of ui design and if i was going to pick a third i might say like micro interactions i think if you have good typography and layout i'll pair that together you have a good understanding of patterns and standards and then you have a good understanding of like some micro interactions that might be a good play i might replace micro in action's interactions with color um maybe that's an important one as well but those i would say those are the foundational elements for a ui designer foundational uh elements for a ux design that's a great question um absolutely absolutely um yeah yeah here we go here we go do you have to bethel gold sales hey jesse do you have to become a graphic designer to be great at ui ux no you don't you don't right because really at the end of the day what is all design it's problem solving you need to become a good problem solver and there's ways that graphic designers which i would say is a very big generic term that encompasses print design package design web design it could be all under that kind of house ui and ux designs a very specific kind of like niche under like the design umbrella okay so you don't have to go out and figure out like how to be a good graphic designer and and design posters and stuff like that to be really good at wireframing mood boarding creating interfaces for websites and mobile applications but it can be helpful right for you to have that base that foundation in color typography layout like basic design rules like proximity size right like all of those kind of like like color variation repetition like you know consistency alignment like all of these are good basic design principles you should have and i might be releasing a design principles class pretty soon or course pretty soon so maybe check that out but um you know it could be helpful all right so those are great questions let's jump back in and start stitching together this crazy mood board that we were building okay literally this is what it looks like um i actually you know you could try to just try to drag things out but because i'm on a macbook pro i'm able to press command shift 4 and i'm able to just kind of snap the areas that i like like that which is what i'm going to do here i'm just snapping i like that hand drawn thing get out of here dropbox no i don't want you to do any of that stuff again organic oh my gosh dropbox you better back on up and respect me okay here we go all right what did i like i liked again we're digging the organic shapes and the devices strong typography kind of shown there this was fun like the cards i liked the cards there what did i like here i liked people this kind of had all the goods right it had the um the social proof organic shapes people and a search bar included so i liked that piece what was this what did we like out of this we liked the people i think do we like the people i actually like a lot of stuff out of this this is kind of fun um i might i might just steal from that that's really cool that's kind of fun this is also kind of icon driven kind of process stuff digging that as well okay cool i don't love everything about that i do like a lot about this search bar people remember one of the things we said was we liked the little floating back in a previous episode we like the floating elements boom toss that in like that what where where did this what are we doing how to put to okay here we go um okay yeah yeah we liked this we liked a little social proof that was purely the social proof was there anything else on this that we really liked um don't love that that doesn't really serve us that could this could kind of serve us kind of fun stacking of typography i feel like the dot pattern's still in so it could work i'm using some of that on my website so totally could work um let's see let's see let's see this is kind of there i don't love the rendition of this but i do love how it kind of leads down to other things so i'm going to snap that area what else we got what else we got oh search let's go big on this one because i loved we are gonna have to zoom out a little bit yeah yeah i really liked this overlapping search bar section and maybe it'll have some extra controls like this i wasn't even see this is where it gets really good because i wasn't even thinking about having extra filters i was just going to do a straight search bar but what if when you search you're able to maybe toggle down like some of these filters that could be really helpful i think to our users who are looking for freelance work right okay let's zoom in a little bit yeah dig this like that a lot just snapping things see and here's here's actually what i was kind of imagining i think we had this didn't we in our figma wireframe it was kind of see how it's overlapping this is what we were kind of envisioning is something like this so let's snap it i dig it we want to get a little bit of that overlapping love it love it love it what did we love from this one i don't know because i don't love it now so good we close it you don't have to commit to anything right we're just snapping stuff all right somebody said colors yes colors absolutely uh tell you what i did like about this i think what i liked about this one was maybe this piece i can't be sure it kind of it's kind of interesting to me okay we got a few more and then we're done i liked these a lot let's just snack on these ones like that okay again really good this is really i think i really did dig this one because it's a great um it's a great usage of all of the things we're kind of looking at which is right like imagery typography search and then immediately with the immediately with the social proof stuff down here which is like featured in right bam i didn't even think of that like a featured in section that could be kind of fun okay see how much your mind should be free to wander and explore that's why we're doing the messy version first because it will help form some solid ideas for us later i promise you start messy and then solidify okay boom i like that i'm digging that love this this is our process we are real big fans of this process okay all right with that being said we have all of the things now let's jump over to figma boom here's our mood board we might actually clear out this color palette and put it down here in our style tile and we are going to just oh man oh see all those elements see all those assets we got over there it's about to get crazy it's about to get fun okay here's here's you make sure you zoom way out when you do this because i'm about to do what's called the inspo dump the inspiration dump is literally just drag it all in and get it get it all in there all right here we go it's about to get very very messy now we know that there's a lot of stuff here so we're gonna have to shrink down this is a big 16x9 presentation so you don't have to be too scared about getting it all down there okay let's yeah we're gonna use the figma cleanup kind of thing and just keep highlighting things and cleaning up love it moving things around to fit into a bit of a square clean it up shrink it down get it closer all right now let's just start grabbing elements and bringing them onto our artboard okay here's this whole little row right here let's just bring it in love it so far love it so far now here's one thing i am going to do on my messy mood board i'm going to kind of show prominence or the things that i love the most through size okay so if it's something small then i kind of like it okay if it's something big then whoa boy do we like it okay so you you do have to have a little bit of rhyme or reason here okay okay so i'm just gonna select the artboard press one excuse me two it's gonna zoom me all the way into my artboard okay so you can always we kind of snapped around the areas that we really love here um but we can always crop more crop into things if we need to okay but i don't think we need to for now so i'm gonna start taking elements and getting them out of the way okay and then addressing each element one at a time okay i really like this so this is gonna be pretty big in my messy mood board here okay i also really like this okay actually we probably should have done all of this off of the artboard first let's do it all off the artboard first love these this is a big one that's a hit that's a hit okay let's start addressing the other things um i kind of like this i kind of actually we have a lot of this i don't even need it on my airport it's just going to clutter things up okay i'm also going to kind of group things together in my messy uh mood board so look we have we have organic shapes and i'll just kind of overlap them like that a little bit group them together bring those in and kind of chuck them maybe over there okay i love this i love this is like the use of like people and maybe i'll even title these things later right because again it's kind of like we're kind of stitching things together here so let's group these things together and maybe we will put some text in here that says search bars and social proof okay let's just spell proof correctly and uh let's make it a little bit bigger okay we're using roboto nothing special here pink like this okay i love that okay um all right fantastic we're kind of grouping things together what else do we got over here what were these two were these things organic shapes people and um and devices okay let's bring all this down so we'll say organic shapes people and and devices okay now the reason i'm doing this is because because if you're going to deliver this to a client right you want to be able to present this you never ever want to just send something like this to a client they're gonna go holy cow i'm paying this person but if you present a messy mood board and a nice kind of strict style tile they're gonna go oh i see this person has a process and you're presenting it to me you can then talk them through your process a bit and it seems very very professional it seems very very impressive at that point you're putting in you're showing them that you're putting in the work to your craft and that they didn't have the ability to do it without you okay let's do again like these are like testimonials put those over there testimonial this is process this is process this is people this is search right so i'm gonna take this search bar because we really liked it boom we're gonna pop it in there we are just popping things in and making things messy here okay we're gonna try to fast forward and do ooh there's another search bar let's grab that pink just like that boom okay search bars there okay and if you want if you you you do your messy thing the way you want to do your messy thing maybe you want to take each one of these because they are in groups maybe instead you want to put it in a frame and then style the frame you can totally do that it's up to you i'm just going to keep it messy like so okay boom i put it inside i'm just kind of rearranging the layers list okay if this is boring to you i totally understand but this is part of the process we got to do it folks we got to do it okay so let's talk about social proof and this is more like the testimonial thing uh yeah so let's drag this over here i'm gonna put this in testimonials okay so boom copy boom paste testimonials and people and again you're kind of showing all the things that you want to be accomplishing here it's fine if you kind of double up right like because over here here's what i mean this says uh organic shapes people and devices this says testimonials and people that's okay just double it up that's all right we don't mind okay let's bring that one above we're kind of just collaging these bad boys together love it okay kind of get the idea based off that just like so okay great what else do we have we had we had we had cards okay boom cards like that let's do social proof here like that um and this is just a good hero example i'm going to do something like this i'm going to pop these together again just zoom in and drag some text up here that says hero with floating elements and hand drawn with with floating and and hand-drawn elements okay that's what we need that's what we need we need a little bit of that magic center aligned it boom bring the whole thing together group it bingo bango wingo wango okay so this is a little bit big let's just grab some of these elements shrink them down a bit make some space on our messy artboard all right good you can see they're starting to have like their own little individual spaces here we're just kind of like bringing things together this is probably like testimony but i might call this card too good i love that okay great grouping it together first let's steal some text boom boom boom working fast we're just going to call these cards uh value props um what else could we do with those cards value props and maybe categories yeah we said categories right categories that's a great section right there and again if you're running out of space guess what it's a messy mood board just gonna space this thing out and give it some more it's all right we want to get all of our pieces in here love it uh let's bring a text box there a text box here we call this one process and flow okay group that together bring that on here's the last one we're just calling this it's more examples of social proof really right social proof really just like logos is what we want we're trying to highlight there group that together boom shakalaka you have yourself a really messy mood board okay now again like i said you can you can do these however you want maybe it looks fully overlapped and collage that's totally up to you okay um but now from what we have there we're gonna start building our style tile okay let's say we're gonna and again you might explore colors a lot more these streams are we try to keep them to an hour hour and a half so i don't want to like bore you guys to death right let's start moving into that style tile now again reminder what is the style towel what is the style tile a style tile is that next step from a mood board that allows you to create a little bit more structure before it was real messy we're grabbing we're pulling we're clipping things right and we have colors examples ui stuff now we're going to start actually bringing in some typography and we're going to use it we're going to do everything we place in our style tile is based off of our research and our messy mood boards and our wire frames all of it's going to come together now so you're going to see me clicking around a lot mood board research meal a note back to figma back to my style tile you're gonna see me doing a lot of this and that's what it's supposed to be because we're starting to build some examples not final products but examples of interface components elements typography color palette art direction and imagery okay so with that being said let's get cracking let's get going um also if you have not yet make sure you like subscribe hit the little bell notification icon on the channel so you know when more videos like this one come out really really appreciate it it lets other people see the content so that's what we want okay so um let's start digging in let's talk typography okay we're gonna go back over to our research right we're in our research file we're looking around typography tends to be strong uh sans serif okay there's a little bit of serif usage in over here on the upwork one but that's that's not the direction i'm going i'm probably gonna stay with the strong kind of like direction here like pretty professional okay so i like that um let's go that's not going to help us at all right there let's go back to our mood board and let's see what's in our messy mood board again we i'm tending to lean towards strong typography okay this is kind of a rounded serif which i don't mind but look at that it's kind of kind of that air and airbnb uber-esque kind of style it's very pro something a little softer like so in my mind i'm thinking what's like a softer but still professional and clean serif font maybe poppins maybe sophia pro which i'm a big fan of so we're just going to drop some typography on here okay we're going to put like um uh headline headline one okay um and let's start digging in and finding i'm actually going to just bring this over so you can see some different examples of typography okay we're gonna zoom way in here so let's try poppins okay it because it has a little bit more character that's nice let's try something like sophia pro okay sophia pro let's maybe bump it up to like a little bit of a semi bold to get a fair comparison there's a lot more weights in popping so this is sofia pro it has five weights and poppins has one two three four five six weights so not that not too much differently okay um i'm gonna drop this down i'm gonna drop both of these down to 16. okay um and i'm going to drop both of them to probably like whatever could be like the regular weight we want to go regular make sure regular on both okay so you can kind of see that's an example of body copy okay so let's actually makes both of these say body copy and what we're going to need is a little bit of lorem ipsum of some kind so let's just go um content content real where's my content real plugin i love content real big fan of content real next don't make me log in i'm on this new computer okay cool lorem ipsum short love it love it we need text um we need lorem if some long give me long okay apply oh mama don't know what happened there there it is we're able to just grab one boom and pop it into place okay so when you just select it and content real drops in there you still got poppins you got sophia pro they're a little bit different looking right let's let's make them uh we'll kind of condense the text size here okay let's make them left align text i'm going to zoom in so you can see the typography we're working on a little bit better okay and this one is both of them are at auto okay so let's let's take control of our our typography a little bit if our font is 16 pixels then let's try doing 16 times 2 for our line height okay and we'll do the same thing here 16. times two asterisk two okay tab and we kind of pump those out okay so again not the we're not trying to say this is the typographic scale and style that we're doing here somebody else said enter let's try enter and you know what we're going to do we're going to do a little something something we're going to go like this uh poppins just like this we're going to go helvetica and we'll go gray go away talking thing okay we're going gonna put some little examples here okay pop-ins this one is sofia pro let's do another one let's do enter okay let's try it do i have inter installed on my computer that's what we'll see enter boom we do it's good enter's good right but it just has a little bit of that has a little bit of that um it's like like these other ones have just like a little bit of that character that i like but inter might work we'll see okay it is a classic and maybe we could use it for subtext buttons tags different things like that maybe we'll pair together maybe you got to be careful of making typography a little too similar so it would need to be probably like a sans serif mixed with inter in my opinion but it's okay we're trying it out okay so why don't we start actually pulling these out of the way from each other a little bit and we'll play let's just now we're playing right so we're going to take our poppins up here and we're going to do like a sub headline so let's actually put something like uh um find ui ux jobs okay so yes we totally filled in our this one with lorem ipsum but try to fill it in with text that makes sense like content that actually makes sense if you're going to show this to a client especially okay with that being said we are going to give it the old times two treatment right so times two this jumps us up let's go from regular to semi bold okay now we have kind of like a sub headline and let's do it one more time now times two might be a little too big for you you might go yikes that's going to get really big really fast so maybe this could have been instead 16 times one point times 1.6 oh that's the wrong sorry 16 times 1.6 maybe that's more of a sub headline for you 32 what are we at uh 16 excuse me and 25 okay so we can delete this one and go up again what did we just do 1.6 let's do it again okay so we'll kind of bring this down we'll round it off to 25 is what we're doing here and we're going 25 times 1.6 again boom and now we have a bit of our headline okay we've created our typographic scale it's at 40 it's at 25 okay and it's at 16. i don't love an odd number it makes my skin crawl a little bit so i'm going to drop this down to something more like 24. or 26 we'll keep it 26 so we got 16 26 and 40. okay let's do the same over here we'll grab all these and we'll just make some decisions here now you could make multiple style tiles once i find one of these that i like and they were like it's sofia pro maybe we'll make a backup with inter or poppins right and you have style tile number two that has some slight variation changes and it's really a shift in direction is really all it is so let's bring these over and we'll turn these into uh sophia pro pink like that love it uh okay and then let's turn these into enter and then we're gonna do a little bit of voting right now okay folks i feel like we should have one more let's do one more like this what's what's one more somebody else give me a font inside of the proxima nova great choice yes uh proxima nova okay ooh ooh i like it i'm digging the proxima nova quite a bit okay let's do some voting here you guys uh let's see view how do we hide show you i command there we go let's zoom in okay i'm gonna try to like i'm in the way a little bit so i'm gonna try to move myself out of the way that's a little bit better okay what do we like out of these like typography options do we like okay who votes sofia pro okay put it in the chat who likes inter who likes poppins and who's digging the proxima nova okay we got some votes for poppins some votes for sophia pro avenue next we're not doing i'm sorry we have too many options already but that's a great choice abernail pop-ins we got another pot so three pop-ins we got a couple interest come on folks i need your votes i need you ninja needs you right now i love inter-oof mama do i trust you you got great style great taste my friend some people saying proxima nova i'm gonna start taking them out ooh somebody else said poppin's a girl i'm gonna go nobody's really saying sophia pro so you know what i'm gonna respect you guys i'm gonna respect you i'm gonna group it together goodbye it's out it didn't make the cut okay now what do you think now between the three okay i see a lot of proxima nova inter inter inter okay uh okay i tell you what i'm gonna i'm gonna make an ed an executive decision i'm taking inter out of here because i just personally don't like it okay now you have two options which one will you take here we got poppins on the left and you got proxima nova on the top right okay someone says pinova poppins all the way poppins versus pinova what are we doing right now come on come on everybody tell me what you think tell me what you like i think everyone's kind of going with proxima nova we're gonna go proxima nova all right that's it we made the decision congratulations you have done it folks we are gonna go with proxima nova for this this style tile okay now we don't have to really worry about um we don't have to really worry so much about typographic scale right now but we do have to worry uh we're actually we don't have to worry about sizes of fonts right now but what we really have to worry about in my opinion is typographic scale okay and showing how that scale all kind of fits and plays together so for instance you now want to do some lock-ups of how you might be using your typography okay so we're just gonna make sure things are like aligned nicely um this one will say like welcome to uh i forget what were we naming our our site um we were naming it something we had a name for it and i don't remember what it was come on let's go over to freelance job website oh i forget what we were calling it yeah we were calling it something that's okay welcome to uh job-wise i don't know okay so we're kind of just showing usages here um so and then we wanna well here's what we could do here's a really easy way to do it we could do something like this like headline two call this like h3 sub headline boom and we got body copy there okay maybe we could do another headline whoa yikes up here good let's go 30 or 40 times 1.6 and we'll get h1 main headline like that stretch her out looking nice okay we'll just oh put that way up above like that okay with that being said we we're now kind of dictating some primary stuff here boom for our typography like that we're going to lock it into place and now let's do some examples of uh well we'll come back to typography let's play with a few other things okay um we need to create probably i don't know just maybe maybe we'll create a search bar okay it doesn't have to be the end-all be-all remember this is not final designs it's ideas so we're going to literally kind of like pull and make a little amalgamation of some of the search bars we've found right i like the remember we liked the filters we like it being like overlaying something um so maybe let's make like some sort of overlaying image first okay some sort of overlaying element um and maybe that will be like a person so i'm just connect r for rectangle uh or actually let's do f for frame because always use frames if you can um i'm going to fill it with a bit of a color so you can see it for now okay and then i'm gonna hit bring up my uh quick selector i'm just hitting command forward slash in figma that brings up my quick selector and i can just bring up plugins from there so i'm going to bring up the unsplash plugin and i'm going to look for i don't know i'm going to look for something in here let's just do a little search do a little bit of art direction right now can we find anything for freelance we can oh this person looks happy this i like a happy smiley face person so let's go let's just go with this happy smiley face person pop that person in okay why don't and again we won't do anything too crazy but let's just do a little bit of treatment here okay round the corners a little bit of a drop shadow let's spread the drop shadow out blur it up quite a bit spread it in a little bit less and take the opacity of it down okay so we just have a little bit there let's go y-axis just drop our drop shadow down good okay cool maybe something like that we could maybe we would put an overlay over let's start using some color let's have some fun okay so look i'm gonna i'm gonna grab my little element here did you know you can if you hover over it it's pretty slight but there are little grabable kind of areas here they need a little grab but when you hold down you get the grab cursor i feel like we need a little grab hand and figma figma come on fix that for us so we'll drag our color up above okay and we have some document colors that we're using with that selected why don't we just press i and we'll choose our green maybe we'll try our blue as our dominant color okay and now we can play with that blue what do we want to do do we want to mess with some a bit of overlay colors like yeah maybe maybe we'll mess with the blue like that or multiply it down a little bit maybe we'll do a little color burn maybe we'll do some screenage um maybe maybe maybe i'm not really sure so okay yep yep yep really good okay so uh i have a special come on in come on in i have a special guest for all of you my wife is gonna come on in and join us in the live stream come say hi come say hi this is my beautiful bride amy hi hey you're live on youtube and twitch and behance right now we're doing a live stream uh and doing some mood boarding and some visual design okay well so sorry in a round my wife's a professional photographer she's to get some camera gear and some different stuff what do you need to get i just need the light yeah get okay i'll tell you what we're going to take a small break we will be right back i'm going to go to the switch screen now that you've met my wife we'll be right back give us about two or three minutes we'll finish this mood board go get a drink something we'll be right back [Music] [Music] so [Music] [Music] [Music] [Music] and we are back thank you so much for that quick little moment my professional photographer wife needs some light stands and i had some of that gear here in my office with that being said let's jump over to some questions and answers you can ask me questions about my wife even about my life if you want all right we've selected some typography let's figure out what kind of questions you guys have i wasn't really looking at the questions we did a lot of voting hey i want to say really quick welcome to veronica messeraka she's one of my newest members just joined and became a design champion come on big ups to veronica for being a design champion so maybe consider becoming a design champion like her and you'll be able to join me in actually we have next week i think it's next week is going to be our monthly live video members only hangout we're doing that next week so if you sign up you'll be able to join us for that all right the the run and bear says do you reuse mood boards from old projects or make new ones for every single project i'm going to be honest i make them for every single project and the reason is because that's what people are paying you to do right now it's possible that an old one could apply maybe maybe an old mood board applies to a new project because you're doing a really similar project that okay maybe all right but for the most part you want to do your due diligence and be really really honest um and do the work that you are being paid to do and that means exploration exploration is part of it okay um alvaro says my wife has amazing tattoos i know i know she was professional tattooers for 15 years super talented in all things art and creativity and actually inspired me to down the path that i'm on now of becoming a designer and a developer all right so uh rihanna says she looks so so now we're just talking about my wife she looks so sweet she is um you get married in the next four months congratulations i've been married for we're coming on 13 years of marriage happily married in love still wildly in love all right uh cody pierce asked a great question can you explain why frames are better than rectangles yes that is a great question i'm encouraging everybody right now to do all things using frames if you can okay so we drew a frame you can see the frame that we created for our image why is it better to create a frame well first of all our images are responsive inside of it but more than that frames are like these fantastic things that contain other things right so when we drop an element inside for instance you can see as we move in and our cursor crosses the plane of that frame now we have a frame when we create something we can also assign responsive kind of resizing to it okay so i can put it up here in the top left hand corner and it's always going to stay anchored in the top left hand corner or if i say hey i want you to be anchored to the bottom left as i stretch down it's going to stretch as well if i was to just draw a rectangle like this and bring a piece of imagery into the rectangle i can drag and drop right on top we are going to get some of that responsive resizing still right absolutely but yeah but it's just a little bit harder to work inside of this group right so i'm gonna paste this thing here i'm gonna have to group them together that's a lot of extra work okay and we get weird kind of like out of the box stuff that's happening now you can you can free finagle them if you want and it'll kind of work the same but as you extend things as you make components as you make like all sorts of like elements they're going to be more scalable here's a better example let's talk about this as an example how do we use to make buttons right right and we still do in some other uh design softwares we would come into our design software we'd put a piece of typography there we would write the word button okay and then what do we have to do we have to draw a rectangle okay yes we do right we have to center everything and then we have to put it behind style the rectangle itself maybe it's like a i don't know like a grayish button like this right we have to grab the whole thing group it together right and then what happens what happens if i start like typing here it's not it's just not doing what i needed to do right it's a big pain in the butt i would rather okay i would rather type the word button and then press shift a which turns on auto layout okay and that's a form of a frame okay it's a type of frame that i'm able to style okay any way that i want i'm able to add padding to it excuse me padding here padding like that so maybe we do 16 pixels of padding all the way around a set the balance of it and maybe add some extra padding on the left and right hand side and now this is just a text layer inside of a frame and as i type look at that my button expands now wouldn't you much rather have this as your component than this as your component okay and that's because of frames auto layout frames are just a better way to think right just use frames you're going to love how it changes your workflow just instead of hitting that that r for rectangle hit that f for frame it'll be a huge thing where were we we were adding some blue but before we do that let's go back and answer a few more questions yeah a few people say yeah uh grouping sucks um bethel says do you wear those glasses only when you work they're blue light glasses i hear a lot of arguments that uh blue light glasses don't work at all but i get migraines and these actually have reduced my migraines so i wear them when i work on screens okay um yeah yeah okay great uh can you explain why frames are better we actually did that already great uh why does figma not have a dark mode i don't think it really means it honestly it's dark modes are fan favorites i get it but i would much rather have a design tool spend its time and energy and resources building out a great product that performs really well has a lot of key features and core features for me instead of smacking a dark mode onto it you know okay the others have done it others have been there and done it and i appreciate them but i don't i don't need dark mode necessarily okay so that's just my personal preference um okay that's great great question and answers everybody all right let's go back to our blue color we were using our blending modes okay and maybe maybe what we'll do is we'll just go maybe we'll do is just go normal or bring the opacity of it down a little bit okay again this is not actually what's going to happen okay but it's it might be the start of an example right okay so let's let's let's create ourselves a little bit of a search box let's do that um i'm gonna zoom in i'm gonna hit f for frame that's right i'm gonna hit f for frame i'm gonna drag it out and because it is a frame it is stylable i'm gonna fill it with white and i'm just going to round the border uh give it a little border radius around the corners just a little bit let's add a little bit of an effect drop shadow you know what i'm about to do i'm about to blur this thing out i'm going to pick my blue actually let's pick a light blue like this and then bring it way down and neutralize it and then bring the opacity of it down okay something like that very subtle very subtle almost i like to keep my my drop shadows at 10 or less depending on the color if i can i just feel like it i just feel like it helps okay all right so now we're just throwing in a little example of like a search bar here right um we didn't do a great job obviously of of kind of pulling in some of the other elements but we'll get there we'll get there it'll be all right um what do we need inside of our search bar let's zoom in we need it's kind of like standard form fields with labels and placeholder text of some kind i actually am digging the underlined kind of um style for links and for other areas and anything that's icon driven is usually a little bit better but look i see some drop down and some color here i got okay let's let's try to do a little bit of iconography stuff if we can go back down and again what typography are we using we're using proxima nova that's what we decided on i almost forgot already all right let's do something like this we dropped it inside the frame okay and let's do something like what are they searching for what are they searching for type of work maybe type of work research what would they search for here any sort of search boxes here on our examples no we're going to be the only ones that include that search box up above the fold and really focus on it so let's get back in there and see oh we lost our search okay let's just put that there as a placeholder for now i'm going to look at our examples again yeah are you a freelancer are you a what do we have in our what do we have in our wireframe we had a right but i think we're going to replace that with some filters um i think we need one of them to be ima and it'll be like a drop down that's either i am a freelancer or i am looking to hire a freelancer okay um yeah yeah that's probably what we need the first one so let's do something like that and this frame is a little bit big let's drop the size of it down so i am a something like that and close it up i like i like okay i am i am i am that's much better okay and we'll come down here and we'll say a freelancer looking for work beautiful okay and we ne we need to find a way to just designate them okay a little bit like separate them so label is dark the placeholder text is light the label is dark the placehold texture like text is light see how if you're like confusing for a moment you just take a moment you go what are other people doing a little competitive side little research okay this is dark and it's bold so let's go bold there and it's a little bit bigger so let's go up to something like 18 and then we'll bring this down and actually instead of bringing it down i like to just bring the opacity of things down a little bit okay i am a freelancer looking for work great love this group that together it's looking good um and let's put yeah let's do it let's steal the style because i'm into the style um let's grab a color yeah like our light green color and we'll just make sure that that's dropped behind i'm going to use command and the bracket key just to drop it behind let's zoom in okay and let's just pump it up and go one bigger yeah two is what we need right two it stops at the baseline right it's kind of fun kind of a good color there i think it works i think it works um now what we need to do is create some separators in between because we're gonna have multiple fields here right um and i think these are going to end up being drop downs most likely so why don't we just do like a nice chill line right here somebody pretty soon is going to ask me hey jesse why aren't you using why aren't you using auto layout bro um because i'm not i'm not really thinking about like extendable design styles right now i'm thinking about getting some styles on the board okay i'm a freelancer looking for work and what do we need to do we need a possible drop down so i'm just going to do a little pen tool action pink pink and pink like this worst chevron of my life uh but that's okay let's just round and round everything yeah it should be rounded beautiful okay and we need to round the little joins as well okay and stretch that in stretch that up doesn't need to be so big does it no it does not now i'm going to group these two things together um could put them in a frame or an auto layout heck why don't we just do a really quick shift a instead now it's in an auto layout and we can affect any sort of spacing we have our bounding boxes i like to here's a question people ask a lot of times in figma if i'm going to use auto layout the bounding boxes are there what do i do do i manipulate the bounding boxes i try to as much as possible work in a way that leaves the bounding boxes alone respects them because then i'm creating a system i can talk to my engineers and say hey i'm working on what i would call kind of the loose grid okay and i'm working within the confines of the design or the design tool and i'm respecting the bounding boxes okay we'll talk about about it more later what that really means but that means do i come in here and try to line these up on like a pixel grid later on do i manipulate the space here like that yeah it's up to you especially for something like this if i'm just like concepting i'm just gonna respect the bounding box it makes life a whole lot easier okay so we could do something like this i don't love it i'm not love love loving it right now but we might have to put a little bit more work in off the off stream you know to get it where we want it to be and again we're just trying to create something that works so i'm going to grab these group them together let's do another one evenly spaced okay um uh let's see let's see let's see i am either a freelancer looking for work or a hiring manager or something like that or a client looking for a freelancer um the type the type of work is and this can maybe be dynamic depending on which one you choose in the first box here the type of work uh let's put like uh some helper text here it's like choose choose what type of work yeah choose what type of work you're looking for it's pretty big so we might have to stretch out our thing just like that okay i'm gonna move this closer to the end beautiful i love it everything's working and looking all right 39 from that side let's balance these a little bit shall we 37 33 but it should now be 35 and 35 wonderful we just want some even balance going on here and they're 29. we gotta extend this box out a little bit 29 30 through one through two three four thirty five we're just stepping it out perfect because i want to be able to grab my element and see if it's 35 pixels on all sides okay now it's kind of even not the best okay i acknowledge it let's stretch it out even more okay bring it down here and do something like a little button inside of it okay um and for my button you guessed it oh do we miss our somehow we missed our little line edge let's take that i want to keep our line in there oh because we're in an auto layout messy messy now to get it out of the auto layout i'm gonna have to group it together like this so that it's kind of like one piece okay i'll move it behind i'll just stretch it out so there's always a way where there's a will there is a way i'm gonna hit r uh no i'm not gonna hit r how dare you jesse you just said don't use rectangle use frames and then you try to do that okay boop okay like that shift a for auto layout love it let's fill it with our fun green not saying it has to be just saying it could be choose our selection colors that's our text really bad contrast on that really bad contrast that's okay we'd come back and fix it later okay um select our frame here and let's just i like the spacing let's just give it a little bit more left and right so like 30 on the left and right there and we'll just move that over okay yeah that's a really that's really bad contrast so maybe what we'll do is select that and fill it with kind of a darker green okay um okay that could work don't love it i'm gonna take my color palette and just scale can we just talk about how figma has a scale tool praise for that because i use the scale tool all the time to keep things in line and other design tools don't have a scale tool which just blows my mind i don't understand it okay um okay cool so i'm gonna get rid of that and i'm gonna bring this over here and line it up and let's make a couple other let's make a cup couple other little elements here okay i'm gonna grab my button um and why don't we come inside of here and just put a search button there and instead put a like find out more okay we're liking our component right our button is working so why don't we turn it into a component just for fun just for fun it's okay and then we'll create a variant off of it uh this variant will be stroked with our green color and it will not be filled and then our text will also be the green color easy we'll bring the border of that up love that okay so with that being said let's move that out and off and open up oh come on there it is okay let's go to our assets really quickly in our library oh no no using this file there's whoa where are you where are you my friend okay we're gonna get rid of that go back to our things here and okay i'm just gonna hit f for frame then we're gonna start building a little component library in here it doesn't it doesn't have to be if you don't want to ui components boom now when we go back to our mood board okay should actually be able to zoom in go over to our assets panel here and drop down ui components there's our button we can drag one out we can choose variant two for now we're not naming them or doing anything special but let's get inside here and drag a little button there okay now we can keep creating like other variants or we could just kind of chill these out and play with them in here okay so maybe this is a smaller button this would be like your buttons small come into our padding just go 20 pixels on the side and let's even bring the stroke down to 1.5 on that one okay so we got like a smaller version let's get rid of this oh i like that we're building a little card here okay and why don't we go back to layers um just like that so we're messing around a little bit with how things are spaced and let's just grab all of these elements just shift a auto layout pop em out of there whoa where did they go i don't know there it is there it is now we can mess with our padding up here in the top left and get some different nice spacing here that's what we want that is what we want beautiful okay and yep i like it okay so we've created a little component there easy okay what else do we need to create some other components here we need let's do some art direction okay uh we kind of did a little bit in there but why don't we just really quickly oh you know what i really loved this style i loved this style so if we could get some people if we could just get some people we might that could be a lot of fun right okay so let's see if we can get some people and do a little bit of art direction right now um first thing i'm gonna do is i'm gonna open up unsplash maybe not actually i'm gonna open up ui faces can we get some avatars of people yes no maybe so let's drag this over so you can see what i'm doing here in ui faces i'm just selecting who i want what type of people i want male female 18 through 40. all of it's good just apply an avatar just give me an avatar in here okay and then what we could have done was we could have did done two of them okay so let's grab two of them apply punk we need i like this one this one's good let's do one more let's get a lady in here but i need some space around her body so let's just go female bump i need some space though oh ooh almost almost oh you're sunk into like some bushes there can everybody push out a little bit okay maybe is it my fault do these things need to be a little bit bigger maybe okay let's try one more time a few more times here give me a person that is not com perfect okay so we found a person that has some area around them okay i'm gonna run another plug-in really quickly and see if this works i'm going to run the remove bg have you ever used removebackground.com okay so i have and they also have a really neat plug-in inside of figma let's see if it let's see if it runs let's see if it opens up i don't know if it will remove oh sorry i gotta select a single element so i select it there boom now we're running it set the api key first ah this is so horrible okay let's just export these out really quick and i'll show you how to do it on the web i'm gonna put these on the desktop i'm gonna go over here i'm gonna type remove beat.bg okay i don't know if you've ever used this tool it's pretty fantastic it's free you get low res images from it i'm gonna grab both of my images drag them in and it should pop yes it should remove the background beautiful okay like download that let's do another one i don't know why i didn't do the guy let's do the guy now come on you got it download it beautiful okay i love this okay this totally worked okay let's go back to figma okay we don't need you anymore bye bye uh but what we could do is why don't we just fill you fill you with a color like our fun green color okay and let's do another one let's fill you with our fun blue color is that our blue that's not our blue oh i kind of like that blue better it's a little bit more punchy that's okay let's get let's use the blue some of these blues that we are using i'm starting to doubt my color palette i'll tell you what that's okay hey let it let it be known that if i was doing this in real life i would not be on the clock we're an hour and 40 minutes into this i would spend hours doing this like legit hours and then not answering questions and doing and having my beautiful wife come in and get photo stuff it would be like a long process so this is a very fast-forwarded version of the process okay i'm gonna drag these down okay and in my downloads folder okay what i'm gonna do is i'm gonna come into my downloads folder where i have my peeps i'm gonna drag them on pink pngs beautiful look at that and him point just like that okay i'm gonna drag them up into the spot um and really they should be in frames that's okay we'll just group them together this time i'm not trying to be a hypocrite but i am just saying that that could be good okay with that being said what it are let's spray these colors are way more fun we're gonna have to pull up way more fun color palette or maybe we don't have to stick to maybe we don't even have to stick to those kinds of color palettes i'm gonna open up a little plugin that i run on my computer called color snapper oh yes we don't have time to do this we don't have time to do this i haven't set it up on my new computer but you should be able to hit nah i can't get it that's okay um okay so it's kind of like some people and they're off centered and they have some text inside that's all you need to know so why don't we grab our guy here kind of off center him and let's talk about our group here's another thing you can't do inside of a group you can't cut off anything that overlaps right so that's a real bummer let's take him out of the group forget this give me this frame action boink like that what are we gonna fill our frame with a fun color like this fun green to be cool like the the cool kids do okay now you can see when i select the frame is another reason see how it says clip content yeah we can't do that right now i can overlap him and it'll clip the content let's have some fun i don't know maybe this will work maybe this won't i'm gonna grab my image bring the saturation of it down and just bring a little bit of exposure contrast up maybe we do try some black and white stuff that can be fun right yeah i think that could be pretty cool let's do another one like this and what is the background gonna be let's pull one of the other colors kind of fun colors that's an orangey color love that love that we are going to replace our guy with our girl and we gotta do the same thing for her pink and bring this saturation down a little bit of exposure a little bit of contrast really really fun style okay uh she's a little bit big so we're gonna bring her down like that okay and she's obviously her shoulders missing and stuff like that we would fix it we would fix that okay so let's just come into our frame though let's add some text and it doesn't have to be so much um like this and just bring the size of this down yeah it could be a small little statement like this and this could say yeah fine uiux jobs that's fine i don't hate it we got some content work we need to do though don't we we sure do okay let's just group these together bring that down like that bring those up and let's make both of these white so they just punch a little bit more okay fun grab both of these let's just bring a little bit of that and we have been kind of creating this drop shadow styling that i just want to i just want to keep really quickly so let's just oh let's just uh here's a drop shadow i'm creating a now like a a style effect okay we're gonna grab onto these hopefully we'll be able to put effects and drop shadow blink and we should get a little bit of drop shadow i think we got it yeah we got it um let's come over here and paste that into place and we'll just say find uh marketing jobs what would really help there it was if i had an auto layout find digital marketing jobs okay cool so that's a little style there that's kind of fun what else can we put into here into our style tile um i don't know we could put lots of stuff in here but but we once what's a one last thing that we really need process yes how about some floating elements i'm like like let's create some little components that are kind of floating around i'm gonna steal the style from my text input or my search bar thing that i had here oh and we we really like our little underline style don't we i like it so i'm gonna grab it and i'm gonna come in somewhere like here and group those together [Music] just drop it behind and let's pump it up on a bigger headline let's make it like a three okay kind of good we're getting somewhere with that i'm kind of into it um okay let's get rid of this let's get rid of this yeah reusing styles is always a good thing always a good thing okay uh here would be a fun thing let's just do like an organic shape because we've talked about them but we don't really have any so let's just pen tool ugliest organic shape that i've ever made in my life like a neutral organic shape okay so let's do fill that remove the stroke what do we want to fill it with let's go with our green but then neutralize it a whole bunch lighten it up okay and we just want to make sure that it's actually ins oh not inside that frame come on friends get on that artboard get on that frame okay drag it down drag it over a little bit like that just drop it behind okay fun again this is not the end-all be-all it doesn't have to be this oh i don't like that color though it looks like like washed out baby puke let's just neutralize it a little bit more okay to be kind of a neutral so we can kind of see some of these things stacking up which could be fun after we make them okay uh let's go i think like this i really liked our mini button that we were making so let's go um ui ux design jobs uh how about like 143 yeah um choose from a number of great projects just filler text for now you know and then we'll come into that frame paste that guy there see find jobs see the see postings see listings see listings let's do that okay all right so we'll just pop that over to the side good we have a little bit of a little component right let's just drag another one down put it about 16 pixels away duplicate it like that let's do 100 293 uh marketing jobs love that okay now what we need to do is though we need to go into our thing select our line and just drag it all the way out a little bit so it's always just kind of popping it's always hinting let's just drag these out a little bit like that 239 marketing jobs let's do uh 1023 uh graphic design jobs like that take our line extend it out something like that okay uh i'm gonna close it all up one of my favorite little hotkeys i don't know if you guys do this it's just option l it just collapses all of my layers i cannot tell you how much my ocd just fires off when there's just layers upon layers open okay all right so we got some stuff here like that let's just put one more in there kind of just fill in the space we're filling the space with stuff okay like that digging that not liking this blue that's okay we can put this headline here with a h3 sub headline and come into our frame paste that there make it white right and then oh we can add like one of our hand-drawn element type deals here okay so let's do uh line it up with our with our search bar there okay it's really bad contrast we gotta maybe come back and fix this but we can say something like uh find freelance jobs that you'll actually love i don't know that's a horrible text and it's all stacked up on each other so let's just do 64 here we're just matching our bit of our spacing for typography all right you guys doing all right out there okay cool jesse brought your complete psycho bought my complete freelancer set up yesterday it's amazing i also love my website reads like thank you i appreciate it thanks for being so awesome okay let's drop this down to a regular and just say uh join a network of over 40 000 freelancers that gosh i can't type say that our finding work work they love and making a great living could that be more generic text no it could not is the answer to that all right folks um okay cool so we'll just do something like that but let's do um i'm fixing this right now i'm so over this i hate it you ever you make something and then you hate what you made and so it needs to be fixed right now multiply that's a little bit better okay what if we found a different color that we actually love how about our green do we love our green oh maybe we love our green and maybe we're doing this the wrong way maybe this needs to be our blue color a fun blue color i don't know let's just leave that as it is but let's do another one copy paste another version of this on top this one we will take away the multiply we'll bring down there we go there's a little bit you could see her you could see her right but she's not she's not the end all be all let's also crop her in and do a little bit better art direction so you can actually kind of see her face like that that's what we need okay that's a little bit better a little bit more legible still don't love it still kind of not loving it at all but our client might be able to see the direction that we're headed here okay the last thing we want to do is just let's add a little and we'll be done because we're kind of kind of droning on a little bit i'm going to hit p for pen tool i'm going to draw a little hand drawn kind of element around freelance something like that it's really ugly that's okay um let's make it bigger and we need a fun color maybe it's the blue maybe it's the yellow maybe maybe maybe drag that up make it look like a fun marker kind of thing let's round our edges obviously uh find freelance jobs that you actually love yay okay so this is one okay this is one style tile out of what should or could possibly be many okay um what we've created is just some styles for our clients to think about really right so we have created some color palettes we went and found we've picked some typography we've come implemented some user interface components we're creating little styles right like underlines under text we have some button styles some image treatments right we have kind of like a main hero image this is and i would go into a presentation with a client and say okay i will i'll probably include two of these okay two style tiles and i'll say here are some directions we feel like we're headed these are not final designs but these are directions before we actually start to designing and i would tell the client right we've pulled we've done our research we've done our market study and our competitive study like research we found what's out there in the market we have created some initial wireframes okay we we kind of know what the structure and the layout of the site is gonna be now what you should be able to do is what we could do is something like this right we can go okay now what we need you to be able to do in one presentation okay we'd want to be able to say something like hey we want you to picture or envision like this style being applied to a wireframe such as this okay so right we have our wireframe you can see we're talking about like people like with maybe floating elements here's some example of floating elements here's some headline treatments maybe with some like some kind of like natural organic kind of like marker styles or underlying styles you can see we had an overlapping search bar here's an example of how that search bar might look right as we bring the things together we didn't even do um social proof so maybe we would have had some some headlines in here like here let's just go really quickly i'll go to my website and grab some they don't need to be fancy schmancy or something we don't need to reinvent the wheel i'm gonna grab some social proofs i'm just gonna grab these right maybe we would smack these in there like that okay bring them down okay great now you have some social proof on there okay so you can see we have some social proof we have some examples of cards and image treatments and maybe the way we'll do reviews and so on and so forth but this is a direction that we're headed mr or mrs client um and here's the other style tile the other direction we might head what do you think about this let's get some iteration going and brainstorming but now we have a clear direction okay so that is kind of our style tile for the day let's do our final q a session and then we'll just review a few pieces of work and we'll hopefully end this live stream at close to two hours okay so we got a couple of good questions here on the board in the chat we got like a bunch of people joining us on youtube some on facebook some on twitch some on behance right now really really cool um okay after using the scale tool play piano house after using a scale tool all the elements turn into decimal values oftentimes how to tackle that that's a great question i believe there is a scale plug-in then if you want to be really really exact you can do that you could totally totally do that or you can just finagle things but that is a tough one i know i totally get you in other tools in the past there have been scale like i believe sketch did a really good job at having a scale tool that was literally i want to scale this it would bring up a thing and say i want to scale it to be a max width of this and you'd see everything calculated for you right so that was kind of nice i wish we could get something like that full time in figma as well but to each his own every tool is a little bit different quick great question psycho excuse me uh ralph says how much do you include in a style tile kind of about what i just showed you right this is this would be an example of a style tile maybe one or two other elements here but not a whole lot more right we want to give the client enough to know the direction we're hoping to head but we don't want to give them so much and i just saw this and it's bothering me i just had an idea what if we made that like our orange color nope that doesn't work at all that's atrocious get that out of there stop doing that right now okay but you know we want to give them enough to know the direction that we're heading but not so much that they go oh this is the final design i don't like it right we need them to know out there in the distance right this is a bit of a treasure map for what's out there in the distance that's the amount that i give in a style tile just enough for them to know okay all right uh it's not that advanced like but still it's working okay yeah it is it's still working uh oh figma plus spline yeah yeah if you're looking for a lot of people are talking about 3d transforms and ways that you can do those inside of figma i don't believe there is a 3d transform tool although one way that you could do it is by installing uh the vectory 3d plug-in okay so you could have a vectory 3d plug-in um let's see do we have it we do vector 3d elements okay and so maybe you can create your own element like a browser or something like that let's go to a mock-up cool let's do this and then it's going to bring up a 3d element we can get the layout it'll pop the layout onto our screen like so it's a massive frame okay but then we could take this massive frame um and we could you guessed it scale this thing up to kind of match that frame yeah yeah and then we can drag the whole thing in there it is and then we could say hey it's in the frame uh load that frame boom now we have a 3d element like this and again you don't you're not going to do this with your style tile but you might we might do some of this later on and put some elements there now we can export the image pink and now we have this great image right there inside of inside of figma pretty cool huh now again it's limited because it's not allowing you to take anything that you have and 3d transform it but there are some workarounds and some fun things you can do that do with that all right so that's something to play with maybe if you've never played with it i did a whole a whole tutorial on vectory plug-in for figma on my on my channel so make sure you check that out um okay cool let's see what other questions do people have uh i believe proxima nova is a free font somebody asked about proxima nova yeah it's a free font um so check that out it's a great one any other um any other questions that you have i'm kind of just kind of scraping through them and seeing and if there's no more questions we'll jump straight to uh our portfolio reviews which if you have not already signed up you should sign up and be part of the discord right the uh hey creative discord that's us here we are and we got a bunch of people submitting stuff all right got a couple of submissions for product and our project and portfolio reviews today um very very cool brian's saying he's somebody new to you on ux and he's loving this all right awesome shaw asked the question will be last question that we'll get into our portfolio reviews how do you pair up different fonts that's a great great question you want to pair up fonts um well if you're going to pair fonts right we're talking about not using one font throughout but now we're going to pair fonts here's a few rules for you you want to pair fonts that are different enough that they don't look like wonky versions of its of themselves right that's why in our example i would never try to pair up probably inter and sophia pro they look too similar your eye won't be able to catch the fact that they're different fonts but they look similar enough you go something's wrong about this something feels off right so if we wanted to pair a font maybe let's just come over here and and let's just do a little font pairing if we wanted to pair a font with inter like maybe what we would consider doing is uh let's just get all this out of the group okay point and delete that okay if we want a pair of font maybe we would use enter for for instance our body copy maybe even our sub headlines but we want something that looks really really different for our headlines so maybe you would use something like uh oh gosh no not that i was gonna say georgia um georgia something like that right and you're gonna give it a like quite a bit of a different take using like size weight all that kind of good stuff so we'd be like george bold something like that now these look incredibly different we haven't even added any real stylistic differences to them right the moment that you add some color to one okay now things start popping out and this pairing looks nice so you definitely pair sans serif with serifs that's an easy one to do chunky with thin that's an easy one to do um but or heavy display fonts like or like very character driven fonts um with like very simplistic fonts that's an easy way to do it size difference variation weight type of font family of font all that kind of stuff typewolf is an excellent an excellent resource if you've never used it type wolf definitely been there that's been pretty fun what's trending in typewolf awesome um and then you should have where is the font pairing thing oh it's in here somewhere it's like collections yeah it's somewhere on here okay but but uh look books um yeah tight pairing lookbooks there it is okay so you got like all the different lookbooks and the way that they could be used yeah that's a good one yeah typewolf's a great resource so definitely check that one out and with that being said we're going to jump over and do a few project reviews inside of the hey creative discord server if you're not part of it join it for free if you're interested becoming a member check out membership and get a little bit more kind of one-on-one time group time like mentorship with me as well as behind the scenes all that kind of fun stuff all right we're looking at chatanya's new piece of work the space x application concept let's take a look at uh shahed's real estate uh shot on dribble here's another really good one that's from shahed we want to spread the level a little bit this one's from mel coder mellow coder let's take that's portfolio reviews how about project reviews um let's check out uzaires i'm just opening these up in new tabs we're gonna check them all out in a second and this one is by jennifer let's start with jennifer's stuff right here on the discord server all right this is bell and birch looks like a website design looks really clean maybe i the only thing i would say is maybe a little too simplistic maybe a little too clean um you know i'd like to see a little bit more oh this is nice the layout now gets a little bit more complex colors really really nice i like that logo the bell birch logo really clean it has a very clean vibe i'd wanna i don't know i might wanna play with like some sort of supporting color because it all feels very like monochromatic which is maybe what you're going for but i think also you know it falls a little flat like it seems to be like i can't tell on my screen like this really light kind of peachy color but maybe you would pump it up and have a little bit of more of like a peach accent color somewhere in there something a little bit brighter and bolder that could be nice it's it's it's a nice project it feels a bit sparse and empty right and it feels a little bit untreated i'm not sure i love the color palette used for like these buttons and these content now again contact or the navigation sure absolutely but i can't tell it seems like maybe we have varying tones of it like this is really dark this is really like a little bit more like a different hue you have different versions up here so i mean i love it i love the iconography i think it's a a great job i just think you want to be kind of careful oh look you're doing a little bit of that underlying style you need something that pops i feel like otherwise it just feels a little bit too sparse but great work that one is by one of our hey creative members that's jennifer here's another member this is chittanya he's doing a little bit of a x application prototype let's just jump in and get full screen here and check this stuff out love it we're just gonna go left and right okay so we have a little bit of a user flow looks a little bit more like a site map user flows usually have flow lines want to see some of that but i do love how you're branding everything that's really fun okay what would you log into the spacex site for to reserve your trip on the space shuttle deck that could be pretty great um okay all right clean stuff clean interface work we're seeing here um yes yes yes we got a little bit of a contrast problem right i've i'm one to talk i just did that in my mood board my style tile so like we got good contrast and legibility here not so much up in here so we might need to plan for that right not all images are made equal so we might need to figure out do we need a subtle dark gradient that kind of comes down very opaque but still allows the text to pop a little bit pop off navigation navigation's clean it's a little tight for my my taste i'd like a little bit bigger maybe make it a little bit more accessible five's a lot it's not impossible but it's a lot okay um dark interfaces are hard to do and i think you're doing a good job here um also the case study is really really well done the presentation of this piece is really well done yeah i think if i was going to complain like about one thing like the biggest thing i'd complain about would probably be your navigation i want it to be a little bit more spacious a little bit more fully formed maybe you're working off a design brief that required you to have five tabs i don't know but um oh yeah maybe even also a little separation between like your top area and then each one of these kind of individual cards right like the components themselves i want a little separation to know when one is done and the other starts this is probably the weakest of the screens that i see so far like the imagery is fun right you're doing a subtle gradient down but you're introducing a new style and i don't think it's a good style this white outlined kind of card style um i think you need to learn in dark interfaces how to play with varying tones of black and gray right so it's a little lighter gray a little darker grey a little lighter black a little darker black okay willy wonka 195 from twitch what's up i don't i don't do a lot on twitch we're streaming live but thanks for joining us we're doing some portfolio reviews from our discord server that you can join for free and you just got to find the the link that was posted in the chat yeah and also the text is like a lit it's just really tight like pump this text up a little bit i think um make it a little bit more legible that's what i would say there and we'll do maybe one or two more kind of like shots of it fun that you did like the presentation with the elements leading off let's get you know i wonder actually the more i look at this like the images in the background are a little bit distracting so maybe it would have been nice to have them be uh like a little less like a little bit less transparency to them like a little bit more opaque so i can focus more because i just don't know where to look in this case study case study speaking okay but i think really really good work uh really good work uh chatanya so excellent stuff thanks for being a part of the group and the crew this is by md shaheed hassan hopefully i said that right this is a real estate rental app love the shot let's just zoom in a little bit here and see if we can't get yeah like i like what we're seeing here it's good stuff oh yes yes yes okay um it looks very airbnb-ish really clean really professional um it's funny that that's i what is this this route supposed to be it's supposed to be like you've circled an area and you're getting everything inside of it okay i don't love the icons on there they're a little hard to read right um and i i do love the cards typography is used well or excuse me iconography is used well inside of here you're clicking on one i just need a little bit more connection between active state and what i'm looking at here i don't think this needed to be like a little contained card i think the whole thing could have rolled up from the bottom and take it up full screen i think that would have been a little bit more fun this is a lot of information you've done a good job and getting it onto the screen um i think we might need to figure out again don't be afraid of going full screen on some of these things and breaking the the boundaries i know that you're doing it over here and it's interesting kind of a 3d viewing experience but don't be afraid of maybe doing it here because now your back arrow is taking up a lot of your image just think about that but it's really clean the really crisp clean usage of typography and layout proximity between body copy and sub headlines like here and the sections being separated it might they could use like a little bit more separation but that's just being nitpicky that's me offering constructive feedback and criticism but i think it's really really nicely done excellent work md shade appreciate your submission let's check out a little bit more here this one is from melody uh melody is doing concept design for a luxury makeup and natural skin care brand called bellamondo the colors oh the colors love it people just don't use orange enough and i think you're because it's a tough color and you're using it in a really beautiful way right you're using it in the subtle kind of elements so far that i've seen this the nice neutral pinks light blues blacks the neutral colors kind of like the natural organic colors take precedence and you're using the orange look at that only in pops of places right you're not overdoing it i think you might even be overdoing it here but i like one big bold pop of orange somewhere and then maybe using more of the neutral colors down here otherwise you get too linked onto that orange i love this there's a fun little layout happening there and i don't know if you're doing the work like for also the packaging design as well as this looks like web design stuff i would say maybe treat these a little bit more like treatment when we talk about design is it needs something right otherwise it looks like a square image which is not bad but maybe you need something like elements kind of behind a little bit of layering um i don't know like something just a little bit of layering maybe some typography leading into it that's a way to treat elements right don't capture the typography let it lead off be a little bit playful here love the large typography there we go now we're this is treatment this is what i'm talking about this is beautiful typography fun bold like pops off the screen a little all you need is a little shape there right and all of a sudden it looks like there's been some more work put into it this looks like a light version of the site like that you did a dark and a light love it i'm gonna give it a little appreciation really good yeah if i could say anything it was just i'd say push this brand a little bit more and give it a little bit more treatment we're gonna do one more and then we're out of here for the day this is uzer chachia man i love that last name chachiya probably not saying it right but i like the way that i say it this is red wire sound control app it's a concept project red another hard very difficult color to use right but really really fun if you can nail it the right way red wire here we go again here's some more of that treatment stuff let's zoom in a little bit wow what did i just do okay let's just zoom in here a little bit like this um you know having the the earphones themselves kind of pop off right that's a nice treatment um the spaces here look a little interesting i don't know i might i might get consistent spacing here or figure out what you want to do and i tell you that red's hard to use i don't love i repeat i don't love uh the differing weights of iconography in here that's the biggest flaw of this right now is that all of your iconography looks very different some are really thick i know you got an active state here this is really small really thin you need to create a consistent look and feel for your iconographies that's what really takes um designs to the next level okay do not like this pacifico typeface i think you could do something a lot cleaner and nicer here and the red is a toughy i would i would really stay away from using it in these big sections here i might like neutralize that with another version of black and then just use it for like call to actions or really big main sections but again bold attempt bold move bold color right don't mind it on the presentations nice all that you just got to clean it up you need to mature the work a little bit more and that's a huge part of what we've been talking about today is to mature the work right is is whether you're when you're presenting you want to mature the work you want to present things in a mature way you want to you want to have messy style tiles or mood boards and then kind of mature it and have something that's a little bit more presentational not something nice to look at you want to use color in a more mature kind of refined way iconography typography all that really really important hey i just want to say another quick thank you to everybody for joining me make sure that you like and subscribe get notified when new videos like this come out if you give this a big thumbs up and even leave a comment on this live stream that'd really help for other people to see this live stream it's been a long one a lot of you have stuck with me the whole time thank you for being here and sticking with me maybe consider again joining the discord server and chatting with me and the crew there but then also consider becoming a member and joining me uh as one of my exclusive members in my members club you'll get posts like in a patreon kind of feed that you'll see there you'll also get behind the scenes access i gave an office tour recently as well as live video hangouts gonna be doing one of those next week with all of my members my design champion so become a design champion and join me we do some live role play between uh like myself acting like your client or your boss will role play how to get a job or how to get hired or how to land a project how to get a raise at your job how to switch jobs how to do an interview i'll role play all that stuff with you as well as get access to my design files and my resource center and a slew of other cool things so you know consider becoming a member that would be great i super appreciate all of you joining me here for this long two and almost a half hour live stream it's been a lot of fun no technical difficulties just a couple of fun interruptions from somebody that i love very much i hope you're having a phenomenal week i hope you've had a great week enjoy your friday and enjoy your weekend get some rest we'll be back at it next week we'll see you then you

Channel: Jesse Showalter

Views: 3,939

Keywords:

Id: tfGk95tTWB4

Length: 135min 17sec (8117 seconds)

Published: Fri Sep 03 2021