Tips and tricks to help you
Grow your business online
Are you more of a visual learner?
Here's a video version of this post.
7 website design mistakes to avoid
When you’re just starting out, it may not make sense to shell out the big bucks for a custom, high-end website, but you do need a website.
This leaves you tasked to do it yourself. But just because you do it yourself that doesn’t mean that it has to look unprofessional.
So, what’s the difference between a pro-looking website and one that’s obviously from a newbie? What it all comes down to is paying attention to the details.
Let’s go over the most common mistakes DIYers make that you can fix on your site.
1. A static, boring layout
Have you noticed that some websites seem more fluid while others appear static and that the websites that flow are so much more engaging?
Well, there are a few things you can do to break out of the boring boxed look that you often see on the web.
Use fewer sections by combining the “like” ones together.
So if you have an introduction to your services section for example, rather than breaking these apart into individual sections, put them together to create fewer boxes on the page.
Vary the heights of the sections.
Using the same height for your sections down the page makes for a really boring look. You can easily make your page more interesting by changing up the section heights to add an element of surprise for your viewer. A good way to do this is to break up long sections of text into smaller sections, bullet points, or callouts and use them to create short sections in between longer ones.
Create less harsh transitions
When you use hard lines there are harsh breaks in between your page elements. You can make your page flow more easily with the use of background gradients or graphics and by adding in overlapping elements.
2. Lack of hierarchy
If everything on your page is the same size, nothing stands out. By making more important elements larger though, you’ll point your viewer’s eyes to specific areas to land on rather than just having them glaze over the whole site.
You can create a hierarchy with the images you use, with your headings, and call out text.
Another important thing to remember is to create a hierarchy with your calls to action.
You should have one main thing you want your dream client to do on each page, so make that call to action stand out the most. You can use a secondary style for your other calls to action so that they stand out, but not as much as your primary call to action does.
3. Random Styles
DIYers often get excited to use a lot of different features and styles on a single page, but this can be really distracting. It’s really true what they say that less equals more.
When you create a style, a background style, a section divider, or an animation for example, you wouldn’t want to use totally different styles all down the page. Instead, you want to repeat that same style once or twice to create a more unified and cohesive look on your page.
Just be careful not to overdo any specific effect. You want to create an element of surprise, but not so much that you overwhelm your viewer.
4. Poor use of color
If everything stands out on your page, then nothing stands out. So you can use your colors to create hierarchy on the page as well.
If all of your colors are bold, your eyes have nowhere to rest. This is why I teach my students how to create a 5 color palette for their brands that includes a really light neutral. By using a very light background color like this, you’re able to define an area, but in a more subtle way.
5. Overuse of image styles
Your images can help to create a unique atmosphere on your website. But if you aren’t consistent with the style of your photos, that atmosphere will appear mismatched. So make it your goal to find or to create a set of images that work together stylistically.
To do this, think about how you want your audience to feel?
Images that have less contrast and more muted colors create a more peaceful and serene atmosphere, while images with more contrast and brighter tones will evoke more energy and excitement.
6. Poor alignment and spacing
As humans, we are drawn to things that are balanced and when something isn’t aligned correctly, it jumps off the page in a bad way…it just looks wrong.
Paying attention to the details makes all the difference when it comes to website design. You want to be sure there’s equal spacing around elements and even margins above and below the sections.
You should also use an optimal line length for easier readability and to create white space and a less cluttered look.
Break up any long blocks of copy into short paragraphs (even ones that are just one sentence) or turn text into bullet points that are easier to read and digest at a glance.
In general, you should keep your text left-aligned for best readability, but when you have a small blurb, you can center-align it to create more symmetry on the page.
7. Too many fonts
The overuse of typefaces on a DIY website is a common issue. Using too many fonts will complicate your design and be distracting for your viewer.
You want your website to be easy to look at and easy to read. So choose 2-3 fonts (at the most) to use for your main headings, secondary headings, and your body copy.
If one of your brand fonts is a display-style or script font, only use it in short headings, never in your body copy.
Now if you’re working on improving the look of your website because you’re ready to level up your online business, then I have a great tool that I want to share with you.
It’s my free 30 Days to Launch Playbook that will let you know exactly what steps you need to take and in what order when launching or relaunching your business online.
Hi, I'm Alli McAuley.
I help passionate entrepreneurs, like you, create a standout brand and website so you can run a successful business online.
My ultimate goal?
To make change happen for other go-getters in pursuit of living their dream life by doing what they love.