I Design A Website In 20 Minutes

I Design A Website In 20 Minutes

July 30, 2019 36 By Bernardo Ryan



hey there my gorgeous friends on the internet and the last episode for some reason I had my autofocus enabled on my camera and never have it on because it's super unreliable but I had it on and Nikon decided to perfectly focus the background while I was sitting straight in the center of the frame she and I should do my my rule of thirds here how about that that looks a bit better so for this episode I decided to do a 20 minute challenge of creating a web design from scratch now why are we doing this one for me to look stupid on camera like haven't you been on this channel so far that's what we do here number two which i think is more important though is that we're learning way faster this way if you do a design in 20 minutes rather than taking three days or four days and by iterating through multiple websites very fast you're gonna create this habit of seeing what looks good and what doesn't but before we get going I want to thank Skillshare for sponsoring this episode Skillshare is one of my top online learning platforms on the Internet they have over 35 thousand courses to be specific programming design learning how to speak French who speaks French these days anyway the awesome thing is once you sign up you have access to all the courses so you only have to pay once and you have access to everything you don't have to pay for them individually click I'm watching this course now click click I double clicked switch two courses at the same time take a look how fast I'm learning and the best part is they gave me a coupon code which you can check down below in the description if you click on that link you're gonna get two months for free which is really awesome and it's actually very affordable the annual subscription is less than ten dollars a month okay so I was thinking of what to do a shopping website either like a fitness type or an app type website I decided to do the fitness one because I think I'm gonna find the picture is easier on that so let's go three two one let me look at the timer again treats you won't go okay so I have a first thing would do is probably search for an image of either like fitness or something so I'm gonna go on pixels dot-com here and we're gonna search for fitness and see what we have Jesus made the planet and there the galaxy in six days ad did web design in twenty minutes on the seventh day ok so I don't know this is kind of weird let's try let's try yoga or something oh here we go yoga click alright and this can be cool can be kind of like it yeah alright I like this one centered very beautiful this is gonna be a bit hard to crop out I think though because we have shadows and everything down there but you know what let's try why not I'm gonna get the biggest picture here just because I have more data to work with let's open up affinity photo I'm on trial I'm gonna buy this one because I enjoy it very much I switch from Photoshop and I think it's a great little program ok let's go back here drop this in and we're just gonna cut her out and see how we go so I'm just gonna select her with the W key here to select everything as close as I can alright this is gonna give me an issue because the her shoe blends a bit with the background so that's a bit unfortunate but we're gonna do a rough chop here because we're we're trying to hurry all right get the hair there we go that's good just make sure we catch her nose because she's gonna look like an alien if we don't all right neck hands alright let's see if it's gonna give me an issue here with this mat that's pretty good Oh No see there we go let's cut this out got a bit of her hand if we get a little bit of purple there that's fine here it's gonna do a rough job of including everything okay that's fine I'm happy I'm happy we're gonna see how this looks alright here we have some issues so I just go with our mouse over very fast okay oh not good let's go back or I'm happy that's fine that's fine let's scroll out a bit and then we can hit the refine tool up here so I'm gonna hit refine and hopefully the selection looks half-decent come on all right so I have to figure out why this thing takes so long because in Photoshop it's quite fast all right so we have a bit of imperfection here so I can just do just do over it and it's gonna refine automatically and I think it does a pretty decent job actually as you can see it cuts out all that white fairly nicely let's try it here this is gonna be harder but hey that's pretty good all right I'm happy with this it's a bit rough but yeah here we have a bit of issue that's not too bad let's take a look sometimes it can mess it up quite badly but that's that's fine I'm happy with this so what I'm gonna do I'm gonna select for this to be out put in a new layer or new layer with layer mask hit apply either one of those should work just fine and yeah hopeful hopefully anytime soon there we go so we have her here and now what I can do is just export this very quickly so I can just create a slice from this I think I can just select her like this and just export this let's try and explore it as girl yoga and actually I need this as a PNG so let's go back and select PNG here oh my god where are you missed the PNG PNG there we go let's try that again yoga girl alright hit save and now we can just make a new thing and figma here it's a new file all right let me check my time we are four minutes in oh my goodness okay we can create a frame I'm gonna go desktop here very quickly let me see if I have my my the picture over the girl did I cut her out picture all right let's find referrin it's gonna be huge which is perfect because you can scale it down and she can be a monkey all right let's I'm getting distracted go back all right scale down all right so what I want to do is I want to create this harmony around her so either some waves that kind of flow with this motion or maybe a circle around her too to show her more a bit I don't know let's let's try something let's create a circle I'm just gonna drop a circle and then put her in the front yeah something like that drop her and the center kind of like that that's how the gradient of this gray looks boring gradient and I'm gonna pick two colors for this that I like so let's go with an yellowish orangish color yes something like that I think looks pretty good all right make sure you don't have your contrast too high all right so this is still pretty hard to see so we're probably gonna add some some background to this but something like that I'm quite happy with that a bit smaller maybe like that and then we're gonna put this somewhere around here I'm not sure what I want to do with this for now but I kind of want to also illustrate her motions and what she's doing in this so I think like creating the wave based on her her motion would look pretty cool let me check my time and talking nonsense here all right so what I'm trying to say is just like create a line like that you know that kind of follows for motion I think that would look quite interesting so I'm kind of following the way she moves and it's just drawing across a path here click done and then we're gonna add the fill remove the stroke because nobody that nobody likes the stroke and drop this right behind her behind the Eclipse and so let's lower the pass through here to something like 10 so it is visible not that visible 20 maybe yes or something like that and then what I can do is add more of this and just multiplicate and Dragon and gets down like that all right there we go maybe drag this a bit up and this up as well there we go it kind of gives a bit of motion to this now this might not be that visible so we'll see if I have time to change this but that's kind of how my layout is gonna look okay what I want to do is add maybe a title to this so what is this like a yoga app or something so let's drag out here I'm gonna say just a catchy title name it's gonna be called focused I'm gonna make this big okay and I want to make this so I'm just gonna focus on one font here because that's probably the most simple thing you can do and I like the way this one looks Poppins I use it for a lot of things I'm gonna go bold here yeah I think bold looks very good then I want to resize this blue tank so let's do it quickly here pop-up there we go so I can easily just align it to everything I want maybe add a small description below something like your new dating not dating Jesus your new yoga app your new your new friends that helps you relax that sounds weird that now cannot join you your new friends your new learn yoga with one click how about that there we go what am I doing with my life change this to smaller 64 maybe smaller 48 there we go this kind of looks weird I'm bold so let me change it to medium that's good alright maybe this is Ken this is a bit too big yeah okay there we go bring this up I'm happy with that and maybe we can create a button or something in here actually I like this with 96 all right focused I wanted to pop you go on this website you got them know you're focusing okay so this is what we have probably have a button down here let's create a super fast logo I kind of want to have again kind of this circle maybe with like wave again so kind of firm body motion so let me create a quick logo here let's get a circle drag this out I'm gonna change the color of this to one of those colors so maybe the red and what I'm gonna do is just drag out the line here so go with the pen tool click I'm 10 minutes in I'm getting scared going up maybe here to the center dragging a wave like that maybe up like that alright that's fine you just go around click click clack then we're gonna add a fill remove the stroke and I'm gonna add the background to this we're gonna get that yellow clothes and we can kind of move these points around if we're not happy now like that yeah we can just kind of turn this to however we want then that's kind of annoying all right I'm happy look at that we're gonna hit okay and a quick way you can do it is you can duplicate the circle again and then you can drop it on top like that and you can create a mask out of it so I'm gonna go up here create the mask and drop this above so the yellow things just drop it above and then you can kind of just grab everything and group it up hey we have a logo look at that okay perfect so that's what we have I'm gonna make the smaller like that maybe we can have this pinning and our live website no that's stupid don't do that we can grab a text call this focused all right grab everything make it smaller story of my life so we're gonna change this from bold to regular maybe okay drop it here that's fine okay maybe it's a bit too large smaller okay and let's drop some nav things here grab this I'm gonna say let's do app and what I'm actually gonna do I'm gonna change the size to 18 so that's kind of the standards and websites 18 16 something and something along that line here I'm gonna resize it again with these buttons and I'm gonna create a component like this I'm going to head the component so now if I create a duplicate from these I'm gonna add a spacing of 100 again 100 all right let's do one more so that this way I can easily just go back to the first one and change it and everything else is gonna change I need to hurry up I barely have any time so I want to get a bit of greyish color I don't want this to be straight black on white the contrast is gonna be too strong so something like that then I'm gonna rename this to HAP then we have contact maybe there we go contact and then make sure my distance is good here contact this is going to be support and then maybe we have a login or something so let's rename this to login good perfect what I also wanted to these are probably not perfectly lined up I might do it with a grid if I have time same for this I'm not gonna do all black I'm gonna just drop it slightly down slightly down and if the contrast is not that good in here then maybe we can drop these little waves or whatever they are okay let me get a button here so this is gonna be maybe on Apple so let's go to what are people using these days for icons icons font font awesome font awesome okay that's that's the one we're gonna use okay start for free obviously then here what's this alright I just want an icon Apple that's what I'm gonna search for Apple there we go click start using this icon click no pro I don't need Pro no thanks I'm all set for free where's the download Hey oh here it is sneaky little bastards they hit it up here okay let's drop this in here somewhere where it's my ting let's drop it in here make this smaller and I want to create kind of a button around it so I'm gonna get the rectangle Strang out one so something like that above something like that size and I'm gonna get that color from there whoops I'm moving the background drop this here this icon is messing up my flow okay there we go and then we can drop this on top so we can pull up the logo the contrast is not that great on this so let's change it to white and then maybe a download button download text here or something download kids drag this out you can leave it like this if you want to be artistic but I'm gonna change it to eighteen okay change this to white as well it's got a white oh that looks okay yeah so something like that I'm gonna grab everything and just group everything I know I'm not actually if you're moving these things around you can just lock it here so you don't have that issue all right move these here drop this above all right kind of align everything here very fast I'm not gonna go with the grid just kind of doing it freehand okay there we go drop this down take the girl kind of drop it on this corner like that to match it up with the second wave and yeah there we go something like that okay maybe we can add a thing across this one so let's grab out a rectangle and just do something let's get the yellow maybe alright because this is not that strong of a color and then we can just drag it down here so the text pops up on top and you know what for this one I don't want this to be as focused as this one which it actually isn't this yellow is a bit more open in color but just to be sure I'm gonna just drop it something like that that looks terrible oh my goodness yeah yeah it's okay it's not that bad all right or we can just do a stroke on top of it and remove this let's take a look I think I like this a bit better maybe just add a thicker stroke to it like three okay and let's make this a bit everything is kind of flowy here and rounded shape so it would be weird for this to be blocking so let's change this up I'm gonna drop it to something like ten that's too much it's too round let's do five maybe yeah that's fine and on this one as well double click to get into the rectangle drop it to five and you know what I think that's quite fine so this would be my process of creating a very fast we're eighteen minutes in I'm gonna stop here I think it looks decent but yeah there we go oh that was tough I'm not gonna lie what I cannot wear hats I like my hat looks okay anyway what I want to plan to do is change this camera it's giving me trouble it's making life difficult for me and I do not like it he hates me we have a love-hate relationship he does the thing that he needs to do but after I turn it off and I check the footage betrays me you don't like it so if you have any suggestions for cameras let me know down in the comments I'm either going with the Fujifilm XD 3 or the Sony a7 mark 3 so those are my two picks that I want to mess around with I do need good out of focus because I have issues of moving around a lot it's just not good alright the camera cannot keep up this camera is really old it's a Nikon d 5100 that's the one I believe I'm not sure anymore well do you know when they con you don't know anything anyway that's it for today hope you enjoyed this video let me know if you want to see more of this I Nvidia or if you're tired of them just let me know and I'll do more programming I'll cry alright I'm leaving I'm taking the hat off I don't like it goodbye