HOW TO MAKE WEBFLOW SITE LOAD FASTER: Episode 2 - Basic Design System | Uploading our SVG icons

hey hi everyone welcome back welcome back back to the second episode of our webflow optimization course so previously we've been covered how to optimize a fund right we have reduced our rubik google fund from kilobytes all the way to 20 kilobytes and now in today's episode we are going to build a custom but basic design system for our website okay so that being said let's roll the credits optimization is all about creating reusable components and making sure you build a library of elements you can reuse now i already know that we have inside the web flow we have symbols but remember that webflow relies on html structure so what we're going to do next is we're going to have a look on what elements we have inside our design so we will need to create basic elements for our container for our logo for our links and buttons for our text and also for what else we have on the site okay let's dive into it so i'm having my web flow right here and as you remember last time in my previous episode we've uploaded the rubik fund and now let's click on the designer so what i love to do is i go to page right here i click on plus and i do create a new page now my new page can be named design system and the first thing is obviously my container so i'm having uh i'm having a container of 1200 in width so i'm gonna do div block and i'm gonna add a class and throughout this course i'm gonna use a couple of hotkeys that's gonna be command a to open quick find inside the web flow the second one will be command enter to quickly add the class to my div block or to my element and lastly it's going to be command shift a to create a symbol out of my selection good so with my d block selected let's create a basic container so i'm going to add a class right here i'm going to say container and it's going to be limited to 1200 and i'm also going to click on this magic button which will add auto margin from the right and from the left and this will adjust to the center my div block good now i'm having my basic container let's click on the body one more time and let's add let's add our heading levels so hat heading we're going to start with the first heading and let me go back to my design right here good so i have let's say one handing level right here which is h1 and then i'm having a couple of h2s throughout my website and i also can say that maybe maybe when we'll start doing the cms i'm gonna have some h3 levels so just keep in mind that your web page should have only one heading one so one h1 level that's important because when google go out and scrape your web page it looks for just one h1 level that's super super important so your page page should look as an html code it should look like a word document you have your h1 and then for chapters you would have h2h3 and then the body text so i'm having my h1 right here and that's going to be rubik 62 pixels so let me go back to my webflow project and before i would ever edit my h1 i want to select my body i want to go to my selector pane right here click and choose this uh this say pink thing so this will choose my global body tag and within my global body tag what i want to do is i want to select rubik that's my custom font that we previously in previous episode we have optimized i want to set the weight to auto to to normal and the size will be 16 and 24. now these properties should be basically from your paragraph text so let's say right here i'm having this paragraph yeah and as you can see it's real big 16 pixel regular so you want to make sure you have the same thing for for your body tag okay so i'm having this basic properties also i think that we can also change the color to black so black good now let's select back our h1 let's click on all h1 headings to edit the global h1 tags and let's make sure that so we can do reset the font so it takes the font family from the body and it's gonna be weight i think it's medium let's have a look so we go back right here on the top and we can see that it's medium 62 pixels so medium we set it to 62 pixels and for the line height usually is double the size so i will go with let's say 72 good wonderful now i don't want to apply the white color because later on i can create a combo class to it and modify just the color simply by this combo class okay so i'm having my h1 level now what i also want to do usually webflow adds margins so i want to make sure i reset these margins set them to zero so from the top and from the bottom good let's drop another h another heading right here this is going to be h2 and as you can see my headings take the font family from the body and this will be h3 and we also have our paragraph right here so with my h2 selected let me do a reset reset my scale with our h2 selected same thing h2 headings we reset our margins because remember later on we can add a combo class and control these margins but we want to make sure we have control over these types of features click on the fund and then click on reset and this will reset to the body font which is rubik now for the wait let's do reset and see so it's bold if you do remember in the previous video we've been talking that you don't need to add bold because webflow automatically can add bold to it right and basically it makes your font with the tag strong now because my h2 it's medium i do believe let me have a look right here so this is 40 pixels this one it's also 40 pixels so 40 pixels medium so with my h2 selected i'm gonna say 40 pixels and gonna be 50 pixels good and my weight will be medium now i'm gonna do the same for my h3 heading right here the last thing in terms of text i have my paragraph which is basically my body so same thing here i select my paragraph global tag i remove the padding because one more time you can control this padding by adding a class a combo class so let's say zero and then all the rest remains the same now if you want you can definitely add some more line height so let me add just a little bit more line height so it's really easy to read my my body text good i also noticed that i haven't removed my margins from the heading level three so let me do zero and zero from the bottom good so i have my text right here now the next thing i want to do is obviously my buttons so i have a couple of bottom variations right here i have solid buttons i have ghost buttons and i also have these buttons right here that have that have this arrow key or this arrow icon so what i'm going to do is with my body selected i'm going to say hey i'm going to do a link block why we're doing a link block because inside my link block i have a text and i have an embed svg and we're gonna cover how to add embed svng and how to optimize that svg in a moment so that's why guys my single request you please follow along with me if even if you know these tips trust me you'll learn something new and there's basically a reason why we do optimization while we're building out our webflow project this is important we don't do optimization when we finish up our webflow project we want to make sure all the optimization happens at the same time we do develop our webflow page so with my link block selected let me just simply add the components inside so we have a text right here and let's let's start with this button right here with the arrow key so i can show you how to optimize svg icons and i'm gonna select my link blog and i'm gonna drop an embed right here good now for my embed before i would ever drop my embed right here let's add a class to my link block so usually i go for btn which stands for button that's a minimalic way of naming your classes so that's going to be button and as i can see the display is set to flex horizontal so display flex horizontal i'm going to align it to the middle and i'm going to click on justify and because i want my text to be on the left and my embed code my my arrow key to be on the right good what else we have here now usually what i also love to do instead of just adding the padding inside my link block i love to also have the height i want my button all of my buttons to be consistent across all the pages so this button right here have a height of 65 pixels i'm gonna say height 50 65 pixels good i also add a little bit of padding because if i don't have any padding google will give me accessibility issues it will tell me that hey you don't have padding and it's really hard for the user to click on this button even if you have height so let me add just a little bit more so usually it's the power of 2 so 12 and also gonna do the background color so we have this background color which probably later on will change because i think this color the background color along with the white of the text will give us accessibility problems the contrast relation so let me do the color right here and i do believe i also have a border radius of two right here so border rate is two good wonderful now the next thing before again i would add my embed is to define the text inside my link block so how the text should appear so i know it's white so i'm gonna do white and i also know that the decoration has to be set to none so i don't have that underline below my text and what else i know that it's all caps so when you design your project inside figma or adobe xd please don't click on the caps lock and make everything in caps no just use normal text so small caps and then if you're using adobe xd you can click on this upper case which will make the entire the entire text all uppercase so i'm gonna do the same inside the web flow let me just copy this download pdf and as you can see when i'm pasting back it's small caps now this is important google don't like when you have all caps okay so what else so we know it's all caps i'm gonna go on the typography with my btn selected and click on more type options i'm gonna click capitalize all caps i also know that the font weight is set to medium so i'm going to do weight medium what else we have here and for my font size it's 16 it's inheriting from our body good everything looks fine so far so let's click on our html embed inside our btn and let's type enter now let me show you how to optimize an svg icon or svg illustration so adobe xd have a really nice feature which is optimizing an svg so what i'm going to do for the icons is i'm going to select my icon right here i'm going to click command a to open up the export dialog and i'm going to make sure i choose svg and for the file size i'm going to choose optimize now what this will do is it will remove any ids and any attributes inside my svg code and you probably guys know that an svg illustration it's basically an html code so with the optimize selected i'm gonna click export replace good so here's my icon and it only have one kilobyte now the next thing i want to do is i want to open it up inside an html editor application i'm using atom okay it's right here and i want to leave the width and the height as it is because later on my embed code div block will be set to display flex and i want to make sure i i don't kind of a break the or skew or stretch my icon so i'm going to leave the width and height as it is but one more thing to note here you have this fill attribute i want to remove this fill attribute and i'm going to add it right here so fill equal and inside this attribute the value will be current color now what this means is this svg icon will take its color from the font property from the font color inside that embed code so let me copy and show you how exactly it's working so copy to my clipboard going back to the web flow and pasting the custom code save and close and as you can see we have our arrow and it's white not because it was wide in adobe xd but because it takes the color from the btm so when i'm changing my bottom color as you can see it's being reflected also on my icon so let's let's make back to white and that's simply because we have applied that fill equal current color good now last thing is i want to add a class so let's say btn arrow and hit enter good now my arrow have a width and a height and usually in web you want to make sure you want to make sure your icons now well that's that's good to have all icons at 101 aspect ratio so let's say 24 by 24 or 48 by 48 but as you can see right here i'm having the width it's 8 and the height it's 22 but because i want to show you why we actually had this width and height let me go back and do all by the rules so with the with my embed code selected i'm going to set the width to let's say 24 and the height to 24. good but you might know that despite the fact that i have now a one by one div block right here my arrow my svg code it's not properly aligned so i'm gonna choose display flex and i'm gonna align to the middle and as you can see it does it does a line right and it aligns without skewing or breaking up my code because we we maintain this width and height so i think i'm going to start with this one right here so again it's 60 65 and what i want to do because it's another variation of the button so it does not have this icon i'm gonna do i'm gonna do a simple btn so button good and i'm gonna add a class btn and i don't know let's say btn btn um simple yeah i think i think that's good so btn simple now we know that the height is 65 and i want to make sure to add the same padding so it's 12 from all the all the corners so 12. let me just copy this text from here let me paste it right here and what i'm going to do is i'm going to go to more type options and i'm going to choose all caps good for the width i'm gonna choose medium and i think that's all great so we have our second button well actually i think that one more thing we forgot is to add our border radius wonderful let's copy this btn simple and let's paste it one more time inside our body but for this time i'm gonna go with a combo class i'm going to say btn simple ghost goes because we only have we only have the border right here now usually when you create borders inside your button elements or whatever ui component is the border usually in web they're being pasted outside of the box so that's why that's why we need to click our first class and we want to add the border right here and the border pixel should be equal to this border pixel right here so it's two pixels it's two pixels right here so we add two pixels here also good now my ghost button it's inheriting the border from our first class which is big and simple and with my sim began simple ghost with my button that have a combo class what i'm gonna do is i will simply remove the background color yeah and i wanna select a different color so let me let me say black so i override the default good it's looking good i think it's looking good now you can add different hover effects if you want but that's not the case for our tutorial series good so the next thing that you'll probably want to do is to add your logo and usually i have my logo i have my container i have basic text heading levels buttons and from there i can develop my site so we're having our logo right here and now this logo have multiple layers so all the letters are independent paths and this logo mark also have a border so we want to make sure we remove all of those additional features inside this svg so the first thing we want to do is we want to export our logo so i'm having my logo folder right here which have all of these paths yeah and i'm going to click on my time control a to export i'm going to choose svg but this time without clicking optimized so with this in mind i click export and as you can see i'm having my logo right here exported so the next thing i want to do i want to open up my svg inside my affinity designer and remember you can use any any svg editing software you can even use illustrator if you want so now i'm not with adobe products i'm only with adobe xd anyway so with my svg logo open designed affinity designer or illustrator what we want to do is we want to optimize all of these layers right here so first of all is i want to choose all of my letters and i wanted to combine in one single path so with all my letters selected i'm going to click on this add button to make one big combined shape and as you can see i'm having part one and let's name it this letters and also let's deal with our logo mark with our logo mark it's a little bit trickier because we also have a stroke so what i'm going to do i'm going to go to affinity designer to the layer and then i'm going to click on expand stroke and from there i want to choose my expanded stroke along with the original solid shape so both of these selected and i would click one more time on add this will combine together my stroke and my my solid my solid uh shape and then if i'm zooming in you can see that we're having some issues right here and if you do remember from our course on the font optimization now every svg illustration is being built up from points and curves and we want to make sure we remove all the points and all the cures we're not going to use because every of these elements out of this point all of these curves they're a bit of information so let me remove these let me see we also have this one right here even if it's small trust me it it still counts let me choose escape to exit the shape editor and i think that right now what we're gonna do we're gonna combine our logo mark with our type mark so one more time finally we click on add and we have one big svg now from there if you're using adobe xd you can simply copy your svg from affinity designer or illustrator and you can paste it inside your adobe xd good let me actually paste it right here and maybe outside of my canvas yeah right here good now as you can see it's inside this group i have only one big path and i usually do command shift g to ungroup my path because that group will also count in my svg code so with my logo mark with my logo right here selected i'm gonna hit for the last time command a and i'm gonna choose format svg but this time for the file size i choose optimize and then let's see let's click on export the last thing i'm going to do is i'm going to open up my optimized path and remember it's optimized not because of the size but because we have removed those additional groups and layers and combined everything in one big path i'm going to open it up inside my item now adam is an html editor you can use visual code sublime text any tool out there that do open up the svg and what i want to do inside is i want to click on view toggle soft wrap so i can see my entire code now my code have this fill and if you do remember from our arrow we have talk that we wanted to remove our fill and i'm going to add it right here fill equal and in codes i'm going to say current color why so because i want to control the color of my svg logo from the fonts panel from the font color okay i'm gonna leave the width and height as it is because i don't want my logo to be sketched skewed and anything along those lines so with my code selected i'm going back to my web flow and usually the logo will redirect back to the home so what i do is i create a new link block right here and i add the class named brand right and inside my brand i add another embed code and inside this embed code i basically paste my logo svg code click save and close and now you'll have your logo right here and the logo will inherit the color from the brand link so what we can do now is we select our brand and from here we can control the color see we can control the color of our of our logo we can even create a really nice a really nice interaction with this hue going up and down but anyway just for the sake of this presentation let's go to black and yeah nice nice quick tip right here you can go to hover and add different hover effects but anyway so we have our brand right here and i'm going to do actually a little bit of padding because every element needs a little bit of padding and because it's a power of 2 i'm going to leave it as 12. so why 12 because when the mouse will get in this padding inside this box the user will be able to click and get back to the home good so as you can see if i go to preview because i have this padding it's like a lot easier right now to click on the on the logo and go back to the home small thing but trust me pays a lot when it comes to accessibility especially on the mobile good now we defined our logo right here we added some padding and now what we need to do is make sure our logo is centered on the middle of our brand container so with the brand container selected i'm going to say display flex and i'm going to line it to the middle don't worry that everything takes full width because later on all of these elements most probably will leave inside the div block with specific display property applied to it good now the last thing you would want to do with this brand is every link block should have a text inside so google knows what this link is about so inside our brand i'm gonna add a text block and this text block will say back to home page now this is super important guys this is important because that's why inside the google lighthouse audit you guys have this problem with links does not have um descriptible name right simply because your link blocks only have images but do not have text inside so that text could explain to google bots and to different browser what it inside that link block and where it will redirect so you have this back to home page don't go with click here or go with something more specific like back to home page or take me back to the home page good now what i'm going to do i'm going to select my text block and i'm i'm going to add a class so let's say link hidden so we're going to hide from the user this text now remember it's just the css property it's just a display set to none but in reality inside your html right this back to home will still be visible to bots and to accessibility features of your browser good so being said that's all i wanted to cover now we also have to cover links and specific containers but this is a basic structure basic design system that later on you will use inside your webflow project being said i hope this video was super informative for you now this is important guys one more time it's important to have a design system before you would ever create your webflow page and even if we talk about really big projects you still need to have a design system i'm gonna drop all the information inside the description any link and a reference if you if you wanna go out and watch my next episode which probably gonna be about we're gonna start about building the navigation and the header then make sure you do subscribe to my channel hit that notification bell to be notified on your mobile phone when a new episode is being uploaded love you all bye bye

Channel: Chris Tsurcanu

Views: 1,570

Keywords: webflow, sitespeed, design system, svg icons

Id: tp9b5ub0VlE

Length: 29min 46sec (1786 seconds)

Published: Wed Feb 17 2021