Design Dictionary

Understand the key design terms and concepts behind this rapidly evolving industry

Accessibility

Accessibility in design refers to being inclusive and mindful of all users’ needs. In particular, the needs of people with disabilities are specifically considered to ensure they are able to interact with the product or platform.

Alignment

Alignment is the practice of ensuring that text and other elements line up in a design. When different elements are aligned, it creates order, improves the readability and makes the design look polished. There are several different types of alignment, such as horizontal, vertical, top and bottom. Aligning designs is easy in Framer, thanks to helpful layout tools and rulers.

Ascender

An ascender is the portion of a lowercase character that expands above the mean line of a typeface. Some examples of ascenders include the letters b, d and f. In contrast to capitalized typography, the ascending (and descending) letters are highly recognizable.

Aspect Ratio

Aspect ratio is the proportion between width and height in an image or screen. It is determined by dividing the resolution width by resolution height and then simplifying the fraction.

Avatar

Avatar is a picture, usually a portrait, that represents a user’s identity onscreen. They allow for a more personalized online experience and can often be used as a substitute to a real portrait picture. Avatars commonly appear in internet forums, chats, video games and social media platforms.If you want to use avatars in your designs, Framer has several packages that populate random portraits as avatars.

Bitmap

Bitmap (also known as raster graphic) is an image made up of tiny dots. At 100% zoom level, these dots each represent a pixel and together create the image. The uncompressed format of bitmap images is called BMP. Other, more well-known bitmap formats include JPEG, PNG and GIF. These are all compressed, which make them smaller in size and easier to download.

Boolean

Boolean operations let you combine vector elements in various ways, which ultimately leads to new shapes. Some common types of boolean operations in design include unite (merge two shapes), subtract (remove a shape), intersect (just keep the overlap) and exclude (remove the overlap).

Breadcrumb

Breadcrumb is a type of navigation form commonly used on websites with a lot of sub-pages. To help users navigate the site, the page path (breadcrumb) is written out. The name itself derives from the classic fairy tale Hansel and Gretel, who dropped breadcrumbs so that they could find their way back home.

Checkbox

A checkbox is a small interactive element that allows a user to make a simple binary choice - yes or no. It has two states, an unchecked and a checked. If you want to learn how to build a checkbox in Framer, have a look at this tutorial.

CMYK

CMYK is an abbreviation for Cyan, Magenta, Yellow and Black. Black is referred to as Key in order to avoid confusion with RGB. The use-case of CMYK is color printing.CMYK is a subtractive color model, which means that they get darker when blended together. This is contrary to RGB colors, which get lighter as they blend.

Coffee Script

CoffeeScript is a programming language that assembles JavaScript. It is known for being simpler and more intuitive than JavaScript. However, in contrast to Javascript, CoffeeScript is not a production language. In Framer Classic, CoffeeScript was used to create animations and interactions in prototypes.

Color Scheme

A color scheme is a set of colors that are used together in a design. The color wheel (also known as color circle) provides the basis for combining different colors. In the wheel, colors are arranged in accordance to their chromatic relationship. There are several types of color schemes, including: - Monochromatic scheme - comprised of different shades of the same color - Analogous scheme - consists of colors located next to each other on the color wheel - Complementary scheme - made up of colors that are across from each other on the wheel. For example, blue and orange In Framer, you can save your own color scheme using Shared colors.

Component

A component is a reusable building block that can be used in designs. Some examples of components include buttons, bottom navigation, sheets, tabs and sliders. In Framer, components are put into packages that you can use in your designs to quickly get started, without having to touch any code.

CSS

CSS is a coding language used for describing the presentation of web pages, including layout, colors and font. In a visual design tool, such as Framer, this code is generated automatically when something is designed. Engineers typically need access to this code to replicate designs in production.

CTA

CTA is an abbreviation for Call to Action. It refers to an element on the website, typically a button, that calls the user to take a particular action. In Framer, you can find pre-made packages that lets you create interactive buttons.

Descender

A descender is the portion of a lowercase character that goes below the mean line of a typeface, sometimes also referred to as the tail. Some examples of a descender includes the letters g, j and p.

Design System

A design system is the workflow, tools and processes that allow design teams to work efficiently and effectively. It contains design elements that are considered to be the single source of truth, so that team members can collaborate and create coherent designs. In Framer, companies can upload components to their own team store, allowing designers to prototype with real components.

ES6

ES6 refers to the sixth version of the ECMA Script programming language. ECMA Script is the standardized name for JavaScript, and version 6 is the successor to version 5, which was released in 2011. It is a major enhancement to the JavaScript language, and adds many more features intended to make large-scale software development easier.

Event Handler

An event handler is a program or lines of code that processes various actions such as a mouse click or scroll. The event handler allows a developer to define what will occur when a certain action happens.

Front End Development

Front-end development is the practice of producing HTML, CSS and usually JavaScript for a website or web application, so that a user can see and interact with it directly. Front-end developers work closely with design to ensure smooth user experiences and visual presentation.

Looking to apply Gestalt principles in design but unsure where to begin? In this guide we look at six of the most important Gestalt principles for graphic designers, suggesting ways in which they might be practically applied to real-world design projects; from UX and web design, to logos and typography.

Golden Ratio

Golden ratio is a mathematical concept that refers to a fixed relationship between two sets of lines or shapes. When a line is divided into two parts, the longer part divided by the shorter part should be equal to the the longer and shorter parts together, divided by the longer part. For golden ratio to exist, both sides of this equation should equal 1.618. Golden ratio is commonly used in design, as the ratio is perceived to be particularly aesthetically pleasing. Some famous examples include the Eiffel Tower, Mona Lisa and the Pyramids.

Gradient

A color gradient is a fluid range of colors that are gradually transitioning from one to the other. There are several types of gradients, including linear (a straight line transition), radial (circle transition), and angle (counter-clockwise transition).

Grid CSS

A CSS grid layout, sometimes also referred to simply as grid, consists of a set of column and row lines. Whereas the flexbox mainly is used for a few items, the grid layout excels in designs with more elements. In fact, the flexbox and grid are commonly used together.

Handoff

Handoff refers to the process of passing on static designs and/or prototypes from the design team to the engineering team, for production purposes. The higher the fidelity of the designs, the smoother the handover process typically goes, since less is open for interpretation. There are some common elements of a design that engineers need to easily access in order to replicate it in production code, such as measurements, colors, font styling, CSS, visual assets, text and animation curve values.

Hex Value

Hex colors are a way of representing colors through hexadecimal values.

Interaction Design

Designing how the interactions will behave and feel to an end user of a product. Some design teams and agencies have a group of dedicated interaction designers.

Iterative Design

Iterative design refers to a continuous process that typically begins with user research. With this in mind, a prototype is developed, which is then used for user testing to validate the designs. Based on the input, the prototype is then iterated upon and subsequently tested again. This process is repeated until the end result is satisfactory.

Kerning

Kerning refers to the process of adjusting unaesthetic spacing between two letters. Due to the varying shapes of letters, some letter combinations can create the optic illusion of a bigger space than what actually is the case. For example, consider the word Tulips. The spacing between T and u, can in some typefaces seem very large, and therefore have to be kerned.

Lorem Ipsum

Lorem ipsum, sometimes also referred to as dummy text, is text used as a placeholder to illustrate the visual form of a document. This allows designers to quickly start working on the visual aspects of designs without relying on finished copy. In Framer, there are multiple Lorem Ipsum packages that you can use to generate placeholder text to your designs.

Micro Interaction

A micro-interaction is a highly specific, detailed interaction. Some examples would be: - ‘Like’ animation on double-tap in Instagram - Swiping left or right on Tinder - A button popping out or producing a message when you hover over it.

Learn about positive and negative space and how they are used in design, photography, typography, and other types of art.

Padding

Padding is an area on all four sides of the element. Read more here.

Portfolio

A portfolio is collection of work that a designer uses to showcase their skills. These days this is often presented as a website. Read more here.

Production

Production refers to engineers actually producing (i.e. coding) software.

Prototyping

Prototyping is way of validating designs by creating something interactive that looks and feels like the end product. There can be varying levels of prototype fidelity, from a simple point-and-click screen flow to a native-feeling app flow in Framer. Prototypes can be used for a number of things, including communicating to an engineer how things should work, effectively selling ideas to executives, or user testing.

Rapid Prototyping

Rapid prototyping is the process of quickly creating UI and user flows and then overlaying this with interactivity in the form of components, transitions, and data. The purpose of this is so that a designer can create something that they can present to stakeholders or potential users for them to test. UI design communicates how a product should look, whereas rapid prototyping shows how it should feel and behave.

React

Also known as React.js or ReactJS, React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of companies and individual developers. React can be used as a base in the development of single-page or mobile applications. Complex React applications usually require the use of additional libraries for state management, routing, and interaction with an API.

Responsive

Responsive design is a way of crafting a product to be displayed on various screen sizes (e.g. desktop and mobile).

Rgb

The RGB color model is an additive color model in which red, green, and blue light are added together in various ways to reproduce a broad array of colors.

Learn about the rule of thirds, its definition, the theory behind it, and a guide of how to best implement it.

Sans Serif

Sketch Libraries

Sketch Libraries is a feature that allows design teams to share symbols and design assets. For example, a button that is commonly used in their app could be found in their library. This is a powerful feature for collaboration because it allows designers to re-use the work of their peers and maintain a single 'master' library that is the team’s source of truth.

States

States defines the properties of a layer in a given state. A layer can have multiple states. You can have a layer that has a red state & a blue state. We can use “state cycles” which rotates between the two.

Static Screens

Static screens are Images of screens that have no interactions or animations built in. This is the output you get when you design in Sketch or Photoshop.

Svg

SVG stands for Scalable Vector Graphics. They are images that are scalable, can be resized, printed, and zoomed into while maintaining a high quality resolution.

Typescript

Typescript is a superset of JavaScript, which primarily provides optional static typing, classes and interfaces. One of the big benefits is to enable IDEs (integrated development environments) to provide a richer environment for spotting common errors as you type the code. For a large JavaScript project, adopting TypeScript might result in more robust software, while still being deployable where a regular JavaScript application would run. It is open source, but you only get the clever Intellisense as you type if you use a supported IDE.

UI

User Interface (UI) design focuses on the look and feel, the presentation and interactivity of a product.

UI Kit

A series of pre-built interface elements to use in designs/prototypes. In Framer, we have an iOS and Android UI kit, so designers can easily copy paste common elements used in those screens for their prototypes. These are very helpful because you don't have to design all of these stock elements from scratch.

User Testing

User testing refers to the practice of testing an app or prototype on end-users to get feedback, identify design flaws and common problems.

UX

User Experience (UX) design is the process of enhancing customer satisfaction and loyalty by improving the usability, ease of use, and pleasure provided in the interaction between the customer and the product.

Wireframe

Wireframes are designs of the proposed layout of screens. They are focused on how a set of screens will function and flow, and because of this they are usually void of color. The purpose of this is to take focus away from opinions about the visual aesthetics. Typically, wireframe screens will illustrate how screens flow by using arrows on a canvas. If you want to learn more about wireframing, check out our guide to wireframing.