Top 10 Web design tips

The last thing you want is for your visitors to land on your page and have no clue about how to find what they need. Without simple and clear navigation, that’s precisely what will happen. How you organize your website is as important as how it’s designed. Come up with clear categories that will structure your content and products. Your primary category pages are what should get a spot in your top navigation. These links will let your visitors know what other information they can find on your site. From there, you can add subpages to your main categories to cover additional information. Just remember, the more options you have, the more complicated things become.

How you organize your product pages is crucial to turning your passive website visitors into paying customers. After all, if your product pages don’t make it easy for customers to find items they want quickly, they’ll end up confusing and frustrating shoppers. Your visitors end up leaving instead of buying from your store. Make it easy for your potential customers to find your products by organizing them into specific categories. For instance, you can add a menu bar to your product pages to allow shoppers to look through product categories quickly. It’s also a great way to give a glimpse into your main products and offers. The Marks & Spencer website is a classic example of this. All the product categories are at the top menu header with the sub-menu shown below. You can also include a search bar feature to make it easier for shoppers to type in specific items and find them on your website quickly. What’s more, you can go a step beyond a search function by creating an app that streamlines finding products on your website for shoppers. You can include highly customized filters for users to find specific items based on the size, variation, and style (among others). Remember to run regular backups of your app codes, data, and other business-critical work items to ensure everything is secure. If you use Azure DevOps to build your app, use automated solutions such as Backrightup. Backrightup lets you automate your Azure DevOps backup so your important data, repositories, codes, etc., are safe and intact. This way, you avoid losing any data in case of accidental deletions or issues, such as server crashes and malware attacks. Regular backups also help you keep your app running properly and smoothly so it doesn’t crash and potentially ruin your customers’ user experience. With a highly customizable product search app, shoppers won’t have to go through all your catalogs to find the particular items they want. It improves the user experience, encouraging them to check out their items (and buy more).

In the real world, the environment gives us feedback. We speak, and others respond (usually). We scratch a cat, and it purrs or hisses (depending on its moodiness and how much we suck at cat scratching). All too often, digital interfaces fail to give much back, leaving us wondering whether we should reload the page, restart the laptop, or just fling it out the nearest available window. So give me that loading animation. Make that button pop and snap back when I tap it—but not too much. And give me a virtual high-five when I do something you and I agree is awesome. (Thanks, MailChimp.) Just make sure it all happens fast. Usability.gov defines any delay over 1 second as an interruption. Over 10 seconds, a disruption. And the latter’s generous: for about half the U.S. population, 3 seconds is enough to cause a bounce. If a page will load in under 5 seconds, don’t display a progress bar, as it’ll actually make the loading time seem longer. Instead, use a visualization that doesn’t imply progress, like Mac’s infamous “pinwheel of death.” But not that. If you do use progress bars on your site, consider trying some visual tricks to make the load seem faster.

It’s better to design your website to be mobile-friendly and adaptable to multiple screen display sizes from the get-go. After all, people prefer using their mobile devices to browse the web and shop online. If you don’t design your website to be mobile-friendly, shoppers are bound to have poor user experiences with your site, which can seriously hurt your conversions and sales. Also, mobile-friendliness is one of Google’s ranking factors. This means the more your website meets Google’s requirements, the better your web page’s chances of ranking higher in search results. Follow these quick tips when designing a mobile-friendly website:

• Avoid using dual websites. Instead of creating separate websites for desktop and mobile, use one URL for both to improve your search traffic.
• Ensure proper font and button sizes. Ensure your texts and buttons are easy for mobile users to see, read, and click on smaller display screens. Keep your font sizes to a minimum of 14PX (11 points for iOs) and your buttons at 44PX by 44 PX. Use one typeface and utilize white space for better readability.
• Don’t use Flash. Flash doesn’t work on most mobile devices and drains resources so you’re better off staying away from it. However, remember to make your image, CSS, and JavaScript files available to Google via the Google Search Console. Additionally, ensure you use high-resolution images and photos for your website. If shoppers have to squint or keep zooming in to see smaller details in your product photos, they’re bound to have a poor user experience — which won’t help convert them into buyers.

If using a technical term like “negative space” didn’t phase you, what do you think of “visual hierarchy”? It refers to using different visual elements like size or placement to influence which elements your user sees first, second or last. Featuring a big, bold title at the top of the webpage and tiny legal information at the bottom is a good example of using visual hierarchy to prioritize certain elements over others. Web design isn’t just about what you add to your website, but how you add it. Take CTA buttons; it’s not enough that they’re simply there; skilled designers place them deliberately and give them bold colors to stand out and suggestive text to encourage clicks. Elements like size, color, placement and negative space can all increase engagement—or decrease it. The Shearline homepage example above prioritizes three elements: the title, the image of the product and the call to action. Everything else—the navigation menu, the logo, the explanatory text—all seem secondary. This was a conscious choice from the designer, enacted through a smart use of size, color and placement. Review this chart from Orbit Media Studios to learn how to attract or repel attention. It’s an oversimplification of a complex topic, but it works well for understanding the bare basics. Do:

• Design for scannability. Most users don’t read every word of a page. They don’t even see everything on a page. Design for this behavior by making your top priorities hard to ignore.
• Test multiple alternatives. Because visual hierarchy can get complicated, sometimes trial-and-error works best. Create a few different versions (“mockups”) and show them to a new set of eyes for different opinions. Don’t:
• Use competing elements. Visual hierarchy is about order: first this, then that. Stagger how much attention each one of your essential elements receives so your users’ eyes easily follow a clear path.
• Go overboard. Making elements too big or featuring too much color contrast can have the opposite effect. Use only as many attention-grabbing tactics as you need—and no more.

They say “live today, who cares about tomorrow”. Well, they might be right but not when you are starting up your business. Always remember that you are investing your hard-earned money and time for a better tomorrow. You can get a website set up just about anywhere nowadays. Shoot, even the website this post is on offers FREE Premium WordPress themes for startups when they sign up for a WP Engine hosting account. Why would a web design company offer free templates?

Because they know that over 80% of start up customers who launch on a template come back for custom design to better server their business goals.

If you want to future proof your website, plan for the future not the ‘right now’. What does that mean? Well, in short, you shouldn’t necessarily opt for quick and cheap. You should absolutely take into consideration these factors:

• security
• site speed
• mobile responsiveness
• mobile design
• technology
• content
• ease of use (for both site user and site administrators)

Take a look at these 5 easy hacks to future proof your website.

A lot of these web design tips are general advice based on current and upcoming trends in the digital space. However, there’s no guarantee they’ll work for your site. You also shouldn’t necessarily feel obligated to use or forego certain design elements simply because it’s a current trend or now an unpopular style. A/B testing is a skill you can learn to find out whether or not your designs are working or not. Maybe you or your client want to use a slider or a busy sidebar and don’t want to give in to the conventional wisdom that states they’re outdated and ineffective. A/B testing is a great way to implement a new design and test its effectiveness yourself. Split testing is also an effective way to negotiate compromises between you and your clients, thanks to the evidence that can help back up your recommendations. Check out our guide on how to use A/B testing with WordPress if you want to learn more.