I tried using Canva to build a Website

canva recently launched a tool to design website but is it actually useful can you build real website using this tool now most professional designers Look Down On Tools like canva but I actually think it's really interesting and I've actually found out myself using this tool for actual client projects for example when it comes to business cards I used to professionally design them in a tool like InDesign but then clients can't edit the cards themselves if they have a new employee or something like that so when I deliver a canva file to them they can just create new cards edit attacks and then even you know save as a PDF with croak Mark so it's actually a professional tool we've even used it in flux Academy to design you know some eBooks that we're working on just because how easy it is to collaborate with our writers and so I'm not I'm not looking down on everything I'm going to give this a try and so in this video I'm actually going to take this website that we've designed in figma in an earlier video which you can check here if you want and I'm going to try and build this in canva and see how it goes let's give this a try okay so we are now in canva and I have chosen websites here so this is what I want to create and you can see that I have a bunch of templates right here I can also start from blank and what I want to build is this basic landing page that I have here designed in figma so let me start off I can start with the blank one but let me start off by checking uh see maybe if there's a template that can help us just get started really easier and actually I see this one which has also kind of like a dark background a hero a button with a round corner so let me get started yeah this template looks like a good place to get started with and let's click customize this template it's going to open up kind of like this new thing and you can see here that I have basically the page built here now it's very funny it says apply all six pages but it's actually not six pages it's actually just different sections of the website but canva calls them sections and this to me this just basically clears that they basically had kind of like a PowerPoint slideshow uh presentation Creator and they just said hey how about we turn this into a website um so it's pretty straightforward let's go ahead and give this a try see how we can change these things so basically we have the templates here we can choose from different kind of like layouts and we can change styles of colors so color palettes and stuff like this so let's let's actually start off by trying to bring this on so for starter let me copy this text and I can paste it right here and let's see how they handle the fonts so here I I have this font let me see what fonts I'm using here so this is a font called outfit from Google fonts and if I come here and try to see they're using a different kind of font and there are a bunch of fonts here and I can even go ahead and upload my own fonts if I want but if I write outfit outfit they don't seem to have this particular Google font and I can't seem to be able to add other Google fonts but I can again upload a font if probably if I'm premium or something like this but this font looks pretty similar so let's let's go ahead and stick to this I also have this body text here which is just smaller so let me see how I'm going to go ahead and add a text to this so I'm going to go here into elements and then we have let's see if we have text elements where are these so let me see if we have here oh actually text is a different uh element here so let me grab this paste this now one thing that I find a bit weird is this if I'm going down here into 18 points uh which is what we have here right this is note the difference right this is 18 points if I check the body font right here it's 18 points this one is 18 points as well but it looks way way bigger so I guess this is not correlated to actual pixels as we would see them on something like figma okay then we have the button now one thing that is actually nice let me delete these images from here and actually maybe instead of deleting them maybe I can drop my image right into here so here I have this hero image let's drop it in here and now it's actually yep replacing it I don't need this background so I have my image here and maybe let's replace this with you know with we have let me delete this and delete this and let's drag our logo which is SVG so can we load svgs here yeah we can seem to load SVG and it's scalable so that's nice I'm gonna drag that here uh let me see how I can change the colors of this so this is looks like it's a group right I can ungroup this or let me see if I double click this yeah I can edit you see I have a gradient here I actually don't want a gradient I just want a solid color let me see um it's a nice thing here that when I'm picking the colors I have this uh it's actually taking out the colors from the image to create a color palette that's actually nice so I automatically can have you know this as my text and just change the text color to white I can probably go ahead pretty easily and do this outline now note probably I can't change this into outline I can just this is weird there's no kind of like fill or outline as you would find uh in figma which is basically the same button but with a different feel to it right so this one has a stroke to it while this one has a feel to it so here if I want to have an outline let me see I probably need to go into an element and then here maybe find maybe need to take this here yeah here this element does seem to have both a feel which I can use as a stroke so I can recreate this button right here now to turn this into a button I would right click and then link it somewhere and this is where we start to actually find the limitations of this project if I want to take it to a different page there's actually no way to add more pages here so this is basically just a single landing page that I can create and this is quite of a large limitation right so even if I want to do something like hey have this button scroll to section number two there's actually no way for me to link that right now so if I can link um oh I can actually do link it to let's say Pages number two page two um and then let's actually test this out so let's do the preview and let's see how this works so this is now a link click slide okay so the in page linking works but now this gets an underline because this is a link let's also check out the responsiveness of this so responsiveness overall it's nice that it broke this down into two columns so this is nice but the problem is I can't actually change the mobile view so if I wanted to change something for example if I want this to be centered on mobile view or have the buttons aligned because it's kind of weird that this is left aligned and these are centered I can't control that so this is quite of a large limitation let me see if I can either remove this underline or change I want to have kind of like a hover State when I hover over this I want this to change let's go ahead and publish this website so we can check this out um so let's publish it on a free domain so I have test.myconvas site let's go ahead and publish this and let's see how this works and responds so now I can view my website open up on a new tab so note here something that's weird this button the this the actual background is not linkable only the text is linkable which is weird the text does take me up to the next section and is this responsive so we do have kind of like a container holding this in the center and then it's scaling up to this point where it all of a sudden becomes kind of like centered so there are two break points mobile and Landscape there's nothing in the middle for maybe tablets um and let me see if I can actually create hover animation for this for this button so it went out of the website so let's open it up again and let me see if yeah edit I want to edit this design once it's published let me see maybe I can add an effect do we have effects here effects so Shadow lift none curve okay so I can't okay so these are just drop shadow effect these are not animations so I guess it doesn't look like I can add animations right now so if I would want to go ahead and continue this I would probably have to create another section for this featured on and I could probably do this by either re editing this section or just adding a new section with this new add page thing so let's go ahead and just delete this and instead maybe I want to do this logo thing so I need some kind of a I need this rectangular which we can put the logos in and it has a little bit of transparency so let's see let's go to elements try to find a rectangular or actually a shape that we can do something like this with I don't want text inside of it let's see can we reduce opacity to it so we have colors and um we have colors but it we don't seem to have opacity for the caller or maybe this is transparency okay so can reduce transparency just like this and then I can go ahead and start dragging in my Logos so let me say I have this logo here and we can go ahead and probably put all of our logos inside so this is how I would create something like this now probably something like this let's see if we can align them it's probably not going to be very responsive right because everything here is not really aligned to the page let's group this and one more thing I want to try is here I have in the background these kind of like gradients which I can probably do if I have here go back to elements I have this kind of like gradient so I can bring this up here put this in the background and change the color to this and then copy and paste and uh okay so now we're seeing a problem which is because uh canva is considering each one of these section as a page thinks from page one or section number one cannot bleed into section number two now one more thing that's going to happen I'm going to publish this website again and go here and test it no it wasn't updated I guess okay so I'll publish again okay let's test our website okay so what you see right now is that everything is being cropped to the container of the frame so this is one more thing that is problematic and again here when we're going to look at this section oh this one this is actually quite surprising that it broke the logos into two columns this I did not expect that but you can also see that the padding on the left and the right are not equal here and I'm not sure whether I can fix this because I can't really control the mobile view of the design all right let's sum this up all right to sum up and conclude my experience with canva right now the limitations around responsiveness and around the fact that you can only build a single page means that I'm actually not going to be able to use this on any real world project that being said if you're just starting out and it's it's it's actually free it's actually has zero learning curve so if you're looking for like a free template or something like that just to put out your portfolio or perhaps you want to create like an online proposal or something like that perhaps it's something that you can use very fast with no excuses whatsoever if you want to look into a little bit more advanced tools like webflow check out this video here to dive into it and I'll see you in the next video peace out foreign [Music]

Channel: Flux Academy

Views: 30,719

Keywords: become a web designer 2022, freelance web designer, graphic designer job, web design, web design freelance, web design business 2022, web design freelancer, web design business, web design 2022, web designer career, web design school, ran segall, Flux academy

Id: Yo2ZFW_c1Mc

Length: 14min 0sec (840 seconds)

Published: Mon Jan 16 2023