I’ve had web designers and businesses reach out to me asking if I can turn designs in a whole range of crazy formats into fully functioning websites, including PDFs, images, Word documents, even PowerPoint presentations (I’ve yet to have an Excel request but there’s always a chance!).
But in the last couple of years I’ve been receiving more and more enquiries about whether I can work with designs created in Canva and turn these into websites.
And the answer is no.
Don’t get me wrong; Canva is a great tool…
I just want to clarify something. I love Canva!
I actually have a Pro subscription and I use Canva almost daily for creating assets like social media graphics, Pinterest pins, proposals, quotes, guides, and more.
And even though I have access to the Adobe suite of tools, I still choose to use Canva for design tasks like these because it’s so convenient. It’s quick, easy, and I can access my designs from any computer I’m working on. It does the job.
However, there are some situations where Canva isn’t the right tool for the job…
Canva is not the best tool for designing websites
When it comes to designing websites, Canva isn’t the best choice, unfortunately.
While you can technically design a website in Canva (it even has a built-in website builder nowadays), if you are planning on designing a website that can be turned into a pixel-perfect, fully functioning website by a web developer, you shouldn’t be using Canva.
Web design is a whole different ball game to graphic design!
Honestly, if you try to outsource your development to a web developer who says they can translate a Canva (or PDF/image/Word doc/PowerPoint presentation) into a working website, I would be concerned. You’ll more than likely be disappointed with the final outcome.
Here’s why…
Developers need pixel-accurate information
In order to create a to-scale website that looks exactly like your designs, a web developer needs to be able to extract accurate sizing information from the design.
We need to be able to extract measurements such as the height and width of elements, spacing between elements, font sizes, line heights, letter spacing, and more.
And while we can extract some sizing information from Canva (for example, I can see the height and width of an element in pixels), it’s difficult to get it accurately and in the correct format, quickly and easily.
For example, Canva doesn’t make it easy to measure the distance between two elements on a website. You’d need to do something like draw a line or a box between the two elements and then work out the size of this to figure out the distance between elements. This might seem like a quick task to do, but when you’ve got to do it for an entire website, that time quickly adds up. It’s also not accurate.
In addition, font sizes are in points not pixels, em or rem, and we can’t change this in Canva. Yes, we can manually convert points to pixels but this is very time-consuming, and converting points to pixels can get messy with lots of decimal places (because 1pt ≈ 1.333px).
And when it comes to line spacing, Canva uses a relative scale, meaning there is no direct way to set or inspect the exact pixel spacing between lines and elements.
Without accurate sizing, it’s just guesswork
When web developers cannot extract correct or accurate sizing information, we have to guess. And you don’t want your web developer to be guessing!
When a developer has to guess, you end up with a website that doesn’t look exactly like the designs you created. Something is going to look off!
Neither you or your client will be happy with the results, and it will require a lot of time and money to fix.
So which tool should you use to design websites?
When it comes to designing websites, the best tools for the job are prototyping tools like Adobe XD and Figma.
Prototyping tools were designed for designing interactive products like websites. They allow developers to quickly and easily extract pixel-accurate measurements, as well as other important information and components such as HEX codes for colours, fonts, images and copy.
There are many other benefits to using prototyping tools for designing websites and I’ve got a whole separate blog post on this that you can read here.
Alternatively, traditional design tools like Adobe Photoshop and Illustrator are a solid choice for creating website designs. As with prototyping tools, these design tools allow web developers to obtain the accurate sizing information we need.
Are you ready to outsource your website development?
If you’re a web designer who loves creating beautiful websites but hates the coding side of things, I can help!
I specialise in turning designs into fully-functioning WordPress websites that not only look beautiful but that are also functional, strategic and fast.
Learn more about collaborating with a developer
Join my free email community for regular insights into working with a web developer, advice for designing strategic websites, and other behind the scenes bits and bobs.
