blog

Design and development dictionary - top 50 terms used in our studio

Here are the top 50 design and development terms which fly around our studio:

404 page

A 404 page is used to show a website user that the server could not find the requested page.

Alpha testing

Alpha testing comes before beta testing. Developers will alpha test to see if a website or new feature is ready to be tested by real life end users. Major changes and fixes occur during this stage.

Animation

Animation refers to how we animate websites. This couple be as simple as a hover effect on a button, or something more complex like animating background shapes behind the content as the user scrolls.

Blog post animated image showing website animation

Source: Behance

Backend development

Backend development tackles areas of a digital product which are required to make it work. Backend development includes aspects such as calculations and business logic, as well as database interactions and application performance.

Beta website / testing

Considered to be the last stage of testing — a website used for the real life testing of a new site or features (by end users) before they are launched. Small tweaks are usually made in this period.

Body text

The main chunks of text on a page or document. Usually under headings.

Brand mark

A brand mark is an element of a brand which allows you to identify it — usually a symbol or graphic. Our logo is made up of a monkey head brand mark and the text ‘MONKEYSOURCE’.

Browser

Browsers are applications which are used to access websites. Examples of browsers are Chrome, Safari and Firefox.

Bug

An error or glitch in a computer program or system that produces an unintentional or incorrect result, or causes it to behave in an unexpected way.

Cache

A cache is an area of a computer or application where temporary files are stored. The purpose of a cache memory is to reduce the time taken to access data from the main system memory.

CMYK

Colour values used in print design. Cyan, Magenta, Yellow, Key (Black).

Blog post image showing CMYK colours

CMYK colours

Code

In simple terms, code is a set of instructions to be executed by a computer.

Copy

A document or chunk of text provided to be used on designed materials. Also known as content.

EPS

A graphics format for vector images which allows them to be edited and rescaled without loss of resolution.

Figma

Figma is our latest design tool of choice at MonkeySource. Figma allows a streamlined design process from low fidelity prototyping, to asset creation, to exporting the properties needed for development itself.

An image showing Figma's interface

Source: Figma

Front-end development

A front-end developer uses web technologies to develop websites and applications for users to interact with directly.

Grid

A grid is made up of columns and gutters (or padding) and is commonly used in screen design. The grid allows the developer to use appropriate responsive practices.

Image showing how a grid is used for web design

An example of grid design for desktop

Hierarchy

We use the term hierarchy to refer to the layout of visual elements in a way that suggests order of importance.

High fidelity designs

High fidelity designs refer to a polished set of designs, which have already gone through functionality testing (such as wire-framing and prototyping). High fidelity designs focus on finer design details.

Hybrid app

Hybrid apps incorporate aspects of native and web applications. They allow an app to be built just once, but published on multiple platforms, which can reduce costs.

JPEG

Typically a smaller file size, a JPEG allows you to compress an image to an adjustable degree to maintain image quality, whilst keeping a sensible size for storage purposes.

Kerning

Individual spacing between letters to give the illusion / create optically evenly spaced letters. Unless you’re a typography professional, best not to be messed with. The pink text below shows properly kerned letters, against evenly spaced letters below it.

An image showing an example of proper kerning versus even spacing

Kerning examples

Languages

Different languages are used to write code. Coding language examples include SQL, Java, Javascript and C#.

Leading

Also known as line height. The space between lines. Especially important for readability.

Legibility

The collective term for how legible a piece of text is. Includes factors such as font choice, font size, relative line height, line length. Extremely important to make your readers want more.

Logotype

The wording in a logo is called the logotype. Logotype is commonly placed next to a brand mark.

Lorem ipsum text

“What’s that funny text on the designs?” Understandably, this is something we hear a lot — a latin script commonly used as placeholder text where copy is not yet available. Avoids distraction from the designs themselves.

An image showing an example paragraph of lorem ipsum text

Lorem ipsum text

Low fidelity designs

Low fidelity designs are created to test the functionality of a website or application before high fidelity designs are created. Low fidelity designs allow the basic underlying design structure to be tested without having to cover all of the finer design details.

Mobile first approach

A way of designing which starts by designing for mobile screens. A particularly important and forward-thinking practice, considering that (an increasing) 50% of internet users are on mobile devices. This enables mobile designs to be expanded for bigger screens.

Native app

An app native to the device it is built for. A mobile app, for example, could be native to Android, Windows or iPhone.

Orphans and widows

Typographers avoid orphans and widows. Single words on a line (orphans) and the last line of a paragraph falling at the top of a page (widows) disrupt reading flow and are a definite ‘don’t’.

An image showing how orphans and widows look on a book spread

An example of orphans and widows

Padding

Padding refers to the space around each element on a page.

PDF

The PDF (Portable Document Format) is a file format created by Adobe in the 90s, and is commonly used to present documents which have formatted text and images.

PNG

A popular image format which allows you to save lossless files and supports transparency properties.

Resolution

A low resolution image will appear blurry. The standard considered optimum resolution for print is 300dpi, with the standard for screen being 72dpi.

An image showing a logo with correct resolution versus low resolution

Correct resolution vs. low resolution

RGB

Colour values used in screen design. Red, Green, Blue. Used as an alternative to hex codes.

Release candidate

After the testing phases, a release candidate is a site or app which is considered completely ready to be launched into the real world / desired target audience.

Responsive layout

A design which considers all screen sizes. Responsive layouts automatically resize, hide, shrink and enlarge to optimise content for the screen size.

Rivers of white

Rivers of white occur when there are too little words per line and/or text is justified, which causes gaps to form in a paragraph of text. Rivers of white negatively affect reading flow but can be easily avoided by ensuring that lines consist of a sensible character length and the paragraph itself is not justified.

An image showing how rivers of white appear on a book spread

Examples of rivers of white in justified text with short line length

Sans serif typeface

‘Sans’ (‘without’ in French) = without a serif. Fonts like Helvetica, Arial & Open Sans are sans serif. Considered modern and contemporary.

Serif typeface

Considered to be classic and traditional. Fonts with slight projections finishing off strokes in their letters.

An image highlighting serifs on a letter A

Serif A

Site map

A site map is created to scope out each page on a website or application in the early stages of planning, before wire-framing and prototyping occurs.

Style guide

Style guides are created to ensure consistency across a website or application. They include colour palettes, typography rules, button and other element styling rules, padding rules and much more.

Transparency and opacity

The less transparent something is, the higher its opacity. Percentages we use to define how much of the underlying element we would like to see.

An image showing a partially transparent logo

A partially transparent logo

Typography

Everything wordy. The skill /technique of arranging type so the words (or content) are optimised for legibility, readability, and are appealing to read.

UI design

User interface design. Focuses on the visual elements and styling (which the user interacts with) of a website or application.

UX design

User experience design. Finding the solution to optimum user satisfaction with a product. Involves user personas, user journeys and a lot of thinking about the how.

Web app

An app which is not native to any particular device. Effectively a cross between a website and an app. They can be accessed from a browser but can also be wrapped and submitted to app stores for download.

Wire-frames

A visual diagram-like representation showing how a page will be structured before any design is considered. Typically used to figure out user journeys and site navigation.

An image showing an example of a web page wireframe

An example of a basic wire-frame

Working prototype

Opened in a browser, this is a mocked up version of a digital product which can be tested and used like a normal website before it is actually coded. Consists of flat designs with hotspot links. We use tools like Invision and Figma to create ours.

Interested in working with MonkeySource on your next project?

You can email design@monkeysource.co.uk or contact us here.

Post by Ellie