Creating a Landing Page with Illustrations using Webflow and Studio

from pixels to code and we're going to be going from the sign that it's done in a vision studio and we're just going to put it on wet flow a solanum page hopefully we get to do this in one hour it's a full one pager and then after that we this is how we're going to do is we're going to create a lot of a page with illustrations this is the key part of today we're going to be using illustrations illustrations that I made and that I'm actually going to be launching tomorrow or maybe Thursday there's call open doodles you can actually go see them right now open doodles calm it's not it's not finished but it's almost there open doodles calm and and I'm going to be using the illustrations that are there to create a landing page and I'm going to go from basis duty to web flow and how we're going to be using different layouts just like a flexbox and it's just like a landing page I'm going to show you that on the fish in a little bit and then we're going to be getting the source file to follow along you I put a Dropbox link in the description of this video so you should be able to if you want to follow along or if you want to download it later you can do that what else what else what else yes and and and that's it I've thank you so much for being here this is so nice I I haven't done this in a long time and now that I'm doing it again I it just feels like home you know I love being here and I love having the audience here live and answering your questions and hopefully we get to create something also okay so let me do a quick review of my audio so how do oh my god understand anything here yes so hopefully that the the actual audio is is going okay I'm going to open this thing I'm going to put it here and I'm going to start sharing my screen and a little bit okay so hot so this whole thing is just thick uh it's a mess that's I need a producer someone that is helping me here and just like clicking up things okay whoa okay we're changing this and now we are actually going to be starting doing this so let's first look at or design this is the design that we're going to be doing well actually I made a lot of different examples of landing pages well of like different sections of landing pages as you can see here and but the idea here is that on all of them are using illustrators and these are more like examples of how to use this illustration kit and in a website so here they just like a beautiful features and I don't know like just that hopefully to help you tell a story and even on mobile like a different states and stuff and here I'm an envision a studio you can download this file from the description there's a link in one of those files is just the efficient studio file this is just a static file we're going to be using it as a reference when we translate it into HTML and CSS using wet flow and over here this is the actual page that we're going to be doing today so we have a hero page just a simple image here hopefully we get to actually animate these things with scroll based animation it's got to be dope but that's going to be at the end then another section just using the image and potentially we are going to put the image on top of the other images so it's going to be like three layers of images and then another one hopefully also we do it with two layers of images this is going to be just one but I'm going to show you how to use an image as a background in this way and here we could potentially use grid for this one so yeah that's just great yeah a CSS great for this and I think this one is going to be like you've seen the full viewport height and beauty or width to create this and it's just going to be half in half I think that's going to be that and just a footer a call to action at the end the very simple and again all of this is just we're going to be learning how to turn this into HTML CSS using a web flow from here from ambition studio if you use a different design tool at the end the process is going to be pretty much the same it's going to be just like copying exporting your images exporting your assets and just selecting translating all your type sizes and all your spacing from your static design into HTML CSS magnificent my friends and over here it just did a really quick a style guide of the different styles different sizes of the different headings just so we can do it quickly on on HTML and yeah and over here you can use these if you want to try just like use these as other examples that you can play with and if you want to like challenge yourself to play with this let me check the comments just to see if everything's okay I wish I was there to help you let's just be cool there yes the illustration start free for commercial personal whatever you want use so let me actually show you that real quick this is open doodles calm and this is this side I'm going to launch it tomorrow or maybe Thursday I don't know but here you can download the SVG is that some of these links still don't work I have to fix that but then it shows you like different compositions using the images and then it has an about page and all this was created again where I these are the sketches that it made by hand and then I vectorized and then I put on his BG so anyone can use them and also there's a generator to generate the generative still doesn't work but you can see like you can download in different colors the same images it's it's pretty cool some of these things don't work so don't don't don't criticize okay and that's it and you can download the pack again this is just a work in progress I'm going to be launching it to the later but if you want to you can expect ik right now okay so we don't need this let's go back to this let's see if you have any comments again yes I love it cool colors which is cool okay so if there's some on any problem please put in the comments hopefully there's no problem we can just keep going okay so let's let's get started let's just uh um the first thing that I'm going to do is just go to well oh and I'm going to create a new project and when you create a new project you see all of these examples and all these things you can actually buy some of these samples but you're a designer you you are a creative person you start from scratch you select the blank one and you say let's do this project name I'm going to call it but you need what we call it doodles site example okay that's what we're calling this and create a project we create a project just blank there's nothing there and it looks a little bit scary but don't worry we're going to add some stuff in it so I'm not going to be explaining each tool what it does in it like the UI hopefully you have some understanding of this and just to make it quick I'm just going to be going I'm going to be talking while I do things but not explaining too much you're not going too deep okay sorry if you have questions just leave them there and not potentially I'll do my best to answer those questions if you might have an answer to those questions there so you can have a chat there and answer your questions okay so let's let's get started so we have a section here we have a Sakura section let's see what we got we have we have a hero section that apparently is the size of the viewport and then we have some stuff some content a container in the middle so let's let's do that so I'm going to add first when to go to plus at a section Lin list command E and I'm going to add a go to our dip lock just so I have more freedom on what I can do with this the block and then I'm going to add an image yeah and then I'm going to heading so heading and then I'm going to add a graph text and then a button so as you can see I'm pressing command E and this brings this like a spotlight like thing that you can just like search the stuff that you want and it helps you be super fast if you already know what you want for example button you just start tapping it you press ENTER and you added my friends so okay I have all of my content here I have my section with a deep block and this D block is going to be containing all of my content here why the tip lock is necessary because I want to be able to contain the width of this content and I want to be able to Center it in my big container the hero section okay so I'm going to do this hero 8 section I'm going to call a hero section I'm going to create a class for it and the first thing I'm going to want to change the height of it to 100 th this means 100% viewport height and that would just like take whatever the size of the viewport of the height it would just like take it and transform that section into it now let's let's change the width of this deep block to hero content I'm going to call it your common content yeah and then I'm going to call it what is that the size of this this is around 620 so I'm going to put a maximum width a 620 pixels 620 pixels there you go and then I'm going to go back to my section I'm going to use flexbox so I can Center it so here as you can see in Direction horizontal it's okay going to center here and center here let's see it back there you go now it's Center let me come and see so you can see it center here Center here and now it's centered now I'm going to go back to this little guy and I can III actually want to also Center the text and the content inside it so I'm going to use first typography Center the typography and it looks like that gives me exactly what I want I was going to also use flexbox to to Center the image but it looks like with typography align Center it's aligned in everything so I don't need any more CSS on it that's it it does a job we're done now let's replace the images I already exported all the images but you usually when you're are on your static design tool you want to export it so for example here in studio and Visual Studio you just selected and then you press export and then you export it to PG SVG since all of these images are a vector I can export to SVG and that way there resolution-independent and they are going to look no Kris anywhere so doesn't matter the resolution you zoom in mmm the kerf is going to be perfect so I'm going to export to a sweetie again I already exported I'm just showing you here how you would do it this is how you would do it here in studio maybe use in a different design tool it should have an export option in any other exported tool okay let's go back here I'm going to go back to my assets here on wet flow and I'm going to add all my assets because I already exported all these so I have this little guy and have a folder that is called assets by the way you can download all this stuff too so you can just unload all these assets to I'm just going to upload them and look at that that was fast see that's why was it fast because it's SVG my friends and SPG's are fast like that they on then they don't know they're not as happy that's what I was trying to say let's change the image of this to this little guy there you go it's really good look at that but change the text of this guy distinction bias distinction bias let's let's change the text of this guy the content and by the way I don't know if you noticed but the also texts of this stuff it's just like a different biases and different curiosity things that I find really curious about the human mind or human behavior and like different biases of how we behave it's pretty cool if you ever want to know more about that stuff I put just like a little description of those things distinction bias and okay cool the content is there I also have a navigation bar I'm not going to worry about the navigation bar for now let's add that later okay so let's say we have the content here let's start changing V that's the style of this stuff so let's go back here and I can see I'm going to be worried more than anything about the size and the line height those are the things that I want to be able to translate into wet flow and before I do that let me check my comments are there any comments smart to move on with pathos we should tell that it's in there okay yeah oh my god a spotlight feature is so good why did block and not container pros/cons dip lock of it if you oh man my the streaming is not great my friends and I I don't know what to do but let's let's continue okay so it looks like a my streaming is it's not perfect my friends and it's okay let's hopefully it gets better welcome to delicious the name of the site is open doodles calm okay and okay let's go back to wet flow so here let's again now I want to start putting the sal from a static side into this so i'm going to go back to my cell and it looks like i'm using a size 63 line height seven eight so let's do that over here and i could just start adding that's out here 63 and then line height 70 i could just do that and and that will be fine it does the job the thing is here it creates a new class that is called hey that went flow as soon as you add some styling to anything it would just create a new class or replace the styling or whatever class you have selected but I actually here I want to apply to all my age ones I don't want to create a new class I just wanted to apply it to the HTML tag h1 so we went to command C command C and I'm going to here on the selector I'm going to go to all age 1 headings that way I apply this styling to all h1 heading so I'm going to go back whether well it says 63 70 and now whenever I add any h1 a heading 1 level 1 it would just add that cell because it's already in the CSS there you go is it because it's being applied at a global level and let's create a new one this one is going to be a specific size I'm going to call it copy and this one is called as size 20 line 30 so let's go ahead and change this to size 29 30 and let's add or new button so the button here it looks like it's let's see that the spacing between here 16 16 and 56:56 on the sides and the size of this is 18 pixels I think it's a little bit too big so I'm going to make it 16 picture so I'm going to I'm going to be like one of those engineers it doesn't follow the design guidelines yes I'm changing my mind okay I am the designer so I can change my mind so I'm going to change this to 16 pixels and then I'm going to go to the the spacing of this and I think it was 16 on the top 16 on the bottom and then I'm going to show you and it was 56 on the sides so I want to show you this straight if you press option and then you drag then you can change both sides at the same time I love that because that allows me although I don't know if I actually I think I actually spent more time like trying to get it with this lighter sometimes it happens like that we're gonna change the background of this the treat to black that's what i'm using i'm going to add us a new color perhaps black the past black is just black there you go there you go my button is getting there let's the the call to action is get to it all so let's just write it out here look at that also what is the does it have a coordinate radius it looks like it has important radius which is the four takes us of corner radius i'm going to go back here and i'm going to change here on borders over here i can change it to four pixels and now i should be able to have four pixels of coronaries look at that how beautiful is that oh my god this look exactly like over here not exactly because where you see the different typeface so that's something we're going to do in a little bit okay let's not worry about the actual font family right now it looks like it's it's going well the spacing is already good I think that the default spacing is working but let's see what is the spacing that I'm doing here now actually it's not sixteen over here so I'm going to change this to a margin of sixteen pixels here and then over here between these two is only eight pixels so it looks like is eight I'm going to change it to sorry I'm going to go back to my h1 heading and I'm going to change this Tao to only eight pixels and there you go now it should be pretty much just like the design we have or hero section let us jump to the next one the next one is going to be a little bit trickier because we have almost the same we have two boxes well we have the container and then we have two boxes well we have one box that is containing all of our content and then I have two different boxes inside it one for my text in one for my images so we have one box and another box and then two boxes and then here potentially more boxes we'll see how we do this okay so let's let's go back here to a body I'm going to add here I'm going to add another section and then here in the section I'm going to add I'm going to use a container on this one the container is fine I like the the pre style things that a wet flow comes with the container comes with from what flow and what else what else what else what else and I'm going to add two to dip blocks so they've blocked one which is going to eat a left one and I'm going to add another dip block dip block to that is going to be the one with my images so here in this ziplock I have a heading and then I have another heading and then have a paragraph and then I have a button or no do I not have a button hmm no we have a text link so let's use a text link there you go so this is looking good this is Angela this is the two big what's going on well we want to change this to h2 and I think this is this I think this one is h2 or is it not let's see yeah 35 let's see what's going on here yeah 35 sis and h3 actually and this one should be so I'm going to keep it h2 I'm going to keep this one age 3 and you're going to say but this one should be smaller public shouldn't it be h3 well when you are using a screen reader you shouldn't be skipping on your HTML structure the level that the heading level if if this one should be read before this one then this should be a ch2 and this should be history even if the style is different so even if the style looks like one the bigger one should be a higher level but no no no no my design doesn't really dictate the structure that's very important to know when you are writing design something for accessibility okay so and somebody potentially has a better answer to this but that's potentially just like the gist of it so we have or content on the left now we have our content on the right and on the right we're going to add different images so we have three images one two and three I already exported them so I'm going to just add those images here and I'm going to add them as absolute positioning and we're going to be seeing how we're going to do that in a moment but let's let me add those images first so image one and image to an image straight okay so I have my treat images here let's replace those images real quick the first one is hold on what's the name of this one this feature one and Pietra - yes so let's do feature one and let's do a feature - let's change this image we replace it with feature two and then let's replace this with the bullet dancer where is the pellet dancer there you go the bullet dancer is there we have our three images they look very blocky right now because I haven't done any positioning so okay so let's replace the content of these I'm just going to copy this to paste it over here I'm going to copy this and then I'm going to paste it over here and I'm doing command shift V that way I don't taste any styling that is coming from vision studio okay come on see and then over here command V and then this one it says go get it now so I'm going to just copy that and I'm going to say go get it now tiger go get it now okay so we have our content let's change the style of this and I think this style should be what is the style of this this is 18 by 24 so I'm going to change this to 18 and the line hi to 24 and I'm going to call this to section header I'm creating my own new class called section header and this one should be an h3 which is 35 48 so I'm going to go to the HTML tag ill h3 headings and I'm going to as 3548 I'm going to do that over here and that way is going to be changed at a global level 35 so all H trees are going to be having this size now and then on this one I'm just going to use the one that I already called copy there you go and then this link this link no I think we're going to be changed the size of all the lengths to remove the styling some of the styling and also change the color so I'm going to copy this hex code copy and then I'm going to paste it over here applying this to all my links and I'm going to remove the styling so it doesn't have that that underlined and before I continue let's check the comments there's some plug-in so Alex last time men I used to do WordPress with simplest I loved it I loved that it was amazing but it didn't give me the freedom that I wanted and I can tell Alex switch switch to well flow you're gonna love it and as as the designer George is going to love the ability that well that this gives you and apparently let me see this yes ok so that's clear anyone else that is a gives you pretty bad I'm just trying to okay cool so let's continue with our thing if again if you have any questions please have a quick answer them and by the way someone from support from wet flow is right there and they might be able to answer some questions regarding wet flow right now so picks up geek thank you so much for being there a pixel geek is from wet low he works there and he's he's amazing he does workshops and he also has a lot of live strings so you should follow him his name is Nelson okay cool so let's go back here so we have all of our content now whatever content but it looks like crap so let's change that let's make it a little bit better okay so the first thing I want to do is change the color of this background so I'm going to change the color of this background of this section and I'm going to try to use this same section I call it section hero section but I am really going to rename it to be yeah I'm going to call it a 100 BH section okay in that way I can reuse it and 100 pH section there you go and then I'm going to add a modifier just like a subclass that is called gray or greyish I don't know anything I'm going to change the background now it should be the same same properties of being able to change its height to a hundred vertical height but I just added a sub class here so I can change the color so one is great one is not so this one is not making a modification to this one it's just making it to this one okay cool so now on my container I want to do the same I want to apply flux box so that way those two sections are side-by-side okay so I'm going to add flex box and I'm going to say that our line to the center or something and that's it right now this section is so big why because this images are just taking so much space but we're going to fix that life right so I gotta fix that don't worry and before I do anything I want to change the position of all these things to be relative so let me go back here to a hundred pH and I'm going to say the positioning of this is relative that way is relative to the body and then I'm going to say that this container is also that the position of it is not static it's relative and you're going to be like why is this important the thing is that I'm going to be adding some absolute position elements and if I don't make everything else relative then my my elements are just going to be relative I'm going to be absolute position not to the container but to the body and that's not something we want my friends okay so now this images I'm going to make them absolute positioning as a position:absolute see see what's see you started to see what's happening right now I'm going to be able to just like put them on top of each other this one is also absolute and it looks like oh my god they disappear well they they didn't disappear the thing is that right now now I have to make the container bigger because the container is just like well apparently there's nothing in here because the images are not expanding or making the the did block to grow or shrink so I'm going to add some styling to the D block and I'm going to say that number one it takes 100% of the height at a percent of the height that should be one and then I'm going to say that the width is 50% hmm it's not doing exactly what I wanted to do let's see if this needs to be a hundred percent with no no no no this needs to be 50% - there you go no we're starting to see it now we're starting to see what's happening I'm going to say that this container the height of it is a hundred sent that way this guy see now I'm going to be able to position these little guys so the container the Box holding the other box needed to be tall in order to the other container inside it to also be tall if the parent is not tall then the the the kid inside will not be that that's all either I think I think that's how it works hopefully does okay so there you go now I have my elements just like that I think I think I'm ready I think we're ready my friends let's start doing it so I'm going to first of all I'm going to position my my first image to be to be in the bottom the bottom right just like that and then I'm going to position this image to be on the top right and I'm going to change the z-index well now let's let's see if what if I do this there you go now it's behind it because if we go back to our design it was like this and then I'm going to select this image and I'm going to say that this image is in the center so bow so this should be outlook and it should be outlook and it didn't do anything that's not what I want so but actually it has to be done with this yeah there you go yeah it was out too so was responding to the to the positioning to the layout of the container okay now we have our elements they're not they're not that great right so let's see what is the height of this apparently 648 pixels is the maximum height that it would want for this so let's put it at 648 pixels god that's pretty cool right that that has to be pretty cool so let's rename this because right now it's a feature alight I'd like to call it feature images the lights and we have this is pretty dope my friends come on we let's go back to our design it looks pretty similar it looks like I was giving more space to this guy so actually let's go back here and let's say that this one instead of only 50% let's say that it's it's covering 60% there you go that's looking a little bit better and looking a little bit bad and let's make this one 40 percent okay 40 percent there you go now we got it that's what what's going on now damn it's pretty good those are the bacteria this thing it's looking good okay let's go back to the comments and see what you're doing baby back back back back back thanks for the bump Pablo oh yeah okay okay okay okay okay yes okay let's go back to the Sun I was just looking if you have any questions I'm here to answer this question not Nelson it's there too next so pixel geek he's dope okay cool so we have our section here let's see apparently gave it a lot of space in here 56 pixels I don't know if the one that I actually like it like it is right now so I'm going to leave it like that okay something that I do want to remove is the spacing between these so I'm going to say zero here and that doesn't do anything and that's because or h3 headings has 20 here so I'm going to say here or here - yo I said zero see your pixels and now they should be next to each other there you go it sounds a little good we're going to be changing the typeface later and it's going to look better okay my friends and that's it let's jump to the next section the next session is pretty similar to the one we just made the only difference is well the main difference is that we changed what I call this the Texas on the right and the image is on the left so that's how we're going to do it I'm actually just going to copy paste this can you do that let's see command C and then body come on beep oh my god you can't do that and here this one it should be a white background so I don't need this soft class anymore so I'm going to remove it and and now I want to move these elements from from each other so I'm all I have to do is just go here this one over here and no raining this to feature images images overlapped yeah I don't know I'm sure you're better with this naming conventions I'm a whirl at this but I'm sure you can do much better than me by the way this guy this guy I think it means so let's look at 16 pixels here let's give it 16 pixels on the right and that way here now there's some spacing between these elements and there's some spacing between these elements so the text and the images are not smashing together matching sometimes it's nice not in this case though so let's get rid of these images we don't need them anymore goodbye images thank you so much you did great now let's add more images we have the background we have so yeah yeah let me break it down so you can see it come and see and let me put over here so you can see what's going on we have three images here we have this one over here we have this one over here and we have this one over here so pretty much the same as before this one is some top center this one is in the bottom center and then the background is just in the center Center okay so let's add them overview so image one image to industry okay let's replace these with first of all I think we should do the background let's do the background now let's do the the UI the UI let's replace this image we knew why it was this little UI and now let's replace the other image where the little dougie dougie Doug Oh dougie Doug [Music] [Music] that da okay sorry I think I'm gonna get a copyright strike just by singing this mm-hmm this is there you go now it's fixed here and it's fixed here I changed that orientation of my flexbox in case you didn't notice just so it looks a little bit better okay cool so now let's change this guy to be absolute positioning just as we were doing before and let's put it in the center so it's going to be out of out of out of out of out out out out out out out out dope there you go now it's Center center Center let's put this guy on the top so position where is it where's the position I don't need all these guys right now they're just distracting me yeah you got position absolute positioning and let's put it on the top there you go and let's change this to outdoor and then I'll talk in that way Center and then let's change this little guy do the bottom position:absolute let's put it to the bottom right there you go now it's is looking not that great but we can fix that number one let's go back to our other side and apparently these are different the size of this oh man sorry about that I don't need these guys the size of this it should be one hundred five hundred twenty so I'm going to put one subclass of 520 and I'm going to say that the max hide is going to be five twenty by twenty the image is looking great I think that's I think that's what do we want it you know what I kind of like it zero on the left that way it's it's a little bit more balanced you know because this guy's is is balanced to the bottom right the other one should be on the bottom left you know yeah visual design stuff and yeah look at that how how incredibly easy it is to do this come on come on their friends you once you start using going from your static design into wet flow using this tool you're you're never gonna be able to go back it's like gaining a superpower it's amazing okay so let's go back to the next one the next one is this this one is a little bit different this one the image just takes the whole space how I think on this one I think I'm going to use hmm I'm trying to see I think I'm going to use the image there's a background and I'm going to position it to the left hmm should I do that yes position it to the left in centered and then a background color just as it is right now and then the the other part the text which is going to be floating in the middle to the right okay I think that's what's going to be what I'm going to be doing if it doesn't work we can try something else it doesn't matter so okay so let's go back to our design let's just as before it's I'm going to create a new section for this one I'm not going to be reused in this same section because this one is going to have a background color and an image background so it's better to just like create a new one okay and this one is going to be called full BG section does that make sense it makes sense to me okay don't don't criticize my naming conventions because I know you're bad and I'm sure you are okay so I changed the size the high 200 VH now let's change the background color to this guy this guys because seafoam or what is this okay cool so let's change the color of this come on come on come here she's a Clarke there's this hex code look that looks beautiful and now this little guy is called called fool reading that's the image but before I do that yeah let's add a set of this background listen let's start adding it so here I can add an image as a background so by the way I just press here and press plus here and then I was able to add an image to the background and then here you have multiple you can add a gradient you can add an image you can add a radial gradient which sometimes this is exactly what you want that's not what I want right now I want an image and it's the one that is reading so let's go search for that image it looks like I didn't export it I did not exploit that image so okay let's go through that process of exporting or image from here what you actually copy it from here what you paste it over here and then I'm going to export it from here okay so it's going to be an SVG and it's going to be called full reading I'm going to go over here assets and now you should be able to have this one too okay and I remove them from here because it was being cropped by by the artboard so I I just put it out there and then export it from outside that way I don't get a cropped image okay so I'm going to upload it full reading there you go this is what you would usually that's a process you usually go with every time you want to bring an asset from your design tool into what flow look at that I really I'm really liking this background and oh my god what happened here hmm looks like the SVG didn't render that well in the export don't worry I also haven't sketch and I'm pretty sure sketches is going to potentially do a better job exporting this so let me let me see what what's going on here yeah by the way and your assets you should be able to also see this file there okay so you should be able to see this file too if you want to instead of ambitious to do you want to use this file you can use that okay let's go to assets and let's export the full reading one it says replace yes I'm going to replace it and I'm going to go back to my file and I'm going to upload again full reading and this one looks like now it's it's working there you go now this one is working look like that there there was a glitch in the matrix okay so so we have it here right now it's a pattern it looks very nice it looks pretty nice but then but you can say that there's brittle is this iron in it and I don't know it's it's back to the Knights I don't know okay so hold on let's do cover no that is too big now there's a custom and let's say that oh look at that that looks pretty nice right that is exactly I think what we wanted almost there let's say that it has a 10% and 5% on the left there you go so it's not exactly all the way to the left but it's still going to be a little bit more fluid so it's 8% 8% I think it's going to be good enough that is not also too close there it's getting there now this ad or content in we haven't even added any blocks any blocks and you text nothing we just added as a background image to this container that's what we did we only created a section and then inside the section we did all of this stuff now let's add we want a container he has you know we want a development and we want we have a heading paragraph and a button so oops so we have a heading paragraph and about that that's or content right now and for a content for this guy I think we already create a class so let's just call this one the button I think we already have this so let's just use body I think we can change this to h3 and it should have the same styling and there you go now let's change the content of it this should be wabi-sabi wabi-sabi which i don't know if if you are interested in one sorry a highly recommend looking into wabi-sabi it's just like it said it's a philosophy I suppose it's like a philosophy that is coming from Japanese philosophy but about our imperfection and the aesthetic of appreciating things that are not perfect how beautiful is that like is seeing the beauty and things they like get old and then get used and and and and see the beauty in them and because they carry a story and they carry some value by that I don't know I not explaining it great I invite you to check it out okay so mmm let's go back to this one this one it says deep block I'm going to call this deep block to rename it to text name it copy copy block okay that's what I'm going to call it that way I can you say and now I'm going to say that my content has to be my container I'm going to use flexbox to center boat and it looks like it's still here but we want to apply some flux box to this container too and we want to align it to the right there you go now now it's there Oh dope is that my friends it's dope I'm telling you okay so I change the the percentage here on the left to 10% this is looking pretty good this is looking almost like my design and this is potentially too far the thing is that when is the the the the the desktop is too big then it goes way too much into the to the left how should we fix that so instead of a 8% should we do something different potentially no no no no yeah this guy let's change the background so here instead of 10% let's see 20% yeah that's looking better yeah yeah 20% 20% let's get a 20% and let's not care too much about the details this is one of those things here you're good this is where you spend most of the time it's just like fixing those little things because I I don't like it how it looks just exactly like that I wanted to look exactly the way my design yeah it's gonna take a while so perfection perfection takes time so but right now we're not we're not aiming for perfection we just wanted to be good enough okay so okay so we have this section let's do another one next one is going to be we're going to be I think we can use I mean to be honest this can be done with flexbox but I'm I was debating if we should use great let's but you know what screw it let's use great only so we can show how to use great and what's long okay so again I wouldn't you don't need to use grid but let's use gray okay so we have it looks like we could have one block that is holding my title and then have three blocks that that is in three columns so my grid is going to be I think it's going to be one column column one and then I'm sorry rho1 rho2 those two rows is my great let's that change this so we can see what what the hell am i doing and then I'm also going to make make it three columns so it's going to be around this and around this and around this so it's going to be 3 by 2 3 by 2 that's what there's going to be the size of my grade ok I don't need this this is just for us to visualize what we're going to do ok I'm going to go back to my design over here and I'm going to add the dots action is that another section and this section I'm not going to use a hundred vertical height I'm going to be yo I'm going to actually be using this little thing that is some spacing here 130 I'm going to use padding instead of using vertical height so the content and padding is going to determine the size of my section okay so this is going to be obviously a new section and it looks like my padding inside it was 136 pixels here 36 pixels here and 136 pixels here so if I scroll down now you see that it looks like there's nothing in there but there's a paddock 136 136 now let's is that a section a container yes in this container this container right now this is just a container and I can change the display settings to grid that is one way to do it I could have also inside this container add a grid which would be a container inside the container but where you have the container we can just think it great so let's just make it grid so it's two two rows that's what I want but I want more columns I want it to be three columns that way it can hold my three elements yes so let's go back here let's let's hear it on those video yeah same thing so okay we have that and let's go back here and by the way we're going to be great in one box and this one box is going to be over it's going to be spanning two three columns that that's how we're gonna do it okay so let's add so there you go now I'm done with my grid no no no a double click outside you know I can start adding content so I'm going to add a blog and why there you go this dip lock it's spanning two three three column three it's been in one row span yes that's exactly what I wanted don't want to be manual okay so there you go that's that's going to be my first block and then I'm going to add another blog blog and this one is going to be holding my image and my these two things so here I'm going to start adding some elements of image then heading and then paragraph so there you go now I'm going to change this image to be the one that is dancing there's little guy dancing there you go how you doing my friend let's change this that okay to this text and let's change this text to this text okay and let's changed level 2 H 3 although this one is more like H 4 so let me change it to h4 yeah h4 and then let's change this to is this copy now this is just text so I'm just going to leave it like that and that that and I'm going to change goggle actually when to do something that I should have done before I want to change in the body at at the pollak level I'm going to change the typography and I'm going to change it to 16 pixels at a body level when you say HTML tag all body tags so 16 pixels and then 1.5 p.m. look at that beautiful okay cool so let's see if it affected other stuff yeah it's all good okay so this deep block I'm going to say to the center just as we did before I remember there you go Center and now it's looking good yeah it's looking pretty good it's looking pretty good it looks like it shouldn't be a chore it should be history let's do h4 h4 should be 24 by 30 let's go back to over here and to see if each force are no 27 only 36 so let's change this to 27 by 36 so there you go so we have our first duplicate and I can I'm going to say that this is a feature block that's what I'm calling it and then I can say come and seek with my beat come on beat and there you go it gets place I don't magically and now I can just replace it images of these guys the thing here is that where with grid automatically puts the elements where they should be and that's why this is happening okay so hmm it's not exactly what I wanted don't you go back to this I I need to do something here I need to put this image as actually as a background so I'm going to call it feature no no I'm going to add a deep block and then that in that deadlock I'm going to put the image inside it okay and so I'm going to use that as a background instead of just the image so I'm going to call it feature image okay and I'm going to remove this guy and then here I'm going to say that the minimum height should be maximum height it should be 224 so it's not what I want to do yeah you never hide 224 yes and now I'm going to apply the image to the background so I'm going to add this image as a background I'm going to choose the image to be this little guy and I'm going to say that it's contained it contains in a center and it doesn't repeat there you go when I instead of cover when it's cover it crops it will crop to the size of the container but when it's contained it will not crop we just like try to fit the image to the container without cropping that's what was that's why we shows contain instead of cover okay so we got it it's looking better and now we can do the same as we did before command C command B might be and now on this one I'm going to add a subclass so this is going to be called too and I'm going to change the image so choose the image to be which one was it the little guy that is just chilling so the chilling dude and then the other one is the the woman that is to call it three and then the woman that is just like chilling to everybody's chilling there you go the chilling woman and that way the thing is that the images have different Heights and I didn't want to any wanted to be like us some a height difference and just some titles being higher than others that it doesn't work with us my friends so this is this was one track up there I could have also used absolute positioning that would have been another way to do it but um now I don't want to do that I sometimes it's you will find out that is very common to be able to get the same result with heading with different techniques same result different techniques is isn't that beautiful so the possibilities of getting something one way or getting a no way always there okay so you know what something that I wanted to I'm going to change the styling of the whole grid to be a line Center and that way I actually don't need the feature block to be I can remove this and it's already coming from the grid because I already need this is telling to be Center to okay so let's say I change this to h2 let's change this to copy the style there you go not 47:52 it looks like a heaven style my h2 him so 4752 look at that my friends this is looking great we already have this section the section apparently needs a background color let's copy this let's go over here as a background color to it there you go now it's looking like my design it's looking nice we're almost done we're almost done and then we've been doing this for almost an hour but we already did we already did a one two three four five five different sections that isn't in my friends so I think I'm not going to do this okay I'm going to skip this one this is going to be homework for you but I'm going to do this one because this one is a little bit different from the other ones and I think it deserves to have its own show let me go back to the comments to see if everyone is still here it's an awesome powerful tool credit containers like fill proportionally why not upload the image to x4 hide PHP screens of that section I so I I'm actually uploading them as SVG my friend so don't need for a 2x because there are SVG oh my god I was just - no sir bibbidi-bobbidi back - you're killing it with SVG yes yes that was that right let's see the matrix I love that grid it looking pretty good okay my friends let's continue we're almost there we're almost finished let's do this one so let me explain before I design it something that I always love to do before I jump into my putting things together I have to imagine how is this going to be built right now I'm in the design tool and I need to know how's this going to be built and I can see number one that this little guy is not really following the grid is not following how like this one this it so let me actually move this section over here so we can see what I want this to do okay so if I were to I don't know make this section I don't know let's say that these the that it's a bigger screen so let's say that it is a bigger screen then if it is a bigger screen I want this guy to Center and I want this image to also Center so how do we do that number one we need to export this as image that's wide and then put as a background and then this guy and then Oh before that the section needs to be half two blocks inside it they're half in half you know it's not going to be a container because the container is going to be containing them and these these plots don't want to be contained they just want to take all the space so are going to be taking a 50% to one side and 50% to the other side and then I'm going to put the content side as you can see this guy the size of it it's fast but I wanted to be the position of it to be dynamic to be a fluid so I'm going to make another box that is containing these this text in this button and it's just going to be with flexbox align to the center into the middle and I think we've got it right we got it we got this let's go back to your wet flow and let's do this so I'm going to go over here I'm going to add one more section the last of the sections and I want to change this this is going to be a difference do I need to do I think we can I think we can use this one the pH section yeah we can reuse it what is going to be different is the content inside of the section we can reuse this section and it's going to be just fine okay so let's add a debug lets inside this section and never good luck let's start doing or magic so the magic and I think we can use the same class on this which is going to use a subclass for one of them and it's going to be called half halfsies don't use my name in conventions okay learn from me don't do what I do this is going to be 100% height there you go and it's going to be the width a 50% look at that and then this little guy is also going to be half these yo know half you have seen so now we have those two sections here side by side okay and I'm going to say that they're flexbox and they are aligned to the center Center okay and that way my containers inside are going to be in the center and now this one is going to be a different it's going to be have a subclass with it's going to be called image and on this subclass I'm going to add number one I'm going to add image let's choose the image and is this image I'm going to say over here number one the position center and I'm going to select this little guy that says cover we got this we got it we got it we got it oh baby we got it we got it why why are you not going to the other side what am I doing wrong [Music] why is this guy on the Left I want to be on the right what am I doing wrong oh it's because it doesn't have any content the other one that's why so HAP sees maybe it's because it is relative and this is should be awesome no not absolute why did I change it to absolute I did not want to change it to absolutely this shouldn't be absolute it should be should be relative in meseta apparently there was this thing it was called image it was another closet already existent and I was using a class it already existed and I think I probably broke something over here I don't know something was happening that didn't wanted to happen so I'm just going to redo what I was doing before okay and that's what I was causing some problems so now we should be able to there you go yeah there was some conflict with classes and that's what was happening as one of these this little guy was being positioned absolutely crazy things when something crazy like that happens just close your computer throw it in the trash and just like say it wasn't me it didn't want it it didn't it didn't obey me so it's going to the trash okay so let's go backward here we have a container and we want to add actually we can just use this little guy let's just copy this block and let's put it inside it not perfect not exactly what I wanted let's am sure oh you know what's going on I think I know what's going on I'm going to copy this one is there so Papa Papa Papa Papa Papa Papa Papa Papa yeah so it is it's a 40 percent that's the width of it so we don't you know what sometimes when you are trying to be lazy you end up working double that's the same we have Domingo lazy people work double that's what we say so I wanted to save myself some time and I did not I was only making myself work double so let's just just create a new one content blog - there you go so there you go now instead of this one it should be a button so let's have a button and it's call as use the button class yo no but I do want to Plaza it just call but and it adds butts so okay let's review it oh my god there you go my friends that's it that's that's pretty much it we got it so we haven't done responsive responsive is going to be a different thing but they showed we can do another live stream where we turn this in No hold on we have time let's add animation well ok or no should we skipped the animation or what do you think should we add scroll based animation I'm going to wait for your answer should we add or no animations I think you're going to say yes I think that's I think you only got in here because of that so let's do it ok ok nobody's replying so ok so here is the thing about adding we're going to be doing a scroll base and an issue so I want to be able to like when I do this I want this guy to rotate like the the coffee is falling apart and it's also like a and also add a little bit of parallax so some of the elements are moving slower or faster ss scroll organic rays that affect where some things overlap in inches they go I don't know like some things look like further away like for example here like I don't know what's happening I don't know what you see but hopefully it makes sense to you let's see do it animate yes yes okay I got the green light from you let's do this so that's one I want to rotate this and I want these to kind of overlap want the one that is further away to move slower and the one that is closer to you to move a little bit faster and then the but let that's what we even faster because it's closer to you the same here and this guy I don't know let's say that it grows when you scroll and these guys I'm not going to animate this one because that it's gonna be too much well now not actually I do have an animation that is gonna be fun for for this okay let's start with this one and but these one are not going to be scroll based animations are going to be page trigger animation where the patient the scroll place but it more like a scroll not a while scrolling but when the page I don't know what I'm saying but it's going to be okay okay cool so this little guy so to do this you want to go to the interactions panel so here in the tractions panel we have different ways to animate for element trigger so if you want hover click or something when you play around with an element and something happens that is the element trigger not what we want today we want a page trigger and with the page where you can add different types of triggers you can add page load move map moves the mouse moves in the viewport page scroll which is the one that I was telling you about the columns and while page is a scrolling this is this is the one that is going to be adding some scroll based animation so I'm going to click on that one I'm going to say what what is an action well I'm going to play a scroll based animation I don't even know why you have the suction there's only one option just say that it's going to play the scroll animation why do you make me select this wet flow just skip this okay this is this for me with love okay now let's say let's scroll animation this is the press plus we're creating a new animation as you can see here on the right it looks like a timeline this is or timeline but instead of timeline it's more like percentage line because if you see here is set of seconds we're using percentage and this percentage is the size the height of the page so as you're scrolling where are you on the page on the height of the total part the height of the page and in and it's going to create an animation as your viewport is changing and you're reaching that percentage of the patient okay hold on so so look at yeah yeah that's my explanation somebody potentially has a better expansion so let's add the first one I press plus I'm going to say that it rotates so rotate and it starts up the gear on the C position let's say that it starts minus 20 degrees minus 20 degrees and I'm going to say that at 40 percent scroll I'm going to say that it keeps rotating up to 0 degrees okay so let's preview it I'm going to turn it on and I don't need you why are you doing that - 20 to 20 okay so let's let's preview it see it's rotating baby that's right an egg as today and actually instead of syrup let's say 20 so it's going to be 40 degrees it's going to be rotating so now it's a little bit less subtle look at that and if you want it faster well get a closer and now let's preview it and now it's faster just a little one is lower then you just move now it's two starts with zero zero so it doesn't move exactly and then I'm going to say that it moves I don't know 80 pixels so it moves a little bit faster no no no this was making more yeah and then I'm going to move this guy over here let's preview it and it's not as it's pretty subtle so let's uh let's make it a 200 pixels let's let's see less sorrow see how now the food also overlaps with the with the title let's preview it over here so it's not only rotating but it's also the position of it is changing let's make it more less subtle don't make it a subtle subtlety is for dummies see now it's less is a little I kind of neither you or me okay - 50 - Wow yeah 250 so let's see yeah yeah I like it that's that's pretty fun right so there you go now we we added or first scroll based animation let's let's do the same with this little guy let's say that around here let's see it the animation should start around 2% and this is starting to see what percent so this guy it's a bit it moves and then it moves a little bit faster the most on the white position from let's say that it moves from a hundred pixels and moves all the way to minus 100 yes so let's let's let's see what this what happens no this industry and I say that ad it starts at keyframe two and let's preview it see how this guy is a set a different speed that the background what's happening it's happening my friend let's preview it over here this guy is rotating and this guy is dancing it's really subtle but it's it's there I hope you you are able to see it with the stream okay let's go back over here now let's do the background the background I'm going to live this one almost as my base I'm not going to move the layer in the middle that way what's moving is what's on the foreground and on the background okay so on the background I'm going just like this guy and I'm going to say that it also moves and I'm going to say that it moves potentially a little bit uh it starts at zero and then it moves 200 yeah so that way it would create this effect where it looks like it's a static see how it's it's it's almost like it's sustained there behind and a way to make it less subtle just so we could see it 180 let's let's let's see it I don't know exactly if that's the right way to do it I think I'm liking it how it's looking it's up to you to just like play around with it and and make it less subtle if you want to or more subtle or potentially changing the levels of how these should these elements should move but this is the basic of how you add these elements let's add this one should would be the same as this so I'm not going to do it let's add a different one with the background of this no no no let's add this one this is wanting it to be this is not going to be a scroll based animation it's going to be different well it's going to be a scroll based animation but it's while the patience is strolling so here on the page trigger I'm going to add a new trigger but it's going to say page scroll when the patient scroll to a certain place this thing happens so I'm going to say that these are this blocks went to the feature block I'm going to say that patience crawl select an action start an animation and I'm going to say that what is the animation that it starts I'm going to want to add a new one is going to be called on tiny animations and on this one this one is actually on time not a percentage based so I'm going to say hold on am i doing it right yeah this is one way uncanny animation because I could have just added no no no yeah it's not what I what it forget I did that now I'm cutting animations okay I'm going to go in here and I'm going to say that this element the feature block 22 to rotate I don't know why but to say that it rotates like that and it adds a rotate observe there you go so it starts rotating and then it rotates today so let's preview oh my god this is potentially really bad let's this apply to the class so now hmm yeah this is looking horrible yeah and let's let scroll up let's scroll that looks like let's see how it looks I actually don't even know ah this is the height of what I want it this is this is totally not what I wanted okay well we learned something new this is not exactly what I want it so what's happening is that when I scroll up this happens I'm gonna scroll down when it starts scrolling down then the other animation happens but not no I wanted to be when when the patient's the scroll and it's actually when it should be when it scroll into view that's what I wanted it scroll into view that's exactly what I wanted that's not and we can here we can add really dope animations like for example let's say that it's let's and before I do that I want to actually just go back to patient rewrite this patient's fault I'm not to remove it okay so in school interview is going to say that it sleeps preview it look at that and this should be being applied to the class so I figure block so it's pretty good look at that they've but we can change it to grow for example let's preview it so once I let's preview this so when I scroll into view see let's preview it again I scroll and when those elements appear interview they just animate and I it has these all these cool presets that I can use grow big so let's say whoa do you see that I let's see it again let's here we're here and I start scrolling you know I got this probe big and you can change the dispute is pinning her I think or not no you cannot you can say the growing grow up anyway that's one way to do animation soup and that's it that's it for today that's a one hour and twenty minutes that we spend here make it jiggle we dare you okay let's make it jiggle and somebody wanted to jiggle girl biggest sort of grow big let's say your jiggle where's the jiggle yes emphasis let's go over here let's preview yes let's loop it can you loop it can you know you cannot loop it when scroll out of you I know I don't think it can do yeah there you go so let's preview it again let's see that jiggle mm I love what people ask me to crazy stuff like that make Ichigo are these animations html5 yes they are html5 their CEO says they're they're dope okay thank you thank you for for making a jiggle so I'm going to change my view here I think that's it we did it we did a full on side I want to publish it so you can see this a published thing and I'm going to add a link here on the comments but let me out of here in the comments so you can see now I just pasted the link on the comments I'm going to add it to the description of this video too but pretty much just wanted to say well thank you we learn how to go from a static design into a dynamic design a turning or starting to sign into HTML and CSS and and put it on the web how freaking crazy is that and and we did it in one hour we just did a full landing page in one freaking hour so I it's dope I think whenever I started using a wet fly I felt like a damn I have a new superpower this is this is amazing I want to tell everyone and whoever I have told about this tool and then when they have like actually use that they have realized like this is crazy something that I has seen is that a lot of people are actually changing to their freelancers or they have an agency and they have been able to to change their model where they were potentially using WordPress or were using a another tool like that and they're like we don't need that anymore and because by the way a wet flow gives you the ability to just like add content managers so they can people that can change the copy they can change the collections on the CMS or the e-commerce so you can give access to people to that so you can so you have content management anyway what I'm trying to say is hopefully we were able to go from pixels to code

Channel: Sketch Together

Views: 5,852

Keywords: ui design, ux design, user experience, tutorial, walk-through, how-to, user interface, webflow, web design

Id: dBNerBMbuNk

Length: 84min 5sec (5045 seconds)

Published: Tue Oct 15 2019