Did you DIY your website with SquareSpace, Wix, or WordPress? Or, are you making changes to your current one on your own?
That’s totally fine! But you know what ends up feeling the hardest? Getting the right design to make it not look like a DIY website.
Luckily for you, I have a few tips that will help take your website from blah to *chef’s kiss*.
1. Keep Image Styles Consistent & Point Them Towards Copy
One of the first things that can take your website from amateur to professional is the quality of the images. I highly recommend you invest in a photoshoot with a local photographer. This will help you get images that are consistent in their style and are higher-quality.
Consistent image styles will help your design flow throughout every page. If you’re browsing and you notice a website that has wildly different color schemes and styles, it becomes a bit jarring. Maybe not totally consciously, but when they’re similar it helps to build that consistency and trust.
Plus, browsers like high-quality images. It’s far more professional than the obvious phone selfies.
Want to take those images up a notch? Point the eyeline and the body’s angle into the copy instead of away from it. When the eyeline is looking towards the copy, it helps drive the browser’s eye to what you want them to read. This can help them keep reading down the page which keeps them digging into your website. If an image is pointed away from the copy, it actually can take the eye off-screen and that can become almost subconsciously disorienting. (This is a fun game – you’ll notice this a lot more now.)
2. Stick to 3-5 Colors
Look, do as I say, not as I do all right? Normally I wouldn’t recommend a client use a lot of heavy colors, but I certainly did that on my own website. I like bold though and I wanted to differentiate myself from the “typical” web developer.
You want your website to avoid looking like a rainbow and be consistent with your color choices.
Most brands have one or two main colors, a black, a white, and maybe a neutral or two, possibly some accent colors. I typically tell my clients to stick with a main, an accent, and two or three neutral colors. This helps you to have the colors from your brand but without it feeling overwhelming.
Then, you want to be consistent with how you use those colors. Are the buttons on your homepage blue? Keep them blue throughout your website. Make in-text links that same blue. It teaches your browsers that that color means they can click on it.
You also want to test any font color passes web accessibility standards on the background colors you’re going to use. Luckily WebAim has a helpful contrast checker tool. This increases the legibility of your text and also makes your website accessible for those with color blindness or other vision impairments.
3. Be Consistent with Headlines & Fonts
Honestly, your entire website should be consistent throughout because that will help teach your browsers how your website works and flows. But I see a lot of inconsistency with headlines sizes and font choices, so I’m highlighting it here.
What I mean is you want to ensure that your main headline of a page (your Heading 1 or H1) is the largest font size you use. And that you use that same font size for all the H1’s throughout your website. Then, your section headings (Heading 2 or H2), should be smaller than the H1 and should be the same size and style throughout the website. And so on.
Consistency with your headlines helps to teach browsers what’s important on your website, but it also helps Google to understand how your content breaks down and what you’re trying to rank for.
You also don’t want to use a bunch of different fonts. Personally, I like having one font for headlines and a complementary font for the body text and that’s it. Just two. And keep that consistent.
(Can you sense a theme here?)
4. Focus on Simplicity
I’ve heard a lot of people over the years that they felt like a website needed to be “more designed.” Here’s the thing – simplicity rules. When a website is simple it’s far easier to use. Simplicity in the design can keep the eye moving, makes it easier for your user to understand what to do next, helps your website load faster, and makes it far easier to make the website work on multiple device sizes.
That doesn’t mean that you can’t inject personality and design into a website. But you also don’t need all the bells and whistles. In fact, if you’re DIY’ing your website, I highly recommend sticking with simple. It’s easier to make a clean design look nice and professional versus trying to make something complex work when you don’t have graphic design skills.
5. Plan the Mobile Version First
This goes with the simplicity portion honestly, but you want to focus on the mobile design first. Honestly, the majority of your website visits are probably going to be on mobile anyway, but it’s more than that.
Remember that on a mobile device you have far less real estate to use. You also are dealing with slower load times because your browsers may be on lower data speeds. When you start with mobile, it helps you strip out the things you don’t need and keep only the components you actually need in your website. You can always add features as the website gets to larger sizes, but you don’t want it to feel like a completely different website.
The experience really needs to be the same no matter what device someone is visiting your website on.
Increase Conversions
These are pretty simple tips, but they’ll make a huge difference in your DIY website design. They also will help you increase conversions and leads, and really, isn’t that what it’s all about? If you focus first on your user experience, keeping things consistent, and simplified, you’ll be amazed at how much more professional your website looks.
