28 B2B Website Design Terms You Should Know [Infographic]

Table of Contents

    [B2B Website Terms As An Infographic]
    Oh yes! I am guilty of it. If you’ve been in a single industry for as long as I have, you tend to assume that everyone knows your industry terms and jargon. You start spewing phrases to customers and the look at you like deers in headlights. I get that way of talking to my financial advisor.

    To help you quickly understand these terms, I’ve put together 28 website terms that you should probably understand when working on your website with a web designer. From layout, code, process, design and basic web terms, these definitions should help you discuss your needs and understand various elements.

    Download Larger Version

    infographic website design terms

    Website Design Terms

    Layout Terms

    1. Header – The section of a website that runs across the top of every page. The header promotes your brand making it instantly recognizable as well as space for specific calls to action like your phone or log in.
    2. Banner – The banner is typically found on the homepage but can be found on inner pages. This section typically serves as the Hero Image with the primary call to action or, on subsequent pages, the page main title and breadcrumbs.
    3. Footer – Found at the bottom of a website, the footer serves as a secondary section for the more technical information. Some footers might include more contact information, another menu, company policies, links to privacy and terms and conditions pages.
    4. Sidebar – The sidebar is the column on the right or left that displays information that helps users dig deeper into the website. More recent websites have removed the sidebar but they can still be found on blog pages.
    5. Body – This area is the section that includes the actual content of text describing that page.

    Code Terms

    1. HTML – (HyperText Markup Language) – The standard format for web pages. Every web page contains HTML tags that define the page’s layout.
    2. CSS – (Cascading Style Sheets) – A formatting document that improves HTML layout.
    3. PHP –  (Hypertext Preprocessor) A scripting language that is widely used to create dynamic Web pages. It is the core language used to extract data out of a database, specifically MySQL databases.
    4. MySQL – A type of relational database that runs under most operating systems.
    5. Javascript – A widely used programming language that is embedded in most Web pages. It enables interactive functions to be added to Web pages, which are otherwise static.
    6. Cache – This refers to data that is stored locally on a computer. It helps speed up subsequent website downloads. Pronounced “cash.”

    Process Terms

    1. Wireframes – This is an image that displays the functional elements of a website to help plan a site’s structure and functionality.
    2. Prototypes – This is a preliminary model of the website. Typically it lacks any design and is used for testing under more realistic conditions.
    3. Beta – This is the testing phase and allows for functionality and user interface but with the design intact.
    4. Live – When moving a website live from the beta stage, there steps that need to happen for a smooth transition.

    Design Terms

    1. Websafe Fonts – There is a standard set of font that is used on most computers. These are fonts that are pre-installed by operating systems but not all computers have the same fonts installed. Using a web safe font ensures that your fonts show properly.
    2. UI – User Interface is the actual design of a website.
    3. RGB – Red, green, and blue colors generally used in digital format.
    4. UX – User Experience is the study or the field where website user behavior is studied.
    5. Padding – The space between a border and the object within it.
    6. Margin – The space outside a border and the object.
    7. White Space – The area left empty on purpose to help focus other objects on the page.

    Web Terms

    1. Above the Fold – A phrase pulled from printing, it is the content positioned in the upper portion of a web page before you have to start scrolling down the page.
    2. Hero Image – A large banner image at the top of most website homepages. It is the first visual element a website visitor sees.
    3. Responsive – Some call it mobile-friendly. This means your website can adjust its layout based on the size of the screen and the device.
    4. Resolution – The number of distinct pixels in each dimension of a display device.
    5. SSL – Secure Socket Layer is the standard security technology to encrypt information between a web server and a browser.
    6. URL – The URL, Uniform Resource Locator, is the address that identifies where documents can be found on the Internet. For example, company.com/document.pdf is a URL.

    Embed 28 Website Design Terms on Your Site: Copy and Paste the Code Below

    b2b website design terms

    Blog Categories

    Posted in

    Christina Hawkins

    Christina Hawkins is CEO of GlobalSpex, Inc. and a Fractional CMO for her clients. A seasoned digital marketer since 1999, Christina has designed and built exceptional websites partnering with small businesses to help them grow and increase revenue. She understands that digital marketing is a constantly evolving technology and works to stay on top of the latest changes. She is always looking for the best route for clients' lead generation needs and revenue. In addition to her ability as a digital marketer, Christina is a coach and mentor with Agency Mavericks to other digital marketing freelancers, helping them grow their businesses. She is also a sponsor and co-leader of Houston's WordPress Meetup.


    1. Jaun-Paul Stevenson on December 11, 2018 at 6:54 am

      Do you have a higher resolution version of this infographic? The one it embeds is not easy to read. I’d love to share it please it is such useful information for our clients.

    Leave a Comment