Starting your own online business can be tricky when your bank account makes you want to cry; yet looking cheap is not an option.
Services such as social media schedulers, email marketing and web hosting can be pretty affordable or, if you know where to look, even free! And your audience won’t be able to tell how much you’re paying for any of them anyways. But when it comes to the visual aspects of your business that need to be built from the ground up, the difference between cheap and expensive can be spotted from miles away. That is the case of website design. Now, I don’t believe that affordable equals amateur any more than I believe expensive equals professional (or that fat-free equals “I can’t tell the difference!”) but, for the sake of this post, we’ll assume it does.
When it comes to web design on a budget, many people decide to take the DIY route and craft themselves and their business a website. However, more often than not, the result is not good enough to portray professionalism, trust or to provide their audience with the best user experience possible.
There are many aspects to consider when designing a website, and simply throwing in some pretty images and text together is not enough. But don’t get me wrong; I’m all about doing it yourself! In fact, I truly believe anyone can create a professional-looking website if they have the right tools and a basic knowledge on what works best both visually and functionally.
So, whether you’re in the process of creating your own site or looking to update your current one, these are the key elements you should keep in mind to make your DIY design look mighty fine:
1. Using the right platform
When you’re not a web designer, the best way to go is with a platform that allows you to customize everything you need with ease and without code. And even when lots of people vouch for WordPress, I rather stick to website builders like Squarespace.
I don’t want to get into the differences between both platforms here, but in general Squarespace is simpler, user-friendly, offers great templates, and it doesn’t overwhelm you with plugins, backups and updates. It’s perfect for beginners and anyone looking for a hassle-free solution. Plus, you’ll still be able to get your weekly Iced Latte thanks to their affordable hosting plans.
2. Uncluttered design
One of the main things that separates a cheap design from a good one, is the appropriate use of white space. White space, or negative space, doesn’t refer to the color of the background (it doesn’t have to be white), it just means that there’s enough breathing room between the elements of a page that you can easily rest your eyes between them and differentiate amongst sections without problems.
When it comes to designing your site, always remember that less is more. One way of knowing if you have too much on a page is to evaluate how many elements (images, text, graphics) absolutely need to be there to make your point, and remove all the others that are extra. And yes, that picture of your cat on your about page is totally necessary.
Between these two layouts, the left one represents a page where all the information is crammed and, even when it’s readable, it can easily overwhelm the viewer. On the contrary, the right side has a lot more breathing room, it’s easier to read and looks much more professional because you can tell that all the elements in it have a purpose.
3. Clear CTAs
CTAs means “Call to action”, and it refers to any action you want your viewers to take when reading a page on your site. In general, every page should have a main CTA in order to point your readers to where you want them to go. Whether it’s to download a file, make a purchase, sign up for your newsletter, read a blog post or send you an email, there should always be at least one call to action on every single page.
Think about it this way, anyone entering your website for the first time has no clue what to do or what they can do. You need to guide them and show them the options they have, without overwhelming them, through clear CTAs.
Why the emphasis on “clear”? Because any option you give your audience should be a no-brainer, they should not spend more than a couple of seconds understanding what the result of clicking on a button or link will be.
If you want your viewers to sign up to your newsletter, don’t just place a button saying “Subscribe” under your blog post or page content, instead change the caption to “Subscribe to my newsletter” so people know what they’ll be subscribing to, and add a short phrase near the button explaining what they’ll get by doing it, something like: “Don’t miss out on the latest tips to help you improve your writing”.
4. Clear Menu
Just like you don’t want to overwhelm your readers with a cluttered design or too many CTAs, you don’t want to do it with your menu items either. The menu on your header should provide quick links to your website’s pages, but it doesn’t have to include all of them. In fact if you have too many links, it’s best to move a couple to your footer menu. This is a great way to differentiate your main content pages (the ones with the meat and potatoes) from the rest of them.
You could place your Home, Blog, Services, Products and Resources pages on the header and leave About Me, Contact and Legal only at the footer.
5. Font hierarchy
There’s nothing worse than wasting time so, in order to make your audience’s experience better, you should always organize your content by using font hierarchy. This way, even if they skim through your content they’ll be able to tell what the page is all about and if the information they’re looking for is in there.
Size and color are your best friends when it comes to highlighting titles and subtitles from the rest of the content. However, don’t go overboard either. Consistently using 3 different headers and one paragraph font should be enough to achieve the organization level you need.
If applicable, you can also create an emphasized font style for quotes, tweets or any other additional content that is meant to stand out. Just remember to keep it consistent along your entire website.
If you’re writing a blog post and want to include a quote in the middle of your text, having clearly defined titles, subtitles and content can do wonders for an easy read. Otherwise, your audience will have a hard time telling what’s what. Just by adding different styles to separate your headings from your text and quote, you can have an easily skimmable blog post.
6. Using color effectively
There’s a difference between adding your brand colors to your website and using them effectively. The former is what happens when you simply want all your branding visuals to match, while the later involves creating a strategy.
Within your palette, you should choose one color to be your action color. It has to be easily differentiated from the content and the headers, and it should be used for links and buttons all over your site.
The idea is to guide your readers along a page and make it easy for them to know where they should click. It’s not enough that you tell them “Click here”, they need to visually be attracted to do so.
Even when it’s the same text on both sides, and I didn’t change anything else besides the color, you can see a dramatic difference from the left, where you don’t have an action color, to the right, where you do. The color quickly attracts your eye, and that’s exactly why you want to be strategic about where you incorporate it. The more sparingly you use it on your page, the more attention-grabbing it will be when you do.
7. Short copy sections
It’s pretty simple: if you want your viewers to actually read your content, you need to make it readable. Period. Big chunks of text without any sort of spacing, titles, subtitles or bullet points is a huge no-no.
On your homepage and contact page is best to have short, concrete sections of clear information, rather than large unnecessary blocks with your whole business story. The homepage is meant to give your readers an overview of what your site is about and what you offer, content or product-wise; and your contact page is there to share the ways anyone can get in touch with you. That’s it.
Your about me page, on the other hand, can handle a bit more of text. However, if you’re planning on telling your whole life story, at least separate it in smaller paragraphs with subtitles to help your readers skim through it more easily.
The same applies to your service description and blog posts.
To help you get rid of too much text, you can use the same principle as with the uncluttered design: leave only what’s absolutely necessary and delete the rest.
8. Using images effectively
With so many free stock photos out there, it’s pretty difficult to have lousy imagery on your site. However, the trick is to know how to use them effectively to make the most out of them and benefit your design.
Speaking specifically of text-layered images, when it comes to choosing a picture you should always consider how busy they look. If they have too much detail or too many elements, it might be best to apply a color overlay on them to make the text pop and be more readable. If they have a big unicolor or fairly simple area, you can take advantage of that space by placing your text on it without any additional overlays. And, if you’re using pictures with people’s faces on it, keep in mind that we naturally tend to look at what others are looking at, because apparently we’re nosy like that. So, if your image has someone looking to the right, try to place that picture in a way that the person “looks” at your content.
Speaking of the latter, here you can see how even when both layouts look perfectly fine, the one on the right makes you look at the content she’s “seeing” more easily than when she’s looking away.
Photo credit: Pexels
9. Content availability
By content availability, I’m talking about how easy it is for anyone to find your content, particularly your blog content. Both new visitors and repeated readers, are probably looking for something specific in your website. So, in order to help them out, you should try your best to make it easy for them to find it. You can achieve this by having a search bar either on your sidebar (if you have one), on your header or on the footer section.
If you have a blog page, you should consider having a blog post list as well instead of only full blog posts arranged on top of another. Having blog posts stacked makes it more tedious for your audience to find the content they’re looking for, because the have to scroll all the way down until they find the information they want. A list, will allow readers to see all your blog content at a glance through small excerpts or just the main thumbnails.
Not long ago, responsive websites were simply an option for many website owners. Today, is a must. Having a responsive website means that your content will be optimally displayed in any device. Luckily, many website builders today consider it an essential part of the design, and offer you alternative layouts for smaller screens automatically.
However, even when the theme you might be working with calls itself responsive, it may not be altering part of your content that could look better if displayed differently. A quick way to find out how your website looks on different devices is to open your URL on Google Chrome, click at the top menu View > Developer > Developer Tools and then click on the small devices icon located just below the frame of the pop-up window (don’t close the pop up!).
Next, you can select from the top dropdown menu, where it says “Responsive”, the device or screen size you’d like to see your site in, and browse around to have an idea of how your visitors might be seeing your pages.
A couple of things you can look out for are:
- Text alignment
- Button alignment
- Elements that overflow outside the frame
- Spacing between sections
If you find any issues with your elements, you can try moving things around on your layout to make them look better, add or remove spacing and, if you want to take it a step further, add simple code snippets to help you fix those pesky issues that degrade your website’s optimal look.
Creating a website on your own is simple enough, but making it look good is the real challenge. Hopefully, by applying these tips to your website you’ll be able to provide your audience an amazing experience, while letting your business professionalism shine through your design.
If you’re interested in learning more about doing your own website on Squarespace, jump on the waiting list and get updates on future live workshops and web design courses.