I used to be a content writer for a small web design agency, and my first piece was about website design best practices.<\/p>\n
I remember my manager going through it and telling me, \u201cAll good, but web design isn\u2019t just about making things look good.\u201d <\/em><\/p>\n Back then, I was young and fresh, and honestly, that sounded totally backward.<\/p>\n Made no sense. For me, design was all about what I saw. I mean, it\u2019s visual, right? So, of course, the look should be everything.<\/p>\n <\/a><\/p>\n Well, any web designer hearing this would probably be ready to pull their hair out.<\/p>\n Today, I get it. Front and center, web design is about functionality, user experience, and ensuring every element on the page has a purpose.<\/p>\n So, let\u2019s dive into the top web design best practices for 2024 to make your site do the work \u2014 convert visitors into paying clients. I\u2019ll also cover key design guidelines and requirements that you should keep in mind, too.<\/p>\n <\/a> <\/p>\n Typography refers to how letters and characters (type) are arranged and presented on the page. Since website typography<\/a> affects not only how we read but how we feel about text on a web page, it\u2019s important to pick carefully.<\/p>\n Ideally, you want a typeface that is:<\/p>\n Easy to read You also want it to match the look and feel of your brand.<\/p>\n For example, the luxury fashion brand Burberry refreshed its logo<\/a> for the first time in 20 years in 2018. It replaced the old serif typeface with a bold, all-caps, sans serif typeface and dropped the knight emblem.<\/p>\n The result was a simpler and more modern-looking logo that\u2019s easier to read on any screen \u2014 and that reflects changes in the company to become more transparent and appeal to a younger generation.<\/p>\n\n Image Source<\/a><\/em><\/p>\n But then, in February 2023, creative director Daniel Lee introduced Burberry’s new logo again.<\/a> This time, we\u2019re talking about something completely different \u2014 a modern blue design that nods to its British heritage.<\/p>\n\n Image Source<\/a><\/em><\/p>\n Why did this change happen?<\/p>\n Fashion brands often refresh their logos when a new creative director steps in, reflecting their vision. When Lee joined in October 2022, he aimed to honor Burberry\u2019s past while embracing the future. He called the logo \u201ca modern take on British luxury\u201d and \u201ca new chapter for the brand.\u201d<\/p>\n While I personally liked the first version a bit more, the second logo and its typography have a story and meaning.<\/p>\n Test how auto-translation will affect your site\u2019s content.<\/p>\n Many users will rely on translation tools to navigate your site, so ensure your design doesn’t create confusion or miscommunication. Pay attention to layout, spacing, and typography \u2014 translated text must fit well and remain legible.<\/p>\n Let\u2019s bring it to life.<\/p>\n I translated HubSpot\u2019s site from English to German. The result? A polished translated site with no extra spaces, weird letters, or structural issues. Everything looks neat, just like the original:<\/p>\n\n \u201cAt Wrike, we use TT Norms Pro for its clean, modern aesthetic and readability across devices \u2014 accessibility is essential. It\u2019s neutral, builds trust, and has multilingual character sets, so materials look polished even after translation,\u201d shares Elisa Daniela Montanari,<\/a> head of organic growth and website strategy at Wrike<\/a>.<\/p>\n According to Montanari, a great font should be adaptable to different platforms, pages, and audiences.<\/p>\n \u201cWith TT Norm Pro\u2018s clean lines, it doesn\u2019t compete against our visuals and messaging but complements it,\u201d Montanari says.<\/p>\n Like typography, color can affect not only how we understand and interact with content but how we feel about it. Your color scheme should, therefore, check off the same boxes as your website typography. It should:<\/p>\n Reinforce your brand identity. Buzzfeed, for example, uses the primary colors yellow and red to grab users’ attention and get them excited about the content. It reserves the use of the primary color blue \u2014 which is associated with trust \u2014 exclusively for links and CTA buttons. Both emotions are ideal to evoke for a media site.<\/p>\n\n Image Source<\/a><\/em><\/p>\n I recently came across a great piece<\/a> by Greg Merrilees, CEO and Founder of Studio1 Design, highlighting the importance of finding the right balance.<\/p>\n He suggests considering color harmonies \u2014 when picking a color palette, start with your dominant color and then layer it. Darker colors grab attention first and carry more visual weight, so you\u2019ll want to move back to lighter colors from there.<\/p>\n\n Image Source<\/a><\/em><\/p>\n Whitespace provides users with visual breaks as they process a website\u2019s design or content, which is aesthetically pleasing but also offers other benefits.<\/p>\n By minimizing distractions, whitespace makes it easier for users to focus, process information, and understand what is important.<\/p>\n That means you can use whitespace to avoid causing information overload or analysis paralysis \u2014 and to emphasize important elements on the page.<\/p>\n This might help persuade users to take a specific action, like sign up for a newsletter, shop your latest collection, and more.<\/p>\n For example, Eb & flow Yoga Studio uses whitespace to lead users toward a specific action: to sign up for three weeks of classes. Notice that whitespace doesn\u2019t mean the absence of color or imagery.<\/p>\n Instead, it means that every element on the page is positioned strategically, with lots of space in between, to avoid overwhelming or confusing visitors.<\/p>\n\n Image Source<\/a><\/em><\/p>\n One of the best insights I\u2019ve come across on this topic comes from Sean Lee-Amies,<\/a> CEO and founder at Square One Digital,<\/a> who explained it perfectly.<\/p>\n \u201cTake Google for example. They\u2019re massive. There\u2019s no end of things they could talk about, and yet the only thing on their homepage is a logo, a search bar, and two buttons,\u201d Lee-Amies says.<\/p>\n \u201cWhitespace is always the first casualty of a web design created by people who haven\u2019t yet learned to use a less is more approach to content and communication.\u201d<\/p>\n Resembling a three-dimensional, tactile surface, web textures<\/a> aim to replicate the physical sensation of touch with another sensation \u2014 sight.<\/p>\n They\u2019re a great design alternative to solid color backgrounds, particularly if you want to add personality and depth to your site.<\/p>\n Take a look at the texture on the homepage for the Santa Barbara-based restaurant Mony\u2019s Tacos below.<\/p>\n It looks like chalk drawn on a blackboard, doesn\u2019t it?<\/p>\n I don\u2019t know about you, but I can almost feel the chalk on my fingers just by looking at it. It\u2018s the perfect look for a restaurant that aims to be California\u2019s preferred Funk Zone choice for Mexican delights.<\/p>\n\n Image Source<\/a><\/em><\/p>\n Striking a balance between text and images is essential in website design. Incorporating visuals can make your content more informative, engaging, and memorable. It\u2019s easier for some people to learn and process information visually.<\/p>\n Here\u2018s a unique example of breaking up text with images from a cosmetic company\u2019s website. This shows how endless the possibilities of incorporating imagery into your website design are.<\/p>\n\n Image Source<\/a><\/em><\/p>\n Images should be part of your entire website, not just the homepage, but must be used carefully and in balance.<\/p>\n The design team at Dgtl Infra<\/a>, for example, creates blog posts with images every 200-300 words and sees 40% more shares than text-heavy articles. They aim for a 60\/40 text-to-image ratio.<\/p>\n This balance keeps readers engaged without sacrificing substance. The team uses a mix of infographics, product shots, and relevant stock images.<\/p>\n Every image should serve a purpose. Randomly inserted visuals can do more harm than good. Each should either illustrate a point or provide a visual break at a natural pause in content.<\/p>\n Navigation is one of the most important design elements on a website. It impacts whether visitors arrive on your homepage and browse or click the \u201cBack\u201d button. That\u2019s why it\u2019s important to keep it as simple as possible.<\/p>\n Many websites opt for a horizontal navigation bar. This navigation style lists the major pages side by side and is placed in the website header<\/a>.<\/p>\n Take the navigation bar on Blavity as an example. The main navigation categories (Entertainment, Culture, Small Business, Blavity U, Blavity Brands, Digital Cover) are clearly labeled and easy to notice.<\/p>\n\n Image Source<\/a><\/em><\/p>\n The use of a dropdown menu for the \u201cBlavity\u201d category adds a layer of organization without overwhelming the user with too many options at once. This is a subtle visual cue that helps to guide the user’s navigation.<\/p>\n The search bar found its place in the top right corner, providing a convenient way for users to find specific articles or topics.<\/p>\n CTAs are elements on a web page, advertisement, or another piece of content that encourages the audience to do something. The call to action could be to sign up, subscribe, start a free trial, or learn more, among many others.<\/p>\n You want your CTAs to pop in your website design. To make that happen, consider how you\u2019re using color as well as other elements like background color, surrounding images, and surrounding text.<\/p>\n Square provides an excellent call-to-action example. Using a smooth video background, Square shows how unique and future-oriented its product is. Against this dramatic backdrop, the white \u201cGet Started\u201d CTA awaits your click, as well as \u201cContact Sales\u201d in catchy blue color.<\/p>\n\n Image Source<\/a><\/em><\/p>\n Damon Culbert<\/a> from Add People<\/a> also suggests animating CTAs but in balance.<\/p>\n He says that a subtly animated button that wiggles or pulses after a delay can capture attention without being intrusive. Triggering such animations only after a user has spent time on the page ensures the interaction feels timely and relevant.<\/p>\n This technique, similar to well-timed pop-ups, respects the user’s browsing flow while effectively drawing their focus toward conversion.<\/p>\n While the design of a button is important, we can’t overlook its content: the text it contains. Yevhenii Tymoshenko,<\/a> CMO at Skylum<\/a>, touched on this during our conversation, saying:<\/p>\n \u201cWe recently redesigned the layout of our website by placing CTAs at the top and the bottom of the page. We also reworded them to be more actionable. Now they say \u2018View Plans\u2019 and \u2018Explore App,\u2019 speaking to the customer directly without using pushy language like \u2018Buy Now.\u2019 As a result, our conversion rates increased by 12%,\u201d Tymoshenko says.<\/p>\n\n Image Source<\/a><\/em><\/p>\n We\u2019ve already discussed how important it is for your website to be responsive. That might mean altering or removing some elements that would clutter smaller screen sizes or negatively impact load time.<\/p>\n For an example of one of the best website designs,<\/a> compare Etsy\u2019s homepage on desktop vs mobile. On the desktop, you\u2019ll see a navbar with categories. Hovering over each category will reveal a dropdown menu.<\/p>\n\n Image Source<\/a><\/em><\/p>\n On mobile, this collapses behind a hamburger button, which improves the appearance and performance of the mobile site. You’ll also notice that the images are larger \u2014 perfect for tapping with your finger on a mobile screen.<\/p>\n\n Image Source<\/a><\/em><\/p>\n Claire Escobedo<\/a> from Online Optimism<\/a> says that one of the main mistakes she sees in mobile design is a lack of accessible features. This includes things that violate WCAG standards and features like hover effects that impact a site’s functionality.<\/p>\n She continues, “You can’t hover on a phone! You have to account for mobile interactions when designing for any site accessed on a mobile device, which these days is pretty much all sites.\u201d<\/p>\n According to Escobedo, just because your site navigation functions well on desktop doesn\u2019t mean it will transfer to mobile.<\/p>\n \u201cA beautiful mega menu is nice for a laptop user, but how is a mobile user going to access those same four tiers of links?” Escobedo notes.<\/p>\n According to Hick\u2019s Law, increasing the number and complexity of choices will increase the time it takes for a person to make a decision. This is bad news in website design.<\/p>\n If a website visitor is presented with too many options, they might get frustrated and bounce \u2014 or they might pick an option you don\u2019t want, like abandoning their cart. That\u2019s why it\u2019s important to limit the number of options presented to a user.<\/p>\n For example, when a visitor lands on Shawn Michelle’s Ice Cream homepage, they have three clear options: learn about the company, explore the flavors, or check out the catering menu.<\/p>\n It\u2018s clean, with all the key info easy to find. Does a site like this need anything more? Absolutely not. Everything\u2019s right there, making it easy for customers to get what they need, reducing the chance they\u2019ll leave frustrated.<\/p>\n This is a perfect example of Hick\u2019s Law in UX design.<\/p>\n\n Image Source<\/a><\/em><\/p>\n Pro tip:<\/strong> Don’t have the time to follow the rules? You can always download a pre-built website template<\/a> that will provide a sound foundation for your site.<\/p>\n \u201cDesign should support content and functionality \u2014 not the other way around. The vast majority of users are going to your site for the information that\u2019s there, not for the way it looks.<\/p>\n As a designer, I know how great it is for a website to look nice, but it can never come at the expense of making sure that your website is functional and understandable for all users.\u201d says Escobedo.<\/em><\/p>\n Concentrate on functionality instead of just aesthetics. Create solutions that are easy to use, dependable, and practical, putting the needs of users front and center.<\/p>\n Website content should be straightforward and doesn\u2019t require all your brainpower to get it and deliver value at the same time. Since that\u2019s not an easy task at all, I hit up Damon Culbert again for advice:<\/p>\n \u201cIn order for people to spend time and energy doing something, like sit and read through all the features of a new product or service, you have to create a compulsion within them to do so,\u201d Culbert says.<\/p>\n According to Culbert, strong visuals allow people to invest time and energy into learning more about something you want to sell.<\/p>\n \u201cB2B services are a great example of this; they\u2019re often very complex, and non-experts don\u2019t understand them. It might take a non-expert an hour or more of reading just to get a basic understanding,\u201d Culbert says. \u201cOr they could look at a visual that gets them there in five seconds or less.\u201d<\/p>\n A good example is BuzzSumo\u2019s homepage.<\/a> It delivers a clear, concise message with visuals like magazine excerpts and social media screenshots, making it obvious what they do \u2014 even for first-time visitors.<\/p>\n\n Image Source<\/a><\/em><\/p>\n My final point: <\/strong>People don\u2019t spend money on things they can\u2019t understand if they add value or not. This is why commercially successful companies invest in marketing and sales intelligence tools, mapping out their customer\u2019s buyer journeys and hiccups along the way.<\/p>\n Now, you could spend years studying the ins and outs of web design.<\/p>\n But for the sake of giving you a jumping-off point, we’ve assembled a list of the fundamental guidelines and best practices you can apply to your next website redesign<\/a> or website launch<\/a>.<\/p>\n <\/a> <\/p>\n While the appearance of your website is certainly important, most people aren’t coming to your site to evaluate how slick the design is. They want to complete some action or find some specific piece of information.<\/p>\n Therefore, unnecessary design elements (i.e., those that serve no functional purpose) will only overwhelm and make it more difficult for visitors to accomplish what they’re trying to accomplish.<\/p>\n From a usability and UX perspective, simplicity is your best friend. If you have all the necessary page elements, it\u2019s hard to get too<\/em> simple. You can employ this principle in a variety of different forms, such as:<\/p>\n Colors. <\/strong>Basically, don’t use a lot. The Handbook of Computer-Human Interaction<\/a> recommends using a maximum of five (plus or minus two) different colors in your design. <\/p>\n Typefaces.<\/strong> The typefaces you choose should be highly legible, so nothing too artsy and very minimal script fonts, if any. Again, keep the text color minimal and always ensure it contrasts with the background color. A common recommendation<\/a> is to use a maximum of three different typefaces in a maximum of three different sizes. <\/p>\n Graphics.<\/strong> Only use graphics if they help a user complete a task or perform a specific function (don’t just add graphics willy-nilly). <\/p>\n Here’s a great example of a simple but effective homepage design<\/a> from HERoines Inc.<\/a><\/p>\n\n Image Source<\/a><\/em><\/p>\n Closely tied to the principle of simplicity, visual hierarchy means arranging and organizing website elements so that visitors naturally gravitate toward the most important elements first.<\/p>\n The goal is to lead visitors to complete a desired action, but in a way that feels natural and enjoyable. By adjusting the position, color, or size of certain elements, you can structure your site in such a way that viewers will be drawn to those elements first.<\/p>\n The Semrush website is a great example of how visual hierarchy should look. The prominent placement of the \u201cStart now\u201d button, coupled with clear typography and ample white space, ensures that it stands out.<\/p>\n Secondary elements, such as the input field and headline, support the primary CTA and provide context. This well-executed visual hierarchy makes the website easy to navigate and understand its purpose.<\/p>\n\n Image Source<\/a><\/em><\/p>\n Planning out intuitive navigation<\/a> helps visitors find what they’re looking for.<\/p>\n Ideally, a visitor should land on your site and not have to think extensively about where to click next. Moving from point A to point B should be as frictionless as possible.<\/p>\n Here are a few tips for optimizing your site’s navigation:<\/p>\n Keep the structure of your primary navigation simple (and near the top of your page). One more pointer:<\/strong> Once you\u2018ve settled on what your site\u2019s main (top) navigation will be, keep it consistent. The labels and location of your navigation should remain the same on every page.<\/p>\n This leads us nicely to our next principle below.<\/p>\n In addition to keeping your navigation consistent, the overall look and feel of your site should be similar across all of your site’s pages.<\/p>\n Backgrounds, color schemes, typefaces, and even the tone of your writing are all areas where consistency has a positive impact on usability and UX.<\/p>\n That\u2018s not to say every page should follow the same layout. Instead, create different layouts for specific types of pages (e.g., landing pages, informational pages, etc.).<\/p>\n By using those layouts consistently, you\u2019ll make it easier for visitors to understand what type of information they’re likely to find on a given page.<\/p>\n In the example below, you can see that Airbnb<\/a> uses the same layout for all of its \u201cHelp\u201d pages, a common practice. Imagine what it would be like from a visitor’s perspective if every \u201cHelp\u201d page had its own, unique layout.<\/p>\n There would probably be a lot of shoulder shrugging.<\/p>\n\n Image Source<\/a><\/em><\/p>\n 60% of page global views are from mobile devices<\/a> like smartphones and tablets, according to Statista.<\/p>\n To provide a truly great user experience, your site has to be compatible with the many different devices that your visitors are using. In the tech world, this is known as responsive design<\/a>.<\/p>\n Responsive design means investing in a highly flexible website structure. On a responsive site, content is automatically resized and reshuffled to fit the dimensions of whichever device a visitor happens to be using.<\/p>\n This can be accomplished with mobile-friendly HTML templates or by creating a special mobile site.<\/p>\n Escobedo points out that one of the biggest issues she frequently encounters is pages that are way too long.<\/p>\n Avoid endless mobile scrolling by making content collapsible or including links to other pages instead of repeating content on the page.<\/p>\n In addition, make sure your external links open in new tabs and that you aren\u2019t using text that\u2019s too small to read on mobile.<\/p>\n The goal of web accessibility is to make a website that anyone can use, including people with disabilities or limitations that affect their browsing experience. As a website designer, it\u2019s your job to think of these users in your UX plan.<\/p>\n Like responsiveness, accessibility applies to your entire site: structure, page format, visuals, and both written and visual content.<\/p>\n The Web Content Accessibility Guidelines (WCAG)<\/a>, developed by the Web Accessibility Initiative and the World Wide Web Consortium, set the guidelines for web accessibility. In a broad sense, these guidelines state that websites must be:<\/p>\n Perceivable. <\/strong>Visitors are aware of the content on your site. <\/p>\n Operable. <\/strong>The functionality of your website should be possible in different ways. <\/p>\n Understandable. <\/strong>All content and alerts can be easily understood. <\/p>\n Robust. <\/strong>Your website is usable across different assistive technologies, devices, and browsers. <\/p>\n \u201cAt Online Optimism, we adhere to a minimum of WCAG Level A for all website builds, with most of our sites adhering to Level AA and some to AAA,\u201d says Escobedo.<\/p>\n Escobedo shares a few easy accessibility tips, including:<\/p>\n Adding alt text for all non-decorative images. For a deeper dive into this topic, see our guide to web accessibility<\/a>.<\/p>\n A big challenge in web design is balancing originality with your expectations. Most of us are expert internet users, and there are specific conventions we\u2019ve grown accustomed to over time. Such conventions include:<\/p>\n Placing the main navigation at the top (or left side) of a page. While some might opt to throw these out the window for the sake of uniqueness, this is a mistake. There\u2019s still plenty of room for creativity within the constraints of web conventionality.<\/p>\n Let\u2019s briefly consider another field of design: architecture. Building codes ensure people can safely use spaces. Architects don\u2019t ignore these rules because they ensure safety and comfort. No matter how impressive a building looks, if the stairs are uneven or you can\u2019t exit during a fire, you’d rather stay outside.<\/p>\n In the same way, you can craft a memorable experience while meeting user expectations. If you violate what users anticipate, they may feel uncomfortable or even frustrated with your site.<\/p>\n Sticking to web conventions lends your site credibility. In other words, it increases the level of trust your site conveys. And if you’re striving to build a site that provides the best user experience possible, credibility goes a long way.<\/p>\n One of the best methods to improve your credibility is to be clear and honest about the product or service you\u2018re selling. Don\u2019t make visitors dig through dozens of pages to find what it is you do. Be up-front on your homepage, and dedicate some real estate to explaining the value behind what you do.<\/p>\n Another credibility tip: <\/strong>Have a pricing page linked on the homepage. Rather than force people to contact you to learn more about pricing, list your prices clearly on your site. This makes your business appear more trustworthy and legitimate.<\/p>\n Here’s an example of an effective pricing page from the Moz website<\/a>:<\/p>\n\n Image Source<\/a><\/em><\/p>\n At the end of the day, usability and user experience hinge on the preferences of the end-users. After all, if you’re not designing for them, who are you designing for?<\/p>\n So, while the principles detailed in this list are a great starting point, the final key to improving the design of your site is to conduct user testing, gather feedback, and implement changes based on what you’ve learned.<\/p>\n And don\u2019t bother testing usability by yourself. You\u2019ve already invested a lot of time into your design, which brings your own biases into the equation. Get testers who have never seen your site before, the same as any first-time visitor.<\/p>\n Here are a few user testing tools to get you started:<\/p>\n Website Grader<\/a>. Our free tool evaluates your website based on several factors: mobile, design, performance, SEO, and security. It then offers tailored suggestions for improvement. You can learn more about Website Grader in our dedicated blog post<\/a>. <\/p>\n Crazy Egg<\/a>. Track multiple domains under one account and uncover insights about your site’s performance using four different intelligence tools — heat map<\/a>, scroll map, overlay, and confetti. <\/p>\n Loop11<\/a>. Use this tool to easily create usability tests — even if you don’t have any HTML experience. <\/p>\n The User Is Drunk<\/a>. Pay Richard Littauer to get drunk and review your site. Don’t believe me? We tried it<\/a>. <\/p>\n For even more helpful options, see our list of the best user testing tools<\/a>.<\/p>\n Now, we understand the principles and best practices that should guide you throughout the design process. In the next section, let’s run down the essential page elements that you should strongly consider including in your design plan.<\/p>\n <\/a> <\/p>\n The header and footer are a staple of just about every modern website. Try to include them on most of your pages, from your homepage<\/a>, to your blog posts, and even your \u201cNo results found\u201d page<\/a>.<\/p>\n Your header<\/a> should contain your branding in the form of a logo and organization name, menu navigation, and maybe a CTA, and\/or a search bar if well-spaced and minimal.<\/p>\n On the other end, your footer is where many users will instinctively scroll for essential information. In your footer, place contact information, a signup form, links to your common pages, legal and privacy policies, links to translated versions of your site, and social media links.<\/p>\n Whether it\u2019s a list of links across the header or a tidy and compact hamburger button<\/a> in the corner, every website needs a guide for navigation positioned at the top of at least your homepage and other important pages<\/a>. A good menu limits the number of clicks to reach any part of your website to just a few.<\/p>\n To reduce clutter, you might consider making some or all menu options a dropdown menu with links within it, as can be seen on HubSpot’s homepage<\/a>.<\/p>\n\n In addition to menu navigation, strongly consider placing a search bar at the top of your pages, so users can browse your site for content by keyword.<\/p>\n If incorporating this functionality, make sure your results are relevant, forgiving of typos, and capable of approximate keyword matching.<\/p>\n Most of us use a high-quality search engine every day, be it Google, Amazon, YouTube, or elsewhere. These all set the standard for your own site search.<\/p>\n Remember the conventions we\u2019ve discussed?<\/p>\n One that you see practically everywhere is a logo in the top left corner. On first landing, many visitors\u2019 eyes will instinctively shift to this region to check they\u2019re in the right place. Don\u2019t leave them hanging.<\/p>\n To reinforce this notion, incorporate your company branding into every element you add, piece of content you post, and color scheme you create.<\/p>\n That\u2019s why I recommend establishing brand guidelines if you haven\u2019t already. Check out our style guide<\/a> for a reference.<\/p>\n Pro tip: <\/strong>Create a unique online presence with the HubSpot Brand Kit Generator,<\/a> which allows you to easily customize logos, icons, and color palettes by entering your business name, industry, and slogan.<\/p>\n Color choice plays a major role in your site\u2019s usability and UX as well. This decision tends to be more subjective than other requirements in this list.<\/p>\n But, like everything else we\u2019ve discussed, try to simplify \u2014 limit your color selection to 3-4 prominent colors at most.<\/p>\n Starting a color palette from scratch can be surprisingly difficult the first time. We seem to intuitively pick up on which colors work well together and which don\u2019t, but we stumble when trying to pick from the infinite combinations available.<\/p>\n The solution? Try a color palette that\u2019s been shown to work on other websites. Take influence from your favorite sites, and see our list of our favorite website color schemes<\/a> to get started.<\/p>\n P.S.<\/span> There are many free website design tools<\/a> that can suggest color palettes and do a lot of the heavy lifting for you, so be sure to check it out for inspo if you\u2019re feeling stuck.<\/p>\n Headings are key to establishing the visual hierarchy we discussed earlier, especially on text-heavy pages.<\/p>\n As users skim your pages, you need, a clear and to-the-point heading to alert readers to stop scrolling after finding what they want.<\/p>\n Use only as many headings as there are distinct sections of your page, as too much blown-up and bolded text will dampen this effect.<\/p>\n Whenever a user takes an action on your website, it must be obvious exactly what they\u2019re doing and\/or where they\u2019re going. All buttons should have clear text or an icon to precisely and concisely signal their purpose.<\/p>\n The same goes for in-text links and widgets (simple interactive elements, like dropdowns and text forms).<\/p>\n For example, a button linking to a pricing page should just read \u201cPricing\u201d \u2014 anything beyond that (e.g., \u201cSee our prices\u201d, \u201cCheck out the pricing page for a deal\u201d) is superfluous. A search bar\/button only needs a search glass icon (\ud83d\udd0d) and perhaps also the word \u201cSearch\u201d to denote its purpose.<\/p>\n User testing can be a major help here. While you yourself know what all of your interactive page elements do, the same can\u2019t be said for a new user.<\/p>\n Testing will give valuable insight into what users think your labels mean beyond your own perspective.<\/p>\n When incorporating static images, gifs, videos, and other media into your pages, remember to be consistent and intentional in your choices.<\/p>\n These elements will draw attention over most other text and will likely stay in users\u2019 minds, so choose wisely.<\/p>\n Here\u2019s just one example of effective media on a homepage. Notice how every image complements the page aesthetic and supports the offer of personalized fitness training with results.<\/p>\n\n Image Source<\/a><\/em><\/p>\n Also, all images and videos should be optimized for search engines<\/a> and include descriptive alt text for accessibility.<\/p>\n Having a pleasing website is great, but how do you know whether your visitors are actually doing what you want? Are they engaging with your content? This is where CTAs come into play.<\/p>\n A CTA is any page element that prompts user action. The action could be adding a product to a card, downloading a content offer, or signing up for an email list.<\/p>\n Make your CTA elements prominent in the visual hierarchy, but not intrusive or distracting like many click-through ads tend to be.<\/p>\n1. Select a typography that\u2019s easy to read and skim.<\/strong><\/h3>\n
\n Easy to skim
\n Accessible to all users
\n Legible across multiple devices and screen sizes <\/p>\n2. Be mindful of auto-translation.<\/strong><\/h3>\n
3. Choose a color scheme that suits your brand.<\/strong><\/h3>\n
\n Make your site easy to read and navigate.
\n Evoke emotion.
\n Look good. <\/p>\n4. Use white space to break up text and other elements.<\/strong><\/h3>\n
5. Use texture to add personality and depth.<\/strong><\/h3>\n
6. Add images to engage and inform readers.<\/strong><\/h3>\n
7. Simplify your navigation.<\/strong><\/h3>\n
8. Make your CTAs stand out.<\/strong><\/h3>\n
9. Optimize for mobile.<\/strong><\/h3>\n
10. Limit the options presented to users.<\/strong><\/h3>\n
11. Prioritize functionality over aesthetics.<\/strong><\/h3>\n
12. Choose the content your users understand.<\/strong><\/h3>\n
1. Simplicity<\/h3>\n
2. Visual Hierarchy<\/h3>\n
3. Navigability<\/h3>\n
\n Include navigation in the footer of your site.
\n Consider using breadcrumbs<\/a> on every page (except your homepage), so users remember their navigation trail.
\n Include a search bar near the top of your site so visitors can search by keywords.
\n Don’t offer too many navigation options per page.
\n Include links within your page copy, and make it clear where those links go.
\n Don’t make users dig too deep. Try making a basic wireframe map<\/a> of all your site pages arranged like a pyramid: Your homepage is at the top, and each linked page from the previous forms the next layer. In most cases, it\u2019s best to keep your map no more than three levels deep. <\/p>\n4. Consistency<\/h3>\n
5. Responsivity<\/h3>\n
6. Accessibility<\/h3>\n
\n Using descriptive link text.
\n Using visual cues like underlines for links.
\n Enabling focus states.
\n Not hiding information or functionality in hover states or in images without alt text or descriptions.
\n Using form field labels. <\/p>\n7. Conventionality<\/h3>\n
\n Placing a logo at the top left (or center) of a page.
\n Making the logo clickable, so it always brings a visitor back to the homepage.
\n Having links and buttons<\/a> that change color\/appearance when you hover over them.
\n Using a shopping cart icon on an ecommerce site. The icon also has a number badge signifying the number of items in the cart.
\n Ensuring image sliders have buttons users can click to manually rotate slides. <\/p>\n8. Credibility<\/h3>\n
9. User-Centricity<\/h3>\n
1. Header and Footer<\/h3>\n
2. Menu Navigation<\/h3>\n
3. Search Bar<\/h3>\n
4. Branding<\/h3>\n
5. Color Palette<\/h3>\n
6. Headings<\/h3>\n
7. Clear Labels<\/h3>\n
8. Visuals and Media<\/h3>\n
9. Calls to Action (CTAs)<\/h3>\n