Glossary

The terminology buster for all things design and development

A

A/B split testing
A randomised experiment with two variants to see which performs best. Often applied in marketing campaigns such as advertising.
Above the fold
Content on a website or application that appears before the user has to scroll.
Accessibility
The process of making web content accessible to people who are visually impaired, hearing-impaired, colour blind or anyone else who cannot use a computer in a conventional manner.
Alignment
The lining up of elements to achieve balance, order, and a more logical layout. There are also four common types of typographical alignment – center, left, right, and justified, each with their own time and place for application.
AJAX (Asynchronous JavaScript and XML)
Typically used for creating dynamic web applications and allows for asynchronous data retrieval and content updating without having to reload the page.
API (Application Programming Interface)
A set of functions and procedures allowing the creation of applications that access the features or data of an operating system, application, or other service.

B

Back end
The magic part of the website or app that nobody sees which makes everything miraculously work. Consisting of databases, CMSs and APIs amoungst other things.
Below the fold
Refers to content that appears off the bottom of the screen for the average website visitor in their browser.
Bootstrap
Bootstrap is a free and open-source CSS framework created by Twitter directed at responsive, mobile-first front-end web development.
Breadcrumb
Navigational elements that usually appear at the top of a website to indicate the current page the user is on and any parent pages that have led the user to the current page. Think of Hansel and Gretel forming a trail back to their home.

C

Call to action (CTA)
It refers to any device designed to prompt an immediate response or encourage an immediate behaviour e.g. the contact button at the top of this page for when you want to start a new project with us.
Cache / caching
Cached files are those that are saved or copied (downloaded) by a web browser so that the next time that user visits the site, the page loads faster.
Content Management System (CMS)
A back end tool for managing the content of a website. The CMS is generally used for editing and updating content such as text, images and video all within a back end user interface. We build sites using the popular WordPress CMS and Laravel Nova.
CMYK
CMYK or ‘Cyan, Magenta, Yellow, Key’, is a colour model that is used for print purposes. CMYK is a subtractive colour, this means that we begin with white and end up with black. So, as we add more colour, the result turns darker. Not to be confused with RGB!
Component
An identifiable part of a larger program or construction. Usually, a component provides a particular function or group of related functions.
Conversion
The completion of a predefined goal. This is often used to track the number of site visitors that have been “converted” into paying customers, though sales are not always chosen as the metric. Other common goals are newsletter subscriptions and content downloads from the website.
Copy
The text used for a particular page. The result of a copywriter and a coffee or two. The best copy is short, engaging and convinces you to do something (buy more things).
CSS (Cascading Style Sheets)
Code that defines how to display HTML elements in external style sheets that enable you to change the appearance and layout of all the pages in a website by editing one single file. Think of this as the set of design system rules, but in code.

D

Database
A database is an organised collection of data, generally stored and accessed electronically from a system.
Design system
A set of visual rules and components that helps develop consistent, branded user experiences across all digital products or platforms.
DNS (Domain Name Service)
The DNS converts IP addresses into domain names. DNS servers are provided with the IP address of your web server when you assign your domain name to those servers. In turn, when someone types your domain name into their web browser the DNS servers translate the domain name to the IP address and point the browser to the correct web server. Also one of the easiest ways to knock your site offline for up to 24 hours, always best to leave this to someone who knows what they're doing.
Domain
The name by which a website is identified. Our domain is haio.design, pretty neat.

E

E-commerce
E-commerce is the activity of electronically buying or selling of products on online services or over the Internet. The catalyst for all your late night impulse buying.
End user
The person who ultimately uses the product, and who we, at Haio, design for.

F

Favicon (Favourite icon)
The image located at the top of each browser tab or window. Every website can have its own favicon. The small icon will also appear in search histories, next to bookmarks and on browser tabs and desktop icons.
Flat design
A simple, graphic style common in user interface (UI), software and Web design. It adopts the visual style of solid colours and minimal depth. The flat style contrasts with skeuomorphism, a design approach that seeks to bring real-world effects to the items that are represented.
Front end
The more visual part of the website that the user can see such as pages and components. More specifically it contains the User Interface (UI). We build our front ends in HTML, CSS, SASS, JS, React & Vue.

G

GitHub
A software platform for developers to control versions of their code and host it for collaboration and source code management.
Gradient
A gradual change in colour from one tone into another. Two common types of gradients are the linear gradient where each colour sits on opposite sides of the frame, and a radial gradient where one colour sits in the middle, and another at the edge. Out of fashion until Instagram brought it back in 2016.
Grid
A framework made up of evenly divided, intersecting columns and rows. Grids help designers to align and arrange elements in a quicker, neater, and more consistent way.

H

Header tags (H1, H2, H3 etc)
Header tags are used in HTML for categorizing text headings on a web page, with H1 being the most important title, descending by number / importance in hierarchy. Important to gain those precious SEO bonus points.
Hex code
A hex is a six-digit number used in HTML, CSS, and design software applications to represent colours. Our favourite is #2480FF.
HTML (Hypertext Markup Language)
Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript.

I

IA (Information Architecture)
This means how a website, app or other digital platform is structured, so it looks at things like how sites are labelled, its search function and its databases. Like building block-based architecture, it’s about the structure and the build, just in a digital way.
iframe
An HTML element that allows for one webpage to be included inside another web page. It is a common way to create embeddable interactive features such as videos or forms. Real life Inception without Leo.

J

Java
A general-purpose programming language that is class-based, object-oriented, and designed to have as few implementation dependencies as possible.
JavaScript
Often abbreviated as JS, is the programming language of HTML and the Web. JavaScript allows implementation of complex features on web pages such as dynamically updating content. It’s also how we power a lot of our silky-smooth web animations.
jQuery
A JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and AJAX. Obviously.
JSON (JavaScript Object Notation)
An open-standard file format or data interchange format that uses human-readable text to transmit data objects consisting of attribute–value pairs and array data types.

K

Kerning
The adjustment of space between two characters in your type. Kerning is a common design term and usually aims to achieve a more proportional and pleasing balance of space between each character.
Key Performance Indicator (KPI)
A performance indicator or key performance indicator is a type of performance measurement. KPIs evaluate the success of an organisation or of a particular activity in which it engages. Very important that all out projects start by defining the KPIs the project should achieve!

L

Landing page
A single web page that appears in response to clicking on a search engine optimised search result, marketing promotion, marketing email, or an online advertisement. Typically, any page where website visitors land when they first reach your site.
Laravel
Laravel is an open-source PHP web framework, intended for the development of web applications following the model–view–controller architectural pattern and based on Symfony.

M

Margins
The space around the edge of a page or element.
Mockup
Static representations of a website, web page or app. It is essentially a mid to high fidelity depiction of what the digital product will look like. Thanks to modern design tools, they can also act as interactive prototypes.
MySQL
An open-source relational database management system (RDBMS). Its name is a combination of "My", the name of co-founder Michael Widenius's daughter, and "SQL", the abbreviation for Structured Query Language.

N

Nesting
Refers to putting one HTML element within another element. When this is done, the elements have to be closed in the reverse order from how they were opened.

O

Opacity
The degree of transparency an element has. The lower the opacity, the more transparent an element is. It’s for the best that we are transparent about this.
Open-source
Open-source software is a type of computer software in which source code is released under a license in which the copyright holder grants users the rights to study, change, and distribute the software to anyone and for any purpose without charge.

P

Pagination
Dividing information into separate sequentially numbered or linked pages.
PHP (Hypertext Preprocessor)
PHP is a general-purpose programming language originally designed for web development.
Prototype
A preliminary model or archetype of a web page or website used to demonstrate or test the user experience and various task flows.

R

React
React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.
React Native
React Native is an open-source mobile application framework created by Facebook. It is used to develop applications for Android, iOS, Web and UWP by enabling developers to use React along with native platform capabilities.
Responsive
Responsive design aims to create sites and other digital platforms that give an optimal viewing experience across all platforms. This usually means the layout adapts to the screen size, so a site that looks great on a desktop computer will also function in a way that is more friendly for devices when viewed on a mobile or tablet, with scrolling or panning that makes sense on that particular screen.
RGB
RGB or ‘Red, Green, Blue’ is a colour model that is used for on-screen purposes. RGB is an additive colour, meaning that when mixing colours, we start with black and end up with white as more colour is added. Not to be confused with CMYK.

S

SaaS (Software as a Service)
Software as a service is a software licensing and delivery model in which software is licensed on a subscription basis and is centrally hosted. It is sometimes referred to as "on-demand software".
SASS (Syntactically Awesome Style Sheets)
A CSS pre-processor providing variables and other extended features.
Scale
The change of size of an object while keeping its shape and proportions intact. Large scale can create drama, and smaller scale can create fine detail.
SEO (Search Engine Optimisation)
The process of increasing the quality and quantity of website traffic by increasing the visibility of a website or a web page to users of a web search engine.
Server
A computer program or device that provides functionality for other programs or devices, called "clients". Servers are responsible for hosting websites and its data.
Sitemap
A list of all pages on any given website. Sitemaps are determined at the start of a web project as a structural process or exported as a list when a website is complete to be submitted to search engines for enhanced SEO.
Sprint
A set period of time during which a certain task or activity is completed and then reviewed.
Stock Photo
A professionally shot photograph available online for licensing. Stock photos are usually used in lieu of hiring a photographer, or if a designer cannot access the images they need from their own inventory of photographs. Typically very cheesy and used in Memes.
Symfony
A PHP web application framework and a set of reusable PHP components/libraries.

T

Taxonomy
A hierarchical classification system. In the world of content, this can be a hierarchy of terms (generally called nodes or entities) that are used to classify the category or subject content belongs to as well as terms that are included in the content.
Tracking
The practice by which operators of websites collect, store and share information about a particular user's activity on the World Wide Web. Analysis of an individual user's behaviour may be used to provide content that relates to their implied preferences and may be of interest to various parties. Esentially how Mark Zuckerberg will take over the world.
Traffic
The amount of data sent and received by visitors to a website.

U

UI (User interface)
Every visual element a user might interact with on a website or app.
URL (Uniform resource locator)
Colloquially termed a web address, is a reference to a web resource that specifies its location on a computer network and a mechanism for retrieving it.
UX (User experience)
User experience encompasses all aspects of the end-user's interaction with the company, its services, and its products.

V

Vue.js
An open-source JavaScript framework for building user interfaces and single-page applications.

W

Web browser
A software application for accessing information on the World Wide Web.
White space
Also called ‘negative space’, white space refers to the areas of a design that are not filled with content. White space is an important design element as it helps to let a design ‘breathe’, helps avoid overly complicated designs, and keeps designs looking clean.
Wireframe
A website wireframe is a low fidelity visual guide representing the framework of the site, allowing you to visualise the structure and function of the site. The wireframe will usually include the key elements of a page and where they sit (such as header, content objects and branding). It shows how elements such as side bars and navigation bars are grouped, as wells as headings and images. The functional and graphic elements are separated, allowing digital design teams to use the wireframe to look at how users will interact with the site.
WooCommerce
An open-source e-commerce plugin for WordPress. It is designed for small to large-sized online merchants using WordPress.
WordPress
WordPress is a content management system based on PHP and MySQL. Its features include a plugin architecture and a template system, referred to inside WordPress as Themes.
World Wide Web
Really?

X

XML (Extensible Markup Language)
A markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine-readable.