Resources to DIY a Website in 2022
Our favorite tools to create an outstanding website.
A compelling website is an absolute necessity if you want to thrive online, and nowadays there are many website builders available to DIY one.
However, creating a website is not just about opening a page-builder like Squarespace and putting things together. It involves a lot of prep work and planning, as well as using many different tools.
But we’ve got you covered! From choosing your website visuals to planning its structure, we’ve gathered the best free resources to jump-start your website creation process.
Planning & whiteboarding tools
Building a website is a long and complex project that involves a lot of different tasks, so you’ll need help to stay structured.
With planning and whiteboarding tools, you can organize all your thoughts in one place and collaborate with your team, regardless of where you are. Here are some tools you’ll love:
Miro
Miro is an online collaborative whiteboard platform to plan, coordinate, and discuss your website’s design, creation, and launch with your distributed team. It also allows users to run productive online meetings, workshops, and brainstorming sessions.
Freehand
Freehand is a powerful collaborative canvas that centralizes your entire workflow to drive collaboration to the next level. It features over 100 templates to streamline your website creation process —or any other task you’re working on!
Mural
Mural is a good match for distributed teams planning to launch a website, as it enables productive and engaging brainstorm sessions with features such as Private Mode, timer, and mapping, as well as over 300 ready-to-use templates.
Figma
Figma is an industry-leading online whiteboard that enables teams to discuss ideas and bring them to life in a seamless and fully collaborative way. Its powerful design solutions will bring efficiency and agility to your website creation project while keeping everyone in the loop.
Color palettes
Choosing a color palette can be incredibly hard. Colors have a meaning and they impact people in different ways, so it’s not a decision you can take lightly. What’s even more difficult is combining them together into a palette that will work for the benefit of your website and business. These tools will help you make the right choice:
Coolors
With Coolors, you can create the perfect color palette for your website in a matter of seconds, explore premade color schemes, and extract the color palette from your favorite pictures. It also has iOS and Android apps and a Figma plugin.
Happyhues
Happyhues is free, but it’s worth its weight in gold. This color palette inspiration site acts as a real example of how the colors would look in context. And it even teaches you a bit about the terminology and psychology of color. If you follow its advice, you’ll look like a pro!
Colorsinspo
Colorsinspo is a useful online tool to find a color scheme to represent you and your brand on your new website. The platform includes resources to understand the power of colors and streamline your decision-making process.
Muzli
Muzli is a color palette generator that is incredibly easy to use: just pick a color you like — or enter its code — and the platform will generate many palettes for you to choose from. You can also extract the color palette from a picture that inspires you.
Gradients
Using gradients can enhance the overall appearance of your website and make it look more trendy. There are many possibilities to include gradients in your website design: you can use them for your logo, backgrounds, photo overlays, and design accents. Use these tools to choose a gradient that fits your style.
ColorHue 2.0
ColorHue 2.0 is an online tool that features the most charming, handpicked gradients for your new website. It’s also available as a plugin for Figma and sketch.
GradientHunt
Gradient Hunt is an open platform with thousands of hand-made color gradients of all types. You can even download the GradientHunt Chrome extension — which serves you a different gradient each time you open a new tab — to get inspired all the time!
Gradient Backgrounds
Gradient Backgrounds brings together all the best gradient generators in one place (including the previous two we’ve talked about), so there’s no need to look any further! You can find the tool that is the most convenient for you to use.
Illustration tools
Illustrations can help you tell your story visually and guide users across your website. Here you can find the best customizable illustrations and doodles to engage your visitors:
Doodle Ipsum
Doodle Ipsum likes to call itself “the lorem ipsum of illustrations.” It allows users to easily customize doodles, copy their code, and use them on their websites, landing pages, and other tools.
Blush
Blush is an online tool that allows you to create and customize illustrations and doodles, choosing from multiple styles and themes made by artists from all around the world. You can download a PNG or SVG of your design and use it on your new website. There are also plugins for Figma and Sketch users. The Blush license allows you to use every graphic for personal and commercial purposes without the need for attribution.
Smash Illustrations
Smash Illustrations is an illustration constructor that features over 250 illustrations and designs that will help you create the right scenes for your website mixing up different characters, backgrounds, and objects. Although the free version is pretty comprehensive, you can also get the premium one and access even more illustrations.
Free photos
Your photo choices can make or break your website. They help you communicate your values and mission to your visitors in a visual way, so you need to choose the right ones. These free platforms will help you do that:
Nappy
Nappy is a free stock photography website with one key differentiator: it provides beautiful photos of black and brown people, promoting diversity and inclusion in websites and content across the web. Nappy is shifting the focus from the traditional unrealistic stock photos to representing diverse communities. You can download these high-resolution photos, modify, share, distribute, and use them for free.
Kaboompics
Kaboompics is one of the best free stock photo projects for the lifestyle, interior design, and other specialized bloggers around the world. Apart from providing free images of the highest quality, they add a complementary color palette for download to each of them. The website has almost 25K royalty-free photographs to choose from.
Freephotos.cc
Freephotos.cc is another great option when it comes to finding the best free pictures for your new website. It uses the APIs from other stock photo providers and gathers images in one place for easy preview and download.
Unsplash
Unsplash offers over 2 million free high-quality images that have been hand-selected and accepted by their team of experts, so you will find only the best of the best there. With Unsplash you can curate collections of photographs with different moods, palettes, colors, and topics, for your future projects. Collections work like folders and are very useful in web design work.
Free videos
Videos can add the “wow” factor to your website and help you keep users engaged. If you need royalty-free videos for your new project, check out these resources:
MixKit Vecteezy
At MixKit Vecteezy, you can find amazing free assets such as stock video clips, music, sound effects, and video templates. You get unlimited downloads of over 54 million premium stock videos to spice up your website.
Coverr
Coverr has a collection of free stock videos that will help you level up your website and engage users in a much easier way. No sign-up is needed and no attribution is required.
Fonts
Fonts are an often overlooked aspect of your website design — but typography is an important part of every design! For your website, you need a font pair that is readable but nice and aligned with your style. Here are some websites that can help you find it:
Fontpair
Fontpair offers a selection of curated fonts to choose from. It also has a beta tool that suggests font pairings and allows you to match them with a suitable color. Then, you can download the fonts and copy/paste the color hex to use your chosen combination in your website.
Wordmark
Wordmark makes font choosing a lot easier. You can start by typing a short phrase on their platform and they’ll show you what it looks like in different fonts so you can pick your favorite one from among the previews.
Typewolf
Typewolf shows you fonts in context, which can be much more useful than just seeing them isolated on a white background. It also provides learning resources that will turn you into a font expert.
Google Fonts
Google Fonts is a library of over 1300 open-source font families, and it allows users to filter fonts by the number of styles, thickness, slant, and width, as well as other criteria. You can download many of these fonts to install on your computer or your website.
OpenFoundry
OpenFoundry is a stylish platform that brings together curated open-source fonts to encourage exploration and inspiration. It allows you to easily customize your chosen fonts to see if they are a good fit for you.
Typescale
The Typescale plugin for Adobe XD and Figma helps you pick the right font sizes for your project. It generates a modular scale for your typography in just a couple of clicks, transforming your text into a cohesive typographic scale. Choosing font sizes from this scale will help you create consistency, harmony, and contrast in your work.
Website Copywriting
Your website copy is the key to a high conversion rate, so it needs to communicate your value proposition in a clear and engaging way. Here are some resources to help you achieve that:
Copyblogger
Copyblogger has plenty of articles on copywriting that can help you plan and write amazing copy for your new website. It covers basic topics such as storytelling, SEO, and writing prompts.
Grammarly
It’s always better to be safe than sorry. AI-powered writing assistant Grammarly is an excellent tool to check your copy’s grammar and spelling so you’re sure you’re putting the neatest content out there. Grammarly comes in the form of a desktop app that can check texts anywhere where you type them — emails, messages, documents, social media. It also has a free version.
Copyscape
Although the chances of plagiarizing others’ work are tiny if you write your copy yourself, it’s always better to be certain. With Copyscape, you can make sure your words are yours, and yours only.
Website builders
Now that you’ve covered every key detail of your website design, it’s time to put it all together! Check out these website builders and choose the one that better suits your needs:
Squarespace (our favorite one!)
Squarespace is an all-in-one platform that allows you to build beautiful and professional-looking websites with just a few clicks. It’s very intuitive and easy to use, and it will help you level up your business, regardless of whether you’re starting out or you’re an already established brand. Squarespace is also a hosting company, meaning it’s an out-of-the-box-solution. You can create a web page in under two hours, connect a domain name, set up a professional email, and have your place on the internet.
Readymag
Readymag is an online tool that helps users create a presentation, a portfolio, a landing page, or a full-on website by following a couple of simple steps. It offers amazingly interactive features that can keep visitors engaged and is fully customizable to fit your style.
Wix
Wix is a renowned platform that gives users the freedom to create, design and develop a high-quality website for free.
It’s perfect for beginners because there’s almost no learning curve: you just need to pick a template and customize it by dragging elements and placing them wherever you want them to be. And if you can’t find a template that suits your needs, you can get a free website designed just for you by answering a few questions.
Also, Wix has built-in support features in the editor: there are question mark buttons that open up step-by-step guides to guide you through the whole process.
Showit
Showit is a drag-and-drop platform that gives users complete creative control over their website design. It’s easy to use and it offers a wide variety of customizable premium templates. It will be very easy to work with if you are used to working with design tools like Adobe Illustrator or Figma.
Webflow
With Webflow, you can build a fully customized website on a visual canvas that gives you full control over the overall look and feel of your website. It also offers SEO, hosting, and e-commerce services to help you every step of the way towards growing your online presence.
Strikingly (the simplest one!)
Strikingly can help you build your website regardless of whether you have any coding or technical knowledge. Its simple and focused platform allows you to create your website in under 30 minutes, and it includes several valuable features such as built-in store capabilities and analytics.
Get Help Building a Website
With all the free tools available online, building a website is not as costly and complex as it used to be. However, it does take a whole lot of planning, research, and practice until you get it right.
So, start right now and DIY the website for your business! And if you don’t feel like doing all this work by yourself, remember we’re here to help.