You have roughly seven seconds to convince a visitor it’s worth the time to stay on your website. If you have a problem with bouncing traffic, whether you like it or not, it’s probably time to take a cold, hard look at your website since SOMETHING is making your visitors head for the hills immediately after landing there.
Is it your copy? Is it your graphics? Is it the overall design? Is it all three? There’s only one way to find out.
Step back and take a good look so you can tip the scales in your favor again. After all, do you REALLY want to keep losing out to your competitors? If not, keep reading.
Web Design Basics
The uncomfortable truth is your website is a direct reflection of the quality of the business, service, or individual it represents. The basic design of your site can immediately tip a visitor off about whether an amateur created it or a professional.
The fonts, the design of the content layout, and even color schemes can scream that your brother-in-law, who is well-versed in creating Blogspot sites, created your most recent website. If you want to up your professional presence in the digital space, here are some basic best practices you want to focus on.
Keep layouts simple
You don’t need to jam as many columns or frames into a page as possible. It looks clunky and unappealing. A simple layout is more likely to get a response and not require visitors to scroll to the sides to see the entire page. A good basic design to start from is a three-column layout. It’s easy for visitors to scan and quickly find what they’re looking for on your site.
Embrace easy to read fonts
One of the hallmarks of a professional-looking site is that it’s easy to understand. Once you determine a good color for the text, look at your fonts and font sizes. Check your site on different devices. It’s important to use a font that will display the same for the most commonly used platforms.
Your visitors should enjoy an experience viewing your site through mobile devices as much as on a desktop. A good font to use is any serif font (the ones with the little tags on the ends of the letters) for larger text such as headlines. Sans serif fonts (without the little tags) are some of the easiest to read fonts on any display.
Use appropriate graphics sizes
While it’s important to use the best graphics that fit your content, you should also keep them small for fast, clean loading. Remember, the larger the image, the slower the page.
Focus on brand consistency
Branding is the hallmark of a professional website. Make sure your logo and tagline are clearly visible on every page. This is the basic foundational step of familiarizing visitors with both your brand and your message.
Include clear terms
Make sure your site includes a privacy policy, terms of service, and also any other special notices you feel your visitors might care about. Be as transparent as possible with what your site does with visitor information, even if you don’t do anything at all.
Elements of Good Web Design
There are very basic factors that all professional-looking websites have in common, and it’s a lot more than just having a clean design and good graphics. Using best design practices will result in a site built to please both visitors and search engines.
Focus on navigation
When you’re designing navigation, keep it clean and straightforward. The main thing your users will want from your navigation is a framework that tells them where they are and gives them an easy option to go back to the homepage. Put your navigation menu in a common place such as near the top or the sidebar.
Share contact information
The more ways you show users they can get in touch with you, the more comfort they’ll have in interacting with your company or organization online. Add your physical address if you have one connected with the site. Also, it’s convenient for your visitors to have a contact form to fill out.
Maximize footer information
A footer is a great place to put links and other helpful information for users. You can also use the footer for design elements that may not have a place in the layout higher up on the page. Many companies put their physical contact information in a part of the footer.
Use appropriate styles for buttons
Your users’ eyes will quickly learn the design of your site’s buttons and look for those as the action item in your design. Make sure any buttons used for navigation are consistent throughout your site.
Tell who you are
Make your “About” page informational and engaging. Show enthusiasm. Don’t just give the dry facts. This is the place to tell who you are and what the mission of your company or organization is. Images of the people involved will give the page, even more, personality.
Embrace white space
White space doesn’t have to be white. It’s essentially just basic “room to breathe” on a page. It’s an area where there’s no text, images, or graphics. You find this often in professionally developed flat-design sites.
Amazon’s site is a good example of how this works. Each page has huge amounts of information to convey, yet none of it is overwhelming because of the smart use of white space.
Make it easy to find information
Returning visitors might want to locate the information they saw before. Make it easy for them with a search feature. Use a seamless search box that melds into your design. The most common location is in the site’s upper right corner.
Web Design Best Practices for a Great Website
It’s no secret that design elements have evolved over the years, but one thing is certain: You can’t go wrong with a site design that’s simple. Professional Web design is not just about sliders or whatever the latest bells and whistles are. It boils down to ease of navigation and responsiveness of both the site and the elements on the site.
Focus on page consistency
Your layout should stay the same throughout your site. Don’t whip surprise page layouts on your users. It’s okay to go from three columns to one single column on call-to-action pages but make sure the navigation, footers, and other elements remain consistent, so users never feel “stuck” on a page.
Balance the use of color
It’s as important to adjust the colors in your layout as it is to choose a complementary palette of colors.
Organize your content into categories
Categories are great for both humans and search engines. Stay as organized as possible with your content. It’s also a good idea to place a navigation element in the sidebar so a visitor who only wants to see a particular category of products or information can do so with a single click.
Ensure your site is accessible for all
Make sure you optimize your website for all your visitors. It should support features for people with disabilities, as well as have features displaying the latest high-resolution images.
Spring for the SSL certificate
If you collect payment information, get an SSL certificate for your site. It’s a short process and helps to protect your visitors when they make a transaction on your site. It’s both unprofessional and definitely not within the realm of good Web practices to ask someone to input their credit card information in a non-secure environment.
Web Design Trends
Because there are so many different platforms to build a website, the spectrum of designs has really opened up. Flat and semi-flat designs are becoming more common on professional sites, as well as bootstrapped sites since these types of designs help to meet the increasing demand for responsive websites that adjust to whatever type of device the site displays on.
Here are a few key things to keep in mind:
Flat design loads fastest of all
Many major companies have switched to flat and semi-flat designs since they load faster. Flat design is exactly what it sounds like It appears flat, without any three-dimensional features.
Other hallmarks of flat design are crisp edges with minimal-to-no shadowing. A fast-loading site will not only look more professional, but it will also keep your visitors on the page until they complete the desired action.
Make sure your site is responsive
This is something you cannot overlook. When determining where a website ranks, Google now penalizes sites that are not mobile-friendly. So, if you want to rank well, you need to go mobile. It’s imperative that you ensure the design you use displays appropriately, depending on the device used to access your site.
Use cards for navigation
Have you seen Pinterest? It bases its pins on a design element commonly called cards. Using cards with high-quality images in your navigation creates a professional, clean page that’s engaging to visitors.
This is especially attractive for product or service pages, or when you have a lot of articles or content you want to organize. Use engaging images, and you’ll have room on the card to write a title and maybe even a little text to entice a click.
Craft winning content
A professional site doesn’t mince content. Instead, every word on the page is there for a purpose. There’s no filler. There’s no fluff. And there’s certainly NO keyword stuffing! A professional-looking site can transfer reams of information without information overload. Take stock of every block of content on your site. Make sure it serves a purpose.
Use hero images to their fullest
A professional-looking site will tell a visitor in no uncertain terms what the site is actually about. One way to easily accomplish this is by using hero images above the fold with text overlays that explain the very basics of what your site is about.
Don’t forget video
Videos are quickly becoming the hero image 2.0. Using a video above the fold where you’d traditionally place a star image is an excellent way to immediately capture a visitor’s attention—and keep it.
According to a study by Psychology Today, the human brain can process information from a video 60,000 times faster than reading a text. The main thing when incorporating a video on your home page is to make it look as though it’s a seamless part of the rest of the site design. If you’re looking for impact, as well as a lasting way to make a terrific first impression, use video.
Embrace the power of video
A compelling study by Inc. magazine found that more than 90 percent of B2B customers used online video for making purchase decisions. Adding video to interior Web pages and blog posts about products and services is a strategic methodology that flat-out works. But don’t stop there. Add the capability for visitors to share these videos with others for an extra kick.
Common Web Design Mistakes
You might have paid top dollar for a professional to develop your website. Unfortunately, a few common mistakes in design can drag the entire look of your website down. Here are a few major offenders to keep in mind.
Information overload on pages
Your home page doesn’t have to tell every single thing you do all at once. In fact, a site with every inch of screen space jammed with images and text is the hallmark of an amateur. If you serve up too much information, it becomes overwhelming, and the likelihood is that your visitor will leave.
It’s sad to say that many product pages fall victim to this. A huge product page takes ages to load, and visitors will leave if they’ve waited more than a few seconds for the information to appear. A study released by Shopify found that stores with a ton of products commanded visitor attention for a longer period, but that actual sales were substantially less. Fast-loading pages organized by category are far more useful for letting your site’s visitors find the information they want than pages filled to the brim with content.
Frustrating navigation
Have you ever been on a site where the contact information or social media links were nearly invisible because they were hidden in the bottom corner of a page? A professional-looking site encourages engagement and is transparent in privacy policies, terms of service, and contact methods. It’s imperative that you take this into consideration when you’re setting up the menus for your site.
One way to incorporate clean navigation when you have a lot of options on a menu is to use a hamburger menu. This type of menu stacks until clicked, and then it opens to reveal the navigation options. It’s extremely clean, fast-loading, and easy to use for visitors across a variety of different devices, including desktop computers, tablets, and mobile phones.
Too much – or too little – color
Remember the early days of Web design when it was common to run across a website that used every hex code color there was? Once that fad faded away, color schemes became the norm to refer to, and some of those weren’t very well-thought-out, either. For example, for a while, it was trendy to design pages with light gray text on white backgrounds.
Then it became apparent that this wasn’t a good design since it was impossibly difficult to read on a desktop monitor and even worse on a mobile screen. Use a limited palette of hex colors and use one to three contrasting combinations for a crisp look that’s classy, not trashy.
Low-quality images
One thing that’s equal among all professional-looking websites is that they use high-quality images. It’s important that your images stay sharp and not become pixelated. Solid-colored and white backgrounds tend to showcase most products in their best light. If you choose to use hero images, make sure that you’re using a higher-resolution image appropriate for the space the image will fill.
A ghost blog
A professional site is up-to-date. If you decide to have a blog, you need to update it regularly. The content should focus on your products and things that affect your industry. You can also promote your mailing list and special offers here, as well.
If you find that making the time to update your blog regularly is a challenge, use talent within your company or outsource the task. A blog that suddenly goes silent looks very unprofessional.
Pop-ups
Avoid pop-ups, if you can. Most people don’t like them. In fact, many find them downright annoying. It’s better to give visitors a choice to click an ad or join an email list in a design element in a sidebar instead of jamming a pop-up box in front of their faces on page load.
Banner ads
If your site has banner ads, it’s time to put them away. A study by Solve Media found that Web surfers were more likely to survive a plane crash or win a prize in the Mega Millions lottery than click a banner ad. The more banner ads your site has, the less professional the site looks.
Remember, your website is the first way many people will “meet” you, and get to know and trust your brand. Make sure your site uses the best practices: easy navigation, seamless ads and videos, high-quality images, and unique content.
Keep your site updated and don’t get too attached to a single design idea. As technology rolls forward for Web design elements, move with it to stay ahead of the curve so that your website is the one used as an example of getting Web design right.
What’s the most unprofessional element you have seen on a website?
Mark is a serial entrepreneur and editor of www.aawebmasters.com. He loves web design, online marketing, social media, and e-commerce. He enjoys working with a variety of web professionals on many projects.