Creating a CMS Blog Layout using flexbox in Webflow - Live Stream 10/06/2021

testing testing people [Music] oh uh great can everyone hear me now oh nice okay cool cool um yeah so the audio quality is gonna be different for today um yeah okay so i'm using a different mic for today's stream so hopefully it still sounds okay i'm not sure what's going on with my other mic here but let me see if i can fix it really quick uh do audio [Music] yeah i'm trying to think because i just updated obs so i think it kind of messed with my audio all right well um sounds good i'll just continue with the live stream with the current microphone uh because i see there's quite a few in the chat room now so i don't want to leave everyone kind of waiting uh so yeah i was mentioning at the beginning of the live stream um and thank you for the birthday wishes uh yeah nice sounds good yeah it was a good birthday i don't know if uh i was mentioning that it was a good birthday you know we had some good food and uh took the dog with us and yeah it was a good time for sure but yeah in the beginning i was mentioning that we're gonna build uh this today so for anyone who's new to these live streams i do these every monday through thursday from 12 pm to 1 pm central time and we cover everything webflow i go over how to build websites in webflow and different layouts i also cover how to build interactions and animations in webflow and i provide support via super chat if you need assistance with uh with your site so in today's build we're going to build out uh this blog page uh so we're gonna use the cms the content management system in webflow um along with uh kind of flexbox to design this blog page and it just has a nice little interaction when we hover and yeah so that's what we're going to build today and feel free to ask questions as i'm building so yeah i was going over today's agenda today's live stream is 10 6 20 20 21 wednesday and for the agenda we're gonna from 12 to 12 30 we're going to build a cms blog section layout that i just showcased uh then from 12 30 to 12 40 i'll field any questions about the build and then from 12 40 to 1 pm we'll have a general webflow discussion and i'll provide any super chat support if you need assistance with your site or you want me to build something specific so that you can apply it to your own site and one thing i'll mention too if i build something that's specific to your question i can provide it the read only link and i can make it cloneable so you can use the project for yourself as well all right so yeah that's what i was mentioning before the mic issues but yeah i'll go ahead and get started this is what the site looks like in webflow um i have a blank project here and uh yeah so before i get started and those of you who have come to my live stream quite often i know i like to start with kind of picking fonts and creating a style guide so for this site the font that i used and i use this website here called typewolf.com he goes over like the 40 best free google fonts and so i just take a look at this page here and then i decide okay what font do i want to use for today and today i decided to use work songs and it's a really nice font i used it for the headings and then i used enter for the paragraphs because enter is kind of close to to helvetica and i like that font for uh for paragraphs um so i picked that font and then i created a style guide so if you're interested in kind of creating style guides material.io has this nice little feature where you can type in your your font and they provide a style guide for you for like the headlines the the headings and the paragraphs uh so just wanted to cover that really quick i do cover this in a few previous live streams uh so in this live stream i'm not going to spend too much time on the headings i'll spend a little bit a little bit of time so we'll go ahead and create a style guide and we'll install the font so we have our style guide for the body i'm going to make it black so i like using a variation of black so i like using one eight one eight one eight and sometimes i use other variations i don't like using the zero zero zero black because it's so dense it's so pixel dense and it just it looks too like it grabs too much density for for the monitor so i like using a lighter version of black and it just it's easier on on the eye i feel so this is kind of a thing there and then i'll install the fonts um i'll go into the fonts here and uh yeah if anyone here is new with webflow or uh has just started with webflow feel free to share your experiences in the chat feel free to kind of talk about your pain points you know what what you feel could be easier or what what you've struggled with or anything like that and we can discuss it as i'm building and we can also discuss it afterward near the end of the build or near the end of the live stream so i'll go ahead and install work sans this font here it does have a lot of fonts i don't need all of them but you know i add italic just in case i might need it at some point and i'll add the font and then i'll add enter and this just has a few fonts here add font looks good i'll go into the designer and we have our fonts nice so i'll go to the style guide for the style guide i'm just going to add a few headings so i'll hit command k so command k is the quick find i'll add a heading the h1 then i'll copy and paste this and i'll add an h3 heading because for this site here i'm just using the h1 heading here and these are h3 headings and the paragraph for here oh yeah and again this was inspired off this kind of wireframe template that i'm using and i just select different wireframes here and then i build them out in webflow so this is kind of this here i just grabbed this layout and and built it here in webflow so just a bit of reference there so we have the the h1 and the h3 so i'll style the all h1 headings and i'm going to reference like i could reference the material.io sizes but i decided to reference the sizes here from this figma file just to try to replicate it a bit more closely so for this they use for the h1 they use 48 pixels for the size so i'll go in here i'll change the font to works ons and i'll change the color to white and i'll make it works on light and the size was 48. and the line height i'll make it unitless and we'll say like 1.3 and i'll call this heading h1 and then the h3 heading let's style that so this is also works on and we'll say normal for the font weight and the size is 32 and the color is weight all right and that looks good and also i will use material that i owe for some of this here so like the headline has a letter spacing of negative 1.5 so i kind of want to apply that attribute so negative 1.5 and the h3 heading doesn't have any letter spacing okay cool so we have our h3 and our h1 that looks good then we'll add our paragraph and we'll style the all paragraphs i'll change the color to white the font is enter right here the size of 16 and the line height i think it's like 1.7 unitless yeah that looks good all right cool so we have our style guide those are the three kind of typography units i'll be using uh great so kaveta 13 wrote i'm new to your live stream and webflow do you do site reviews i could do with some guidance uh yes kavita i do do site reviews that is a super chat request so using the super chat feature you can just leave me whatever you want and i'll be happy to review your site live and if you have the read only link i can take a look at your build and kind of see where where i would improve things and things like that so if that's something that interests you just drop a super chat any amount is appreciated and then just drop a link to your site you will have to put spaces for your site or you can send me the link via webdev for you.com send it via the contact page and i'll take a look um during this live stream all right cool so nice so yeah we have our typography all set so let's go to the home page and so right now it's blank and because this is a a blog page we're gonna we're gonna get all this text from the content management system so in webflow to create a content management system we just go here to the cms and we'll create a collection so create a cms collection and i'm just going to grab a collection template so i'm going to say blog posts webflow provides a few templates that you can start with so phoebe asked what figma style guide did you use did you make it yourself purchase a guide to customize so i i use envato elements that's a great question phoebe i have in vital elements subscription to envato elements and they provide an enormous amount of design assets including figma files so it's it's a subscription i pay a certain amount a month and i have it in the description area for the live streams um i am an affiliate with envato so if you decide to subscribe via that link i get a commission but uh that's kind of a little plug there but it's probably the most amazing subscription i've been a part of they provide like an unlimited of great design resources and it's not like cookie cutter design resources it's actually stuff that you you could use on professional websites they provide illustrations photos figma files photoshop files anything you can think of they provide it so and it's all you just pay a monthly subscription and you get access to a lot of content so i saw this wireframe template and i just downloaded it downloaded it it is called what's this one called actually c wire this one's called c wire and i saw this figma file and i decided that this would make some great content for the live streams so i just go through every live stream and i pick one layout that i want to build and i build it before the live stream and then we rebuild it uh in the live stream so it just gives us content to create different uh different things uh so ghostlist wrote sent you the website cool nice um i'll check that out in one second so we're gonna do the super chats near the end of the live stream uh first we're gonna go through the build up until 12 30 and then i'll check out the the email ghostless and um i'll take a look all right and uh if i do feel like it's a super chat feature i'll let you know and you can just drop me a super chat and we can spend some some time with it all right cool so back to the site um yeah we'll try to stay on track here with the site uh so webflow provides different templates that you can use so i'm gonna use a blog post template because you know it's a blog that we're gonna create so i'll click blog post and i'll say create collection and then i'm going to add 10 items so you can add sample items so i'm going to add 10 items and now i have 10 sample blog posts i can go in and for the blog post collection list we have the name the post body the post summary the main image thumbnail image um the color if it's featured and all that good stuff yeah no worries phoebe all good for sure and cool so we have our sample items all there and i can reference these in the collection list so now that we've added that let's go continue with building the site so anytime i start a build i add sections and containers so i'll start with a section and i'll call this uh blog section then i'll add a container and i'll call this container and i'll give it a max width of 1440 and set the width okay width is 100 that's good um great and then in here i'm gonna add the collection list so to reference elements from the cms you need to add a collection list so i'll go ahead and add a collection list and i'll reference the blog posts collection okay so notice we have 10 different collections here collection items so i can add for example if i add an image and here i can get the image from the main image from the blog post you'll notice that we have all these different images and those are being pulled from the the cms because each of these has a main image so it's pulling this information from the content management system okay i'm gonna undo that because i don't want to reference the image right now and for this one at the moment i only want to show three blog posts for this page so i can click on if we look at the structure so we have the blog section we have the container and then we have the collection list wrapper in the container and here i can select the collection list wrapper go to element settings and here i can limit the items to only show three and i can start it at one okay so that looks good i'll go ahead and give everything a class name so that's just the practice i like to do like if an element doesn't have a class name i just like to go through especially especially for collection lists i like to just go through and give them class names just to keep everything kind of organized so collection item cool looks good uh no worries yeah all good yeah we're building um this kind of blog page here from a cms okay all right so we have our three collection items so all i have to do here is just style one collection item because as you add one thing to one collection item it has then adds them to all of them so i'll command k i'll add a div block and i'll call this blog card wrapper because i'm considering kind of each of these a blog card and yeah you can make this a link block or you can just make the read more button the link block um it's kind of up to you how you want to design that but yeah we have the blog card wrapper and then i'm going to add another div block and let's see what i did here for uh this site might just reference it a bit just to see block card wrapper and then this is the yep cool so we have this one and i thought i'd give it a name here yeah block card wrapper yep this div block is gonna be the blog card image wrapper and i'm gonna set this block card image wrapper to sixty percent and actually before we do that let's uh let's select the block card wrapper and set it to flex horizontal and align stretch and justify left so now we have this block card image wrapper now i can set this to sixty percent yeah sixty percent and then here inside the blog card image wrapper let me select it here hit command k i'm gonna add an image and yeah for the block card image wrapper i'm going to set the height to 450 then for the image i'm going to get the image from the main image from the blog post and yeah that looks good and i'll call this vlog card image and let's see here so block card image height 450. nice and we want to give a border radius to this so i'm going to say 30 to the block card image wrapper and i'm going to set the overflow to hidden hey for y'all thank you appreciate it nice thank you so we got a super chat from fioro raiola uh sorry i'm probably butchering your name um but super chat appreciate it dope um so yeah if you have a site you want me to look at just let me know and i'll take a look uh but yeah so i applied the overflow hidden to the blog card image wrapper and then to the blog card wrapper i'm just gonna or to the collection item i'm gonna add a margin bottom of like 60 to add some space there and yeah that looks good so yeah when it comes to collection items it's a bit more involved because we're dealing with these pre-made elements we have the collection list wrapper we have the collection list the collection item and then for each collection item i'm kind of structuring the site inside of the collection item so we have a block card wrapper the block card image wrapper is 60 in width and then we have the blog card image inside of this wrapper here okay and then to the section let me add 100 padding to the top and to the bottom so we have some space at the bottom in the top and then the left and right i like to add 10 vw for the left and the right alright cool and that just gives us some space as we're building the site and then for the image let me set it to cover and the height i'll say 100 percent yeah that's better so it fills in the width 100 there we go yeah so setting it to 100 and i don't think i need to set the height to 100 yeah i do actually 100 and then setting the fit to cover just make sure it fits nicely in there so i know i went over a lot there hopefully everyone was able to follow if you have any questions about that let me know but yeah we basically added a div blog called blog card image wrapper set it to a width of 60 a height of 450 then place the image in there with a width and height of 100 and the fit we set it to cover so it fills the entire div block okay cool so let's add the right side which is the content so i'll add another div block and because this blog card wrapper has a flex setting of horizontal and uh yeah or horizontal um align stretch and justify left this div block is now to the right side of this image all right looks good and i'll call this blog card content wrapper and we'll set this to a width of 40 percent and that looks good and then i'll go ahead and add all of the kind of text here so we have this text right up here it's called development and then we have the date so i'll go ahead and add a div block and i'll call this blog card top wrapper and in here i'll add a text link and i'll call this category text a blog card category text and you know if we did have a category page we could link it out to a category page or kind of a page that had more of the same collection items in it so here i'll just say development for this text and for this text i think i used the used work songs the color white and made it yet to all caps remove the underline and let me just reference it here i think letter spacing of two yeah twelve and two okay cool so letter spacing of two and a font size of 12. all right looks good for the blog card image wrapper i'm just going to add some margin of like 60 to separate these two all right so we have the text link here for the category and this can be like linked out to anything and you could also reference if you have like a category for each blog post you could reference the text from the blog post category so each each individual collection item can have its own unique category that's pulled in from the collection list all right so i'll add another i'll add a text block here and i'll call this blog date wrapper okay and we have it here let me style it make it white and work songs that looks good so for this blog card top wrapper i'm going to set it to flex so that these are next to each other and i'll add some margin to this development text okay and then for this text block i'm going to grab the date the published on date and i'm going to say yeah october 6 2021 that looks good so i actually have to publish the site in order for that date to appear because it is the published on date so now we can see it because i published the site and again i'll call it vlog date wrapper or blog date text all right cool and i'm going to make this a little bit gray so something like this i think i used c3c3 c3 all right cool so we have the category and the date that looks great and let's go ahead and add this heading so i'll go ahead and add a heading and i'll say h3 it's already styled perfect i'll grab the text from the name of the blog and looks good so this line height needs adjustment so let me go into the style guide go into the h3 and give it a 1.3 line height something like that okay let's go to the homepage see how that looks that looks much better then i'll add a paragraph awesome we'll get the paragraph text from the post summary and looks good awesome so i can go ahead and give these headings um a custom class to add some more margin so for this i'd say like um blog heading or blog card heading and maybe give it like 40 something like that uh there is one more thing i actually forgot to do so in the blog card content wrapper i'm going to add another div block i'm going to place it here and i'm going to place the blog card top inside of this div block and the heading and the paragraph and i'll call this blog card content top something like that and the reason i'm doing this and i'll showcase this in a second so i want to add a button now and now let's style this button it's just going to say read more and i'll say give the class name blog card button and we'll set it to work sons and we'll make it the text is white so for the background i'm going to remove this blue background just set it to transparent and i'll add a border at the bottom here and i'll set it to white and make it three pixels so we have this little border here and this and then for this content wrapper for that div block that we just added i'm going to set it to flex vertical align left and justify a space between so what this does is it puts this read more button at the bottom and it ensures that it's at the bottom for every card right if i were to put it at the bottom using like or not using flexbox if i were to say display block then each of these buttons would be in a different position relative to how much text was in the summary but by using flex and saying uh justify space between it always puts this button at the bottom which is what we want so now i can select this blog card content wrapper i can hold down shift to add some padding so i'm going to add about 20 pixels of padding just to add some space at the bottom and the top i can even do something like 40 40 might look even better now that's too much so 20 20 pixels of padding and looks good uh hello web dev quick question are you going to make the project you made using animate.js about animating the letter q available to clone um yeah i can i can pop up maybe i'll make a specialized video just on that uh that topic and make it about 10 minutes and then i'll provide a cloneable project yeah i'll do that for sure um yeah so for this blog hard top wrapper i'll give it like maybe 10 pixels okay it's not yeah it's not doing anything because there's not enough space uh yeah i think that looks good anyways cool and let me add a bit more margin to each collection item maybe 80. like some good spacing there all right cool so then in the blog card wrapper um or the container here yeah the container i'm going to add a heading i'm going to place it at the top and yeah is that how i want to do this let me see here yeah i know i added a wrapper for sure i never like adding elements in the container so div we're going to call this vlog wrapper so you might notice that i use wrappers a lot and wrappers just give me the flexibility to to design to apply different layouts to elements inside of a wrapper so when i use wrappers because i want to put give specific sections different layouts using flexbox or grid um so yeah so i always i always like to leave the container as is like i never like to apply a flex setting to the container because i reused the container multiple times across different sections on the site so sections sometimes differ but the container i like to keep it the same across the the entire site alright so for the blog wrapper we have the heading and i'll put the collection list wrapper inside of the blog wrapper so now for the blog wrapper i can say flex vertical and align center so our heading is in the center and i'll call this log heading and we'll give it the text we'll say our latest news please cool and then i can give some margin let's say 60 maybe even 80. cool uh yeah so that's how we designed this blog page we added a cms and we pulled in the content from the cms for this read more button yeah that looks good actually for the button i'm going to remove the padding there we go so it's just directly under the text and cool that looks good so now let's make it responsive so i'm going to publish and we can see what it looks like actually let me replace some of these images too because i don't like these images so i download some images here that i have from unsplash let me just replace and i think i used this one i'll save it i'll use this one yep save and we have this one and i think i used this image here cool okay 10 web designs uh can't miss i gotta replace that okay cool save that's replaced and this one okay there we go perfect okay so i'll go ahead and publish and let's take a look all right nice so that's how we design a blog page using the cms and let's make it responsive so to make it responsive i can just go in here for the blog card wrapper i can change it to vertical and i can set it let's see here vertical then for the block card image wrapper set it to 100 and for the blog card content wrapper also set it to 100 and then for the image wrapper i can just give it some margin to the bottom maybe 40. that looks good i would remove the padding from here so it aligns with the image at the top and there we go so we're starting to get a responsive site there i'll add some more margin here 100. that looks good and let's go to mobile landscape that still looks good i actually like that a lot let me give some margin here to the paragraph so i'll call this uh blog card paragraph and i'll say something like 40 to give some spacing there to the read more button yeah like in that and then mobile landscape so here i would change the size of the blog card image wrapper to maybe 250. instead of 450 so it's more squarish and i like that our latest news i'll center it let's see that looks good just enter that there and i'm liking that i'm going to change the size of some of this text but for now that's looking okay very nice so we have a fully responsive um blog page and that's how we build that uh so hopefully you learned something new in this live stream um let me know if you have any questions about this build i'll go i'll quickly go over the structure of the site but yeah oh we didn't build the interaction so let me do that real quick so for the interaction it's fairly simple so when we hover over the blog card wrapper this entire section we'll go to interactions click the mouse hover i'll start an animation click the plus and i'll say blog i can type here blog card hover in and we'll grab the image we'll say scale scale it to 1.2 and we'll rotate it uh five degrees on the z axis or maybe ten make it a bit more pronounced and something like that so let me see here scale we might have to scale it a little bit larger actually no 1.2 and then we'll rotate it just five degrees yeah so it doesn't pop out of the the wrapper okay 0.3 we'll give it an easing of uh ease all right cool so play that yeah it looks good save it and then start an animation i'll duplicate this i'll say blog card hover out and then we'll scale it back to 1 and we'll rotate it back to 0. all right so now if i preview we have a little hover effect over these elements okay and that's it so it might be worth setting this blog card wrapper to a link block we'd have to remove this link block here because you can't have a link block in the link block but if you did you could right click say convert to link block after removing this remote button and just making it a text block so if i delete this for example let me just delete it then i can right click convert to link block um oh and this is a link element so i have to delete those two convert to link block and then when the user hovers they can just click on the entire thing and it would um taken to the blog page or you could just have the read more button and you could say here click on this purple icon and then click to current blog post and then it would you know because we created a blog post collection list we now have a blog post template for each blog post right so you would just have to create and style one page and you'd have 10 different blog posts from that one page and then on this page you could link out to each individual blog post all right so i'll publish one more time and that was a lot of a lot of information to cover in just a few minutes um if you need help with collectionless webflow university covers collection list in great detail but i just wanted to give a quick overview here in this live stream all right so yeah there's no question so ghostless wrote uh if it's about making it responsive for a client do you also change anything on high displays like 1440 and 1920 that's a great question it depends i mean for this i'm using a a container of 1440 so if if the site if the width of the screen is 3000 pixels for example this is how it would look um excuse me i could add a 1920 breakpoint let's create it and so at 1920 this is what it would look like so that still looks pretty good to me um the text is a little bit smaller but you know it's up to you to decide if you want to kind of make this text larger um yeah we can go to three thousand it does look fairly small for like a three pixel screen um so yeah it's up to you like you found 1920 you want to make this text larger or smaller um but yeah it's kind of a personal preference and i don't know like well the resolution of my screen is let me see here and it also has to do with your system font like how large your fonts are uh let's see yeah i'm using 1920x1080 that is the resolution of my screen yeah and it looks good so when i preview here on this site like it looks great it could have to do with my font settings as well yeah responsiveness can get really in depth and in cases like that i would just consult with your client have them look at different screens like if he has a large screen and he says oh everything is too small then just create a 1920 and make things larger for the screen or use the wizardry method which i cover in great detail in my previous live streams yeah the wizardry method is where you would set the body of the p uh the font size of the body to 1vw and then you would use ms so i would go in here into the style guide and i would use m so instead of 48 pixels for this h1 um yeah i would do all h1 headings i would do like three m's maybe or 2.5 m's we'll just leave it at 3ms and line height unitless and then for the h3 i would say 2 m's maybe 2 or 1.7 m's in the paragraph i would do uh one m point eight m point nine okay and so if we go back to here um we should be using ms oh okay uh m's m's so this one just yeah 0.9 make a um bit smaller eight seven five then yeah so you just use m's and then for the the width and the height too so like using m's you can now scale the site and the font will stay large but you would also want to apply m's to like all the other units and stuff like that so if you haven't seen it it's the wizardry method i just covered it very briefly right now but definitely check out my other live streams like let me see some good ones that i covered um so i haven't let's see here yeah check out yeah check out these two uh creating a hero section using grid and the wizardry method and this one here creating a slider with the wizardry method and this one too anything that says the wizardry method definitely check it out you can also check it out here wizardry and it's just a really cool way to make things scalable for really large screens if that's what your client is looking for uh all right cool so let me check my email we can go into super chats now i'm just going to check my email really quick and let's see here we go cool i have the site here so it's chris uh so chris did you drop the super chat um so yeah so the links don't work in the super chat kavita so if you want to just send me um the link via the contact page uh right here just send the link via this contact page and i'll be able to uh see it in email so uh uh fyrol he's the only one that dropped a super chat but i don't see any question from him or her um so yeah so kavita if you want me to look at your site definitely just drop me a super chat if you want me to review the site and i've sent it okay yep ghostless i saw i i have the the email so chris i'm guessing yeah you're chris um but yeah super any reviews do require super chat it is more of a specialized kind of review but if we don't get other questions i might just quickly take a look at it for you on the live stream but yeah super chats are definitely appreciated for anything specific to your project or any assistance with personal projects because yeah super chats to help support the channel and they help me to continue to give you know these free free live streams nice cool cool so i don't know is your name f-i-r-a-o too because that's the only super chat i've received so far so we'll just give it a minute so let's uh yeah so we went over the build and yeah there doesn't seem like any questions there are any questions around the build and yeah we're just here at the general webflow discussion and super chat nice so yeah that was definitely a fun build um you know actually i made the interaction a bit faster here but yeah very responsive and yeah cool cool so we'll just give it a second also i might add buttons don't work yet because i didn't put the content so it's only designed mostly to be reviewed all right cool yeah ghostless i'll go ahead and review it no worries so this is ghostless site and if you feel so inclined to drop me a super chat uh please do because yeah these are more specialized cases all right so right away i can see this is a template um and yeah flow base is a great kind of resource that a lot of webflow users use and yeah so because it's a template i'm not sure how much i can assist really if you just swapped out the images the images the illustrations look great um if these are your personal illustrations i really like them um but yeah so like let me go to these different pages these pages don't link out to anything um yeah they're not clickable sorry for all that noise back there um yeah so none of this is clickable it looks like just the layout so is this a template uh chris yeah i'm pretty sure it's a template but is there anything in particular you want me to look at so you wrote the buttons okay you wrote that the buzz don't work yet because i didn't put the content so it's only the design mostly to be reviewed um yeah as far as design like i'd probably add more spacing here um between these cards and this illustration yeah that was a loud airplane and i'm using a different mic so i'm gonna hear how i sound after the live stream because my main mic here actually isn't working in obs so i have to fix that today because i just updated obs uh yeah so i'll put more spacing here between this illustration um and this red is throwing me off like i'm not sure of your color palette but these red icons don't seem to go with anything else or actually yeah i do see it feels like there's two two secondary colors like there's this blue color and a red color as the secondary colors and i'm guessing this darker blue is your primary color um so the text being this primary blue and this text being blue i like that but i would make these icons blue as well um because the red is throwing me off a little bit so i'll make these blue to match the the styling of your site um yeah testimonials like see like the accents of blue look good this is okay these cards having different colors because they're blog categories so i don't mind that um yeah as far as as design i have nothing really to critique it just seems like a really nice template that was used and you just swapped out kind of the illustrations the illustrations are lovely they're they're really great yeah for sure uh and so this one is a template and position them for auto mobile website for people like 30 plus to be simple for them yeah it's it's great like the layout is fantastic you know it's a great template and the illustrations are awesome i don't know if the illustrations came with the template but they're great this part's great not much to critique really you picked a great template if uh that's probably the only thing i can say about it and yeah some spacing just add more spacing here maybe and the responsiveness i'm sure is going to be great because it is a template yeah that looks fantastic oh so here uh this looks like it's positioned absolute so you want to maybe set this to relative so that the content goes below the image and not behind it so you just want to play with this maybe some relative positioning so that these two aren't overlapping and the image goes at the top and that looks good yeah i would probably make this text here smaller because it i can't distinguish between this text at the top and this text here so you want a bit more hierarchy as far as like the text sizing so this is the most important then the paragraph and then you have the smaller little elements so the text could be a bit smaller i think maybe here or or thinner maybe not making bold depends you know if you wanted this to be the most important i might make this lighter because these two are kind of competing for my attention so this heading and these bold elements are competing i feel for my attention so you want the like you want the user to like get the most important second important and then maybe third and most important using um font weight and sizing to kind of create that hierarchy of importance between elements that are viewable here uh this card looks good don't mind that again i would just change the color for the icons this is okay the spacing is a little bit off i feel you probably adjust the spacing here maybe bring it closer um this red arrow is throwing me off i'd make that blue like a lighter blue that looks fine the testimonial section this looks okay excuse me yeah looks looks good yeah it's a good template flow base makes amazing stuff so definitely all right awesome i think that's all i can give really as far as critique maybe just work on the spacing uh some of the hierarchy of the text in some areas and maybe on mobile just make sure your elements don't overlap and uh and yeah i would i would focus on spacing definitely it feels like with some of the sections the text could use a bit more attention as far as like yeah i know the text is good i like the text in most areas but i the red throws me off and that's about it and i might um yeah i don't know i might work on the balance between the size of the illustration and the text like here i think it's okay here i feel maybe the images could be a bit smaller because again the text and the illustration are competing to me and i can't everything just feels a little bit too big and uh relative to each other i don't know how to explain that but maybe work with the the sizing a little bit so that the text and illustrations aren't competing as much that might help the design a bit so these illustrations may be added more spacing away from the text make them a bit smaller so i get the idea of the illustration but i can also read the text without feeling like this is grabbing all my attention yeah but that's just a minor thing i'm not even sure you just have to maybe experiment with that i would i would experiment because again i don't know i'd have to go in and try it myself but like if i let me go into the code here and for example for this image i probably make it just experimenting here yeah maybe 30 something like that you know like with icons a little bit smaller and then the text is kind of takes precedence a little bit so it's not really competing with the text something like that but yeah that's just a kind of a subjective thing to kind of what you're going for but i just feel like a few elements are kind of competing for my attention as i look at the site so white space is good too like you definitely want to put a bit more white space between elements so i can make clear distinctions as i'm looking at the site like my eyes have some time to rest as i'm scrolling through i'm not just bombarded with content like because it does seem like a lot of content to sit through like i have these cards this illustration more text you know so spacing it out maybe a bit more even adding more spacing between each section might help just to give it some more breathing room to the site it's like a it's like a table or like any type of design like if you clutter your table with a lot of stuff different things are going to be competing but if you have a nicely organized table and every element has its own place on the table the table looks nice right like you have your different objects on the table and it creates a more kind of visually pleasing design cool cool yeah and a lot of the text has bold yeah so i would work on that maybe the contrast between bold and not bold text yeah so yeah just feels like a lot of bold competing maybe not enough white space on the site even though it does seem like there's a lot of white space but maybe because the spacing between elements isn't so pronounced it looks a little bit cluttered the other thing i'm noticing too let me see here so we have two cards we have six cards two cards three cards three columns three cards three cards yeah um [Music] i feel like there's there's a bit of cohesion lacking as well because each section has a different feel almost two cards six cards yeah i don't know i i think it just it might need a bit more cohesion as far as like uh what's the word i'm looking for like a little bit more um of a story right it needs a bit more of a story as i'm scrolling because here i see text on the left image on the right two cards then logos and then six cards like the story isn't completely defined as i scroll through a site i like to start building a story in my mind and if i if all i'm seeing is different layouts i'm not getting like a clear mental idea of what the story of the site is i just see like different sections that i could possibly click on all right hopefully that makes sense i did go over that in detail um but yeah a lot of what i'm saying is kind of subjective too so like just take it with a grain of salt and if it can help awesome so we got another form submission from kevin um kavita so yeah let's take a look awesome so oh the link didn't work um kevin so chris sent me this other one okay cool so again chris uh just reviewing this site yeah it's a template as well yeah it's cool you can tell it's a template i guess i guess that's probably the biggest takeaway you can tell it's a template um in a way yeah actually i might like this one better to be honest i like this one better because i feel the sections are more aligned to each other like okay like right away i'm starting to see uh what's the word not uh what's the word i'm looking for um cohesion is a cohesion consistency consistency that's it um more consistency between this like what i'm seeing so i see illustration i see another illustration this section feels similar to this one so i'm getting the idea this one again with the illustration on the right so i definitely like this one more [Music] it has a lot more consistency and it creates more of a story in my mind like with this illustration here on the right my mind is just it likes that idea of consistency and repetition as i'm going through the site it creates a more unified feeling for the site and also the the colors are uh you're only using like two colors a primary and a secondary color there's no you know there's some hints of yellow here but that's part of the illustration so it's kind of cool um yeah i definitely like this one more there's not really much i can say about it it's a template so it looks great and it looks like it's from finn suite so yeah good stuff if anything i would say maybe get like i don't know how familiar how familiar you are with webflow but you know it seems like you're just using a few templates here but the more you can familiarize yourself with webflow uh the better you can kind of customize these different templates and uh you probably you're probably pretty good with waffle already but um yeah sometimes it's good just to customize templates a bit more but i think you did a good job here i'm not sure what the template looked like before but you did a good job with the illustration if you're an illustrator i really like your illustrations they're great awesome so kev uh kavita i think it's kevin um the link you sent me to your ok design site does not work so if you can just drop uh the webflow.io link i'd be happy to take a look uh but yeah it looks like we're at time um yeah but that was cool thank you for sharing that uh ghostless uh chris appreciate it so yeah hopefully you learned something in this live stream uh this build will be available in my um pro profile so you can go to webdevfree.com go to interactions and it'll take you to my profile and all the builds that i create on these live streams are available here for you to clone and kind of see what i did and see the structure of the site all right kavita so we are over time anybody uh feel free to drop out you know i don't want you to stay after one if you know if it's not necessary or if you have other things to do definitely feel free um cool so so kevin sent this site so what was the question you wanted me to review it okay kevin so yeah um this needs a bit of work for sure um don't know how long you've been using webflow but that's okay we all start somewhere so don't feel like i'm saying bad things or being harsh you know but but yeah this feels a little bit out of place i'll just quickly go through and polish this up a little bit and you can just see how i build i'm not going to describe everything but just take a look at some of the things i do and you'll get a better idea of how you can approach your builds so the first thing this should be a heading not a paragraph so if this is the most important part of the site which is usually in the hero section you want it to be a heading so i would just you know so we have the container that's good i would add a heading and paste that text in there and then for this slide i see you have a linear linear gradient um i might um i might add some opacity to this linear gradient so for the colors they're a bit bold so i'll just set the alpha maybe to 40 or something like that or yeah because it's hard to see the image behind the gradient so i'm not sure if the image is having a real impact like i would either just use the gradient or try to or maybe change the color of the text here to white right so there's a bit more contrast and then for this linear gradient yeah i would maybe try to make it a little bit lighter and just move the gradient here something like this just so we can get a feel for the image right because um that'll give you an idea there yeah so great super cool that you've joined the live stream um also chris yeah three months isn't a long time especially to learn web design and development concepts so kudos to both of you for you know sticking with it and and learning uh what flow cool so yeah this looks like a slide as well so let me just go through yeah so same thing i would i would work on these gradients um that might be too many gradients right so when you're designing uh you know maybe try researching style guides so website this could be a good place to start so you're not always picking different gradients and different colors so just type in like website style guide and you can look at some some images of style guides right so like here's a style guide with a color palette different headers and a paragraph you know here's another style guide a few colors and you'll be amazed at what what a stock like how helpful a style guide is because all of a sudden your design will look amazing because you're like okay i'm just using a few colors and all of my elements are within the bounds of those colors so like here we have some colors we have buttons some headings and text so you'll see me in my live streams i'd cover going over a style guide first before building and that just helps with the overall build you know you can style global tags and web flow you can create global swatches to help you build right so that's where i would start with this i might even kind of mix some of these gradients at the beginning i know gradients are really cool initially but if you have too many of them it just throws off kind of the design a little bit right okay so here we have a paragraph um yeah that's okay so let me look at the structure of the site so we have the nav bar so what i would do here i would kind of restructure it a little bit so for the body so i can see you added sections down here that's good so we have this section and this section we have columns i personally don't like using columns i like using flexbox a bit more um but but yeah flexbox to me is a little bit more powerful so we have this section what is the section here so i would actually for the body let me add another section and i would place yeah the nav bar up here uh yeah section i'll put the slider in this section just so you can you know distinguish it and just stay organized i call this slider section and yes this i'm not sure what's going on here because it's like it's in the container i might center this i don't know i might just do something like that yeah it depends i don't know what alignment i would use for this if if it was to be at the left i'd want it to be more to the left in this container the default webflow container is fairly small so for hero sections like you know i might give the container i like using 1440 or you can use 1200 you know just make it a little bit a little bit larger and then i could probably do something like that so it's a little bit more to the left so yeah i'm not sure and i'd probably find some inspiration too because i'm not sure where like if if you had a previous design another thing to keep in mind it might be helpful to design the site first in like figma so like here you can see i'm basing my builds off these figma files which makes it super easy to build the site if you just start building webflow things can get really convoluted very quickly because you're just starting adding div blocks and you're not going to be sure how the div block should be styled and it just leads to a site that doesn't have a clear structure so i would start with figma uh you can open up a free figma account if you don't already have one and just try building your site in figma first and then bringing it bringing it into webflow and use things like pinterest or uh different website inspiration like you can type in website inspiration webflow and you know webflow has a great article on different places to find website inspiration and just see just take a look i mean you don't have to copy anything but just take a look at how other people design their sites and you know try emulating that in figma designing it in figma and then um and then bringing it into webflow because right now like i'm looking at it there's a slider there's this section um and you know there's a space here i'm not sure why that space is there but like the padding you have 220 i would remove that padding and then there's margin to this i would remove that so those are the things that start to happen if you don't have like a you know clear design initially in web flow like you'll just start adding margin padding where there might not need to be margin and padding um so for this instead of columns i would use flexbox take a look at some of my previous live streams i covered flexbox in great detail i covered it today in great detail where i did create a similar layout with a section on the left and a section on the right but rather than you know uh 50 on each side i use 60 and 40. so and you can use grid i cover grid a lot in my live streams as well um yeah so we have this website price plan so i can see these look like h3 headings so okay so you have a heading um yeah this is interesting typically i like to put a heading in a div block i don't like to to have the heading be the entire section if that makes sense so i can see this heading has padding of 100 and 100 and that created this entire section so that's not really a best practice to use a heading as a section you want to put the heading inside of a div block and then yeah and then you have more control over how and where you want to position the heading and it just makes things a little bit more flexible even for designing responsively because when i get to tablet it doesn't look bad but i might want to change the design a bit on tablet and i don't want to be changing kind of the padding here i'd rather just use kind of layout settings to move elements around so yeah maybe tomorrow uh kavita or kevin um i might help you like just build these with flexbox we can go over that so you can get an idea of how i would approach this using flexbox and uh then we can make it responsive on uh tablet and mobile this part's nice you know you did a good job here with the contact section you definitely want more contrast between the text and the background color because they're both gray so it doesn't create a lot of contrast so i would just do you know something like pick a different color maybe like if the text is darker maybe a brighter color or something like that or just you know create a bit more contrast between your text and your um background so the this text is a little bit too light this dim gray you know i would just make it darker and then you can pick a different color for the background a great job on the social media icons this looks great and then we have the logo okay design that looks pretty good i'm gonna go ahead and undo the color change here but yeah uh the the main takeaways i would say i know you've only been uh with webflow for about two months i would say start researching style guides and start building a style guide for your site and a possible theme in style for the site like how do you want your sections to be built but you know like you probably just don't want text like this across the site because it doesn't have much design going for it but i would get inspiration from like dribble pinterest you know just a google search the this webflow blog show you know showcases different design inspiration um and things like that so i say great job initially getting started with webflow um you know hopefully you took something away from my live stream today on how i approach the build but yeah so i can see you're starting with sections that's great uh you do want containers okay so you have containers that's good so yeah you're starting to get the structure of the site down which is great you have your sections in your container that is awesome so great job there footer social link that's a great job so yeah i would say just keep going you know keep watching maybe buffalo university videos keep coming back to the live streams and uh yeah and it takes practice you know nothing nothing that you want to get good at comes easy overnight but you know i'm trying to provide as much help as i can in these live streams and just share as much you know info that i've accrued over the years in web design and development and working with webflow for over three years now and working having worked at webflow uh for a couple years like just want to impart some knowledge to anyone building so yeah come back tomorrow kevin um i'll spend a bit more time with your site we can just build a quick layout in flexbox uh we are over time by 15 minutes i i don't usually like going over uh that long but definitely wanted to help out chris and kevin thank you so much for sharing your sites it definitely helps all of us learn and yeah it's uh you know that's how we learn you know we don't we don't become web designers and developers overnight it takes practice one thing i will say for both of you if you're interested and this helped me immensely right because a lot of times we just want to jump into web development because you know either it's easy or we fo we feel we can build a responsive site quickly i would recommend going to resources on my site and check out learn ui design learn ui design is a course by eric kennedy where he goes over user interface design and that's probably the most important part of the site is the user interface like you know my site is very basic you know i had a different site but i just made a very basic site you know like very clean and minimal but there's many different different ways to approach a build and um yeah with learn ui design you get to understand like why typography color and um alignment is so important right because it visually creates a much more pleasing design for your site so if you're interested check it out it is a paid course uh but it helped me immensely i finished pretty much the entire course i think i didn't do the responsive design one at the end because i had worked in webflow so much but i will finish that as well um cool so awesome yeah thanks everyone uh for for sticking around for joining um yeah it was very fun building in webflow uh it's always fun building webflow tomorrow i'll pick another layout and we'll build it sorry for all these slack messages i keep getting notified um but uh tomorrow we'll build something else here i'll pick a wireframe from here and we'll build maybe we'll add a google map that might be cool or maybe this testimonial section we'll see all right thanks everyone uh for watching and let me go back to the site here and i will see you in tomorrow's live stream thanks kevin and chris appreciate the super chats and have a great rest of the day thank you peace

Channel: WebDev For You

Views: 506

Keywords: webflow, web design, web development, live web development, live web design, building a website, learning webflow, webflow for beginners, website live stream, webdev for you, webflow live website build, webflow flexbox, webflow layouts, webflow web design, webflow cms, creating a blog page in webflow, webflow collection list

Id: aQmc77iMNq4

Length: 78min 20sec (4700 seconds)

Published: Wed Oct 06 2021