--- description: Website branding is much more than designing a logo. There are four critical tenets of website branding that can make or break the look and feel of your site. title: The 4 Essential Tenets of Website Branding (Ignore Them At Your Own Peril) image: https://www.leanlabs.com/hubfs/blog_post_imgs/Featured%20Images/SR_Web-Branding-Publishing%20(1).png --- [Blog](https://www.leanlabs.com/blog)/ [Winning Websites](https://www.leanlabs.com/blog/topic/winning-websites) # The 4 Essential Tenets of Website Branding (Ignore Them At Your Own Peril) 8 min read time ![The 4 Essential Tenets of Website Branding \(Ignore Them At Your Own Peril\)](https://www.leanlabs.com/hs-fs/hubfs/blog_post_imgs/Featured%20Images/SR_Web-Branding-Publishing%20(1%29.png?width=765&height=430&name=SR_Web-Branding-Publishing%20(1%29.png) If you’re like me, you send a lot of text messages. Often, I reply to my friends and family while I’m doing something else, with a quick response. However, when I need to have a serious conversation, I call them. Because as anyone knows, it’s difficult to determine tone from a text or email. It’s not what you say, but _how_ you say it. And in website design, that’s the difference that tone of voice creates. Design evokes emotion on a subconscious level. Before you notice a single individual element on a website, your brain will evaluate what you see and make assumptions in the matter of milliseconds. I’m not an expert in web design, but I know how critical website branding can be during a site design. That's why I enlisted a few members of our Growth-Driven Design team to give their candid answers about the most critical components of a design. A lot of their answers were surprising (especially when they didn’t entirely agree), and one thing is clear. The right website branding has a significant impact on the customer experience. ## The Components of Website Branding Website branding is the look, feel, and tone you convey on your site. Website branding introduces your customer to who your brand is and what your brand is about. There are a few things that go into website branding, each of which is critical to have a [consistent voice and branding](/blog/how-to-have-consistent-voice-and-branding-across-all-marketing-channels) across your site. Here’s what a few of our GDD team members had to say about each one. ### 1\. Brand Voice Your brand voice is the tone you’ll carry throughout all of your website design and content, as well as all of your marketing channels. During the early stages of our SprocketRocket strategies, before we determine any messaging or make any design decisions, I have brands fill out a few brand voice templates, such as [this grid](https://www.mindmeister.com/876686357?t=YK8SJ1zCja). We study popular brand voice types, which include sophisticated brands, fun brands, and innovative brands. Here are a few different brand voice styles in action: #### **Sophisticated Brands** A lot of sophisticated brands, such as Ferrari and BMW, use sleek design elements and high-resolution photos. #### Ferrari ![FerrariOne_website branding](https://www.leanlabs.com/hs-fs/hubfs/FerrariOne.png?width=600&name=FerrariOne.png) #### BMW ![BMWOne_website branding](https://www.leanlabs.com/hs-fs/hubfs/BMWOne.png?width=600&name=BMWOne.png) #### **Competent Brands** Authoritative brands like Google and Harvard use simple, straight-forward language and professional looking graphics. #### Google ![GoogleOne_website branding](https://www.leanlabs.com/hs-fs/hubfs/GoogleOne.png?width=600&name=GoogleOne.png) #### Harvard ![HarvardOne_website branding](https://www.leanlabs.com/hs-fs/hubfs/HarvardOne.png?width=600&name=HarvardOne.png) #### **Trusted Brands** American Express and Subaru both desire to be trustworthy brands, so they rely on honest language and friendly colors. #### American Express ![AmexOne_website branding](https://www.leanlabs.com/hs-fs/hubfs/AmexOne.png?width=600&name=AmexOne.png) #### Subaru ![subaruone_website branding](https://www.leanlabs.com/hs-fs/hubfs/subaruone.png?width=600&name=subaruone.png) #### **Excite Brands** Brands that want to convey excitement, like Virgin Airlines and RedBull, often use bright, vibrant colors throughout their website. #### Virgin Airlines ![virginairlinesone_website branding](https://www.leanlabs.com/hs-fs/hubfs/virginairlinesone.png?width=600&name=virginairlinesone.png) #### RedBull ![RedBullOne_website branding](https://www.leanlabs.com/hs-fs/hubfs/RedBullOne.png?width=600&name=RedBullOne.png) #### **Creative Brands** Creative brands, such as GoPro and AppleOne, both use a minimal design and impactful imagery. #### GoPro ![GoProOne_website branding](https://www.leanlabs.com/hs-fs/hubfs/GoProOne.png?width=600&name=GoProOne.png) #### AppleOne ![AppleOne_website branding](https://www.leanlabs.com/hs-fs/hubfs/AppleOne.png?width=600&name=AppleOne.png) From the beginning, your preferred brand voice will have a huge impact on your site. It’s critical to identify it to inform decisions about photography, video, imagery, and messaging. ### 2\. On-Brand Imagery In website design, consistency is key, especially with imagery. People are visual, so the imagery that you choose will have a significant impact on [conversion rate](https://www.crazyegg.com/blog/boost-conversion-rate-images/). People can recall at least 2,000 pictures with around [90% accuracy](https://www.crazyegg.com/blog/boost-conversion-rate-images/). During the early stages of your website design, you can use that to your advantage by choosing a photo, icon, and graphical theme that reflects your brand. [Giles](https://www.lean-labs.com/team/giles), one of our designers, says: > “The choices must fit together, and align with the brand voice." If you can determine what emotion or after state you’re trying to convey in imagery, you can set an ongoing standard for the style of images and icons for your website, as well as content. When it comes to actually choosing imagery, [Cris, ](https://www.lean-labs.com/blog/the-best-way-to-use-periscope-tips-for-broadcasters)one of our designers, says that “a good starting point is to focus on outcome.” > “By using your product or service, what would they achieve? Would they have more time? More success? Be happier?” Additionally, there’s a decision to be made regarding icons and illustrations. A lot of brands, such as Qualio and Slack, are using iconography within their website branding. #### Qualio ![Qualio_website branding](https://www.leanlabs.com/hs-fs/hubfs/Qualio-1.png?width=600&name=Qualio-1.png) ![Qualio_website branding](https://www.leanlabs.com/hs-fs/hubfs/QualioExample.png?width=600&name=QualioExample.png) #### Slack ![slack_website branding](https://www.leanlabs.com/hs-fs/hubfs/slack.png?width=600&name=slack.png) “Iconography can show large amounts of information,” says [Brad](https://www.lean-labs.com/team/bradley), another Lean Labs designer. ### 3\. Logo Usage The best website branding will determine logo usage, or how logos are permitted to be used throughout your website and in content. You'll find that a lot of brands, like Twitter, post these standards on their website as well. ![brandguidelines](https://www.leanlabs.com/hs-fs/hubfs/brandguidelines.png?width=600&name=brandguidelines.png) This helps with consistency. Anyone working on your website will use the logo in the appropriate way. Anyone who downloads your logo or uses it within content will use the correct formats, as well. Cris has a few tips for effective logo guidelines, such as: > “Because of the shape of navigation bars on websites, rectangular logos work best. That doesn't mean you can't have square or round logos, but they will probably have to be shrunk down to fit in the websites navigation.” > “The easiest logos to work with are rectangular shaped, with an icon positioned to the left of the brand name. this gives you the option to use only the icon, or icon and brand name.” ### 4\. Typefaces A typical website will use 1-2 typefaces for copy, headlines, and CTAs. Personally, I’ve seen more fonts being used on a site, with a lot of interesting (and ineffective) combinations of various typefaces. ![HireVibe_website branding](https://www.leanlabs.com/hs-fs/hubfs/HireVibe-1.png?width=600&name=HireVibe-1.png) “Before you decide how many typefaces you use,” says Cris, “You need to understand that typefaces work in pairings. > "it’s a bit like food. You wouldn’t want to mix up Sushi with Swedish Meatballs. It’s best to keep typefaces to just one or two (separate typefaces for headings and body text). ![Roboto_website branding](https://www.leanlabs.com/hs-fs/hubfs/Roboto.jpg?width=600&name=Roboto.jpg) A few popular modern typefaces include [Google Webfonts](https://www.awwwards.com/20-best-web-fonts-from-google-web-fonts-and-font-face.html) such as Lora, Playfair Display, Roboto, and more. ### 5\. Color Palette Colors are the primary [trigger for emotion](https://99designs.ca/blog/tips/how-color-impacts-emotions-and-behaviors/); and using the right color palette can send a message and inspire a sense of familiarity. While Giles and Cris disagree about color theory (Giles says it’s BS), Giles says: > “Two contrasting colors work great, primary and secondary. If you start adding more, things can start to look out of place or off brand.” A few guidelines for using colors include: * One Primary Color - Use one primary color for links, primary calls to action, and headings. * Secondary Colors - Use as accents for specific actions, such as success, info, warning, error. It’s important to choose colors that you feel are in line with your intended brand voice as well. Brad says: “For example, blue is a VERY common colour, especially for software companies." > “Blue can suggest security and power.” With this context, you can see why certain brands chose their primary and secondary brand colors: #### HubSpot _Reliable and Trustworthy - Blue And Orange_ ![HubbySpot_website branding](https://www.leanlabs.com/hs-fs/hubfs/HubbySpot.png?width=600&name=HubbySpot.png) #### Lemonade _Lemonade, Bold and Innovative - White, Black, And Pink_ ![Lemonade_website branding](https://www.leanlabs.com/hs-fs/hubfs/Lemonade-3.png?width=600&name=Lemonade-3.png) #### Lean Labs _Energized, ambitious - Blue And Green_ ![leanlabs_website branding](https://www.leanlabs.com/hs-fs/hubfs/leanlabshome-1.png?width=600&name=leanlabshome-1.png) ### **Will Better Website Branding Improve Your Site Performance?** Website branding plays a critical role on your website. It demonstrates your brand’s personality and often, helps deliver the right first impression. And if your website branding is drastically off, or there’s no strategy to it, it can definitely impact the performance of your website. To properly assess the quality of your brand, check out our [Brand Character and Voice Workbook.](/brand-character-and-voice-workbook) [![New Call-to-action](https://no-cache.hubspot.com/cta/default/275827/b66daf69-9561-431b-b1cc-3ca4f055d564.png)](https://cta-redirect.hubspot.com/cta/redirect/275827/b66daf69-9561-431b-b1cc-3ca4f055d564) ## Latest, related and recommended posts [ ![What is growth-driven design? The complete guide to smarter website builds](https://www.leanlabs.com/hs-fs/hubfs/2022%20blog%20featured%20images/7%20(1).png?width=500&height=500&name=7%20(1).png) Winning Websites What is growth-driven design? The complete guide to smarter website builds Read more ](https://www.leanlabs.com/blog/what-is-growth-driven-design) [ ![The launchpad website: how to launch a high-performing site in 12 weeks](https://www.leanlabs.com/hs-fs/hubfs/2022%20blog%20featured%20images/36%20(1).png?width=500&height=500&name=36%20(1).png) Winning Websites The launchpad website: how to launch a high-performing site in 12 weeks Read more ](https://www.leanlabs.com/blog/launchpad-website-launch-in-12-weeks) [ ![Growth-driven design vs. traditional web design: why the old way keeps failing](https://www.leanlabs.com/hs-fs/hubfs/2022%20blog%20featured%20images/37.png?width=500&height=500&name=37.png) Winning Websites Growth-driven design vs. traditional web design: why the old way keeps failing Read more ](https://www.leanlabs.com/blog/growth-driven-design-vs-traditional-web-design) [![About Lean Labs](https://www.leanlabs.com/hubfs/LL%20V4.1/logos/LL%20Logo%20Dark.svg)](https://www.leanlabs.com) Lean Labs builds growth machines that take 7-figure startups to 8\. → [**See How!**](https://www.leanlabs.com/approach/why-lean-labs) Share [ ![Share on facebook](https://www.leanlabs.com/hubfs/LL%20v5/Images/Icons/Facebook.svg) ](http://www.facebook.com/share.php?u=https%3A%2F%2Fwww.leanlabs.com%2Fblog%2Ffour-tenets-of-website-branding%3Futm%5Fmedium%3Dsocial%26utm%5Fsource%3Dfacebook) [ ![Share on linkedin](https://www.leanlabs.com/hubfs/LL%20v5/Images/Icons/LinkedIn.svg) ](http://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.leanlabs.com%2Fblog%2Ffour-tenets-of-website-branding%3Futm%5Fmedium%3Dsocial%26utm%5Fsource%3Dlinkedin) [ ![Share on reddit](https://www.leanlabs.com/hubfs/LL%20v5/Images/Icons/reddit.svg) ](https://www.reddit.com/submit?url=https%3A%2F%2Fwww.leanlabs.com%2Fblog%2Ffour-tenets-of-website-branding%3Futm%5Fmedium%3Dsocial%26utm%5Fsource%3Dreddit) [ Grade my site![chevron-right](https://www.leanlabs.com/hubfs/LL%20v5/Images/Icons/chevron-right.svg) ](https://cta-service-cms2.hubspot.com/web-interactives/public/v1/track/click?encryptedPayload=AVxigLLUGeyXuIFe4n%2B1E42IAXAWWgWgkkHKyylkCaC53TFA5LXNKHbY1ByeZ7mNZ9WHFS1WfZ1VrTarTazLKDbOc%2Btc%2Bg%2BBT11oQTrJhYOQyf5sCqDNGXudXVDytcA7Jb2UdS%2FC5xT4BZA6pMCL%2BHU0XpBYZ%2B0d78FOiUQsXv09XXmngTg%3D&portalId=275827) ![grader laptop](https://www.leanlabs.com/hs-fs/hubfs/LL%20v5/Images/grader%20laptop.png?width=552&height=454&name=grader%20laptop.png) ### AI Website Grader Uncover what’s working, pinpoint areas that need improvement, and get trained AI's recommendations on how to turn your website into your brand’s #1 salesperson. Grade my site ## TAKE THE FIRST STEP ### Turn your marketing from a cost center into a self-funding growth machine. ![work](https://www.leanlabs.com/hubfs/LL%20v5/Icons/work.svg) ### Our work & results Hear what our clients have to say about their results. **Read our 5 star reviews on HubSpot.** [](https://www.leanlabs.com/approach/success) ![programs](https://www.leanlabs.com/hubfs/LL%20v5/Icons/programs.svg) ### Programs & pricing **Find out how much it costs** to work with us. We have various programs available starting at $2k per month. [](https://www.leanlabs.com/pricing) ![kevin](https://www.leanlabs.com/hs-fs/hubfs/LL%20v5/Images/kevin.png?width=64&height=64&name=kevin.png) ### Get your free strategy session Find out exactly what **we’d do if we were your growth team.** Select a day and time on the calendar. Request a meeting [ Request A Meeting![right arrow icon](https://www.leanlabs.com/hubfs/LL%20V4.1/icons/Right%20arrow.svg) ](https://cta-service-cms2.hubspot.com/web-interactives/public/v1/track/click?encryptedPayload=AVxigLKguQz1pHGVkA3wdiTS9EE1O5E3Ct1K0Z80gm18lqpbpOzOOhixlWF3vFwSXsk5ZFPTer64z0Z%2BsMdxMcIozeqRS%2FeTnT1Fi%2Fenbbx6QM4lYwwHLgnazScch60YGZ8O7N48nP3dy51Pb162YfiwSq4Ucdk22w3H648JgH6iTgejT3TgMXeeL19riQjd&portalId=275827) ### Ask AI about Lean Labs [ ![](https://www.leanlabs.com/hubfs/LL%20v5/Images/Logos/chatgpt.svg) ChatGPT ](https://chat.openai.com/) [ ![](https://www.leanlabs.com/hubfs/LL%20v5/Images/Logos/googlegemini%201.svg) Gemini ](https://www.google.com/search?udm=50) [ ![](https://www.leanlabs.com/hubfs/LL%20v5/Images/Logos/perplexity%201.svg) Perplexity ](https://www.perplexity.ai/search/new) [ ![](https://www.leanlabs.com/hubfs/LL%20v5/Images/Logos/claude%201.svg) Claude ](https://claude.ai/new) [ ![](https://www.leanlabs.com/hubfs/LL%20v5/Images/Logos/copilot.svg) Copilot ](https://copilot.microsoft.com/) Ask AI ```json { "@graph": [ { "@id": "https://www.leanlabs.com/#organization", "url": "https://www.leanlabs.com/", "logo": { "url": "https://www.leanlabs.com/favicon.ico", "@type": "ImageObject", "width": 60, "height": 60 }, "name": "Lean Labs", "@type": "Organization", "sameAs": [ "https://www.entities.org/entity/lean-labs", "https://www.linkedin.com/company/lean-labs", "https://www.crunchbase.com/organization/lean-labs-eed8", "https://twitter.com/leanlabs", "https://www.youtube.com/@LeanLabs1", "https://www.facebook.com/LeanLabs", "https://ecosystem.hubspot.com/marketplace/solutions/lean-labs", "https://clutch.co/profile/lean-labs", "https://www.g2.com/products/lean-labs/reviews", "https://opencorporates.com/companies/us_fl/P23000000218", "https://www.agencyspotter.com/lean-labs" ], "slogan": "We help companies on HubSpot Drive Growth", "address": { "@type": "PostalAddress", "postalCode": "34638", "addressRegion": "FL", "streetAddress": "16703 Early Riser Avenue, Suite 11", "addressCountry": "US", "addressLocality": "Land O' Lakes" }, "founder": { "name": "Kevin Barber", "@type": "Person", "sameAs": "https://www.linkedin.com/in/thekevinbarber", "jobTitle": "Head of Growth" }, "memberOf": { "name": "HubSpot Diamond Partner", "@type": "Organization" }, "knowsAbout": [ { "url": "https://www.leanlabs.com/solutions/answer-engine-optimization-agency", "name": "Answer Engine Optimization", "@type": "Thing" }, { "url": "https://www.leanlabs.com/solutions/growth-driven-design", "name": "Growth-Driven Design", "@type": "Thing" }, { "url": "https://www.leanlabs.com/solutions/loop-marketing", "name": "Loop Marketing", "@type": "Thing" }, { "url": "https://www.leanlabs.com/solutions/hubspot-projects", "name": "HubSpot", "@type": "Thing" }, { "url": "https://www.leanlabs.com/solutions/lead-generation-website", "name": "Lead Generation", "@type": "Thing" }, { "url": "https://www.leanlabs.com/solutions/website-redesign", "name": "Website Redesign", "@type": "Thing" }, { "url": "https://www.leanlabs.com/expertise/saas-marketing-agency-hubspot", "name": "SaaS Marketing", "@type": "Thing" }, { "url": "https://www.leanlabs.com/expertise/healthcare-marketing-agency-hubspot", "name": "Healthcare Marketing", "@type": "Thing" }, { "url": "https://www.leanlabs.com/expertise/fintech-marketing-agency-hubspot", "name": "Fintech Marketing", "@type": "Thing" } ], "description": "Lean Labs boosts marketing ROI for SaaS and B2B companies, driving significant growth through expert strategies, lead generation, and website optimization.", "contactPoint": { "url": "https://www.leanlabs.com/schedule", "@type": "ContactPoint", "email": "hello@lean-labs.com", "telephone": "+1-913-871-6500", "contactType": "sales" }, "foundingDate": "2007-08-10", "hasOfferCatalog": { "name": "Lean Labs Services", "@type": "OfferCatalog", "itemListElement": [ { "name": "Marketing x AI", "@type": "OfferCatalog", "itemListElement": [ { "@type": "Offer", "itemOffered": { "url": "https://www.leanlabs.com/solutions/loop-marketing", "name": "Loop Marketing", "@type": "Service" } }, { "@type": "Offer", "itemOffered": { "url": "https://www.leanlabs.com/solutions/answer-engine-optimization-agency", "name": "Answer Engine Optimization (AEO)", "@type": "Service" } }, { "@type": "Offer", "itemOffered": { "url": "https://www.leanlabs.com/solutions/hubspot-website-schema-rocket", "name": "AEO Schema", "@type": "Service" } }, { "@type": "Offer", "itemOffered": { "url": "https://www.leanlabs.com/solutions/aeo-genie", "name": "AEO Genie", "@type": "Service" } } ] }, { "name": "Web x AI", "@type": "OfferCatalog", "itemListElement": [ { "@type": "Offer", "itemOffered": { "url": "https://www.leanlabs.com/solutions/lead-generation-website", "name": "Lead Gen Websites", "@type": "Service" } }, { "@type": "Offer", "itemOffered": { "url": "https://www.leanlabs.com/solutions/websites", "name": "Website Design", "@type": "Service" } }, { "@type": "Offer", "itemOffered": { "url": "https://www.leanlabs.com/solutions/growth-driven-design", "name": "Growth-Driven Design", "@type": "Service" } }, { "@type": "Offer", "itemOffered": { "url": "https://www.leanlabs.com/solutions/website-redesign", "name": "Website Redesign", "@type": "Service" } }, { "@type": "Offer", "itemOffered": { "url": "https://www.leanlabs.com/solutions/web-migrations", "name": "Website Migrations", "@type": "Service" } } ] }, { "name": "HubSpot x AI", "@type": "OfferCatalog", "itemListElement": [ { "@type": "Offer", "itemOffered": { "url": "https://www.leanlabs.com/solutions/hubspot-projects", "name": "HubSpot Projects", "@type": "Service" } }, { "@type": "Offer", "itemOffered": { "url": "https://www.leanlabs.com/solutions/hubspot-breeze-agents", "name": "HubSpot Breeze Agents", "@type": "Service" } } ] } ] }, "numberOfEmployees": { "@type": "QuantitativeValue", "value": 12 } }, { "@id": "https://www.leanlabs.com/#website", "url": "https://www.leanlabs.com/", "name": "Lean Labs", "@type": "WebSite", "publisher": { "@id": "https://www.leanlabs.com/#organization" }, "inLanguage": "en-US", "description": "Lean Labs boosts marketing ROI for SaaS and B2B companies through expert strategies, lead generation, and website optimization.", "potentialAction": { "@type": "SearchAction", "target": { "@type": "EntryPoint", "urlTemplate": "https://www.leanlabs.com/hs-search-results?term={search_term_string}" }, "query-input": "required name=search_term_string" } }, { "@id": "https://www.leanlabs.com/blog/four-tenets-of-website-branding", "url": "https://www.leanlabs.com/blog/four-tenets-of-website-branding", "name": "The 4 Essential Tenets of Website Branding (Ignore Them At Your Own Peril)", "@type": "WebPage", "about": { "@id": "https://www.leanlabs.com/blog/four-tenets-of-website-branding#article" }, "isPartOf": { "@id": "https://www.leanlabs.com/#website" }, "breadcrumb": { "@id": "https://www.leanlabs.com/blog/four-tenets-of-website-branding#breadcrumb" }, "inLanguage": "en-US", "description": "Learn the four essential tenets of website branding including brand voice, on-brand imagery, logo usage, typefaces, and color palette to create a consistent customer experience.", "dateModified": "2026-06-01", "isAccessibleForFree": true }, { "@id": "https://www.leanlabs.com/blog/four-tenets-of-website-branding#breadcrumb", "@type": "BreadcrumbList", "itemListElement": [ { "item": "https://www.leanlabs.com/", "name": "Home", "@type": "ListItem", "position": 1 }, { "item": "https://www.leanlabs.com/blog", "name": "Blog", "@type": "ListItem", "position": 2 }, { "name": "The 4 Essential Tenets of Website Branding", "@type": "ListItem", "position": 3 } ] }, { "@id": "https://www.leanlabs.com/blog/four-tenets-of-website-branding#article", "@type": "BlogPosting", "about": [ { "name": "Website Branding", "@type": "Thing" }, { "name": "Brand Voice", "@type": "Thing" }, { "name": "Web Design", "@type": "Thing" }, { "name": "Color Theory", "@type": "Thing" }, { "name": "Typography", "@type": "Thing" } ], "author": { "name": "Kevin Barber", "@type": "Person", "sameAs": [ "https://www.linkedin.com/in/thekevinbarber", "https://www.thekevinbarber.com/", "https://www.entities.org/entity/kevin-barber" ], "jobTitle": "Head of AI Growth" }, "headline": "The 4 Essential Tenets of Website Branding (Ignore Them At Your Own Peril)", "keywords": "website branding, brand voice, brand imagery, logo usage, typefaces, color palette, website design, GDD, growth-driven design", "publisher": { "@id": "https://www.leanlabs.com/#organization" }, "inLanguage": "en-US", "description": "Learn the four essential tenets of website branding including brand voice, on-brand imagery, logo usage, typefaces, and color palette to create a consistent customer experience.", "dateModified": "2023-07-25T11:58:45.198Z", "datePublished": "2019-04-15T13:00:00.000Z", "articleSection": "Winning Websites", "potentialAction": { "@type": "ReadAction", "target": "https://www.leanlabs.com/blog/four-tenets-of-website-branding" }, "mainEntityOfPage": "https://www.leanlabs.com/blog/four-tenets-of-website-branding", "isAccessibleForFree": true } ], "@context": "https://schema.org" } { "@type": "BlogPosting", "@context": "https://schema.org", "articleBody": "If you’re like me, you send a lot of text messages. Often, I reply to my friends and family while I’m doing something else, with a quick response. However, when I need to have a serious conversation, I call them. Because as anyone knows, it’s difficult to determine tone from a text or email. It’s not what you say, but how you say it. And in website design, that’s the difference that tone of voice creates. Design evokes emotion on a subconscious level. Before you notice a single individual element on a website, your brain will evaluate what you see and make assumptions in the matter of milliseconds. I’m not an expert in web design, but I know how critical website branding can be during a site design. That's why I enlisted a few members of our Growth-Driven Design team to give their candid answers about the most critical components of a design. A lot of their answers were surprising (especially when they didn’t entirely agree), and one thing is clear. The right website branding has a significant impact on the customer experience. The Components of Website Branding Website branding is the look, feel, and tone you convey on your site. Website branding introduces your customer to who your brand is and what your brand is about. There are a few things that go into website branding, each of which is critical to have a consistent voice and branding across your site. Here’s what a few of our GDD team members had to say about each one. 1. Brand Voice Your brand voice is the tone you’ll carry throughout all of your website design and content, as well as all of your marketing channels. During the early stages of our SprocketRocket strategies, before we determine any messaging or make any design decisions, I have brands fill out a few brand voice templates, such as this grid. We study popular brand voice types, which include sophisticated brands, fun brands, and innovative brands. Here are a few different brand voice styles in action Sophisticated Brands A lot of sophisticated brands, such as Ferrari and BMW, use sleek design elements and high-resolution photos. Ferrari BMW Competent Brands Authoritative brands like Google and Harvard use simple, straight-forward language and professional looking graphics. Google Harvard Trusted Brands American Express and Subaru both desire to be trustworthy brands, so they rely on honest language and friendly colors. American Express Subaru Excite Brands Brands that want to convey excitement, like Virgin Airlines and RedBull, often use bright, vibrant colors throughout their website. Virgin Airlines RedBull Creative Brands Creative brands, such as GoPro and AppleOne, both use a minimal design and impactful imagery. GoPro AppleOne From the beginning, your preferred brand voice will have a huge impact on your site. It’s critical to identify it to inform decisions about photography, video, imagery, and messaging. 2. On-Brand Imagery In website design, consistency is key, especially with imagery. People are visual, so the imagery that you choose will have a significant impact on conversion rate. People can recall at least 2,000 pictures with around 90% accuracy. During the early stages of your website design, you can use that to your advantage by choosing a photo, icon, and graphical theme that reflects your brand. Giles, one of our designers, says “The choices must fit together, and align with the brand voice. If you can determine what emotion or after state you’re trying to convey in imagery, you can set an ongoing standard for the style of images and icons for your website, as well as content. When it comes to actually choosing imagery, Cris, one of our designers, says that “a good starting point is to focus on outcome.” “By using your product or service, what would they achieve? Would they have more time? More success? Be happier?” Additionally, there’s a decision to be made regarding icons and illustrations. A lot of brands, such as Qualio and Slack, are using iconography within their website branding. Qualio Slack “Iconography can show large amounts of information,” says Brad, another Lean Labs designer. 3. Logo Usage The best website branding will determine logo usage, or how logos are permitted to be used throughout your website and in content. You'll find that a lot of brands, like Twitter, post these standards on their website as well. This helps with consistency. Anyone working on your website will use the logo in the appropriate way. Anyone who downloads your logo or uses it within content will use the correct formats, as well. Cris has a few tips for effective logo guidelines, such as “Because of the shape of navigation bars on websites, rectangular logos work best. That doesn't mean you can't have square or round logos, but they will probably have to be shrunk down to fit in the websites navigation.” “The easiest logos to work with are rectangular shaped, with an icon positioned to the left of the brand name. this gives you the option to use only the icon, or icon and brand name.” 4. Typefaces A typical website will use 1-2 typefaces for copy, headlines, and CTAs. Personally, I’ve seen more fonts being used on a site, with a lot of interesting (and ineffective) combinations of various typefaces. “Before you decide how many typefaces you use,” says Cris, “You need to understand that typefaces work in pairings. it’s a bit like food. You wouldn’t want to mix up Sushi with Swedish Meatballs. It’s best to keep typefaces to just one or two (separate typefaces for headings and body text). A few popular modern typefaces include Google Webfonts such as Lora, Playfair Display, Roboto, and more. 5. Color Palette Colors are the primary trigger for emotion and using the right color palette can send a message and inspire a sense of familiarity. While Giles and Cris disagree about color theory (Giles says it’s BS), Giles says “Two contrasting colors work great, primary and secondary. If you start adding more, things can start to look out of place or off brand.” A few guidelines for using colors include One Primary Color - Use one primary color for links, primary calls to action, and headings. Secondary Colors - Use as accents for specific actions, such as success, info, warning, error. It’s important to choose colors that you feel are in line with your intended brand voice as well. Brad says “For example, blue is a VERY common colour, especially for software companies. “Blue can suggest security and power.” With this context, you can see why certain brands chose their primary and secondary brand colors HubSpot Reliable and Trustworthy - Blue And Orange Lemonade Lemonade, Bold and Innovative - White, Black, And Pink Lean Labs Energized, ambitious - Blue And Green Will Better Website Branding Improve Your Site Performance? Website branding plays a critical role on your website. It demonstrates your brand’s personality and often, helps deliver the right first impression. And if your website branding is drastically off, or there’s no strategy to it, it can definitely impact the performance of your website. To properly assess the quality of your brand, check out our Brand Character and Voice Workbook.", "articleSection": ["Winning Websites"], "keywords": ["Winning Websites"], "author": [ { "@type": "Person", "name": "Melissa Randall", "url": "https://www.leanlabs.com/blog/author/melissa-randall" } ], "dateModified": "2026-07-22 09:06:11.000Z", "description": "If you’re like me, you send a lot of text messages. Often, I reply to my friends and family while I’m doing something else, with a quick response. However, when I need to have a serious conversation, I call them. Because as anyone knows, it’s difficult to determine tone from a text or email. It’s not what you say, but how you say it. And in website design, that’s the difference that tone of voice creates. Design evokes emotion on a subconscious level. Before you notice a single individual element on a website, your brain will evaluate what you see and make assumptions in the matter of milliseconds. I’m not an expert in web design, but I know how critical website branding can be during a site design. That's why I enlisted a few members of our Growth-Driven Design team to give their candid answers about the most critical components of a design. A lot of their answers were surprising (especially when they didn’t entirely agree), and one thing is clear. The right website branding has a significant impact on the customer experience.", "headline": "The 4 Essential Tenets of Website Branding (Ignore Them At Your Own Peril)", "image": [ { "@type": "ImageObject", "contentUrl": "https://www.lean-labs.com/hubfs/blog_post_imgs/Featured%20Images/SR_Web-Branding-Publishing%20%281%29.png", "url": "https://www.lean-labs.com/hubfs/blog_post_imgs/Featured%20Images/SR_Web-Branding-Publishing%20%281%29.png", "caption": "The 4 Essential Tenets of Website Branding (Ignore Them At Your Own Peril)", "sourceOrganization": { "@type": "Organization", "name": "Lean Labs" }, "width": "600", "height": "315", "creditText": "Melissa Randall/Lean Labs", "dateCreated": "2019-04-15 09:00:00.000Z" } ], "thumbnailUrl": "https://www.lean-labs.com/hubfs/blog_post_imgs/Featured%20Images/SR_Web-Branding-Publishing%20%281%29.png", "inLanguage": "en", "isPartOf": { "@type" : "Blog", "@id": "https://www.lean-labs.com/blog/", "name": "Lean Labs Blog", "publisher": { "@type": "Organization", "@id": "https://www.lean-labs.com", "name": "Lean Labs" } }, "mainEntityOfPage": { "@type": "WebPage", "@context": "https://schema.org", "url": "https://www.leanlabs.com/blog/four-tenets-of-website-branding", "dateModified": "2026-07-22 09:06:11.000Z", "inLanguage": "en", "additionalType": "article_leaf", "publisher": { "@type": "Organization", "name": "Lean Labs", "@id": "https://www.lean-labs.com/#organization", "logo": "https://www.lean-labs.com/hubfs/LL%20V4.1/logos/LL%20Logo%20Dark.svg", "url": "https://www.lean-labs.com/", "sameAs": [ "https://www.linkedin.com/company/lean-labs/", "https://ecosystem.hubspot.com/marketplace/solutions/lean-labs", "https://www.glassdoor.com/Reviews/Lean-Labs-Reviews-E3982766.htm", "https://www.youtube.com/@LeanLabs1", "https://www.facebook.com/LeanLabs/", "https://x.com/leanlabs?lang=en", "https://rocketreach.co/lean-labs-profile_b5f5471df42d3400", "https://www.crunchbase.com/organization/lean-labs-eed8" ] }, "name": "The 4 Essential Tenets of Website Branding (Ignore Them At Your Own Peril)", "headline": "The 4 Essential Tenets of Website Branding (Ignore Them At Your Own Peril)", "description": "If you’re like me, you send a lot of text messages. Often, I reply to my friends and family while I’m doing something else, with a quick response. However, when I need to have a serious conversation, I call them. Because as anyone knows, it’s difficult to determine tone from a text or email. It’s not what you say, but how you say it. And in website design, that’s the difference that tone of voice creates. Design evokes emotion on a subconscious level. Before you notice a single individual element on a website, your brain will evaluate what you see and make assumptions in the matter of milliseconds. I’m not an expert in web design, but I know how critical website branding can be during a site design. That's why I enlisted a few members of our Growth-Driven Design team to give their candid answers about the most critical components of a design. A lot of their answers were surprising (especially when they didn’t entirely agree), and one thing is clear. The right website branding has a significant impact on the customer experience.", "datePublished": "2019-04-15 09:00:00.000Z" }, "publisher": { "@type": "Organization", "name": "Lean Labs", "logo": "https://www.lean-labs.com/hubfs/LL%20V4.1/logos/LL%20Logo%20Dark.svg", "url": "https://www.lean-labs.com/", "sameAs": [ "https://www.linkedin.com/company/lean-labs/", "https://ecosystem.hubspot.com/marketplace/solutions/lean-labs", "https://www.glassdoor.com/Reviews/Lean-Labs-Reviews-E3982766.htm", "https://www.youtube.com/@LeanLabs1", "https://www.facebook.com/LeanLabs/", "https://x.com/leanlabs?lang=en", "https://rocketreach.co/lean-labs-profile_b5f5471df42d3400", "https://www.crunchbase.com/organization/lean-labs-eed8" ] }, "wordCount": 2125, "datePublished": "2019-04-15 09:00:00.000Z", "isAccessibleForFree": true } ```