A-Z of Web Design and UX Terminology

A

Accessibility

A website's ability to be used by people with disabilities, including visually impaired visitors, hearing impaired visitors, color blind people, or those with other disabilities. Accessibility is important for sites providing information to those with disabilities, such as healthcare sites, government sites, etc., but it is important for all sites to include.

Adaptive web design

Like Responsive web design it is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience on different screen and devices. The difference is that adaptive design is less fluid than RWD, and ‘serves’ few fixed width versions of the design depending on viewport size. It can utilise server side techniques to ‘detect’ viewport size prior to rendering html. The advantage for designer is that it gives more control over images and typography, and hence is easier approach to ‘retrofit’ fixed width websites to work on mobile devices.

Agile software development methodology

A methodology fundamentally incorporating iteration and continuous feedback to refine and deliver a software system. It involves continuous planning, testing, integration, and other forms of continuous evolution of both the project and the software.

AJAX

Stands for Asynchronous JavaScript and XML. AJAX is used to create dynamic web applications and allows for asynchronous data retrieval without the need to reload the page a visitor is on. Javascript handles the basic functions of applications, so it performs like a program rather than a web-based program.

Analytics

A broad term that encompasses a variety of tools, techniques and processes used for extracting useful information or meaningful patterns from data.

Attribute

A part of an element that provides additional information about that element.

B

Back End

The back end of a website refers to the part hidden from view of regular website visitors, often used to manage the site.

Beta launch

The limited launch of a software product with the goal of finding bugs before final launch.

Bounce Rates

The percentage of single page visits, this is if Person A enters and exits the site from the same page. A site will always have a bounce rate, but effective marketers and developers will analyze this percentage to determine which pages are causing the bounce, and if it’s due to a user receiving the information they need or the page needs to improve.

Branding

The process of creating and marketing a consistent idea or image of a product, so that it is recognisable by the public.

C

Cache

Files that are saved or downloaded by a web browser, loading the page faster the next visit.

Card sorting

A technique using either actual cards or software, whereby users generate an information hierarchy that can then form the basis of an information architecture or navigation menu.

Cascading Style Sheets

"CSS" for short. Cascading Style Sheets define the look and feel of a website outside of the actual HTML files of the website.

Collaborative design

Inviting input from users, stakeholders and other project members.

Competitor analysis

Performing an audit or conducting user testing of competing websites and apps; writing a report that summarises the competitive landscape.

Content Management System (CMS)

A tool that separates content from design and backend, making it easier to provide content to users. Example: Wordpress is a CMS.

D

Design stage

The stage in a user-centred design process where ideas for potential solutions are captured and refined visually, based on the analysis and research performed in earlier stages.

DPI

Stands for Dots Per Inch; the resolution of a computer monitor.

E

Element

In XHTML, a complete tag and all its contents, ex: example paragraph

Embed

To embed means to incorporate an outside file, such as a video on Youtube, into a web page without the user having to visit its original location.

External Style Sheet

This is a CSS document that is written in a separate, external document. The biggest advantage to using an external style sheet is it can be linked to by multiple HTML/XHTML files (which means changes made to the style sheet will affect all the pages linked to it without having to change each page individually).

F

Favicon

Favicons are tiny (generally 16x16 pixels, but can be 32x32 pixels), customizable icons displayed in the web address bar next to the web address.

G

GIF

Pronounced with a hard G (as in 'gift') by most, stands for Graphic Interchange Format, suited for flat color images and short video clippings.

H

HEX

Colors used to design a website. Written starting with a hashtag symbol (#) and six numerical characters, HEX spells out the levels of red, green and blue to create that color

High-fidelity prototype

A prototype which is quite close to the final product, with lots of detail and a good indication of the final proposed aesthetics and functionality.

.htaccess

The Apache directory-level configuration file. The .htaccess file configures the current directory with things like password-protection, URL rewrites, etc.

HTML

Stands for Hypertext Markup Language. Primary Language used to write web pages.

HTTPS

Similar to HTTP, HTTPS stands for HyperText Transfer Protocol Secure. Like HTTP, it is the set of rules for transferring hypertext requests between browsers and servers, but this time it's done over a secure, encrypted connection. You'll often see banks or financial records with "https://" instead of "http://".

I

Inline Style

A CSS or cascading style sheets style that is written directly on the element it affects.

Information architecture (IA)

The art and science of organising and labeling websites, intranets, online communities and software to support usability.

IP address

An IP address is the numerical designation of any computer attached to the Internet.

Iterative design

A methodology based on a cyclic process of prototyping, testing, analysing, and refining a product or process. Based on the results of testing the most recent iteration of a design, changes are made. This process is intended to ultimately improve the quality and functionality of a design.

J

JPEG

Stands for Joint Photographic Experts Group. A lossy graphics format best for photographs and images with a lot of colors.

K
Kerning

The adjustment of spacing between letters in words.

L

Landing Page

The page on which a visitor first enters a website. Often, a special landing page is created to provoke a specific action from the new visitor, such as a contact form or sale page.

Lorem Ipsum

Placeholder dummy text used by designers in preliminary designs to highlight the design, font, colors, and layout of a page. It is a form of scrambled latin text that is designed to mimic the flow of words, sentences, and paragraphs in English and other latin languages.

Low-fidelity prototype

A quick and easy translation of high-level design concepts into tangible and testable artefacts, giving an indication of the direction that the product is heading.

M

Markup

The code applied to a text document to change it into an HTML, XML, or other Markup Language document.

Meta Data

Meta data is the data contained in the header that offers information about the web page that a visitor is currently on. Often optimized to include core keywords for SEO purposes.

Mood Board

A collage, either physical or digital, which is intended to communicate the visual style a direction is heading.

N

Navigation

The system that allows visitors to a website to move around that site, such as menus, internal links, buttons, calls to action, etc.

O

Open Source

Refers to the source code of a program made available to the public.

Organic

Organic in reference to web traffic is the traffic that comes in without advertising, referrals, or social media, often via search engines.

P

Pageview

A pageview occurs when a user views a page.

Pages/Visit

The average number of pages seen in a single visit, including duplicate pages. While this sounds similar to Pageviews, Pages/Visit is referring to one average user experience, while Pageviews is the total of all user visits.

PDF

PDF stands for "portable document format". It is a file format created by Adobe as a way to store documents for exchanging. The PDF format was meant to be independent of the hardware or platform it was being viewed on.

Personas

A fictitious identity that reflects one of the user groups for who you are designing.

Permalink

A link that is the permanent web address of a given blog post.

PHP

Stands for "PHP: Hypertext Preprocessor (although the acronym is part of the definition of the acronym. That's not confusing at all.) PHP is found on most web servers and is used by developers to create dynamic and database driven websites.

Progressive disclosure

An interactive design technique that helps maintain the focus of a user’s attention by reducing clutter, confusion, and cognitive workload. It improves usability by presenting only the minimum data required for the task at hand.

Project kick-off

The formally recognised start of a project.

Prototype

A rough guide for the layout of a website or app, giving an indication of the direction that the product is heading.

R

Resolution

The physical number of pixels displayed on a screen.

Responsive

A responsive website is one that adjusts the way a website looks based on the screen resolution of the device used to view the page. If a site is responsive, only 1 version will need to be created to fit all desktops, tablets, and mobile devices.

RSS

Stands for Really Simple Syndication. RSS is a standardized XML format that allows content to be syndicated from one site to another. It's most commonly used on blogs. RSS is often used to push blogs into feeds.

S

Scenario

A narrative describing “a day in the life of” one of your personas, and probably includes how your website or app fits into their lives.

Script

Refers to a portion of code on an HTML page that makes the page more interactive. Scripts can be written in a variety of languages, including JavaScript.

SEO

Stands for Search Engine Optimizations - the changes and adjustments made to manipulate the Search Engine Results Page (SERP). The goal is generally to use SEO to rank on the first page of the search engine.

Sitemap

A complete list of all the pages available on a website.

Storyboard

A tool inspired by the filmmaking industry, where a visual sequence of events is used to capture a user’s interactions with a product. Depending on the audience, it may be an extremely rough sketch, purely for crystallising your own ideas.

T

Tag

The style of an element is the way it looks or acts on the Web page.

Text Editor

An application used to edit plain text files, often seen as .txt

U

URL

Stands for Uniform Resource Locator. A site's URL is its address, the item that specifies where on the Internet it can the found.

Usability

A website is considered usable if the customers coming to that site can find what they need and accomplish their goals.

User-centred design (UCD)

A design process during which the needs of the user is considered at all times. Designers consider how a user is likely to use the product, and they then test the validity of their assumptions in real world tests with actual users.

User journey

The step by step journey that a user takes to reach their goal.

V

Validate

When you validate a web language like HTML, XML, or CSS, you are checking it against the standard for that language

W

Waterfall model of software development

A sequential design process where progress is seen as flowing steadily downwards through the phases of Conception > Initiation > Analysis > Design > Construction > Testing > Implementation > Maintenance.

Web Server

A web server is a computer that has software installed and networking capabilities that allow it to host websites and pages and make them available to internet users located elsewhere.

Wireframe

A rough guide for the layout of a website or app, either done with pen and paper or with wireframing software.

Workflow diagram

A graphical representation of activities and actions conducted by users of a system. (Sometimes called an activity diagram.)

X

XHTML

Stands for Extensible Hypertext Markup Language, called an extensible language because it allows for the user to define the mark-up elements.

WYSIWYG

(pronounced wiz-ee-wig) is an acronym for “What You See Is What You Get”. It helps identify an an interface that allows user input resulting in an output that is rendered in a similar way. For example; a word processor application interface might resemble a piece of paper,so when printed the user can see how the output will appear.When building webpages using HTML & CSS, the underlying code does not resemble the visual appearance rendered in a web browser. Editing the page at the code level requires a level of knowledge most website editors do not possess. Instead a CMS might be connected to create editable page structure that more closely resembles the rendered webpage.