Design Glossary.

A method used to test two different versions of the same webpage. Different versions are displayed to users, often at random and with a set goal in mind. For example, the usage data of those pages can be analysed to determine which version of the page results in higher user engagement or performs better to a given goal.

A term used to describe the area of a webpage when first loaded, without scrolling down. The term stems from the front page of a newspaper above where the newspaper was folded and was generally considered to be the most valuable real estate for advertisers.

The accessibility of your website refers to how usable a site is to users, regardless of age, disability or impairment. It can also refer to how easily a website is utilised on multiple devices (desktop, tablet, smartphone).

An accordion is a tool comprised of an interactive list of headers that can be clicked on in order to display or hide the content inside them. They are an effective way of streamlining a text-heavy website, whilst making key information available.

Adobe XD is a vector-based tool used for creating interactive click-through designs and prototypes of user experiences on websites and apps.

A web development technique that enables different components of a webpage to refresh without having to reload the entire webpage, therefore not interfering with the display of the site.

How varying components of a website; copy, imagery, etc. are situated in relation with one another either horizontality, vertically or centrally.

Application Programming Interface (API) refers to a mechanism that allows two different systems to communicate, often ‘pushing’ information from one to another. APIs are often offered by developers to allow other systems to integrate, such as a CRM offering an API to ecommerce web developers.

The upward vertical stem on letters such as d or h, as long as it rises above the typeface’s ‘x-height’.

Back end refers to the “behind the scenes” of a website or computer program that front end users don’t interact with. For websites, this will often be used to refer to a database or content management system.

The main text of any digital or printed material.

A free and open-source CSS framework directed at responsive, mobile-first front-end web development.

An overview of your brand's history, vision, personality and key values as well as information dictating the way in which your specific font, colours and brand mark should be used. They are used to maintain brand consistency.

A brandmark is similar to a logo in that it is a singular graphic used to identify your brand. An example would be McDonalds ‘M’ is a brandmark rather than a logo. A brandmark is often an abbreviated version of a full logo, used for more subtle branding or when space is limited. A good example of this is the use of brandmarks on social media profiles, or on a website’s favicon.

A secondary navigation system often sitting in the top left hand side of a webpage, in a horizontal fashion. It allows users to see where a webpage sits within the site structure. It also allows users to be able to click through to pages that sit directly above the current page in the Information Architecture.

The program on your computer that reads HTML and displays websites to you, the most popular ones include the likes of Google Chrome, Mozilla Firefox and Safari.

A common term used to describe an icon placed in the top right or top left corner of a website or app instead of a traditional menu bar. Interacting (clicking or tapping) the burger menu displays further menu options. The burger menu grew rapidly in popularity amongst designers alongside the growth of smartphones, with the reduced space requiring a different navigation system to traditional desktop menus.

In the world of search engine optimization (SEO), it's crucial for your website to be found by your target audience. To achieve this, you need to ensure that your website is indexed and ranked by search engines like Google. One tool that plays a significant role in this process is Google Cache.

A security measure designed to stop automated programs (bots) from submitting forms or information to a website. Most often used to prevent automated spam.

A type of image slider display that usually involves more than one image transitioning in a circular 3d motion, as if you were standing in front of an actual carousel.

In a design sense, if two items are complementary it means that, whilst different, they fit together in an aesthetically pleasing way. This could be two colours such as blue and orange or even two different fonts.

Compression is the process which takes the original file and makes it smaller. In relation to web design, this compression reduces the amount that a browser has to load therefore having an impact on the time it takes to load a webpage.

The earliest stage of a design idea, a concept could be anything from sketch work to a snapshot of a website homepage. Concepts are often used by designers to provide initial ideas and styles, prior to continuing with much of the project’s ‘heavy lifting’.

A content management system is what is used to control a website’s content, often without the need of web development knowledge. Changing page information or uploading a blog post is done through the CMS. Popular CMSs include Wordpess, Shopify, Drupal and Joomla (amongst others).

A web design philosophy where a website is designed to function properly on modern browsers. However, when the site is displayed on older browsers, graceful degradation would dictate the key functionality and elements that would display on older browsers or smaller screens.

See ‘burger menu’

See ‘Burger Menu’

See ‘Hover State’

Where design elements respond to a cursor ‘hovering’ over it, without clicking. Can be used on call to actions to entice the user into clicking on a button. However, hover states are not exclusive to buttons. Hover state can be used to describe any animation of an webpage element when the cursor is hovering over it. It can also be used to describe how a cursor changes when over certain elements.

Tracking refers to expanding or contracting the distance between lettering in graphic design.

A common form of placeholder or ‘dummy’ text used by designers. Originally created in the 15th century, it has stood the test of time across various mediums including print and digital designs.

A “sticky menu” or “fixed navigation” is a website menu that is locked to the top or side of a webpage so that when a user scrolls, the menu does not disappear. This makes the navigation menu accessible at any point for the user.

Stock photos are professional photographs of common places, events, or situations that are sold on a royalty-free plan and once purchased, can be used and re-used for commercial or private design purposes.

SVG stands for Scalable Vector Graphic. Because SVGs are vectors and not rasters, they can be resized and scaled without losing image quality or clarity. This scalability also means that they’re perfect for use across responsive sites, specifically for logos. We wouldn’t recommend using them too regularly though, as their large file size means that they could hinder your site’s load speed.

A template refers to a design that is created to provide a layout or blueprint to be applied to documentation. Templates are frequently used to ensure brand consistency across files. A web design template would be a webpage template that can be reused, with different text and imagery.

The fold refers to the lowest point on a webpage that a user can see upon first loading, prior to the user scrolling down. The origins of this was the fold of a newspaper.

See ‘Burger Menu’

The art and theory of arranging text, designing a typeface or designing elements that can be applied to text.

Usability refers to the level of difficulty or ease that a user will experience when interacting with a product or website whilst trying to complete an action(s).

Usability testing is performed in instances where a product is user-focused. It is where people will use the product, often with set questions or prompts, with the aim of completing a specified action. In the case of websites, it enables developers and designers to get a direct and genuine insight into how users will use the product without the bias of previous knowledge.

Similar to usability testing, UAT is the process through which designers and developers will assess if a website/webpage functions how it was intended, for real users. This is often the final stage of testing prior to sending a website live.

“UX” is shorthand for “User Experience”. It refers to any and all interaction that a user will have with an interface.

User flow refers to the steps that would be taken by a typical user on a website or app in order to complete any given task. For example, in the case of an e-commerce site, the steps that a customer progresses through from opening the site to completing a purchase, depict a particular user flow through the site.

Short for “User Interface”, UI refers to how a user will interact with a website. The interactive elements of a webpage form the UI, commonly thought of as menu options and call to actions. UI Designers will look to use elements to provide the most intuitive navigation through the website possible.

Refers to the importance or ranking of elements within a design. That is to say the order in which someone might see design elements. It is not necessarily in a ‘top down’ format. Various elements will attract the eye more than others and therefore affect their position within the visual hierarchy.

A webform allows users of a webpage to input data that is then sent to a server to be processed. Webforms are frequently used to enter information into contact forms or e-commerce functionality to fulfil their specific tasks.

A web-friendly font is a font that safely renders across the vast majority of operating systems. When a web page loads on your screen, the site’s code specifies the font that your computer should render on the screen. Devices are built with their own pre-installed font selection, this varies from OS to OS.

This is a notorious issue across Windows and Apple computers -- Apple computers as standard are built with one set of fonts installed, however Windows computers are built with another set of fonts installed. As such, if the browser is requesting Helvetica from a Windows computer, it will instead display Arial as a substitute font.

White space (also referred to as negative space) refers to any section of a document or design that is unused or represents empty space around an object. White space helps to separate graphics, copy and other pieces of information on a document and can help a document to look less crowded.

An interface that enables a user to access a portion of a larger application to perform a function or access a service. A popular example would be the weather widget displaying on the homepage of your phone. The summary of the day’s weather isn’t the only feature that the app offers, however it provides a portion of the service that the app offers at a glance. Widgets are popular within content management systems, allowing blocks to display repeating information across multiple pages.

A term used within typography to describe when a single word appears by itself on a line, often at the end of a paragraph. It can also refer to a small group of words that appear on a separate page of a document (separated from the main block of text that they belong to). Widows are generally considered to be ‘lazy’ design and create an unbalanced and messy aesthetic to a document or website’s typography.

A design process through in which only critical elements and structure are included. Often completed in black and white and as part of the concept process, it allows preliminary structures to be agreed prior to more detailed designs taking place.

WordPress is a content management system (CMS), and website building platform. At the time of writing, there are 75,000,000 using WordPress, with around half of those sites being hosted on the WordPress.com shared hosting installation. It is (by quite a margin) the most popular OpenSource CMS in the world.

The X-Height or corpus size refers to the distance between the base and top of lowercase letters in a typeface. In most cases this is measured by the height of the letter X, however V, W and Z are also typically used.