Your website is going to be the cornerstone of your online business. It is very important, therefore, to spend some of your time structuring the design and layout elements, to make sure that they will work towards your goals.
In this lesson, we are going to cover the factors that you need to consider when planning the design of your site.
Keep the Monetization Aspect in Mind
This is a mistake that many individuals and companies alike make. They design their websites with aesthetic concerns exclusively, and over the long term they end up with mediocre results because the layout does not support an effective monetization plan.
It does not matter if you are going to hire a designer to create a custom design for your site or if you are just going to choose a free WordPress theme for your blog, keeping the monetization aspect in mind is vital.
Here are some examples of how you can approach the process:
1. Websites Monetized with CPM Ads.
CPM stands for cost-per-mille, and it is basically an advertising method where the advertiser pays a flat fee per 1,000 impressions of his ad.
If you plan to use CPM ads on your site, you need to make sure that your design will support the most common CPM ad formats. Those are the 728×90 leaderboard, the 300×250 rectangle, and the 160×600 wide skyscraper.
Most CPM ad networks also pay a premium rate for units that are displayed above the fold. If you want to maximize your revenues, therefore, you would need a layout that combines all those units above the fold.
2. Websites Monetized with CPC Ads
CPC stands for cost-per-click, and it is an advertising method where the advertiser pays a specific rate for every click that his ad will receive. Google AdSense is the most popular CPC ad network for web publishers.
If you plan to monetize your site with CPC ads, you need to know what units are the top performing ones, what positioning will yield the highest CTR (click-through rate), and then incorporate that into your design.
Google confirmed a while ago that the top performing units are the 336×280 large rectangle, the 300×250 rectangle, and the 120×600 wide skyscraper. Additionally, the top left corner of any website is usually the place where most visitors pay attention to, and therefore the spot that yields the highest CTRs.
3. Websites That Sell Products
If you are going to sell products or offer services on your website, you need to think about the whole sales funnel while designing your website. We cover the sales funnel concept in great detail in another lesson, but it basically refers to the different stages that people will need to pass in order to become your customers, from the moment where they are just unqualified prospects until they become loyal clients.
You need to evaluate what kind of information you want to present to first-time visitors and prospects, what visual elements would be important for them to see, what navigation options they should have and so on.
If you plan to use email marketing extensively, for example, it would be a good idea to reserve a prominent spot for your email subscription box.
Branding Through Design
Branding is a very important marketing activity in any crowded marketplace, and the Internet is no exception. Below you will find four points that you can use to make sure that your design will strengthen your brand.
1. Invest Money in a Good Logo
Just like medieval castles used to be identified by their flags, websites are identified by their logos. If you have limited money to spend on design, make sure that the logo is your top priority.
These days you can get good looking logos for as low as $100 (we are going to explain how in the Outsourcing Your Web Design lesson).
The logo is important because it is the first thing that visitors pay attention to, and usually it is also the image that will stick in their minds once they are gone.
Additionally, whenever people mention your website on articles or blog posts, there are good chances that they will include your logo, as an illustration meaning that your logo will characterize your site even on external places.
2. Use a Favicon
A favicon, short for favorite icon, is a 16×16 icon that is associated with a website and appears on the left side of the address bar on most browsers.
Having a favicon is important for two reasons: first of all, it gives you yet another place to display your logo (or the initials of your brand); secondly, favicons also appear in the bookmark section of most browsers, which will enable your visitors to recognize your website more easily among the hundreds of others.
Creating a favicon is also really easy. You just need to create a 16×16 image and save it with the .ico format (which is supported by most image editors). Name the file favicon.ico, and just upload it to the root of your server via FTP.
If you have an image ready to go but don’t know how to transform it into a favicon, you can try the online Favicon Generator tool.
3. Make the Design Match the Content
The overall look and feel of your design must match the content. If you plan to talk about stock markets, for example, it would be weird to have flowers on the background image.
Identify your core audience, and design around their perceptions and preferences. If you are going to write for professionals or older people, perhaps a traditional newspaper look would be a good choice.
If your readers will be younger, a more colorful design could be used. So on and so forth.
4. Be Consistent with the Colors
Make sure to choose a color palette and to stick with it. Colors and moods are very easy to be remembered, so use this in your favor.
You could use the main color on the links, on the favicon, on the footer and so on. If you are going to create special images or badges for the website, make them match the overall color pattern too.
Throughout the years, it is probable that you will need to give a face-lift to you design. That is fine, as long as you keep consistent with the color scheme, readers will still feel at home, and your brand will be kept intact.
You can get more information about color palettes and color suggestions on ColourLovers.com.
Usability Dos and Don’ts
Usability is a term used to denote the ease with which people can employ a particular tool. Web usability, therefore, refers to how easily web users can navigate around a particular web page.
If you are going to do business online, it is essential to keep the usability principles in mind while designing your site, else you will risk losing visitors even before they get a chance to read about your products or services.
1. Do have an about page: It does matter if you have a blog or a corporate website. Many visitors will want to know more about you or about your company. Having an about page is a way to satisfy the curiosity of those people while fostering a new relationship with them.
2. Do have a contact page: People can get frustrated when they have something to say about your site and can’t find a way to contact you. Secondly, not having a contact page will also be detrimental to you because you will miss most of the user feedback, and that is a valuable thing.
3. Do test your site across different browsers: At the very minimum, you want your site to work properly under the recent versions of Firefox, Internet Explorer, Opera, and Safari. If you are not hiring a web designer, you can easily test this yourself by going to BrowserShots.org.
4. Do make your content scannable. Internet users are natural multi-taskers. They browse the web while answering emails and working on spreadsheets and other applications. You need to make sure that they will be able to scan your site, therefore. Practically speaking, use headers, sub-headers, bullet points, bold typeface and so on.
5. Do let users search your website: There is a reason why search engines revolutionized the Internet. You probably guessed it: they made it very easy to find the information that people were looking for. Do not neglect this on your site.
6. Do make your hyperlinks visible: Hyperlinks are one of the most basic elements on web pages. Your visitors need to be able to recognize what is clickable and what is not. Make sure that your links have a contrasting color, and possibly make them underlined or bold.
7. Do use to use the ALT and TITLE attributes for images: Apart from having SEO benefits, the ALT and TITLE attributes for images will play an important role for blind users.
8. Do let the user start the audio or video. If you are going to use audio or video in your sites, make sure that the users themselves will need to click on “Play.” Websites that automatically start playing audio or video are annoying, and they can also be a problem for users that don’t have broadband connections.
1. Don’t neglect typography: If users can’t read your text easily, they will probably just go somewhere else. Make sure to use a clear and big enough font, therefore. For normal text, a sans-serif font like Arial or Verdana is probably your best choice. As for the font size, 11px is probably the minimum you should use. Also, remember to tweak the letter spacing, line height and so on.
2. Don’t use splash pages: Splash pages are introductory pages that just contain a brief description about the main site or some advertising. They are a bad idea because they add an extra step for people who want to access your site. Usually, those pages take a while to load, and they can’t be skipped, so users tend to hate them.
3. Don’t open new browser windows: Some webmasters think that if their external links open new browser windows, the visitors will never leave their sites. Wrong! This will just compromise the user experience on your site. Don’t worry about sending visitors away. If they liked your content or service, they will come back in the future.
4. Don’t overuse Flash: Flash will increase the load time of your website, it is not easily crawled by search engines, and it might also break your site for some visitors. Use it only if you must offer features that are not supported by static pages.
5. Don’t use overuse drop-down menus: Drop-down menus have the drawback of hiding navigation options and links from the user. They can be used to save space on specific situations, but give preference to normal menus if you can.
6. Don’t forget to add a descriptive anchor text to links: A common mistake among new webmasters is to use the “Click here” anchor text in most of their hyperlinks. This practice is not only bad for your SEO, but it might also confuse your visitors. Descriptive anchor texts, on the other hand, make the whole navigation more intuitive.
7. Don’t use horizontal scrolling: While vertical scrolling is fine, the same cannot be said about horizontal scrolling. The most used screen resolution nowadays is 1024 x 768 pixels, so make sure that your website will fit inside that.
8. Don’t use CAPTCHAS: Requiring your users to decipher those foggy numbers and letters is a bad idea. At best it will annoy them, and at worst it will cost you subscriptions and sales. If you are having spam and bot subscription problems, just improve your filters and anti-spam systems.
- Review the monetization plan for your website and determine what design and layout elements you need to achieve it.
- Think about how your website will reinforce your brand. If you are still looking for a web designer or for a template, it is a good idea to have these points at hand.
- Go through the usability dos and don’ts described in this lesson and make sure that your website checks for all of them.
Previous Lesson: HTML and CSS
Next Lesson: Outsourcing Your Web Design