Share Post

Filed in Branding, Websites

Branding and website terms simplified

The world of branding and websites comes with a lot of specific terminologies and over the years I’ve built my own dictionary of the most important terms related to the work I do. But if you aren’t a brand or website designer, these words could seem foreign. To help you make more sense of it, I’m giving you my simplified definitions of key brand and website terms that you need to know when building your brand.

What are brand and website terms?

So first off, let’s define what exactly a brand or website term would be. I am considering it to be any word or phrase that is used often when referring to something with your brand or website development. It’s the jargon-y language that designers often use when talking about the look, function, or strategy of your brand of website.

Why you need to know them

While it isn’t required for you to know these terms (don’t worry there won’t be a pop quiz at the end!), it is helpful for you to be familiar with these brand and website terms so that you can speak to your designer or strategist easily and understand what they are saying. Even if you don’t work directly on the design or development of your brand and website, you are still the creative director to this part of your business and learning these brand and website terms will help you be more comfortable and confident when building your brand.

Brand Terms

  • Brand – A brand is the complete experience customers have while interacting with a business. This includes visual aspects (logo, colors, fonts, images) and non-visual aspects (mission, tone, positioning, customer service, etc.)

  • Brand Strategy – Your brand strategy is the foundational strategy that guides the rest of your brand and business decisions. This includes things like positioning, messaging, voice, personality, perception, customer journey, and more.

  • Target Audience – These are the people that you are serving. It goes deeper than their demographics (age, gender, etc.) to understand their biggest struggles and problems so you can offer a direct solution to them.

  • Brand Personality – These are the qualities and characteristics of the brand that make it personable and memorable.

  • Brand Differentiation – Brand differentiation is the solution or advantage that your brand has to offer to consumers that make the brand valuable in their eyes. Value propositions should explain how a company can deliver benefits to potential customers.

  • Brand Positioning –  A brand’s positioning is what allows it to occupy a distinct place in the mind of the customer, in opposition to (or separate from) competing brands.

  • Brand Voice – Voice is certainly one of the most important terms in a branding dictionary, and it refers (quite literally) to the way the brand sounds to consumers. Based on specific word choices and language styles, a voice shapes a brand’s personality and how it is perceived by the people it is trying to communicate with.

  • Brand Messaging – Your brand messaging can make or break your brand. It’s the stories, words, and messages that you communicate to your audience. It’s the way that you tell them what you do, who you are, how you can help them, etc.

  • Brand Purpose – The purpose of your brand is most often referred to as your why.

  • Brand Promise – A brand promise is one of the most powerful aspects of your brand strategy. It is the value or results your customers can expect to receive every single time they purchase from you or work with you. It’s the tangible benefit that makes a product or service desirable. Your brand promise answers the question: What results or transformation do you provide?

  • Brand Mission – A brand’s mission statement explains what it intends to do and the reason it has been brought into being. It should discuss the products or services provided, the intended audience of customers, and the general idea behind your company.

  • Brand Vision – A brand’s vision statement outlines what the business hopes to achieve and accomplish in the long run. It can serve as a guide for decision-making within a business.

  • Brand Values – The underlying values of your brand explain what your business stands for and what values you uphold in your business.

  • Brand Identity – This is the visual aspect of your brand. It’s how the strategy is visually communicated to your audience.

  • Brand Assets – Brand assets are the individual elements that form a visual brand. These include logo files, fonts, colors, icons, patterns, etc.

  • Brand Strategy Guide – This is a guide for all of your brand strategy items so that you can easily reference the foundational elements of your brand when needed. It also helps to inform other team members of your strategy so that everyone is on the same page.

  • Creative Brief – A creative brief is a document that gives a general overview of who the design project is for, what it will entail, and how it will be used. Think of it as a roadmap to guide creative work.

  • Brand Guidelines – This is a guide that helps you keep track of all your branding assets. Brand guidelines outline how your brand should be expressed – both visually and verbally – any time you create new sales, marketing, and packaging materials across various mediums.

  • Brand Style Guide – A style guide refers to a summary of your brand identity that is presented in a document for easy reference.

  • Tagline – A tagline is a concise phrase or statement that helps explain the purpose of your brand

  • Mood board – A moodboard is a collage of images designed to evoke the intended mood or style of your brand. It’s used to inspire the direction of the brand design.

  • Primary Logo – A logo is a design asset that is meant to serve as a recognizable symbol to represent an organization or company. Logos are usually composed of images and/or text, and they serve as a shorthand to clue consumers into both the aesthetic nature and values of the company.

  • Logo Variations – Your logo variations are just that: variations of your logo. There are typically a few different variations of your main logo to be used for different scenarios in your brand materials. For example, there might be a more vertical version, a simplified version, a round version, etc.

  • Brand Mark – A brand mark is a visual element or symbol used to identify a brand. Like the apple for Apple or the swoosh for Nike.

  • Color Palette – A color palette is a group of colors used together for a brand. A palette helps to keep your brand look consistent across all of your marketing.

  • CMYK – CMYK stands for Cyan, Magenta, Yellow, and Key (Black) and is generally the color mode you want to choose if you’re going to be printing your designs.

  • RGB – RGB stands for Red, Green & Blue and is the color mode used by screens, such as computers and TV screens. Use RGB if your designs are going to be online (websites, social media graphics, etc.)

  • Pantone – Pantone is an industry-standard color matching system that helps keep colors accurate through various printing and manufacturing processes. Generally, they are used by large, well-known brands who need to keep colors very specific and consistent.

  • HEX Code – HEX (hexadecimal) Code is a numbering system used to represent colors. HEX codes are typically used to define colors in web design, but can also be used in any design software, making it an easy system to use for brand colors.

  • Gradient – A color gradient is a subtle progression from one color to the next, or a fading of one color from full intensity to transparent.

  • White space – White space refers to the portion of a document or design that does not contain text or images. It’s used to create balance and visual “breathing room” in a design, as well as to help direct the reader’s eye through the content. White space is also sometimes referred to as negative space.

  • Margins – Margins refer to the space or edge around a document or design.

  • Typography – The terms typography and font are often used interchangeably (which in my opinion is no big deal!) Traditionally, typeface referred to the font family and its aesthetic qualities (such as Arial) and font referred to the typeface at a specific size and weight (such as Arial, 12pt, bold) or the availability of the various sizes and weights.

  • Kerning – Kerning refers to adjusting the spacing between characters in a word. It is sometimes adjusted for readability and balance or to achieve a certain look within a word.

  • Tracking – Tracking refers to adjusting the spacing within a group of letters or block of text. It is also used to improve readability and balance, or to create a more dense or expanded look within blocks of text.

  • Leading – Leading refers to the vertical space between lines of text for improved readability or effect.

  • PNG – A PNG file is one with a transparent background typically used for web.

  • JPG – A JPG file is the most commonly used file type and includes a white background.

  • Vector – A vector image is a digital image made up of paths (lines) rather than pixels. This allows for the image to scale without losing quality. For example, logos are designed as vector images. EPS, AI (Adobe Illustrator file), and SVG are examples of vector image files. Generally you need design software to open vector images, and they need to be exported as bitmaps in order to be used on websites or social media.

  • Resolution – Resolution is a term used to describe the quality of an image or a printed piece. It’s measured in PPI (pixels per inch) for screens and DPI (dots per inch) for printers, which refers to the number of dots/pixels in one inch of the image.

  • Patterns – Patterns are digital images often incorporated as a background in a design. Patterns are used to create interest, add texture or achieve a certain look. Patterns can be part of a brand identity.

  • Icons – Icons are digital images used to represent a subject matter, object or an action. For example, the image of an envelope is an icon commonly used to represent contact details or e-mail. Icons can be part of a brand identity.

  • Mockup  – A mock-up (also called a proof) is a representation of how a design will look when finished in order to demonstrate the design in a realistic way.

  • Collateral – Brand collateral pieces are the physical, visible objects that have been created to represent a brand. Collateral can range from things like brochures and flyers to Facebook ads and signs at events.

Website Terms

  • Platform – The website building platform is referring to the software that you’re actually using to build your website with (Showit, Squarespace, Shopify, etc.). 
  • Hosting – Web hosting is the place where all the files of your website live. Web hosting makes the files that comprise a website (code, images, etc.) available for viewing online. Every website you’ve ever visited is hosted on a server. Some website platforms also host your site.
  • Domain – A domain name is the title of your website, i.e. what you type in a URL bar to access the site. Domains are important for branding and marketing, since they often create a first impression of the brand for consumers.
  • Sitemap – A sitemap is a model of a website’s content designed to help both users and search engines navigate the site.
  • Navigation – This is the links that are used to guide people through your site. A navigation is typically at the top of a website.
  • Main Navigation – This is where your primary navigation, or list of important pages, will go. Typically, I recommend keeping this at 6 pages and under.
  • Secondary Navigation – A secondary navigation is typically used for less important pages or to split your navigation if you have a lot of pages. You’ll find this in the top right corner of a lot of websites.
  • Footer Navigation – You can either have a second or third list of navigation items in the bottom area of your site, or just repeat your primary navigation again.
  • Dropdown – This is a list of links/pages that shows up under a main navigation item. You can have a drop-down menu that either drops down when you click or when you hover.
  • Header – The header area is at the top of your site and typically contains the logo, navigation, and social media links.
  • Footer – This is the whole bottom of your site, and it typically doesn’t change page-to-page.
  • Banner – A banner image would be the first thing you see under the navigation. Full-Width Image means that it stretches from edge-to-edge with no padding on the outsides.
  • Above the fold – This refers to anything on your site that can be seen on the initial loading screen before having to scroll down.
  • Section or Canvas – Most website pages are divided into sections or canvases.
  • Copy – This refers to the content that is on your site.
  • Call to Action – A call to action is a button or photo that invites someone visiting your website to do something next. You want this to be clear and simple
  • Form – A website form is a way to capture information about your website visitors. You can create a form directly on your website or embed from a third party service like Honeybook.
  • Parallax – Parallax scrolling is the effect of a website layout to move at a slower rate than the foreground when the user scrolls, creating a 3D-like effect.
  • Lightbox – This refers to when images and videos fill the screen, and dimming out the rest of the web page. Typically you would click something to open the lightbox effect.
  • Overlay – An overlay is when something is placed on top of another image or object. 
  • Opacity – Opacity refers to the transparency of an element. 
  • Animation – This refers to the movement of different elements on your site. 
  • Hover – A hover effect happens when your mouse hovers over an element causing something to change. For example, if you hover over a button and the color changes. 
  • Favicon – The favicon is an icon associated with a URL that is displayed in a browser’s address bar or next to the site name in a bookmark list.
  • Responsive – Responsive web design creates dynamic changes to the appearance of a website, depending on the screen size and orientation of the device being used to view it. This is what makes your website optimized for mobile devices.
  • URL – The URL is the address of a web page. For example,
  • Slug – A Slug is the unique identifying part of a web address, typically at the end of the URL. For example,
  • SSL – Web servers and web browsers rely on SSL protocol to help users protect their data during transfer by creating a uniquely encrypted channel for private communications over the public Internet. This is what keeps your site safe for users.
  • 404 – This refers to an error message displayed by a browser indicating that an internet address cannot be found.
  • Cookies – Cookies are text files with small pieces of data — like a username and password — that are used to identify your computer as you use a computer network. Specific cookies known as HTTP cookies are used to identify specific users and improve your web browsing experience.
  • Page title – A page title, also known as a title tag, is a short description of a webpage and appears at the top of a browser window. It is an important element of an optimized SEO page. A page title should include a page’s keyword in the title tag.
  • Page description – The meta description or page description is one of the meta tags. The page description for a web page is usually displayed when the page for a specific query.
  • Text Tags – The HTML <text> tag is used to define the single-line text field on a web page.
  • Image Optimization – This means resizing your images smaller before uploading them to your site to help optimize your website load speed. 
  • Template – A template is a pre-designed layout or design. In this case, a website template is a pre-made website that you can use as a starting point for your own site. 
  • Hex or color code – A color hex code is a hexadecimal way to represent a color in RGB format by combining three values – the amounts of red, green and blue in a particular shade of color.
  • Pixels – A ‘pixel’ (short for ‘picture element’) is a tiny square of colour. Lots of these pixels together can form a digital image. Your website is measured in pixels. 
  • White Space – The amount of space that surrounds elements – like how far away they are from each other and the edges of the page. 
  • Margins + padding – Margin describes the spacing between elements on a webpage. Padding is the space that’s inside the element between the element and the border.
  • CSS – CSS describes how HTML elements are to be displayed on screen.
  • Code or HTML – HTML is a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on websites.
  • Javascript – JavaScript is a programming language commonly used in web development.
  • Embed code – An embed code provides a short code usually in HTML language for users to copy and paste into a website.
  • Plugin – A plugin is a piece of software that acts as an add-on to a web browser and gives the browser additional functionality.
  • Freebie / Opt-in Gift / Lead Magnet – This is a free digital gift that people often give away from their website in exchange for someone’s email address.
  • Email list –  The list of people and their email addresses that you’ve collected via your freebie. This is usually housed in an external email marketing service like Flodesk or Convertkit.
  • Email Marketing Service – This is where your email list lives. It’s an online software that collects the names and email addresses from your freebie and at the same time automatically sends people their freebie gift. This is also what you use to email your list with, rather than manually from your gmail account. 
  • Opt-in form – The form that you embed on your website that is connected to your email marketing service. People enter their name and email address into it, and it then adds them to your email list. If someone does this, it’s said that they’ve “opted in”.
  • Popup – A box on your website that offers your freebie and contains the sign up form. The popup is not normally visible, but then will pop up on the screen in front of your website visitor as they explore your site. 
  • Conversions – Your website conversion rate is the amount of people who see your sales page or product page vs those who actually buy. 
  • Traffic – Traffic means the amount of people that visit your website on a daily, weekly, or monthly basis.
  • Google Analytics – This is a free service from Google that you connect to your site and it measures your traffic.
  • Facebook Pixel – This is a few lines of code from Facebook that you copy into the header section of your website. This code allows the pixel to receive information about the actions taken on your site to make your Facebook ads more relevant to your audience.

More Resources

save this article

Enjoy this article and find it helpful? Pin this image on Pinterest so you’ll always have this info on hand!