Design and development dictionary — top 50 terms used in 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 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 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.

Source: Behance

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.

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.

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

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’.

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

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.

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.

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

CMYK colours

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

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

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

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.

Source: Figma

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

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.

An example of grid design for desktop

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

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 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.

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.

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.

Kerning examples

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

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

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.

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

“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.

Lorem ipsum text

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.

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.

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

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’.

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

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.

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

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

Correct resolution vs. low resolution

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

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.

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 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.

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

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

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

Serif A

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 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.

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.

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

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

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.

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.

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 example of a basic wire-frame

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store