5 Questions to Ask Yourself Before You DIY Your Own Website
It's very tempting to DIY your own website. Maybe you’re thinking, “How hard can it actually be?” Or maybe the idea of investing thousands of dollars on a website feels intimidating.
When you see some of the templates that Squarespace offers, it certainly makes creating a website seem easy to tackle. But that's just it....they're templates. And after a while, they all start to look the same. There's no shame in starting with a template, but make it your own!
There's a whole variety of websites out there...everything from the "clearly I did it myself" website to the "obviously a pro did this" website. And let's face it, there's a BIG difference in the final products of these two.
Let me be clear, I am NOT picking on someone who wants to try their hand at DIY! I am a DIY person at many things myself. But before you jump into something brand new, here are 5 questions that you should seriously ask yourself.
1. DO YOU KNOW PHOTOSHOP?
I use Photoshop for every one of my websites. Whether it's creating a logo for a client, resizing images, or tweaking colors, Photoshop is my go-to place. There are other programs out there that have similar capabilities as Photoshop (Figma, Canva, etc), but Photoshop is by far the most robust. You're going to be much more limited in what you can design if you don't have a way to alter images.
For example, when I was gathering images for my own website, I came across a nice, simple image of a keyboard. The only problem was, the colors were orange and blue. Nice... but not my brand colors. So I just popped it into Photoshop and adjusted the hue until I had the same pink and green colors that match my site. Now it looks perfect! (View it on my site here.)
ORIGINAL IMAGE
EDITED IMAGE
I also use Figma to wireframe all of my sites before I actually create them on Squarespace. This was a game changer for me when I started wireframing. It's so much easier to make a client's design change while it's still in Figma instead of Squarespace. It also was so much less intimidating to design "somewhere else" than to sit down in front of THE site and start designing from a totally blank screen.
Figma is great too for adding any little design flourishes and then exporting the image from Figma and importing into Squarespace. It's free and has (almost) enough of the bells and whistles that Photoshop has.
2. DO YOU HAVE AN EYE FOR DESIGN?
Do you know what fonts work well together? Or which colors compliment each other? What should your accent color be? All of these are important questions that require more than just throwing a dart at a board.
It's funny how picky our eyes are. If there's too much text, or fonts that don't appeal to our eyes, then we're out. On to the next site.... You want to give your readers short spurts of text that are easy to read and also fonts that pair well with each other.
Here are a couple of good resources for pairing fonts (here and here) as well as an example below of what works and doesn’t work.
Colors are another BIG deal breaker. I can't tell you how many times I see sites that use every color in the crayon box. Plllllease, don't do that! Before you even START on the design, choose the colors for your brand. Then ONLY use those colors!
I like searching Pinterest for color palettes. Or Coolors is another great place to generate a color palette. You can upload a photo and choose a palette from those colors or type in a specific hex code to find other colors that compliment it.
Choose which one of your colors will be the accent color. You'll use this for buttons, hyperlinks, and any text you want to stand out.
3. DO YOU KNOW HOW TO WRITE CODE?
Now, I know code can be intimidating for people... but it doesn't have to be! Can you create a website without code? Yes. Can you create a BETTER website with code? Definitely, yes.
I use CSS on every one of my websites. If there's a spacing issue or I want to make a block bigger or move something over, then that can be done with code. One place that I always use it is on the footer of a mobile device. Here's how the footer looks by default compared to how it looks with a little CSS.
WITHOUT CSS
WITH CSS
The 2 images (Squarespace Circle logo and my logo) are HUGE on the first image, plus the links are all left justified and are underlined. I used CSS to adjust the size of the images, center the text, and remove the underline on the hyperlinks.
To add code, log into your site and click Design, then click Custom CSS. This is where you'll paste the code to make the adjustments.
CONFESSION: I don't memorize code. If I need code, I'll just go to a previous site I created and copy it, or do a quick Google search. You can find SO MUCH code out there just by googling. The Squarespace forum is super helpful if you have a question about code. And Rebecca from Inside The Square has TONS of resources and videos with code that you can use.
Here's the code that I used to style the footer above if you want to use it -
(NOTE: You will need to replace the blocks in the code below with the block number for your own website. Use the Squarespace ID Finder plugin for Chrome to find your block number.)
4. ARE YOU GOOD AT WRITING COPY?
I see a lot of sites that just have gobs and gobs of text...huge paragraphs about where they went to school, why they started the company, why it matters to them, etc. I hate to break it to you, but no one is reading that.
HERE’S THE TRUTH: People don't read websites, they skim them. It’s best to have short bursts of text that people can read quickly.
I build all of my sites using StoryBrand. What is StoryBrand? StoryBrand is a marketing framework designed by Donald Miller that helps companies clarify their message so customers listen.
People don’t necessarily buy the best products and services. They buy those they understand the fastest.
There are three main questions a customer wants to know when they land on your site:
What do you do?
How does it make my life better?
How do I get it?
You can create your own BrandScript using StoryBrand for free. I use this same format with my clients as the first step before we start writing the copy for the site. Once you write the BrandScript, the rest of the copy will fall into place.
5. DO YOU KNOW SEO?
SEO stands for Search Engine Optimization, which is how your site ranks in Google’s search results. Ever wondered how a company ends up at #1 in the search results? It all comes down to good SEO. The basics of SEO involve making sure you have alt tags, ensuring your images are titled correctly, having the right url slug, and including a description for each page.
Squarespace actually has an SEO checklist to ensure that you're doing the right steps when you’re creating your site. There are people who make their living doing only SEO, so there is a LOT to it, but the Squarespace guide is a good place to start.
AS YOU CAN SEE, THERE’S A REASON SOME COMPANIES INVEST OVER $10K FOR A WEBSITE.
Some things should just be left to the experts.
What field are you in? Real estate? Coaching? Photography? Chances are, you're WAY more of an expert in your field than a beginner would be. It would take someone YEARS to learn everything that you know. Same goes for web design.
If web design isn’t your expertise, then stick to what you ARE an expert in (it will save you time and money!). Hiring someone to create a website that makes you money frees you up to focus on the things you do best... running your business.
If you decide you want to tackle your website on your own - then go for it! But if some of the above topics make you scratch your head or break out in hives, then let's talk about how we can build a successful website.