– Jennifer Lonoff Schiff, CIO.com
Want to ensure that visitors will exit your website almost immediately after landing there? Be sure to make it difficult for them to find what it is they are looking for. Want to get people to stay on your website longer and click on or buy stuff? Follow these 13 Web design tips.
1. Have a polished, professional logo–and link it to your home page. “Your logo is an important part of your brand, so make sure it’s located prominently on your site,” says Tiffany Monhollon, senior content marketing manager at online marketer ReachLocal. “Use a high-resolution image and feature it in the upper left corner of each of your pages,” she advises. “Also, it’s a good rule of thumb to link your logo back to your home page so that visitors can easily navigate to it.”
2.Use intuitive navigation. “Primary navigation options are typically deployed in a horizontal [menu] bar along the top of the site,” says Brian Gatti, a partner with Inspire Business Concepts, a digital marketing company. Provide “secondary navigation options underneath the primary navigation bar, or in the [left-hand] margin of the site, known as the sidebar.”
Why is intuitive navigation so important? “Confusing navigation layouts will result in people quitting a page rather than trying to figure it out,” Gatti says. So instead of putting links to less important pages–that detract from your call to action or primary information–at the top of your home or landing pages, put “less important links or pieces of information at the bottom of a page in the footer.”
3. Get rid of clutter. “It’s very easy these days to be visually overloaded with images, to the point where our brains stop processing information when confronted with too many options,” explains Paolo Vidali, senior digital marketing strategist, DragonSearch, a digital marketing agency.
To keep visitors on your site, “make sure pages do not have competing calls to action or visual clutter [e.g., lots of graphics, photographs or animated gifs] that would draw the visitor’s eyes away from the most important part of the page.” To further keep clutter down on landing pages, “consider limiting the links and options in the header and footer to narrow the focus even further,” he says.
Another tip to streamlining pages: “Keep paragraphs short,” says Ian Lurie, CEO of internet marketing company Portent, Inc. “On most Web sites, a single paragraph should be no more than five to six lines.”
4. Give visitors breathing room. “Create enough space between your paragraphs and images so the viewer has space to breathe and is more able to absorb all of the features your site and business have to offer,” says Hannah Spencer, graphic designer, Coalition Technologies, a Web design and online marketing agency.
“Controlling white space through layout will keep users focused on the content and control user flow,” adds Paul Novoa, founder and CEO at Novoa Media. “With a lot of visual competition taking place on the Web and on mobile, less is more. Controlling white space will improve user experience, increasing returns from the website.”
5. Use color strategically. Using “a mostly neutral color palette can help your site project an elegant, clean and modern appearance,” says Mark Hoben, the head of Web design at Egencia, the business travel division of the Expedia group, who is also a believer in using color wisely. “Employing small dashes of color–for headlines or key graphics–helps guide visitors to your most important content,” he explains.
It is also important to use a color palette that complements your logo and is consistent with your other marketing materials.
6. Invest in good, professional photography. “Website visitors can sniff out generic photos in a second–and they’ll be left with a generic impression of your company,” warns Zane Schwarzlose, community relations director, Fahrenheit Marketing. “Your company isn’t generic. So show your visitors that by investing in professional photography.”
“We strongly recommend that our clients invest in professional photography or purchase professional stock photos,” says Gatti. Good photographs “draw the eye, providing an emotional connection to the written content.” Poor quality photographs or photographs that have nothing to do with your message, on the other hand, are worse than having no photographs.
Bonus photography tip: “If you want to draw attention to a particular piece of content or a signup button, include a photo of a person looking at the content,” suggests Elie Khoury, cofounder and CEO of Woopra, which provides real-time customer and visitor analytics. “We are immediately drawn to faces of other humans–and when we see that face looking’ at something, our eyes are instinctively drawn there as well.”
7. Choose fonts that are easy to read across devices and browsers. When choosing fonts, keep in mind that people will be looking at your website not just on a laptop but on mobile devices. “Some large-scaled fonts may read well on [a computer monitor], but not scale or render well on mobile, losing the desired look and feel,” explains Novoa. So he advises using a universal font.
“Pick a typeface that can be easily read and size it no less than 11pt,” says Ethan Giffin, CEO, Groove Commerce. “If you’re using Web fonts, try to use no more than two font families in order to ensure fast load times,” he says.
“If you’re using a fixed-width design, use a font size that allows a maximum of 15 to 20 words per line,” adds Lurie. “If you’re using a fluid design, use a font size that allows 15 to 20 words per line at 900 to 1000 pixels wide.”
8. Design every page as a landing page. “Most websites have a design that assumes a user enters through the home page and navigates into the site,” says Michael Freeman, senior manager, Search & Analytics, ShoreTel, Inc., which provides hosted VoIP, cloud PBX service and business phone systems. “The reality, though, is that the majority of visits for most sites begin on a page that is not the home page,” he says. Therefore, you need to design the site in such a way that whatever page a visitor lands on, key information is there.
9. Respect the fold. When asked for their top design tips, almost all the Web designers CIO.com queried immediately said: Put your call to action in the upper portion of your website, along with your phone number and/or email address (if you want customers to call or email you). Regarding home page images, “I recommend going against full-width sliders and encourage sliders or set images that cover two-thirds of the width allowing for a contact form to be above the fold,” says Aaron Watters, director, Leadhub, a website design and SEO company.
10. Use responsive design–that automatically adapts to how the site is being viewed. “Rather than developing a site for each device, a responsive site is designed to adapt to the browser size,” making for a better user experience, says Jayme Pretzloff, online marketing director, Wixon Jewelers. And a better user experience typically translates into more time spent on your site and higher conversion rates.
11. Forget Flash. “Thanks in part to the ongoing dispute between Adobe and Apple, the days of Flash as an Internet standard are slowly coming to a close, so why stay on the bandwagon when there are other options that are much more Web and user friendly?” asks Darrell Benatar, CEO of UserTesting.com. Instead, use HTML5, he says. “HTML5 is gaining more support on the Web, with search-engine friendly text and the ability to function on many of the popular mobile operating systems without requiring a plug-in. The same can’t be said for Flash.”
12. Don’t forget about buttons “The ‘Submit’ or ‘Send’ button at the bottom of a Web form can be the ugliest part of a website,” says Watters. So he encourages designers to make form submission buttons “so appealing visitors can’t help themselves. They just have to click it.” In addition, “when a visitor hovers over your submit button, it should change color, gradient, opacity or font treatment,” he says.
13. Test your design. “Whether you are trying different placements for a call to action or even testing different shades of a color, website optimization can make a big impact to your bottom line,” states Lindsey Marshall, production director, Red Clay Interactive, an Atlanta-based interactive marketing agency. “A user experience manager at Bing once remarked that Microsoft generated an additional $80 million in annual revenue just by testing and implementing a specific shade of blue!”
“Every design decision is just a hypothesis,” adds Mike Johnson, director of User Experience at The Nerdery, an interactive production company. “User testing, A/B testing and simple analytics can help you continuously improve your designs [by providing] feedback from real people.”
Jennifer Lonoff Schiff is a contributor to CIO.com and runs a marketing communications firm focused on helping organizations better interact with their customers, employees, and partners.
Follow everything from CIO.com on Twitter @CIOonline, on Facebook, and on Google +.
Continuing the Web Design Trends for 2013 – See part 1
Along with full screen typography, many of the most innovative websites are using extra-large photos for the backgrounds. In addition to pleasing the photography buffs out there, this design strategy is extremely eye-catching to any readers. Oversized photos can give the website a boost in marketing and can be a part of customized-branding methods.
In the race toward the future, many websites are being created with minimalistic designs. Marketers understand this strategy because it is one of the easiest ways to capture new users and readers. Once the clutter is cleared away from the page, the user can focus on the video, product or creative resource being sold on the site. Simplifying the design makes it easier to use the site and more intuitive for new users.
Although Web designers like to focus on beautifying the site, the key to success is finding more users and customers. To do this, social media tools are a must-have accessory. Social media badges can be placed on a website so users can easily share the website with their friends and family. Most social communities offer easy to share badges and can be pinned to any article in the layout. It makes it easier for users to share their favorite site and increases the likelihood that a website will go viral. Top social badges can be found for Pinterest, Stumble Upon, Google +1, Dzone and LinkedIn.
Although this design method has been around for several years, it has not made it into the mainstream until recently. Part of the upsurge in the popularity is due to Pinterest. Pinterest’s layout uses infinite scrolling within their website. As users search for something and scroll downward, new search entries continue to be added to the bottom of the page. Overall, infinite scrolling enhances the user’s experience and is extremely simple. It may not work for every website, but it can greatly improve the right pages.
Originally, the trend toward vertical layouts was inconsistently and inelegantly carried out. Over the last year, more websites are creating brilliant solutions that offer tasteful vertical navigation. Border textures and hover effects can improve the implantation of vertical navigation.
With the increase in mobile devices and smartphones, more websites have to adjust. To be successful, each website has to be optimized for a range of websites. The change in layouts over the last year is just the beginning. New design concepts, animation and navigation techniques will take hold as Web designers adjust to the needs of the modern user.
Although the year is only partially complete, a number of new Web design trends are already becoming popular. Many of the top ideas of 2012 are catching on and new ones are increasing in popularity for 2013. Many design trends reflect a growing tendency toward intuitive user interfaces, others just seem to be following the crowds. As we cross the midway point of 2013, It seemed an appropriate moment to take a look back over the start of this year, at some of the most interesting up and coming web design trends.
In addition to intuitive designs, retina support is a growing trend among Web design. Originally, Apple was the first organization to engineer the idea of retina support. They used it in the iPhone 4 and then quickly applied the idea to a range of other devices. Retina screens are two times as dense as most LCD screens. This means that double the pixels are squeezed with the same amount of space. For Web designers, the new retina screens mean that each image must have two versions. One must have double the pixels for a retina screen while another image is used for older devices. To easily do this, designers can use retina.js. The JavaScript library helps to display retina screen images automatically.
Another of the hottest design trends is to have demo videos or sliding images on the homepage. Using these informational screens work well for landing pages and startups to draw readers in. If the sliding images are done well, they can be appealing and profitable for the company. Images can be rotated or slide across the screen. The larger graphics and icons instantly catch the reader’s eye and provide a clean landing page for the user.
In order to have intuitive design for a website, the pages must have the best navigation. Readers have to be able to access important links easily and without too many distractions. One of the most recent developments in this area is the mobile navigation toggle menu. It works on smartphones and in web browsers to create a responsive layout. The menu can be designed in multiple formats. Links can slide down or content can be moved from the left or right side. As more designers use toggled navigation over the coming months, the possible formats will expand drastically.
Depending on the user, this design concept works extremely well. Oversized font can offer rich text effects with CSS3 properties. For this method to work the best, it must be placed in the appropriate layout. If this is done, it can make the page easier to navigate. Full screen typography can also be used with oversized images.
