10 Components Of A Professional Website (No Matter Your Budget)

10ComponentsofaProfessWebsite.jpg

There are many aspects to consider when designing a website, and simply throwing in some pretty images and text together is not enough. So, whether you’re in the process of creating your own site with a professional, navigating the DIY process or looking to update your current one, these are the key elements you should keep in mind to make your 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. That is why we recommend Squarespace - it 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. 
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.

bloguettes-stockthatrocks-cozy-14.jpg
10ComponentsQUOTE.jpg

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.

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.

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.

bloguettes-stockthatrocks-falloffice-61.jpg

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.

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.

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.

10. Responsiveness

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.

The Takeaway

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.


LEARN FROM THESE LADIES:

Elise Crawford