by Whether you’ve ventured into affiliate marketing or you’re selling your own merch, effective product placement is the key to effectively monetizing your content.
Flashing banners? Pop-ups? News tickers? These should not have a place in your authority site. Your goal is to attract readers, not turn them off! Rowdy elements interrupt their natural flow of reading and confuse them.
Keeping a minimalist design is the trend among webmasters today. The fewer distractions there are, the more your viewers could concentrate on your valuable content. To do this, you have to know the basic visual principles and data organization strategies.
Got zero experience with arts and design? You’ve come to the right place. Leave it to this guide to drop the best practices in authority site layouts. Let’s get started!
Contents
Design Principles
Playing with colors
Mixing and matching colors is fun, but you have to leave your own preferences out of your authority site.
It’s common for webmasters to have a bias for their favorite hues, and I am no exception. When I started a blog about Barcelona, I used different shades of blue. Why? Well, because I like blue! I didn’t really think much about it, and that was a big mistake. It was only when I sought expert advice through a page analysis that I realized this color is a thousand leagues away from my topic. And so I had to revamp that page and used lovely shades of red instead.
Meanwhile, it’s also a common mindset to make a niche site as colorful as possible. It would surely attract readers, right? Sorry to burst your bubble, but no. Other webmasters recommend a maximum of four, but I personally stick with two to three colors to keep things harmonious.
To help you find the right color combination, you can use Adobe Color CC. Once you upload your logo, Adobe can automatically analyze and search for the best shades for your niche site.
Selecting the right font
While many themes already have default fonts used, feel free to make some adjustments if you find it hard falling in love with its appeal. Just make sure to keep a minimalist design like you would with colors. You can use a catchy main font for your logo, graphics, and headings, then another simpler one for your content and navigation area.
Make sure that your chosen fonts are displayed consistently across varied devices. I recommend linking your theme with the Google Webfonts or the Easy Google Fonts WordPress plugin. Both of these tools have a wide collection you can choose from, and will also give you the peace of mind that your niche site will stay sleek and stunning on any screen.
Your job is to make sure your authority site’s content is viewer-friendly, so keep these tips in mind when managing your fonts:
- It’s best to ride on the trend of using large font sizes. By setting it to at least 16px, you can enhance your content’s readability and your texts will appear longer as well.
- Test your niche site on different devices to see if texts are neither compressed nor elongated.
- Never write sentences using capital letters throughout. These are incredibly difficult to read and distracting.
Designing your logo
Though it’s tempting to try out logos made purely with texts, but nothing beats a graphics and letters combo. It can convey your branding personality better, and also gives your authority site a professional look. Sticking with texts might give the impression of a lazy, uncreative webmaster.
If you really love to use texts for your branding, you can include a slogan under your main logo instead. Don’t go overboard though, and keep it within three to seven words.
FAQ: How can I create my logo?
You have two options: create your own or have a graphic designer make it for you.
When I was working with my first niche sites, I decided to trust my limited design abilities. I first looked for graphics around Pixabay, but ended up buying one on Adobe Stock after not finding anything I like. I then used the browser plugin ColorZilla to get the exact HEX color code of the vector and used it for adding the name of my site. Finally, I made its background transparent with Gimp so I could seamlessly add it to my header.
I’d probably get a failing mark if that was a project for the Academy of Arts, but it seemed sufficient for my humble website. Not bad for 30 minutes of work.
But if you want to leave the job to actual talented people, you can get a logo for just 5 USD on Fiverr. For a more professional output, you can also outsource through ______________.
FAQ: What size should my logo be?
Tweaking your logo’s size must start with selecting an appropriate header dimensions.
With a header graphics of up to 1000 pixels wide, I keep my logo at the height of 150 to 200 pixels. Don’t try to go for anything higher. Remember, your niche site’s selling point isn’t your branding but your content.
Don’t forget to optimize your logo’s file size too, so it won’t cause any damage to your loading time. To hit that sweet spot between compression and quality, I keep my logos between 20 to 50 kilobytes (KB).
You can use Gimp to set your logo with the right dimensions, then upload it with the EWWW Image Optimizer plugin to reduce its file size. To check if you’ve done it right, analyze your niche site with the Google PageSpeed Insights. It will then recommend an optimized image data which you can download.
Choosing your background
Depending on your topic, you can go for a solid color or an image for your authority site’s background.
Along with the trend for minimalist design, many webmasters opt to use flat colored backgrounds. I personally love this style. With the right combination, you can get effortlessly modern and sleek-looking pages! Inspirations for color combos can be found everywhere, and I always use my handly ColorZilla plugin whenever I find anything attractive.
But if you want to appeal to your viewers’ emotions, using a background picture option could be the better choice. Be careful though, since the image you choose can make or break your niche site’s layout design. While a beautiful photograph greatly enhances your visual impact, a terrible one could look so unprofessional and out of place.
When selecting a background picture, you might want to remember this design checklist:
- Be mindful of the picture’s tone. Excessively bright colors will be stressful for your readers’ eyes, so it’s best to play it safe by reducing images’ transparency on top of a white, light gray, or cream background.
- Set your background photo on a fixed mode, so it doesn’t distract viewers when they scroll.
- Never make a repetitive collage out of a photo. Tiling is such an outdated tactic and is just one of today’s deadly sins in layout design.
- Use images with a width of at least 2048 pixels so that your background can fill the screen completely even on large devices.
- Optimize your background photo’s file size, ideally between 150 to 300 KB.
- I highly recommend Pixabay as a great image portal. Since it’s under a public domain license, you can grab the images for free without crediting a photographer even if it’s for commercial use. If you can’t find what you want on this site, you can also turn to Fotolia, iStockphoto, 123RF, Indivstock, Crestock, GettyImages, or Sonar.
Creating a favicon
To make your website noticeable even when a reader has multiple tabs open, you should generate a favicon. Moreover, it will give your pages added appeal when added to browser bookmarks. Ideally, your favicon must be 32 x 32 pixels big. Considering its miniature size, avoid adding many details to your design since it would barely be recognizable anyway. Your niche site’s logo would usually be enough. I usually search for icons on Pixabay, or just buy some on Fotolia.
Data Organization
The Header
Your header will be the first to greet your readers, and the first to leave an impression as well. Ideally, this section must include the following elements:
Logo
To quickly give your viewers an idea regarding what your niche site is all about, your header must display an appropriate logo. The unspoken rule is to place it at the upper left side of your page, since internet users have been long accustomed to seeing it there.
You can easily embed your niche site’s logo through the WordPress backend, under the Design > Header settings.
Banner
Many webmasters make the most out of the upper right corner of the header, since it has the highest click rate in an entire page. It offers great visibility without leaving a distracting look.
The ideal size for a banner is around 468 x 60 pixels. You can use a simple text widget that is HTML or JavaScript friendly, or install plugins like AdRotate which can show several banners alternately. This tool also allows you to monitor your views and clicks.
I usually place several call to actions on my header, rarely using the space for advertising. Compared to text links, banner ads have much worse click rates. Up to 80% of internet users have an ad blocker installed, making it such a waste of precious space. If that’s not enough reason to stay away from banner advertising, it can also sabotage the loading speed of your authority site and your Google search rankings.
The Sidebar
If your goal is to have as minimal distractions as possible, you can opt to hide the sidebar. However, I personally consider this section a great opportunity to:
- offer the visitor further navigation options
- invite them to subscribe to my social media account and newsletter offers
- strengthen my internal links and enhance my Google search rankings
- advertise products
To realize these goals, here are the website elements you can embed on your sidebar:
Search box
For my bigger authority sites, I tend to install a search box at the topmost portion of my sidebar. Feel free not to do so if you’re only managing a micro-niche. This element can help users navigate through your constant stream of articles.
It’s also a great way to monitor what type of content your readers usually search for in your site. Using Google Analytics, simply go to Manage > Data View Settings > Site Search Settings.
Social media links and author boxes
I find the sidebar as the best section to draw traffic to my social media channels. Appropriate icons can easily be embedded if your using MH Themes or social media plugins. Quick reminder though: advertise your social media only if you regularly publish articles in there, or if you wish to build a community for your readers. Otherwise, don’t waste your time managing such accounts.
Similarly, it’s also smart to place an author box in your sidebar if you want to build more personal relationships with your audience.
Widgets for articles
Further down the sidebar, I often place widgets do display 5 to 10 suggested articles to entice readers to read more of my content. This tactic can also strengthen your internal linking, earning you a higher spot in the Google search rankings.
Best-selling products
The sidebar could also be a tool for testing the waters as an Amazon affiliate. I routinely display best-selling products on the upper portion of my page, then check my Amazon order reports to see if I’ve increased my commissions for such listings. Tools like Amazon Affiliate WordPress Plugin can help you embed widgets easily.
If you’re not into affiliate marketing, you can also use the sidebar to promote your own products.
Newsletter Option
Newsletter marketers also love placing registration and subscription forms on the sidebar. I usually depend on the tools GetResponse, Click Tip, CleverReach, Newsletter2Go, and Wevers when designing content.
FAQ: What doesn’t belong in the sidebar?
We’ve talked about the best elements to be placed in the sidebar, and now I have to warn you of the things that definitely don’t belong to this section:
- Calendar Widget – waste of time and space, nobody really uses it to navigate your page
- Latest Comments Widget – users are after relevance and seldom care about what the latest entries in your comment section are
- Meta Widget – helpful for your admin team, but it looks weird for your readers
- Keywords cloud – good for internal linking, but viewers rarely click on it
The Main Navigation
Your authority site’s main navigation must be reader-friendly, so take note of these tips when designing this section:
- Do not use the enlarge effect for your menus so it remains at the same size when the mouse pointer hovers on it. This will give your touchscreen users a headache.
- Keep menu labels short, keeping them at three words max.
- Limit the number of menu items you have. Anything above seven can be pretty excessive.
- Try to use your main keywords as labels for your menu items.
You can design your main navigation even if your content isn’t ready yet. Simply create empty dummy pages, categories, and posts which you can fill in later.
The Footer
I rarely put anything on the footer of my authority sites, since the sidebar is often enough for me. Besides, it’s not really a requirement to fill in all the sections of your pages.
You can still use the footer to reemphasize your social media icons and newsletter registration forms. It’s also the best section to place your compulsory menus for legal compliance, including access to your authority site’s privacy policy, contact form, and advertising disclaimers.
The Comment Section
Though it’s great for building engagement with your viewers, the comment section is actually an optional section. The need for one depends on your expertise and your goal. If you wanna build a community with your audience and you have a decent amount of knowledge to give quality responses, it’s great to add one for your niche articles. On the other hand, I don’t think it’s necessary to solicit comments for your product-related and legal compliance pages.
