Hello, I’m Ayush, and today we’re going to go over some web design best practices for your next website project. (upbeat music) The web design best practices that we’re going to go over today, will focus on the intersection between creating a beautiful website and one that serves the goals of your business. But before we get too far, I wanna let you know that there will be links to more resources in the video description, and remember to subscribe and ring that bell to get more notifications for future helpful content. All right, let’s get started.
According to Orbit media, you can group web design best practices into three basic categories of standards, brand standards, coding standards, accessibility standards. Websites that lack consistent branding can be stressful to interactwith and cause confusion. It should come as no surprisethat some 38% of visitors have said that they willstop engaging with a website if the content or layout is unattractive. Keeping in mind thatlooks aren’t everything, here’s some basic designprinciples to consider for creating a websitethat people want to use. Balance is the principleof design that prescribes how to effectivelydistribute visual elements.
In general, a balanced designlooks clean and natural and has good symmetry. You can incorporate balance in web design in terms of the page layout, centering text or otherelements across the page is an easy way to do so. In general, web pages arebuilt on a grid system, which creates a form of balance. You can use the CSS float property to position elements andbalance them across the page. Balance can be achieved in three ways. Number 1, symmetrical design. Arrange elements in an evenfashion across the webpage. For example, if you have aheavy element on the left, you should have a heavyelement on the right. As mentioned, centering is the easiestway to achieve symmetry, but it can sometimes comeacross as flat or boring to avoid making the page look monotonous, you can create balanceusing different elements, such as balancing a largeimage with a block of text. There’s also a type of symmetrical balance called radial balance or objects radiate from a central point. Number 2, asymmetrical design. This is more challenging to do well. Asymmetrical design involves the uneven distributionof elements on a page. For example, you may have alarge element in the center, which is balanced by asmaller one further away.
You may use other elements of design, such as color or texture tobalance an asymmetrical design. Number 3, off balance. These types of designssuggest motion and action, which can make people uncomfortable. If your website intendsto make people think then an off-balance design may be for you. Composition. The term compositionrefers to the placement and organization of design elements. The rule of thirds is commonly used to create balanced composition, especially with photos. Elements should be evenly spaced so that users can differentiatesections or blocks. You should also introduce negative space or the space between andaround the subject of an image.
Negative space can reduce visual noise, increase readability and bring balance. You can introduce a negative space by adding margins and paddingaround your design elements. Focal point. Create an area of focus whereyou want to draw attention. It should be the mostimportant part of your page and ideally each page should focus on just one major focal point. Color, color is an important design element when it comes to branding. Hopefully you’re cominginto the web design process with an understanding of the colors you want associated with your brand.
For web design specifically, it helps to start with amood board for your brand, choose a primary and secondary color and a lighter and darker hue for each. Limit, your use of color so that various accentsdon’t become an eyesore. Adobe color providesan excellent free tool for testing various combinations of colors to create a working palettefor website elements. Also when deciding on color, it’s important to considerthose who are color blind, which includes up to 4.5%of the world’s population.
There are three types of color blindness, total colorblindness, two color vision anddeficient color vision. So make sure that yourdesign is still usable in consideration of those who may not be able todifferentiate colors. Contrast, While choosing color, it’s important to be consciousof color ratios and contrast. Color contrast refers tothe difference in light between the foreground and background. Using sufficiently contrasting colors allows website visibilityto be easily distinguished. In general, use highcontrast color options like black text on a white background to make your site readable. The contrast ratio is thenumerical value assigned to the difference in contrastbetween page elements.
The world contentaccessibility guidelines 2.0 recommends a contrast ratioof to 1 four normal text. To help navigate using this ratio, make sure that when youdesign your website, you’re envisioning all audiences, including those with accessibility issues. It’s easier to do this versus planning to addressthese issues after the fact. Consider all aspects of the website, people will be interactingwith including headers, footers, menus, all of which need to beeasily visible to be usable. Typography. Site topography is anotherimportant branding consideration. While there are many different sources for finding potential fontsto use on your website, you want to first consider the options that will display consistentlyregardless of what fonts the end user has installedon their computer.
Google fonts offers a widevariety free website fonts that you can count on to display properly regardless of the users installed fonts. Make sure you includefonts in your mood board to see if they match your color aesthetic. If you’re having troublecoming up with combinations, Google fonts can suggest popular pairings. You can also use a site likefont pair to get suggestions. Try to limit the font weights you use as having to load too many files can contribute to slow page speed. On that note, considerhosting Google fonts locally to introduce additionalperformance benefits. When it comes to selectingtypographic elements based on web design best practices, as a general rule of thumb, use Sans Sara fonts for headingsand Sara fonts for content.
At a minimum don’t use decorativefonts for body content, as it will be difficult to read. Also don’t be temptedto use a wide variety of different fonts on your website. A good standard to live by isto use one font for your logo, another for your menus and headings and one more for the body content. on that note, try pairing fontsthat compliment each other, such as those from the same font family. Element hierarchy. Hierarchy refers to thearrangement of design elements that showcase relative importance. This is achieved by manipulating elements, such as visual contrast, size and placements to call attention. For instance, content must be broken down into logical blocks so that users can distinguishsections from each other.
You can do this throughthe use of content headers, which not only make iteasier for users to skip to the parts they want to read, but also break large amountsof texts into readable chunks so that screen readersare able to determine the context of each section. Best web design and formatting practices. According to research by orbit media, 80% of websites usesimilar design standards. Some of these design standards, our logo in the top left corner, main horizontal navigationacross the top of each page, value proposition high on the homepage located above the fold.
Note that most web designers will tell you that thereis no standard pixel height for browsers and technically no fold, but in general, important design elements should appear high on pages that are generally visibleto the majority of visitors even without scrolling. Here’s some web design best practices for common site elements. Images. We’re going to focus on the bare minimum of web design bestpractices for using images.
Adding ALT text. Images cannot be processedusing screen readers unless ALT text is used. Adding ALT text also contributes to SEO, but some people use ALT text only to supplement their keyword strategy. A more helpful use of ALT text would be to describe the image. Though you could certainlysatisfy search spiders and screen readers at the same time with the right approach. Using images featuring human faces tends to be more effective than other graphics or animations. It makes people more likelyto engage with the image as humans are drawn to what they perceive as real empathy and emotions. Use responsive images which grow or shrink depending on the browser size. This helps with both site speed and SEO. Website navigation. Users expect to be able to easily find the content they’re seeking on a site. Thus it is importantfor website navigation to be simple and straightforward. Website navigation is a general term that refers the internal linkarchitecture of a website. Don’t forget that themain purpose of navigation is to help the users easily find relevantcontent on your website. Your site’s internal link architecture forms the basis of your site map, which helps search engines,access your content easier.
It’s been found that havinga well-designed site, one where content is easy to find positively affects the website traffic you’ll get from search engines, along with a higher chance ofgetting Googles site links. Menu navigation. There are several aspects thatmake up website navigation but your top or main menushould be a primary focus as it will be one of the first things users interact with whenthey visit your website. There are different websitemenu design heuristics, but the most popular onesinclude navigational menu. Ideally, this is located at the front and center of a website. This might involve theuse of a dropdown menu if there are several categories. However dropdown menusare not recommended, especially when it comes to technical SEO, because they’re harder to crawl.
Additionally, it has beenfound that most people dislike dropdown menus. This is because the human eyeworks faster than the hand and so people find it annoying when they’ve already decidedwhat they want to click on and something else drops down, which can lead to adecrease in visits pages. Hamburger menu. Primarily used for amobile optimized design. A hamburger menu is usually located at the top left right side of the page. It appears as a square with three lines that can be expanded with a click. However many designersdespise the hamburger menu, which has inspired webdevelopers to consider new ways to make mobile websitenavigation fun and functional. Here are a few tips fordesigning navigation based on web design best practices.
Add a search bar to helpusers easily find content. This is especially useful for websites that have a lot ofcontent like a news blog. Design your site followingthe three click rule, which States that users should be able to find desired information with no more than three mouse clicks. This is because users actually prefer navigating through asite rather than looking through the search results when possible. Make your menu titles descriptivewith keywords in mind, which help users find items easier and also positively contributes to SEO.
The position of menu items matters. Put the most important pagestowards the front of your menu so that they’re easily accessible. Keep menu items at a maximum of seven, not only to keep site design clean, but also because having toomany menu item categories can potentially affect yourability to rank and search. Google may interpret theseseemingly unrelated categories as a sign that your website hasn’t decided on a specific niche.
Coding standards. With so many websites createdand consumed globally, there certainly is a need for a standardized setof coding principles. Some aspects of thesewebsite standards include, SEO. SEO can be used to increasethe number of visitors to your site organically. Since it’s too complicatedto adequately dig into SEO in this video, check out our SEO resources inthe video description below. Mobile responsiveness. Responsive design is concerned with creating a great user experience regardless of what device or browser is used to access your website. It is more important today than ever to design your website to be responsive. As more than 60% of internet users access the internetvia their mobile phones and half of E-commerce transactions are done through mobile platforms. Adding to that Google’snew search algorithm, also prioritizes mobile friendly sites.
Having a responsive site, not only helps usersnavigate your site easier, but also contributes to increaseengagement and conversions. Users recommend brands with whom they have a positive mobileresponsive site experience. And conversely would not onlystop purchasing from brands with a bad mobile site experience, but will also activelydiscourage others from doing so. However, despite thedemand for responsive site an estimated 91% of smallbusinesses don’t have one. They should as designing amobile responsive website certainly pays off. 62% of companies havereported an increase in sales after designing a mobile responsive site. Website security. Another important coding practice, creating secure programs andwebsites that users can trust with their sensitive personal information.
As a whole WordPress is generally secure, but it helps to take extra precautions to keep your websitesecure against attacks. Here are some of the bestwebsite security practices. Get an SSL certificate. Keep your login credentials secure. Keep the WordPress coreplugins and themes updated. Use a secure web host. Make sure to check out the linkin the description to learn about WordPress security practices. Page speed, about half of users expect a site to load in two seconds or less. And if it takes longer than that, 40% of people won’t hesitateto bounce from that page, likely never to return. Besides website visits, page speed is important as it also affects conversion and revenue. For every second of added page load speed, sales will drop by up to 27%.
If you want to keep it page speed fast, try to reduce the number of large images used in your design andmake sure to optimize them. If your website needs touse lots of large images, use plugins that includefunctionality for gzip compression, caching or image optimization such as WP Rocket and Imagify. They can help make your files smaller without sacrificing qualityso that they load faster. Consider the number of plugins and files you keep on your WordPress database since they can alsoaffect page load speed, clean up those that you don’t use. While you’re at it, keep your PHP WordPresscore and plugins updated to their latest versions. Accessibility standards. Accessibility refers to the practice of making your website usable by everyone. Besides those with disabilitiesthat affect access.
W3 says that website accessibilityis also beneficial for those using devices with small screens, different input modes, etc. The elderly people withtemporary disabilities, including a broken limb, lostglasses or medical condition. Users with situational limitations such as those accessing the internet on devices in bright sunlight or in an environment wherethey can not listen to audio such as public transportation. Or individuals with slowinternet connection. Accessibility should be everyone’s concern as we’re all affected by it in some way. Reasons to make your site accessible. Still not sure it’sworth spending your time on accessibility? Consider these reasons, it’s an ADA requirement.
The Americans with DisabilitiesAct was passed in 1990 to protect the civil rights of those with disabilitiesfrom discrimination. It covers things like transportation, telecommunication, employment and even building codes. Since this law was passednearly 30 years prior, a time when the internetwas not as ubiquitous, law makers are seeking to amend it. It fosters inclusivity. A survey by the Pew research center shows that people with disabilities are three times less likely to go online than theircounterparts without disabilities, which is a shame because statistics show that about 30% ofprofessionals have a disability with 62% of those with disabilities flying under the radarfor fear of negative bias.
It will help you win more business. By being more inclusive, you bring in a network ofpeople with disabilities, which represents $7 trillionin disposable income, SEO benefits. Search engines reward websites that are accessibility compliant in order to encourage morewebsites to be accessible. How to make your website more accessible.
An easy way to make yourwebsite more accessible is to install the WP accessibility plugin, which adds accessibilityfeatures including the toolbar where users can resize fonts and view your site in highcontrast and gray scale. Comparing color contrast to check if it fits the standard of the ADA, removing title attributes fromimages inserted into content. Most screen readersaren’t able to sense this and read the anchor texts instead, enabling skip links, which are internal pagelinks that allow users to skip directly to the content, which is useful for peopleusing screen readers.
A few additional steps to take, add subtitles or a transcript if your site produces media such as audio, audio books, videos, podcasts and so on to benefit the deaf and the mute as well as people who wantto consume your content but cannot consume media in public. Create keyboard accessible links and menus for people whohave motor disabilities and can only use a keyboard and not a mouse to navigate your site. Dropdown menus are discouragedbut you can remedy that by assigning shortcutsfor each dropdown menu, such as press one for the homepage, press two for the about page and so forth. Lastly, test your sitefor website accessibility.
The web accessibility initiative does not endorse any specific tool, but we have included alink in our resources below where they offer a list of tools you can use to audit your efforts. Good websites shouldn’t be defined by objectively good design, just as important as site usability, ease of navigation and accessibility. Armed with these best practices you have everything you need to create something thatlooks and functions well. Did we miss anything important?
Share your web design bestpractices in the comments below. (electronic whooshing) Kinsta’s WordPress hosting can speed up your website by up to 200% and you’ll get 24/7 support from our expert WordPress engineers. Let us show you the Kinsta difference. Try a free demo of our my Kinsta dashboard at demo.kinsta.com. Thank you for watching. Don’t forget to subscribefor more tutorials, explainers and helpful content like this. (upbeat music)