Just how important is your website design? When users were asked to describe why they didn’t trust a website, 94% of comments were directly related to the site’s design. A well-built website generates better customer traffic and an improved user interface leads to increased conversions.
Creativity is important, but there are some basic rules about design and user experience that will help you to grow your website. When creating or redesigning your site, keep the following suggestions in mind.
The digital design world has embraced simplicity, moving away from bells and whistles and focusing on the basics. From a user perspective, this has made websites easier to navigate for a more enjoyable experience. Incorporate these 8 design rules into your website to better engage your audience.
The simpler your website layout, the better. That doesn’t mean it has to be boring, but it does mean it should focus on the essentials. Clean, functional layouts make your site easier to load, navigate, and use on different platforms and devices.
Harry’s website places the most important information—their products—front and center. They include visuals with minimal text to make it easy to engage with the content.
If you want visitors to spend time on your site, you need to make it easy for them to get around. It may be tempting to do something creative with your navigation menus design, but the simplicity and intuitive information architecture are more important. Make your menus standard in appearance helps your readers feel comfortable as they move throughout your site.
Vogue has descriptive, prominent navigation menus to help you find and engage with the type of content you’re looking for.
What is it that you’d like site visitors to do? Buy products? Sign up for an email newsletter? Donate to a cause? Think about your calls to action. Design them in a way that makes them stand out to a visitor scanning your website. If you’re using buttons in your design, make sure the text is short and direct.
The World Wildlife Fund uses bright buttons alongside its navigation bar urging visitors to “donate” and “adopt,” along with strong calls to action throughout their content.
Use what you know about your visitors to minimize their options and focus their attention on your products. Show only the text and visual elements that you want them to take action on.
Websites for mobile apps—like Pocket—do a great job with this. They focus on explaining the app, include strong calls to action to install it. Less important content, like their About section and their blog are less prominent and are linked in the footer.
White space is simply empty space on a page. It doesn’t have to actually be white—it just has to contain no text or images. If done well, it can improve readability and remove clutter from your website design. White space can also help direct focus and attention. It provides a way to separate features and ideas so that visitors can discern exactly what you want them to see in a quick glance, rather than having to visually sort through a noisy and crowded layout.
Google is the ultimate example of utilizing whitespace. It couldn’t be cleaner—just a blank page with a logo and a search box.
Pick a color that will provide the foundation of your entire website design, and then choose a contrasting accent color for important buttons and other interface elements. You can learn more about choosing the right color palette for your brand.
Whole Foods Market uses green for their primary brand color, and the little pops of the secondary orange draw the eye toward featured calls to action.
Use an attractive type that is visually balanced and unique to make your website text clear and intriguing. Four top trending fonts are Brandon Grotesque, Museo Sans, Railway, and Playfair Display.
Belgian children’s clothing website Studio Aimee uses Brandon Grotesque for a clean, readable shopping experience.
Videos and images are more engaging than text alone—in fact, landing pages with videos can boost conversions by more than 80%. Use scalable images (SVG) to ensure a high-quality user experience on both desktop and mobile devices.
Nonprofit charity: water displays a video on their homepage, making it one of the first things you see when you visit their website for maximum impact.
You can have the most attractive website in the world, but if it’s hard to use, your visitors won’t convert to customers. These seven rules will ensure your audience has a smooth user experience.
Did you know that up to 70% of web traffic comes from a mobile device? That means there’s a good chance that someone visiting your site for the first time is using their smartphone. And if the mobile experience is negative, you’ve just lost a customer. Learn why and how to make your website more mobile-friendly.
Everlane’s mobile shopping experience is clean and easy to use. The design includes modular content so it’s responsive and translates well on mobile devices. The website also includes calls to download the shopping app without making you feel like you’re getting a lesser experience on the website.
The more pages someone has to navigate on your website to find what they’re looking for, the more likely that customer will leave your site out of frustration. In fact, for an average website, 40% of visitors will leave after only seeing one page!
Content shouldn’t be buried. Don’t make your visitors hunt around for what they came for. Your navigation should be well-organized and logical from a user perspective. It should also feel familiar, so your users don’t have a steep learning curve.
Tilde Inc. has a simple navigation bar on the top of its website, with the important points linked below with a brief explanation in the “What We Do” section. This makes it easy to find what you’re looking for.
Think about where you can place buttons throughout your site to make the important things easier for visitors to find. If you’re an ecommerce site, having buttons that say “Shop Now” will have much more impact than a simple navigation link; if you’re a nonprofit, a “Donate” button alongside your navigation bar will make donating a breeze for visitors.
Square has a simple call to action that encourages business owners to start selling. Their CTA button reads “Start a Square account.” It doesn’t get much easier than that.
Thinking about how visitors will search your site and how results will be displayed is equally important. The search experience should mirror your navigation experience with how results are organized. Incorporating features like auto-complete will make searching easier from a user perspective as well.
Zappos has a smart searching tool, which is highly accurate and also updates the filters on the left side based on search terms.
When dealing with content-heavy areas on your site, break it up with headers. Whether it’s an article or product description, headers give your content structure and make it easy to scan.
WebMD does an effective job of breaking their content into digestible chunks with plenty of section headers so you can find the information you’re looking for.
The more jargon and marketing-speak users have to decipher when they visit your website, the less likely they are to engage with your brand. A friendly, conversational tone will make it easier for visitors to read and understand your content, as well as navigate your site.
Zipcar makes their service easier to understand—and their site easier to navigate—with their easygoing brand voice.
If your visitors purchase a product from you, subscribe to a newsletter, or even share your content, a good practice is to display a confirmation screen that shows them their action went through successfully. It doesn’t hurt to use that screen to thank them, either.
TheSkimm congratulates and welcomes you after you sign up for their newsletter, with a prompt to share on social media.
There are always kinks you’ll need to work out when launching—or relaunching—a website. It’s important to take the time to test your site and gather feedback before it goes live.
If you have the resources, hire a quality assurance team so they can test all aspects of your site. If you can’t hire people specifically for the QA role, then have people both internal and external to your company test your website prior to launch. They can click all links, fill out all forms, and try all services. Basically, if there’s something to do on the website, they should do it. That way, you can fix any bugs before you launch.
Invite a select group of beta testers to provide feedback on elements like navigation, design, and major user flows. You may not make changes based on all of the feedback you received before launch, but you may want to keep suggestions in mind for changes down the road.