Design fundamentals

The Language of Product Design - Engineering

Andy Chipperfield

05 Oct 2023 — 4 min read

This is part of the Language of Product Design series. You can find the other posts at the end of this one.

Front-end / client-side

This is what the user sees and interacts with, commonly referred to as the presentation layer. Engineers who work on the front-end use languages such as HTML, CSS and Javascript

Back-end

A back-end engineer works on the parts of the system that the user doesn’t see, commonly referred to as the data access layer. Work can include designing databases to retrieve data quickly and securely, as well as building connections for the front-end engineers to bring in data.

Database

A database is a collection of structured data stored and accessed electronically. A database can have one or multiple tables that can cross-reference each other.

API

An Application Protocol Interface enables two programmes to talk to each other. Common uses are for one programme to pull in data from another.

Breakpoint

Breakpoints were introduced as part of responsive design. It is part of a CSS media query, and is a width or height where the design breaks and a new layout is painted by the browser. There are two ways of adding breakpoints. You can choose a general approach and use common device sizes for desktop, tablet, mobile, or secondly, where the design breaks. The former is best used for CMS’s or user-generated pages where you don’t know what the content is. The latter requires you to know what your content is.

Server-Side Rendering

Server-side rendering means using a server to generate HTML from JavaScript modules in response to a URL request. That’s in contrast to client-side rendering, which uses the browser to create HTML using the Document Object Model (DOM).

Minification

This is a function generally run on CSS and Javascript files which creates the smallest possible file size. It removes all spaces and line breaks which makes the file hard to read by a human, but is still readable by the browser.

First Paint

Time to first paint is an important metric that impacts the user's experience. This is how long it takes for something to appear on the user's device when they load a page. The longer this is, the more likely they will have a negative impression of your page, or leave your page entirely.

HTML

Hypertext Markup Language is the standard language for documents which are designed to be displayed in web browsers (e.g. Firefox, Chrome, Safari, Netscape). HTML gives a semantic and structural meaning to the document.

The minimum valid HTML page is this:

<! DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

CSS

Cascading Style Sheets (CSS) are designed to separate the content of an HTML page from the presentation (how it looks). They are imported into HTML pages using a link usually in the <head> section. These links can be anywhere on the page, but putting it in the head means it loads quicker and avoids potential jumps in layout of content)

Javascript

Along with HTML and CSS, Javascript is the third cornerstone technology of the web. Whereas HTML is about content, CSS is about the presentation, JavaScript is concerned with behaviour.

Cache

Cache is a type of memory used to deliver content the fastest. When web content or apps are saved in cache they render on the page quickly. This is why when you go to a page it may load an old image, but then on refresh the cache is cleared and new content is downloaded.