Web Design Best Practices: A Helpful Guide

The post Web Design Best Practices: A Helpful Guide appeared first on HostGator Blog . Your website is the main face of your brand online. And building your website with best practices in mind will ensure your brand is putting its best foot forward. What people see when they visit it influences how they see your brand – online and off. And your web design largely defines how people experience your website. In short, web design is important. A bad web design can make your website layout look unprofessional, lose visitors’ trust, or make it difficult for them to find what they’re looking for (and therefore increasing instead of reducing your bounce rates ). A good website design shows your visitors you know what you’re doing and that it’s worth sticking around and interacting with your brand. Whether you’re working on a building new website or launching a re-design for the one you already have, there are a few important web design best practices you should honor. 1. Make Your Site Navigation Intuitive. Part of the design process is figuring out how to organize all the pages and what to include in your website menus . Getting your site organization right is both important for your website architecture and because it determines how easy navigating your website is for visitors. When deciding what pages, categories, and subcategories to include in your website’s menus, think first about your visitors. What will make it easier for the average visitor to find what they’re looking for? But also decide what the most important pages you want them to find are. Strive to organize your website in a way that will make it just as intuitive to a first-time visitor as it is to someone who knows it well.   2. Maintain a Consistent Style. If you visited a website that had a specific style on the home page but changed to something completely different on the next page you linked on, you’d find the change confusing. You might wonder if you were in the right place at all or had somehow navigated away from the site you thought you were on. You don’t want your site visitors to deal with that kind of confusion. Early on in the design process, sit down to develop a web design style guide . A style guide is a useful web design tool that will help you make sure all the pages on your website visually match well enough to let visitors know they’re all related to each other as well as to your brand. Make sure it includes: The website’s color scheme The logo design to use (and any variations on it in terms of size and shape you’ll use throughout the site) The font(s) The visual style (for example, do you want a minimalist feel? A playful one?) As you move into the particulars of designing the site, your style guide will be a helpful resource to keep you on track.   3. Design Each Page With a Goal in Mind. You’re not just designing a website for fun, you want it to accomplish something. And even if you have one overarching goal for the whole website, different web pages will need to have more specific goals. For example, an eCommerce website will primarily be designed to get people to make purchases. But in order to do that, some pages will be focused on getting people to visit the website to begin with, so they’ll have the primary goal of improving search engine optimization  or encouraging social shares. Other pages will more directly try to get people to click that “Buy” button. Clearly define the specific goal you want and  to accomplish this and make sure your design for it centers the goal.   4. Keep Each Page Focused. Another good web design tip that goes hand in hand with having a specific goal for each web page is to make sure your pages have a clear focus. Don’t try to do too much on any one webpage. You don’t want your web pages to look cluttered – that not only makes it look bad (which makes visitors more likely to click away), but it also presents too many distractions. How will people know the next best step to take, if your page is filled with so many links and images and text that they can’t figure out what to focus on? If you realize a particular web page has too much going on, split it up into multiple pages. Having separate pages that each has a more clear focus will be good for user experience and improve your opportunities to optimize for SEO.   5. Make Your Website Responsive. Mobile use now surpasses computer use ,  and every year the amount of time people spend on the web on mobile devices only grows. For website owners, that means your web design has to prioritize the mobile friendly experience . In most cases, the best option for creating a website that works well both on desktop and mobile devices is to build a responsive website. Responsive web design involves identifying breakpoints on the page where the page can be cut off and everything to the side moved below the breakpoint without the experience losing anything. That’s why mobile devices often display the same images and text, but with all elements of the page that appear alongside each other on the desktop showing up as stacked above and below each other. When designing each page on your website, you need to define at least three breakpoints to ensure your pages work well on each of the three main device sizes (although many designers prefer to use more). To a large degree, responsive websites have become common enough that most web design tools or designers you turn to will automatically employ best practices for responsive web design. As just one example, all of the templates offered with HostGator’s website builder are responsive, so even newbie website owners that don’t know anything about HTML or other coding languages can easily create a website that’s responsive. No matter what web design tools you use though, make sure you design your website with mobile in mind and use responsive design best practices.   6. Use Fluid Images. Fluid images  can aid in responsive web design and improve user experience on your website. You can make any of the images you use fluid with the right HTML code. If you add “max-width: 100%” to the source code for the image, you’re letting browsers know to resize the image to fit the page on every device. As an example, the full code would look like: This will keep your images from blocking text or other parts of the page on devices where they outgrow the section of the page you want them to stay contained within.   7. Make Clickable Elements Large Enough for Mobile. Another important component of good mobile-friendly website design is thinking about how people use their mobile devices. Clicking a small button on a computer is easy with the pointer that you have total control over and that can get very specific in what it points to. On a mobile device though, you have to be able to “click” that same button by touching it with your finger. If a link or button is too small, or worse, if you have different links located too close together, your users will struggle to get the links to work. When designing your web pages, make sure you test each one out on a small mobile device to confirm that all the links and buttons are easy to use.   8. Use Visual Hierarchies. This relates back to the goals you developed for each page of your website. Every page will include the most important information that you want people to notice, as well as additional information and design elements that matter, but aren’t of the same level of importance. In order to make sure that every visitor on every device sees the most important parts of the page before moving on, develop a visual hierarchy for each web page. The most important elements need to go at the top so they show up for everybody, and the other parts of the page can fall further down for the people interested enough to keep scrolling to see the whole page.   9. Make Your Site Accessible. Your visitors don’t all interact with the web in the same way. While that’s useful to consider in general, it’s an even more important point to remember when designing for people with different types of disabilities. An important web design tip to keep in mind during the design process is, therefore, to aim for inclusivity and accessibility. The Web Accessibility Initiative has outlined a number of Accessibility Principles for web designers to honor when creating their websites. The people who benefit most from accessible web design may be in the minority, but some are very likely in your target audience. By building an accessible website, you open your brand up to a wider audience and can build goodwill with a community that’s often underserved.   10. Stick to Design Standards. Have you ever been confused by a website that has its menu in a different spot than you’re used to? Or had a hard time closing a pop up that had the X in a weird spot? While web designers can often benefit from finding ways to be creative or unique, there are certain  web design standards that  define how people interact with websites and what they expect to find. When you move away from these norms, you risk creating confusion and a negative experience for your customers. A few of the main standards it’s a best practice to stick with include:     Putting your logo in the top left     Putting contact information in the top right     Having your main menu stretch across the top of the screen     Putting your value proposition high up on the home page     Including a CTA high up on the home page     Adding a search feature to the header When you think about it, everything on that list is probably exactly what you expect to see when you visit a website. If you’re going to venture away from these standards, make sure you think thoughtfully about why and make sure you’re not creating unnecessary confusion in the process.   A Good Design Makes for a Good Website Your web design determines how your website will look and feel to the people that visit it. Getting it right is paramount to the success of your website . Take some time to understand the main web design best practices and create a website that people will find useful and intuitive. Find the post on the HostGator Blog