From idea to layout: How I approach designing a site

in this video I want to explore how I approach the beginning of a project and the way that I move forward from gathering my ideas getting not even gathering it is getting inspiration just getting started the places I look how I do that and we're gonna be doing a fast forwarded version I don't want to be dragging it over too long so we're gonna do a really quick build on getting to this final product or this rough draft actually rebuilding up to the the rough draft you see on the screen now where I go from zero no idea at all looking at layouts getting inspired by things figuring out the colors I want finding images and all of that and we're gonna be looking at how we can do that in this video and then my name is Kevin and welcome to my channel where we learn how to make the web and how to make it look good with weekly tips tricks and tutorials and I am so excited about this project I've asked you guys what software you want to look at more with design figma XD figma was the clear winner so we are going to be looking at figma but before I get into that I am going to be looking a bit at my process of how I even get to before I start designing when it comes to researching gathering assets all of that other stuff and I'm very happy to say that this video is being brought to you by Eagle Eagle is this really cool application and browser extension that it just makes all of this stuff so much easier they asked if they could sponsor one of my videos and I was gonna do a little shadow to the beginning like this just to explain it but it's such a cool product and it's something that I've actually started using in my workflow I said you know instead of doing a little shout out like this I want to talk about it by showing you how I'm actually using it so we're gonna be doing that in this video we're gonna see that it is super useful for your research for collecting assets just staying organized is image and asset management can be a bit of a pain in the butt so it is a really cool product and to get through all of this what we're going to be doing is building a website for a personal trainer that is now in this world of social distancing where Jim's there I know the reopening and stuff but I had this idea that you know a personal trainer we do it virtually and they're starting to try and push their services that way as much as possible so I think it's me a lot of fun and let's jump into research part so the very first thing I do is I google I don't Google that's not that's not true I often start on either dribble or Pinterest and for both of these I'm gonna start on dribble and I don't want be following out and be searching am i popular and let's just try fitness um and I'm not it doesn't even have to be within exactly the niche that I'm looking for but I do like sort of making sure I move in the range there at least to start with and I'm gonna look I don't know if I'll see anything under fitness I might look at personal trainer in a second I sort of like this at this research stage it's really about grabbing as much as you can and this is where the Eagle extensions really cool so actually let's open eagle first here and this is what Eagle looks like where you going to collect stuff and I want to make a new library here and let's just call it a personal trainer website whoops gotta spell things good and create library and I get oh I have to say where I want it to be saved in so let's do that really fast we need a new folder here so personal trainer and hit save there we go so we've told that where we want to save our stuff and I'm actually not going to be coming back here for a little while because I have the extension here you know so you go it's an extension on the chrome store and I want this image I just click and drag a little bit and look at that instead of like dragging off to a folder you have like down I often like would save everything on my desktop and then move it off to the folder I want this is my favorite thing I click a drag a little bit and this just comes up and I can drop it in and I can even choose folders within that we'll get to that a bit though I'm just gonna drop it in here I just want ideas and things that are sort of speaking to me which I don't see a lot of right now so I'm actually going to do a bit of a different search let's try personal trainer that's really cool let's grab that it's not exactly what I want oh and this is this is interesting this is actually a video or a movie right so I can grab that and drop it in and that's cool it still takes it and let's see there's a few things in here that's nice I'm just grabbing anything if it looks nice I'm grabbing it mmm oh nice it looks nice like it's if it speaks to me in a certain way so I'm just grabbing a whole bunch of stuff here and dropping it in cool another thing that's cool and one of the reasons I like Pinterest when I'm doing searches for stuff is if I do a personal trainer website a lot let me get templates but the templates do look pretty nice right so like this one looks pretty nice so I could just grab this and grab the image of it which is now another thing I really like though is instead of grabbing like the image like that let's go check this one out so you know as we said we could grab my image itself and grab that which is a screenshot of the whole thing so that's cool but these are usually these templates give us live views right so if I go to the live view here there's a few things I could do if there's certain elements on it that I liked fancy loading screen here but if there's certain elements oh it's one of these ones okay let's just click you if there's some things that I like on this like I'm not really a huge fan of the navigation let's pretend oh there's a weird arrow here for stuff okay whatever alright let's say I like this one only that so I could capture that and I know there's ways if you're on like a Mac you can really easily do capture areas and stuff and there's tools on Windows too that I have but the thing I love about this is as soon as I hit save it's you know if you do a screenshot on a Mac it's going on your desktop and then you got to organize it this saved into that folder I had set up so I have that exactly where I want it to be which is really really nice or if you want the whole page again there's other tools for stuff like this but what I love about it is I have the capture page it's going to scroll through the whole page take a screenshot of the entire thing automatically and then stitch it all together and again I know Firefox dev tools has something like this where you can do it but the nice thing with this is it's automatically saving it to where I want it to be so if I go and look in here you can see right there and have the entire page and you know this is the screen the small one I did here's that here's all the other things I've been grabbing and they're all in one place and this is really really cool and I love this just for getting my ideas together the other thing that's really nice with this and I don't know if there's an these look like SVG's can I grab them let's see if this works I want to see if I can steal the recipe G right there let's go and see if it was oh that wasn't it was a PNG that's okay I know Apple I'm assuming Apple has an SVG so if ever you're on a site and you're trying to get SVG's this little you drag drop it in let's go check and yet you can see it's it grabbed the SVG and so yeah the amount of times I didn't like an inspect element to try and steal SPG's from stuff so easy and I love that so a nice easy way to be able to do that so I'm gonna fast forward a bit as I continue doing my research here and getting ideas and then I'll see you on the other side [Music] all right so I've got a bit more stuff having gone too crazy over the top but I've got a bit more extra stuff in here and one of the things I like about Eagle here is one cool thing is we can actually search by color on stuff so if I click on the red here you can see it's it doesn't work perfectly as you can see but it is grabbing things that are predominantly red so it's grabbing that one if I go with the dark colors all right wonder if I can get the orange or it's getting to see the big background of orange if I go with the black it's grabbing a lot of stuff because it's black so if you want to quickly organized by color you know it seems to always be the predominant color but it still works really really well just really quick quick things and without any organizing on your own but you can also come through here and organize stuff a little bit more so all of this really are my ideas so I'm just gonna shift click get everything here so with everything selected here I can add new tags so I just want to in speed inspiration and everything's been tagged with that and even we could organize a little bit more it's folders so I could make an inspiration folder and actually move everything into there so if I go to my awl and just drag it in you can also do it that way so if you prefer tags or you prefer that you could also come through it in the inspiration ones and one thing I like doing cuz I like grabbing just whatever I like and then sort of spending a bit more time actually looking at it so this one I like the use of images and sort of these square things and it's not my favorite but there's some interesting things let's go to the next one actually the dark the colors not so much there's a lot of these that I've read a so I'm sort of not leaning toward those as much [Music] this one's fun with the the illustrations but I don't plan on using illustrations and all you can also see that it's picking out the colors that are being used and it's actually giving you the hat of the hex code so if you see a website you really like you steal it super easy to get all or not that all the colors probably but the main colors they're being used in it so that's neat too this one I like a lot actually the big image here it's cut out and we have you know it's nice it's simple we might do something very much being inspired by this that's kind of cool so this you know I could come in here and they had concept they have default things that are coming up in here so look at that Jim landing page page sport is that based on the name of the image curious how they did that I don't even know but I think it has Jim yeah it's coming from the image itself that's kind of neat though it's automatically trying to figure those out but what I want to do is do I like the fonts and the colors that are used here actually but I'm just going to write have font on that and then this one - I really like the font so I can write font and I like the colors here so if I write if I come in here and do color and these are mostly for my inspiration but in the way you use tags is completely up to you obviously this one I like the colors a lot I like that gradient that's coming in there I'm just really quickly going through these I don't really need the icon I don't care let's just move a little bit faster I sort of like the layout of this one so I could say layout and then the nice thing is I can come in and say I'm on my all but I want to search and I come up to here search I'm gonna start writing layout and actually I just put the letter L and it's smart enough to start figuring out a little bit of what I'm looking for until it finally gets to my layout but it's a bit of a flatbed even but it is like a fuzzy search color so if I do Co L it's you know we're slowly getting there but it you know I don't have to write the whole word which is always nice and I get the ones that I tagged for the colors that I liked and they're popping up right there so you can sort of come down there's lots of other ways you can do it and you can actually make smart folders which is kind of cool so I don't want name necessarily but I can say tags are choose color a let's call it colors I like great and now automatically anytime I tag something with colors it's going to show up in here and then I could have layouts a like and all those other things and quickly easily get around and navigate that way so that's pretty cool I think and I like that a lot at this stage of my prod when I have all these ideas what I usually do is I usually actually take a break I walk away for a while because I don't want to steal anybody's idea I don't want to walk away with exactly what I you know I often find like two layouts that I really really like and I don't want them to inspire me too much I want the idea of them to be there but and I usually spend a lot more time in this but I'm gathering ideas gathering ideas looking at inspiration as much as possible and I'll focus on certain elements I'll focus I really want to be looking at cool fonts now I want to be looking at this now and I'll just be grabbing as much as I possibly can to inspire me and then the next stage is take a break relax go do something else for the rest of the day or work on some other projects do some coding stuff nothing design for a while so those ideas can sort of circulate in my head I can figure out and think of that you know I'm not focused on them but those ideas are there they're there turning in my head and then the next day I come to my computer and I can actually start designing so we're gonna head on over to figma and then a blank file right here we have a nice big blank canvas and I'm just gonna click on the artboard tool there and we'll go with a regular desktop one I'm not gonna go too crazy with a whole bunch of layouts okay so with that I'm going to select my artboard and I do want to open up my grids so doo-doo-doo here layout grid I can click on the plus sign it always does this type of grid I'm gonna switch that over need on multiple grids in figma but I just want my columns 12 column grid because it's the easiest from a design perspective to work on the 12 column grid just cuz you knew three or four or two and you know you have lots of options it's why and all the other ones did 1440 so I'm going to do like a 210 margin so I'm working at 1200 as my max width it's my idea they're gutter 20 works perfectly for me I'm not gonna overthink this too much and let's get started with some text so I'm gonna do a big text box here and we're just gonna go with virtual virtual one-on-one one-on-one personal training and I need another text box after that but we'll start with this one actually I'm just gonna hit K which is a scale that's not gonna work double click in the corner okay and make that a lot bigger and we want to make that bold now at one point I'll get a bit more precise with my fonts but for now I think just having you know I'm we're just doing a rough layout right now let me go back to V which is my regular move tool and I want to make this see my fonts of it ship it one two three four five which is good but let's bring this down to 42 maybe just so I can fit it on two lines because I think it looks a little bit nicer and then I need a text box here and actually I have a plugin so if I go to lorem ipsum here and my plugins two sentences is probably going to be perfect and we can do something like that with just a little bit of text coming over five columns the reason I'm doing five is because I'm thinking when you bring in like a big image or maybe even like a big video here so something like that and this is where like I would again I've looked at my layouts a lot I've studied them I have some ideas of what I want to do already I'm actually join if this was a really important project I would have also sketched and stuff out and had some ideas here but let's say this is a little video with some around corner on there I guess oh yeah I always mix up E and O just cuz the different software that I use so we'll make a little play button here in the middle it's probably too big right now center center and I don't know what the polygon shortcut is here probably gone there is none that's why I don't know it and just like that we have a play button I'm holding shift down so when you hold shift like the angle snaps a little bit raised if you let go of shift it's impossible to line it up perfectly so just hold shift here and select both of them Center center group that so I'm just doing a ctrl G or if you're on a Mac and beat command G and then select that Center Center command G and it groups the whole video player all together so if I select one everything gets selected I can select my whole desktop here and just turn off that grid for a second so you know we're whoops didn't mean to do that we're just coming in here and get all that selected there we go finally move that down maybe a little bit I'd probably have a navigation on here as well and like a logo and stuff but I just want to look at getting the basics of this together now I do think I would come in you know it might look nice here are four rectangle and this is draw a big box put that in the back that's a shift control and square bracket opening square bracket to move it all the way to the back you can also right click and I don't even know where it is here I'm assuming arrange it arranged Leclaire No I don't know you can drag it here too if you want it's on front you can drag it down it goes in back send back send forward there you go you can see them there I don't know if you can do it here hmmm interest oh there it is it was right there in front of me send forwards and back so send to back is what I was doing and on that I'm gonna choose a greenish color because I decided I think it would be nice to go with some green maybe a bit more yellow something like that and a bit brighter I'll go with that and then I always suggest if you want a gradient start with one of your colors and then choose the gradient because sometimes it helps that it didn't maybe I'm thinking of XD actually I go back and forth between the two so sometimes they mix up so I'm gonna select the other side on here and just darken this whole thing up and I want to be a bit more greeny so we can move this over something like that will probably look okay and we'll just do a nice gradient going across like that that's perfect for me and I'm gonna I'm not gonna stress too much with the colors but I probably make that change these away from pure black at one point now here I don't want to so and right now I'm really just worried about like roughly but I do like I know some people when they do wireframing they're just pulling in like their regular colors alright like gray is I like having a little bit of the colours I plan on using just so it doesn't you know it gives me a bit of an idea I'm just gonna option drag this down or it's all dragged whoops there we go oops alt drag there we go it worked that time Center align it and let's change the text something for every one like that we want to make sure it's centered so I can Center it just like that and here we can do like some cards so I'm just a new rectangle I'm just gonna make one for now you're gonna see this is kind of fun so this will eventually have an image on it we're gonna get there in a little bit and let's bring some text in here though whoops I want the new cardio card you K again shrink it down a bit bring it on top with you know I'm just ordering it they're sweet my cardio and then let's go grab you bring it to the front and actually I'll need a bit more room but this needs to be a lot shorter there we go and shrink that down too so this would be like um a nice simple card type of thing so there's different types of training now what I'm going to do is I'm gonna make this into a component which I think I always forget because there's a K there to control alt K there we go so this is a component now and what I like about making components is if I decide that they should actually let's just select all of those and group it for a second so I can Center it let's say I go and I'm gonna ungroup this or you go on this component if I decide this is like my master component so if I change the font size here wrong 1k for scale and I make that bigger they're all going to get bigger together so it just makes it really easy to work if I do need to make a change on any of them which is really really cool and handy and there's some other cool things you can do with the auto layout as well but I don't think I need it on this guy right here we have so the cardio and then what's nice about this is even though it's a component I can come in and change this so say we have component and then strength I guess we'll have to make this bigger and actually I think I'll do it on this one and make that bigger since it's Center align text it's just making this text box bigger all the way along that flexibility and whoo what else do we have home gym people that have a home gym I know it's not quite the same as those others but there we go and again some images would eventually come on to that let's just grab something like this option drag it all down make a new section and I could be a bit more organized with my layers but we'll get there eventually I don't want a video so we can get review all of this can go center-aligned whoops this center here and again I'm just trying to stay pretty simple here we can do a try for free double click to shrink that down option or alt drag just so it stays that like if I do this it's gonna grow it that way but if I'm holding down alt or option if you're on a Mac it's gonna drag both sides out at the same time which is handy all right so we need to eat button so again I'm just doing this pretty fast just to have a rough layout that we can use let's shrink that down sign up now I guess would be decent text let's zoom in a little bit which is spacebar and controller spacebar and you have to do the spacebar first then the control or if you're on a Mac command cuz V do command or control first and then spacebar nothing happens that drove me nuts for the longest time and actually that looks kinda big if you want a hundred percent to its shift and then zero or you do a shift and I give you have a selection let's just try that shift to will zoom in on your selection and then the shift 0 will go to a hundred percent but it doesn't work with the the number your num your numpad it works with the numbers on the top which threw me off because I'm so used to the other ones so if I do that and you know you want to look at 100% to see how big something is even if you're zooming in to work on it let's give this a and I'm gonna make this a component too because what's important here with making this into a component since it's a button and this is a cool thing with figma so if I do my create component ctrl alt K I'm not doing it actually I before I did that I should Center these properly already go what's selected right now Oh cause it okay let's undo the component so if I select those let's just Center them first and then let's turn them into a component which is Control Alt K and now it's a component and the reason I'd like making buttons components is because I will use this auto layout and auto layout pretty much is becomes padding and so you can see the padding is changing on it and I can do padding up and down too and this is space between items so we I don't I don't have that working right now so it doesn't matter it's we only have one but actually I might increase that and then it Center this stuff not centered on the page center center all right whatever it's centered so here with that then if I let's just do it like that but the nice thing with this is if the text changes hello you can see like hello world it's growing and shrinking with it such a cool feature I love it so much and I think even I'm trying to remember how but I think on my component yeah I could do Center so actually if my text is changing hello it's changing from the middle instead of changing from the left like it was before so sign up for free let's do that I think that's a better call to action I'm gonna leave it gray for now we can always you know this is again a really rough rough draft and let's just make sure all that is properly centered there we go and I think something like that will be pretty good um we can do one more thing let's actually turn on my grid again there's a shortcut to grab that I forget what it is though let's just turn my grid back on oh I made those without being on a grid that was silly of me let's fix that and this is where the space between I think actually could work but they're all the right size now so it should sort of snap into place there we go that was silly of me okay and do I owe these should all be centered - when doing that there we go I want to do sort of a three column thing here so let's just write whoops run thing option drag that down plans for all skill levels maybe here is we would have some sort of card or component or something but we'll have three so I'm just going to draw a box for now to say that there's three of them each one of these will have some sort of icon so for now I don't have the icons so let's just put a darker circle maybe to say that that's going to be an icon which will be centered and I guess I could have made a component here too instead of doing it three times so let's do that it makes a lot more sense and I'm gonna steal so we should do like a basic planning yes right so basic can go right there this text line should be middle so I can drag that bigger same here we can center that probably want a bit of text to explain what's happening something like that I don't really know if I want a background on that we could just do something like that stretch all that out so it's taking up that much space and turn that into a component alt ctrl K ctrl alt K people hoops that was a mistake because I stretched out my that became an oval so I'm just undoing that so I can just make sure those are that full size bring that right in the middle now we can do it people get mad at me because I say make shortcuts in the wrong order sorry about that if I infuriate you a little bit so basic we could do [Music] experienced and here I guess this would be like a pro plan or something and we could bring in say that for free I think this could just be changed now to sign up under each one whoops and this you know we could do something a bit more complicated here where it's like most popular and things like that but something like that could probably work out okay and then we need some kind of footer you know in general we'd come in with a footer on that too but I think I'm gonna leave it there for now just because you know you're getting the idea of how I'm working and the approach that I'm taking on this or I'm just trying to build it a rough wireframe and getting the idea down of the type of layout that I want to be doing I have the different parts of my layout that I'm trying to do the next fun part that comes in is getting the images into here so let's open this up and you can you can try a few different places I like getting my images from pixels or unsplash - awesome sources and let's destroy Fitness something like this is pretty cool so this is where what I'm actually gonna do is open up eagle first and I'm gonna make a new folder I'm going to call this assets so these are ones that actually want to be using on the site itself or at least ones that I potentially would be using so here when I clicked I'm going to open it because I want the full size version when I click and drag instead of dragging and dropping it here which would just if I drag and drop it there places it just in my on categorized area whereas if I take it in a drag-and-drop but I do choose folder I can say where I want to put it so I want to save it in my assets and this is also cool it knows I already have that image and it's saying are you sure you want to bring it so I could actually say just use the existing one don't import I'm gonna import it anyway with using the existing item and hit import and it's gonna bring it into my assets folder just so I don't have two copies of it this is pretty cool to download all right download I'm doing the wrong thing now grab this that's kind of cool so I'll click on there just drag choose folder and save it right in that time so it is an extra step and you don't have to work this way like say I just grab this and drag it in there just to show you that we can do it this is personal training I'm going head out like that you know I don't need like something like that I guess could work so let's just I'm gonna drag a few in here without putting them in the folder though let's just get a few more even let's just home gym because that's a category that I want to have and that one's a pretty good image too actually and just don't grab like this because it's give me the small one when you click through it's bringing it to the full sized image usually so that one let's just drag and drop a lot of great ones there let's try on splash whoops unsplash.com there we go few tries but we got there that's kind of cool I like the black annoying ones but they're all kind of like heavy-duty a there are hell at gyms oh that wouldn't be good for maybe the I'm gonna grab you that looks good for personal trainer but not for virtual a lot of these are really intense people are that would I don't know if I'll use it but I'm gonna grab it anyway again choose folder and you can even you know do more organization that I'm doing here obviously okay anyway I think I might grab a few off screen in a second I'll keep my trying but what I wanted to show you here is what I can do in my assets I forgot I didn't put them all in my category so just here I can grab the ones that I wanted risk control clicking to grab all of those and I can just drag them over here into assets and if I go into there you can see it's it's drop them all into there so this is my all category so everything is here on categorize they have nothing because I put I've categorized these have organized them a little bit so that's going to help it's showing the dimensions of everything which is kind of cool and I could definitely tag these then so I could you know go through and spend a bit of time saying this would be what was it flexibility so flexibility that one too would probably be under the same thing so it's there I can just add the tag um worked out I don't know I'm just coming up with some really quick ones that one would be work out too I guess that one could be work out too you get the idea weights and you start getting all these tags and stuff to like so if you're you know when it's time to actually look I can either use my smart folders again and organize those if I had tons of stuff or I could just come in my tags and go I only want the ones with weights in it so then I can quickly work that way now one thing I could do is I could actually come and just drag and drop things into figma and use them like that but it's not the best way to work in figma so there are times where you definitely could do it that way but to me the easiest thing is once you've organized your files properly and if you are using eagle is to eventually you don't want people to have all your stuff because you might end up with tons of stuff you have a whole bunch of SPG's you're not going to be using of all your images you don't want them give them your inspiration you just want to give them the images that need to be used or if this is yourself another way to work and because the way it organizes things it's hard to dig into a little bit but you can right click on a folder and you can actually export an ego package or just export the computer so in this case I want to do an export to computer and in the personal trainer like the library here is the way they organize things which is going to be a bit confusing but here in the roost the right place I'm going to sitt save and then what it's going to do is it's going to give me this assets folder with the images that I wanted and this is perfect it's exactly what I need so what I can do now is I can come over to you in figma where a rectangle star blah blah blah I have a place image and in there here's my personal trainer and assets and then I can place the images I want so I'm gonna go with you you you and you I think for this part and I'll just open and because it's a place image I can just click on the box that I want to do it even though these are components so I can do that in home gym I'll put you in flexibility I'll put you in strength and I took the wrong one for cardio but I'll put it there for now well pretend that's a good cardio image and you know I could change that one actually it's let's get a better place image do I have one over person running not really a that would is probably strength but out of the images I grabbed it didn't get any good cardio ones and that looks like it would probably be oh I can't even see the image though I think if I go on the image can't I move it whatever well pretend that's a good cardio image these I guess would probably be better and we're not gonna be able to see them all so I'm gonna do a white on there but I think what I'm going to do is come in with another rectangle underneath them let's just draw a rectangle there so this will be a gradient as well going from black to black but this one will be fully visible and this one will be transparent and of course that should be let's grab my square so there's there it is so that we here's my rectangle so if I do a cut whatever cut paste it's there so if I go into component one which is my master component and I paste it there we go you can see it's on all of them so I can move that down and just to make sure that it's visible you know it helps especially here on that I can't even move that up a little bit just so we can read the text a little bit more so there we go and even here we could so again a place image because I had my assets and let's go with something like that this I guess could be a bit more transparent so what do we want to do next we have that image in place we have those here I was gonna put some icons these are a little stretched whoops I think I'm gonna fix up this button right now and we're sort of coming through now when as we come in so as we come through here and we have our images that are coming into place obviously the site starts looking a little bit nicer so let's fix up our button here I think it the color I'm gonna go with it I don't know I was going to try a dark blue and this is where actually some sites that can be nice I have been using I'm just going to show what the other one is my color space so the two that I use for colors of water cooler CO and this the generators been improved a little bit so I sort of like here that we can get different stuff and this one's nice too just because here we can get like our different colors that come in and get some different ideas so the easiest thing to do in all honesty is on my document here if I just I'm gonna sort of cheat a little bit just to grab this color so if I pop that color into here it gives me a color scheme that I can use and you can see it has sort of a gradient to style but then you can start getting these other things so this is a little bit of what I was thinking for my button so let's try that and see what it looks like mmm it doesn't pop a ton whoops and this should go back to being black I mean even actually that might look nice as this color no it's not dark enough it's not cool oh I mean that's not terrible with the white text it does sort of pop off a little bit more and one thing I'm going to do actually for a lot of elements just cuz I rounded the corners on this video player I do think that I'll go to my master component here and I do think I'd want to have round corners on everything so here I don't know 20 that's way too much ten something like that probably okay oh and I didn't even realize it when I did this you see how these ones don't look like the round that's because of the gradient that I had so I just want to match those numbers I think there's a way of doing a mask but again I think we're just doing a rough layout right now so that's looking pretty good actually I'm kind of happy with that this I want to increase that a little bit maybe we'll bring that up to ten which that seemed - let's just fix my buttons here I know these buttons look way too big I thought I'd set that up a little more but anyway that's okay we can we'll fix the buttons up a little bit more um but overall I'm pretty happy with how things are starting to look I need to grab some icons and just a nice place to get icons is the noun project so we will look up fitness actually this is pricing pricing and you know you can get all sorts of stuff here um I was sort of hoping for like I actually I should be just go with like a dollar sign it's not the best idea oh wait wait what if I did something like this to can we get like a wait I'm wondering these oh I can grab these is that gonna work as an SVG let's see if I can grab one now this is the noun project so I'm gonna be getting them for free so I should be attributed them well let's just go can I grab see sometimes from these sites you can't just click and drag so I'm just gonna say let's just you get this icon I want to make sure we need to attribute so I'm gonna I'm gonna download it because I do want to show so wait no just it's by pretty like pretty cons so thank you pretty Hans I'm gonna save the PNG here just because I do want to show you that if you have something and you want to bring it into your ego folder but it's already on your computer let's just go to my Uncategorized and drag that in it's really easy to do you just drag it in and now I have my SVG there so that's nice and simple and then I can grab my SVG from here and literally and literally just maybe not the right word but I can just drag it into here and I have my SVG that's been placed and that's gonna cool actually at the circle behind it wasn't what I was planning but this would be you know probably a good case for like different icons coming through but let's just do a nice simple icon like that let's see can I get rid of my circle ellipse what if I did something like that and this could come in because that's an SVG that's my SVG all right I should be able to change the color of it there we go so I mean that sort of actually was a happy accident but it looks pretty good but you know each one would should be a little bit different so what I was actually like I was gonna do like a double dumbbell or something like that for the second one but I don't think it's gonna work with what I grab but anyway I'm gonna leave it like that for now because again I'm doing a rough draft I'm not doing the final version but then we could come up with better icons or maybe it's not plans I was thinking of like two and three because there was a new dollar signs or something but whatever I'm gonna leave it like that for now but just to give you an idea of how we can start coming up with a nice rough layout of things and I do want to change these colors because I find all the text being black or white isn't fantastic so let's just see if we can get a nice color to use maybe that but I'm thinking like a darker and that's where sometimes I like coming into here and actually putting all the colors in that I had and I haven't been saving my my colors because you can save I know I can save colors but I keep mixing up figmas I know I can get my colors down here in figma but Kent I also saved them somewhere else I'm not sure but let's just bring this color so here I can just put it in then I can grab my dark color I'm just gonna I drop here to get the dark one whoops might want to go over to here and bring that one in and I can lock those and then just hit spacebar and it's gonna give me new colors I can use it's always fun Oh purple oh this one mmm I might go with that and even let's lock that let's see if this is how this actually looks I keep doing command I'm used to using apps when I'm using that bright color I'm thinking for this it might look better for my buttons it's gonna stand out more maybe not perfect but it's not bad actually that might do that but I definitely need a different color for my text so let's lock that one let's see what that looks like Adam massive fan to be honest like their I sort of like the color and it's actually pulling in from there this I would probably leave it as black or if it wasn't black it would be like a really dark gray something like that would probably be fine actually it's not bad and there we go we start coming up with something decent I'm not sure about these sign up buttons or that color that I have on there but overall I'm sort of happy with how this is coming together and how it's all working I think it's looking pretty good overall and it gives you an idea of how I like to work than how I like to start working on projects and I think what I'm gonna do is continue working on this well show you some cool things we can do in figma but in more broken down this is more of like a general overview let's get started on our project really fast the ideas that I do so again it's always I start off with just research and grabbing as many things as I can to sort of organize and get them all together because I like having just ideas and then I sleep in those ideas and let it go on the side and then I'll start building a rough layout um I often will sketch things out and get ideas there and then start building them here and building as many things as I can in on the computer but just rough layouts boxes putting everything in place start bringing colors I haven't even played with fonts yet but just bringing things in and then start getting actual assets and actual images that I want to be using and then bringing those into the site itself as well and then you sort of start building up towards something now I already I'm not a huge fan I'd probably you know I don't think I'd want to reuse the gradient in the two sections so quickly maybe there's a few other things along the way here that I would change but overall you start getting the layout that you want to get to you start getting the things in the right direction and then you everything starts falling into place and I really do feel that especially for when it comes to getting all of my ideas and all my research done Eagle has helped me out so much and it's something that I've started using and a few different projects now and I just love how easy it is like that click-and-drag thing is magic you don't have to you know I don't know I don't have to open a window I don't have to worry about navigating it's just all going to the right spot I find that absolutely fantastic and also just organizing my images once they're in there is so cool and so much fun and there's so many cool features in there to help keep you organized and help keep everything together it is a really cool product if you do lots of design work or you need to keep track of your assets or you have lots of assets that need organizing I would definitely recommend you check them out so do make sure you check out the link that is down below and try them out with that said thank you very much for watching thank you to all my patrons for helping support me and everything I do here on my channel if you watch this and you enjoyed it please do consider subscribing and of course until next time don't forget to make your part of the intrument just a little bit more awesome

Channel: Kevin Powell

Views: 160,899

Keywords: Kevin Powell, tutorial, html, css, figma, figma tutorial, web design, eagle app, from idea to layout, rough draft figma, figma tutorial for beginners, figma tutorial web design, web design process, how to wireframe a website, design process, how to design a website, layout design, homepage design

Id: KYFwcIRx16g

Length: 45min 54sec (2754 seconds)

Published: Wed Jul 01 2020