7 DIY website design mistakes to avoid
Did you DIY your website? Awesome! Kudos to you.
These days, with all of the great website building platforms out there it makes it really easy for people to DIY their website. I encourage it!
If you’re just starting out, you likely don’t have the budget to pay big bucks for something completely custom, so maybe you’ve purchased a template or are starting from scratch, either way, there’s a few common mistakes I see when non-web designers decide to DIY their sites.
My motto in business is totally “done is better than perfect”. I’m all for putting it out into the world before it’s “perfect” (nothing’s perfect, right!?) and you definitely shouldn’t be obsessing over small details.
But, to help you out, I’ve compiled a list of big DIY web-design no nos that you should fix ASAP!
1. Not optimized for Mobile
Ok, I know I talk about this one a lot. Because it’s SO freakn’ important!
Recently I’ve seen a lot of DIY websites that aren’t mobile optimized.
For my website, around 60% of people are visiting from their phones and not their desktop. This is a HUGE percentage of people, and if you don’t have a mobile site set up, then 60% of people won’t be able to use your website. That’s a substantial loss in potential customers.
There’s really no excuse not to have one these days, too! Almost all of the easy drag and drop web design platforms have an option to build a mobile site, or, for example, Squarespace automatically creates one for you.
Even if you think you have a mobile site enabled, double check! Check that it looks good, everything is readable and on the screen, images are scaled correctly etc.
Is your site optimized for mobile, or are you falling behind on this one?
2. Pixelated or distorted images
This is really common when it comes to DIY design. It’s understandable, when you study design you learn all about pixels and optimizing images, but if you’re DIYing it’s really easy to turn a blind eye to this.
But seriously, nothing looks more unprofessional then when you have pixelated or distorted images!
What do I mean by that? Here’s an example…
A nice, clear image:
A pixelated image:
A stretched/distorted image:
Go through you web design and make sure you images aren't breaking any of these rules! You can source stock images for your site, free or paid, these are generally really high quality so they should be nice a clear.
Related Posts > 10 Free Stock Image Websites
And remember not to stretch them, please!
3. Weird color combinations
If you’re not a designer, sometimes choosing colors can be hard to get your head around. Finding the perfect colors that work together as a cohesive palette is hard enough, then there’s the challenge of how to actually use them in graphics or around your website, and using them well together.
Often I see DIY designers overusing color. Putting ALL of the colors together in their graphics, or pairing up only the brightest colors which results in hard-to-read and hard-on-the-eyes graphics.
Use your colors wisely, and don’t overuse them.
Just because you have 5 colors in your brand color palette, doesn’t mean you have to use all 5 in one graphic.
Just because they’re in your color palette, doesn’t mean that they should be used side by side (eg, the two brightest colors from your palette)
For example, I have this great client that I created a brand for recently. Her color palette is bold a bright and contains bright green, bright yellow and bright red! These three colors look great used sparingly throughout her brand to give it some pop. They are cohesive as a palette, but I suggested to her that she doesn’t use them side by side. As soon as you put the bright colors side by side you lose contrast and overwhem your eyes. I also think that the colors together look odd, putting the red and yellow side by side gives off a bit of a McDonalds vibe, and putting the red and green together is a bit Christmassy.
The lesson here is, even though the color palette is great overall, that doesn't mean using all of the colors at once looks good, and some pairs of colors from your palette might not work well together either.
These are important things to think about when you’re using your color palette.
4. Not enough White Space
This brings me to an important point and something that I see so often when it comes to DIY design. White space is necessary, and you’re totally underrating it!
So many DIY designers want to just fill in all of the white space with images, patterns, background images etc. There’s a place on your website for all of these things, but they need to be added strategically.
If you don’t have any whitespace left, you lose contrast, you overwhelm people, and it makes it hard to have a clear call to action or any structure to your site.
You don’t need to fill every little gap!
Don’t think of whitespace as a lack of elements or design, think of it as a crucial part of your design.
5. Fonts
There’s a few points to touch on here.
One very common thing I see from DIY designers is their use of older, more outdated fonts. Fonts come and go in trends, like fashion, and if you’re following the trends, you need to be able to keep on top of the trends.
As a designer I see the same fonts used over and over and over again by DIY designers, because it was fashionable recently. But choosing something that was fashionable recently isn’t a good idea, because you’re likely going to be using the same fonts as everyone else.
If you’re going with trends, make sure you can either find something ahead of the trends, or, stay away from trends completely and go with something classic and timeless! You don’t want to have the same, outdated, once-trendy fonts as everyone else.
Another problem I see is the overuse of different typefaces throughout a website. If you want your design to look professional, you need to choose fonts and stick to them, use them throughout your whole website.
I recommend using 2-3 fonts (max!). A main heading font, and secondary heading font and a body font.
If you’re using a display or script font, do not use this font within the body! Keep your body text something really simple and clear to read. There’s nothing worse than seeing paragraphs of text in a hard-to-read script font!
Related Post > The 4 Best Modern Font Combinations for Squarespace
6. Alignment
One way to really make your website look professional is to make sure things are lined up properly.
This is a really common DIY web design problem, that’s super easy to fix, but obviously easily overlooked.
Maybe it’s something that only jumps out to a trained eye, but I can guarantee, if you work on creating a cohesive alignment throughout your website it will look much more put together and professional.
Images, boxes or text, lines etc. Make sure the margins around your website are the even, that there’s no weird/out of place gaps, that your text alignment flows nicely.
Important tip: Body paragraph text should always be aligned to the left! I often see DIY designers aligning their text in the center, just don’t do it! It’s hard to read and unprofessional, and I know you think it looks better, but I swear, it doesn’t!
7. Hierarchy
Use your headings and colors wisely to create hierarchy in your design.
You want to use hierarchy to draw attention to things that are more important and take your visitors on a strategic journey through your website.
For example, your headings should be larger than your body text to draw people in and through your paragraph.
What section of text do you automatically become more attracted to?
Hey there!
Welcome to my site
Here's a small paragraph of text, to show you an example of good hierarchy.
Hey there! Welcome to my site. Here's a small paragraph of text, to show you an example of bad hierarchy.
Use this strategy throughout your whole website. Keep in mind where you want your visitors to go and what you want them to read, and build your hierarchy from there!
Now go check your web design and make sure you're not making any of these mistakes! Let me know in the comments if you were making any of these common mistakes and how you fixed them. Thanks for reading!
Also, you better check this one out too!...
Related Post > The 7 Mistakes You're Probably Making On Your Website
