# Glossary

<!-- https://learn-ui.com/chapters/glossary -->

Every term of art in this book, defined once. Search covers both the terms and their definitions, so the concept works even when the name does not come to mind.

## #

@starting-style

—

This can now also be solved with the @starting-style CSS at-rule, which would make the implementation much simpler. (Emil Kowalski, Building a Toast Component)

4-pixel grid

—

Predictable sizing via max() and round() to snap to a 4-pixel grid (Andrew Swank, andrewswank.com)

## A

Ambient co-presence

—

Ambient co-presence is the sensation of sharing a space or context with other people, without directly interacting or continuously communicating with them. (Maggie Appleton, Ambient Co-presence)

Angular velocity

—

Angular velocity describes how quickly an object rotates relative to some point. (Bartosz Ciechanowski, Gears)

ARIA live region

—

We can use ARIA live regions to expose dynamic content changes to screen readers. (Rauno Freiberg, What will you ship?)

As good as HTML

—

Adopting a quality bar of being as good as HTML is pretty hard. (Jan Miksovsky, quoted by Jim Nielsen, As Good as HTML)

## B

Blurred backdrop

—

It's fairly common in products and operating systems to dim the backdrop when launching an overlay. This is another opportunity to add dimensionality to an interface by simulating depth of field that our eyes have naturally evolved to expect. (Rauno Freiberg, Designing Depth)

Bounce

—

Bounce communicates brand personality the same way easing intensity does. More bounce means more playful. Zero bounce means more professional. (Emil Kowalski, Train Your Judgement)

Build with significant autonomy

—

Startups are highly motivated to hire people who can act as an owner, end to end, of the things they produce and design engineers are strong examples of how that mindset manifests in a practice. (Kathryn Gonzalez, The Attributes of a Design Engineer)

## C

Camera

—

Suspended in front of this plane is the camera. It points at the canvas. (Steve Ruiz, Creating a Zoom UI)

Choreography

—

In my mind, choreography is deliberately orchestrating when something happens in a structured sequence. (Rauno Freiberg, Designing Depth)

Clip-path

—

The clip-path property is used to clip an element into a specific shape. We create a clipping region with it, content outside of this region will be hidden, while content inside will be visible. (Emil Kowalski, The Magic of Clip Path)

cmdk (⌘K)

—

⌘K is a command menu React component that can also be used as an accessible combobox. You render items, it filters and sorts them automatically. (Paco Coursey, cmdk README)

Coding is designing

—

Code isn't just a way to implement a design, it's a way to find one. (Jim Nielsen, Coding Is Designing)

Command K bar

—

Command bars are command-line bars that pop up in the middle of the screen when you hit a certain keyboard shortcut. They're also known as 'command palettes', 'command launchers', or 'omniboxes' Traditionally CMD + K, hence the moniker 'Command K bars.' (Maggie Appleton, Command K Bars)

Compound component

—

⌘K is born from a simple constraint: can you write a combobox with filtering and sorting using the compound component approach? (Paco Coursey, cmdk ARCHITECTURE.md)

Computational notebook

—

They're made up of 'cells' that each have an input and an output. You type programming syntax into the cell and then 'run' it, which compiles the code and produces an output. (Maggie Appleton, Computational Notebooks)

Container queries

—

Since CSS container queries are now stable in modern browsers, we can build truly independently dynamic widgets instead of relying on the window width which is not reflective of how much space a component really has to display itself. (Rauno Freiberg, What will you ship?)

Contrasting aesthetics

—

Unexpected displays of art that tastefully reject the notion of a clean, singularly defined style, yet bridges many. (Rauno Freiberg, Contrasting Aesthetics)

Cultural practice

—

Most of the examples I listed above are cultural practices and techniques. They are primary ways of doing; specific ways of thinking and acting that result in greater cognitive abilities. (Maggie Appleton, Tools for Thought as Cultural Practices, not Computational Objects)

Custom easing curves

—

The built-in easing curves in CSS are usually not strong enough, which is why I almost never use them. (Emil Kowalski, 7 Practical Animation Tips)

## D

Daily Notes Page

—

The Daily Notes Page (colloquially, the DNP) is one of the most popular solutions to the problem of balancing frictionless input with future discoverability. (Maggie Appleton, Daily Notes Pages)

Damping (drag)

—

When you drag upwards while already at the top of the drawer, the drawer will damp the drag, meaning the more you drag, the less the drawer will move. It makes the interaction feel more natural, as things in real life don't suddenly stop, they slow down first. (Emil Kowalski, Building a drawer component)

Dark forest theory of the web

—

The dark forest theory of the web points to the increasingly life-like but life-less state of being online. (Maggie Appleton, The Dark Forest and Generative AI)

Dead zone

—

This post will cover implementing a 'dead zone': a minimum distance needed before a shape will begin to drag. (Steve Ruiz, Dead Zone Dragging)

Declarative feature design

—

this idea of 'declarative' feature design (a couple mocks, a few rules, and a design engineer) vs. 'imperative' feature design (innumerable mocks and rules along with a strict, waterfall process between designers and developers). (Jim Nielsen, The Case for Design Engineers)

Design bottleneck

—

When you have a fat stack of agents churning through code tasks, development time is no longer the bottleneck. Design becomes the limiting factor: imagining what you want to create and then figuring out all the gnarly little details required to make your imagination into reality. (Maggie Appleton, Gas Town's Agent Patterns, Design Bottlenecks, and Vibecoding at Scale)

Design engineer (Appleton)

—

Design engineer captures something simple, important, and worth distinguishing: a person who sits squarely at the intersection of design and engineering, and works to bridge the gap between them. (Maggie Appleton, A Collection of Design Engineers)

Design engineer (Gonzalez)

—

A design engineer is someone who sits at the intersection of both practices and who loves the craft and the materiality of building software. It's a role that requires a mindset of autonomy, and an excitement about being an end-to-end software maker. (Kathryn Gonzalez, The Attributes of a Design Engineer)

Design engineer (Vercel)

—

Design Engineers at Vercel blend aesthetic sensibility with technical skills. This allows us to deeply understand a problem, then design, build, and ship a solution autonomously. (Vercel, Design Engineering at Vercel)

Design engineering (Design Engineering Handbook)

—

Design engineering is the name for the discipline that finesses the overlap between design and engineering to speed delivery and idea validation. (Natalya Shelburne, Design Engineering Handbook, as quoted by Trys Mudford in I think I might be a design engineer)

Design handover

—

The design handover, this supposedly magic moment where design has finished and engineering begins, is the root cause of many of the collaboration problems that product teams have. (Rune Madsen, The Gulf Between Design and Engineering)

Design infrastructure

—

Design Infrastructure is at the intersection of product design and engineering, and we support both sides through our tools, systems, communication and most importantly, our shared empathy of design and engineering. (Kathryn Gonzalez, Design Systems and Infrastructure)

Design work with code

—

You need someone who can do design work with code. (Jim Nielsen, The Case for Design Engineers, Pt. II)

Developer experience

—

If the component is not easy to use, people will give up before they even try it. Developer experience is key. (Emil Kowalski, Building a Toast Component)

Digital garden

—

A digital garden is a collection of imperfect notes, essays, and ideas growing slowly over time. (Maggie Appleton, maggieappleton.com)

display: contents

—

This property causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. (Rauno Freiberg, What will you ship?)

DOM is authoritative

—

The DOM is authoritative. Item selection order is based on the DOM order, which is based on the React render order, which the consumer provides. (Paco Coursey, cmdk ARCHITECTURE.md)

Duration rule of thumb

—

As a rule of thumb, UI animations should generally stay under 300ms. (Emil Kowalski, You Don't Need Animations)

Duration scales with distance

—

Duration should scale with the distance traveled. Bigger elements are "heavier" and should animate slower. The same way a truck takes longer to stop than a bicycle. (Emil Kowalski, Train Your Judgement)

## E

Ease-in-out

—

Since we're moving something that is already on the screen, the motion should mimic natural acceleration and deceleration, just like a car. This curve does exactly that. (Emil Kowalski, Good vs Great Animations)

Ease-out

—

If you are animating something that is entering or exiting the screen, use ease-out. It accelerates at the beginning which gives the user a feeling of responsiveness. (Emil Kowalski, 7 Practical Animation Tips)

Easing

—

Easing, which describes the rate at which something changes over a period of time, is the most important part of any animation. (Emil Kowalski, 7 Practical Animation Tips)

Elevate the final fidelity of what's made

—

One of the unique aspects of design engineering is that you've got the potential to have much of the full process of building software contained in one person. (Kathryn Gonzalez, The Attributes of a Design Engineer)

Explicit accessibility labelling

—

Instead, we can set aria-hidden on the inner HTML, and write a custom aria-label for the whole group. (Rauno Freiberg, Crafting the Next.js Website)

Explicit input

—

The keyboard, mouse, touch, voice are all explicit inputs. (Rauno Freiberg, Invisible Details of Interaction Design)

## F

Fault tolerance

—

HTML and CSS are designed to be fault tolerant. When it comes to CSS, browsers will ignore syntax they don't understand. (Jim Nielsen, A Subtle Nicety of Fault Tolerance in HTML & CSS)

Fidgetability

—

Behaviors like this are considered fidgeting. In other words, repetitive movements that apparently help release situational stress, or even enhance concentration. (Rauno Freiberg, Invisible Details of Interaction Design)

Fish eye

—

A fish eye lens doesn't ask us to choose between focus and context (Amelia Wattenberger, Fish eye for text)

Fitts's law

—

Fitts's Law states that the time to click on something depends on distance and size. (Rauno Freiberg, Invisible Details of Interaction Design)

Fluid morphing

—

We're all familiar with the beautifully fluid, interruptible gestures of iOS to quickly navigate apps. Swiping up morphs the full screen app into its icon (Rauno Freiberg, Invisible Details of Interaction Design)

Fluid reasoning

—

The biggest revolution from Large Language Models (LLMs) is the introduction of fluid reasoning. (Amelia Wattenberger, Code Atlas, GitHub Next)

Fluid typography (clamp)

—

It helps to responsively adjust any property between a minimum and maximum value (Rauno Freiberg, Crafting the Next.js Website)

Focus ring (shadow technique)

—

The first shadow would create padding around the element, and the second would then offset and display a 2px outline. (Rauno Freiberg, Crafting the Next.js Website)

Focus trap

—

focus-trap is a small library that will manage saving the last focused element, finding and focusing on the first focus-able element of the modal, keeping focus within the modal, and restoring focus to the last focused element once the modal is unmounted. (Kathryn Gonzalez, How to Build a Modal)

Folk interface

—

Folk interfaces are when users reappropriate existing software to solve their own problems. Rather than using applications in the ways designers and developers intended, they creatively reconfigure them to do unexpected things. (Maggie Appleton, Folk Interfaces)

Fractional indexing

—

In this strategy, an index only needs to ensure that, when our items are sorted by their index, the items end up in the right order. (Steve Ruiz, Reordering Part 2: Tables and Fractional Indexing)

Frequency and novelty

—

My working hypothesis was that the more commonly an user interface action is performed, the less rewarding or satisfying any novel visual or motion treatment on it becomes. (Rauno Freiberg, Novelty)

Frequency tiers

—

How often users will see an animation is a key factor in deciding whether to animate or not. (Emil Kowalski, You Don't Need Animations)

Friction

—

So we still need friction. It forces us to use our judgement, and it filters out the ideas that don't deserve to be built. (Emil Kowalski, Friction as a Feature)

Friction (drag)

—

Instead of just not allowing the toast to be dragged upwards, you can still drag it, but it will slow down and eventually stop. It's nicer than just stopping the toast immediately. (Emil Kowalski, Building a Toast Component)

Front-of-the-front-end

—

A front-of-the-front-end developer is a web developer who specializes in writing HTML, CSS, and presentational JavaScript code. A back-of-the-front-end developer is a web developer who specializes in writing JavaScript code necessary to make a web application function properly. (Brad Frost, as quoted by Jeremy Keith, Design engineer)

## G

Good design

—

Design is about purpose and intent. To answer, 'Is this good design?' We must also answer: good for who? (Jim Nielsen, Good Design)

Grain of the web

—

It's really easy to build a simple website when you can shift your perspective to viewing on-page interactivity as simple HTML page navigations powered by cross document CSS transitions (rather than doing all of that as client-side JS). (Jim Nielsen, Building Websites With LLMS)

Growth stages

—

Every post on this site has a growth stage indicating how complete and comprehensive it is. They start as seedlings, grow into buddings, and finally end up as evergreens. (Maggie Appleton, Colophon)

## H

Historical trail

—

Good historical trails should show people where they've been, even when the journey has been complex, looping, and divides into multiple branches of exploration. (Maggie Appleton, Historical Trails)

Hover area

—

When a user has one or more shapes selected, we display an interactive overlay that allows the user to transform their selection: a drag inside the box will translate the selection; a drag on the edges will resize along that axis; a drag from the corner will resize along both axes; and a drag from further out on the corners will rotate the selection. (Steve Ruiz, An exhaustive review of design tool hover areas)

## I

Implicit input

—

When an interface makes use of context as input and can infer what you're trying to do without asking, it truly feels magical. (Rauno Freiberg, Invisible Details of Interaction Design)

Infinite canvas

—

The first is the canvas. You can think of this as a fixed plane of infinite dimensions. In a creative app, the canvas holds the user's artboards, shapes or other content. (Steve Ruiz, Creating a Zoom UI)

Intent

—

What is the intent of someone using the product? And how much novelty are they willing to accept? (Rauno Freiberg, Novelty)

Interaction design

—

Interaction design is an artform to make experiences that fluidly respond to human intent. (Rauno Freiberg, Invisible Details of Interaction Design)

Interdisciplinary website maker

—

Even 'Design Engineer' doesn't feel adequate. It deliberately mixes two disciplines, which is great, but also leaves out all the others. (Jim Nielsen, Interdisciplinary Website Maker)

Interruptability

—

Great interactions are modeled after properties from the real world, like interruptability. (Rauno Freiberg, Invisible Details of Interaction Design)

Interruptible

—

Interruptibility helps your animations feel more natural and responsive. It allows the user to change the state of the animation at any time while maintaining a smooth transition. (Emil Kowalski, Great Animations)

Interruptible transitions

—

That's one downside of keyframes: you can't smoothly change the end position while the animation is running. CSS transitions, on the other hand, can be interrupted and retargeted, even before the first transition has finished (Emil Kowalski, Building a Toast Component)

Iterate to Greatness

—

Iterate to Greatness is one of Vercel's principles, allowing us to balance business goals with craft by shipping continuous improvements and avoiding the perfection trap. (Vercel, Design Engineering at Vercel)

## J

Judgement

—

Putting into words why something feels right trains your ability to articulate your judgment, a skill that will be incredibly valuable in the AI era. (Emil Kowalski, Train Your Judgement)

## L

Layered entry animations

—

Avoid layered entry animations to save time and keep the user in their flow. (Emil Kowalski, Train Your Judgement)

Learn in public

—

Learn in Public; the practice of sharing what you learn as you're learning it, not a decade later once you're an 'expert.' (Maggie Appleton, A Brief History & Ethos of the Digital Garden)

Literate programming

—

This approach of interleaving documentation and source code is called literate programming and was first proposed by Donald Knuth in 1984. (Maggie Appleton, Computational Notebooks)

Lots of little HTML pages

—

Avoid in-page interactions that require JavaScript in favor of multi-page navigations that rely on HTML and are enhanced with CSS view transitions (and a dash of JS if/where prudent). (Jim Nielsen, Reminder: You Can Stitch Together Lots of Little HTML Pages With Navigations For Interactions)

## M

Magic corners

—

Operating systems make use of "magic corners" on the edges of the screen because the target area is infinitely large. (Rauno Freiberg, Invisible Details of Interaction Design)

Make Real

—

Ever wanted to just sketch an interface, press a button, and get a working website? Well, now you can at makereal.tldraw.com. (Steve Ruiz, make real, the story so far)

Metaphor reuse

—

Great interaction design rewards learning by reusing metaphors. You can use most touch interfaces with just two gestures: tapping and swiping. (Rauno Freiberg, Invisible Details of Interaction Design)

Momentum-based swipe

—

The swipe is momentum-based, meaning you don't have to drag the toast past a specific threshold to dismiss it. If the swipe is fast enough, the toast will still be removed even if the distance is short, because the velocity is high enough. (Emil Kowalski, Building a Toast Component)

## N

next-themes

—

An abstraction for themes in your React app. (Paco Coursey, next-themes README)

No man's land

—

There's a No man's land where the human is still required to make decisions, but they're not in control of the outcome. (Amelia Wattenberger, Why Chatbots Are Not the Future)

Novelty

—

Novelty is the equivalent of an exclamation mark. Akin to seasoning, you don't want too much of it. (Rauno Freiberg, Novelty)

Novelty as contrast

—

Novelty is the contrast to sameness. And novelty works best as a contrast. It becomes overwhelming otherwise. (Rauno Freiberg, Novelty)

Novelty tax

—

There's this novelty tax that you get when you try a new product. (The Browser Company, quoted by Rauno Freiberg in Novelty)

## O

Observer pattern

—

To avoid using React's Context, I manage the state via the Observer Pattern. I subscribe to the observable object in the <Toaster /> component. Whenever the toast() function is called, the <Toaster /> component (the subscriber) is notified and updates its state. (Emil Kowalski, Building a Toast Component)

Origin-aware

—

When we click on a button that opens a dropdown, we expect the dropdown to animate from where the button is. This feels natural, it then doesn't appear out of nowhere, it has a clear origin. (Emil Kowalski, Good vs Great Animations)

Owning results

—

Design Engineering at Vercel means more than being a designer and an engineer. It's about shifting from owning a specific part of the product development process to owning results. (Vercel, Design Engineering at Vercel)

## P

Pages (command menu)

—

Often selecting one item should navigate deeper, with a more refined set of items. For example selecting 'Change theme…' should show new items 'Dark theme' and 'Light theme'. We call these sets of items 'pages', and they can be implemented with simple state (Paco Coursey, cmdk README)

perfect-freehand

—

Draw perfect pressure-sensitive freehand lines. (Steve Ruiz, perfect-freehand README)

Physical race condition

—

Rather than two software operations that might occur out of order, this was a physical race condition based on the imprecision of our bodies. (Steve Ruiz and Ani Krishnan, Debugging a physical race condition with modifier keys)

Pointer capture

—

Once I start dragging, I set the toast to capture all future pointer events. This ensures that even if the mouse or your thumb moves outside the toast while dragging, the toast remains the target of the pointer events. (Emil Kowalski, Building a Toast Component)

popLayout

—

Default AnimatePresence keeps the exiting element in flow until its animation completes, which delays the reflow. popLayout removes it from flow on the first frame so the siblings can start moving right away. (Emil Kowalski, Train Your Judgement)

Practice and teach great software craft

—

Great design engineers are obsessed with understanding the materials of software, all the specific affordances of the medium, and the tools you use to shape them. (Kathryn Gonzalez, The Attributes of a Design Engineer)

Productionizing

—

Design Infrastructure will make productionizing (taking our explorations and making them work in the context of our design & engineering systems) easier: building tools for finding, understanding, and using existing design decisions & patterns (Kathryn Gonzalez, Design Systems and Infrastructure)

Programmable attention

—

These templates work as a kind of programmable attention. You are directed to answer specific questions each morning, log certain kinds of thoughts, record daily activities, or track your habits. (Maggie Appleton, Daily Notes Pages)

Programmable notes

—

Programmable notes are note-taking systems that allow you to write programmatic rules that facilitate particular ways of working with your notes. (Maggie Appleton, Programmable Notes)

Programming portal

—

Programming portals are small, scoped areas within a graphical interface that give users access to command lines and text-based programming. They open a little window into the underlying functionality of an interface. (Maggie Appleton, Programming Portals)

Progressive enhancement

—

With layering we can progressively enhance the hero with a GLSL shader that gracefully fades in after the page has loaded. (Rauno Freiberg, What will you ship?)

Pseudo element alt text

—

Instead, theres a second value for content which is alternative text for pseudo elements. By setting the content to an empty string we effectively are saying that nothing should be announced for this element (Rauno Freiberg, What will you ship?)

Purposeful animation

—

Before you start animating, ask yourself: what's the purpose of this animation? (Emil Kowalski, You Don't Need Animations)

## R

Radial menu

—

Radial menus are an exemplary case of Fitts's Law. They spawn around the pointer making the size and distance towards any target the same for all actions. (Rauno Freiberg, Invisible Details of Interaction Design)

Reduced motion (pause, not none)

—

These are animated with CSS keyframes and we can pause them gracefully by using the animation-play-state property, instead of abruptly interrupting the animation by setting it to none. (Rauno Freiberg, What will you ship?)

Repaint

—

Animating box-shadow would not be ideal since it would trigger a browser re-paint on every frame of the animation. (Rauno Freiberg, Crafting the Next.js Website)

Responsive gestures

—

Truly fluid gestures are immediately responsive. (Rauno Freiberg, Invisible Details of Interaction Design)

Reverse Turing test

—

Our new challenge as little snowflake humans will be to prove we aren't language models. It's the reverse turing test. (Maggie Appleton, The Dark Forest and Generative AI)

## S

Sanding UI

—

So my recipe is: sand it, feel the grain, get a splinter, sand again, and repeat until smooth. (Jim Nielsen, Sanding UI)

Screen space and page space

—

'Screen space' is actual pixels on the user's display. 'Page space' is positions within the infinite canvas. (Steve Ruiz, Back to Content)

Scribble

—

The tldraw SDK has a scribble system for managing scribbles, which are ephemeral freehand lines that are shown as an overlay on top of shapes but behind cursors. (Steve Ruiz, Redesigning the laser tool for better annotations)

Scroll landmark

—

I made a tiny prototype where double tapping the scrollbar will place a landmark for the current scroll position. (Rauno Freiberg, Invisible Details of Interaction Design)

Scroll lock

—

overflow: hidden isn't sufficient for preventing the body content from scrolling. On iOS, there are only two reliable ways of doing this: Setting position: fixed on the document.body, or adding event listeners that prevent the default behavior of touchmove on the body content. (Kathryn Gonzalez, How to Build a Modal)

Semantic satiation

—

In psychology, there's this phenomenon called semantic satiation in which repetition of a word or phrase causes it to temporarily lose meaning. (Rauno Freiberg, Novelty)

simulatePressure

—

Whether to simulate pressure based on velocity. (Steve Ruiz, perfect-freehand README, options table, default true)

Skill file

—

My way of getting there is to create a skill file for each aspect of the interface. If you know what great feels like, describe the rules, then give them to your agents so they can follow them. (Emil Kowalski, Agents with Taste)

Snap points

—

You can have multiple "checkpoints" in your drawer, meaning you can drag it to a certain point and it will snap to it. This is a common pattern on iOS. (Emil Kowalski, Building a drawer component)

Sonner

—

Sonner is an opinionated toast component for React. (Emil Kowalski, Sonner README)

Source of truth

—

Similarly, in making websites, the only source of truth is the website people access and use. (Jim Nielsen, Making Films and Making Websites)

Spatial consistency

—

Because it comes from and leaves in the same direction, it creates spatial consistency, making the swipe-down-to-dismiss gesture feel more intuitive. (Emil Kowalski, You Don't Need Animations)

Spring

—

Springs feel more natural than duration-based animations because they simulate real physics. (Emil Kowalski, emil-design-eng SKILL.md)

Stacking context

—

The stacking context is a three-dimensional conceptualization of HTML elements along an imaginary z-index relative to the user, who is assumed to be facing the viewport or the webpage. (MDN, as quoted by Kathryn Gonzalez in How to Build a Modal)

Stagger

—

Uniform stagger removes any sense of hierarchy and makes the movement feel artificial. Think about which elements deserve the most attention. Ensure the delays are not the same to make the motion feel more organic. (Emil Kowalski, Train Your Judgement)

Staggering

—

Taking inspiration from nature for interfaces, we can sometimes stagger the behavior of sibling items that look similar. (Rauno Freiberg, Designing Depth)

streamline

—

How much to streamline the stroke. (Steve Ruiz, perfect-freehand README, options table, default .5)

Stroke

—

The getStroke function will return a new array of outline points. These outline points will form a polygon (called a 'stroke') that surrounds the input points. (Steve Ruiz, perfect-freehand README)

Sycophancy

—

Sycophancy, meaning insincere flattery, is a well established problem in models that the foundation labs are actively working on. (Maggie Appleton, A Treatise on AI Chatbots Undermining the Enlightenment)

## T

T-shaped design engineer

—

Design engineers tend to be deeply 'T-shaped,' with a broad understanding of design, and deep technical know-how in critical user interface engineering practices like rendering, animation, and layout. (Sean Voisen, Should you pursue a career in design engineering?, Adobe Design)

Taste

—

Good taste is not personal preference. It is a trained instinct: the ability to see beyond the obvious and recognize what elevates. (Emil Kowalski, emil-design-eng skill, restating Developing Taste)

Tastemaker

—

Practice your craft. Create things. A designer should design, a writer should write. This will make you not only a good judge of taste, but also, with time, a tastemaker. (Emil Kowalski, Developing Taste)

The AI aesthetic

—

There are other aesthetics my brain associates with AI, like beige/cream colors, orange accents, and serif typefaces as well as whack-a-mole UI controls. (Jim Nielsen, The AI Aesthetic)

The taste gap

—

The things you'll create probably won't be good at first, but that's a good sign. Your taste is good enough to tell that your work is not on par yet. (Emil Kowalski, Developing Taste, citing Ira Glass)

The three activities of design engineering

—

Design engineers solve the particular problems that arise where design and engineering overlap. Specifically, design engineering enhances, improves and supports user experience design through three primary activities: Prototyping new product experiences to help designers learn about designs and validate design assumptions; Building tools and infrastructure that allows design to operate at scale and smooths designer-developer workflows (e.g. design systems); Building user interfaces and product experiences that other engineers can't or won't (for various reasons) be able to build while staying true to design intent (Sean Voisen, Design engineering, a working definition)

thinning

—

The effect of pressure on the stroke's size. (Steve Ruiz, perfect-freehand README, options table, default .5)

Three color rule

—

Filmmakers use the "three color rule" to create pleasing visuals. It generally means that about 60% of the frame is the primary color, about 30% is a secondary color, and the remaining 10% is an accent color. (Rauno Freiberg, Novelty)

Tool and medium

—

Mediums are a means of communicating a thought or expressing an idea. Tools are a means of working in a medium. (Maggie Appleton, Tools for Thought as Cultural Practices, not Computational Objects)

Tools for thought

—

It's simply meant to refer to tools that help humans think thoughts; potentially new, different, and better kinds of thoughts than we currently think. (Maggie Appleton, Tools for Thought as Cultural Practices, not Computational Objects)

Topography over timelines

—

Gardens are organised around contextual relationships and associative links; the concepts and themes within each note determine how it's connected to others. (Maggie Appleton, A Brief History & Ethos of the Digital Garden)

Touch content visibility

—

On touch interfaces, sometimes a finger might obfuscate what's happening on the screen which makes it hard to perform gestures at pixel-level precision. Commonly, the interface would then render a temporary representation of what's underneath the finger. (Rauno Freiberg, Invisible Details of Interaction Design)

Transform-origin

—

A way to make your popovers feel better is to make them origin-aware. They should scale in from the trigger. You'll need CSS's transform-origin for this, but its default value is center, which is wrong in most cases. (Emil Kowalski, 7 Practical Animation Tips)

Transitions vs keyframes

—

That's one downside of keyframes: you can't smoothly change the end position while the animation is running. CSS transitions, on the other hand, can be interrupted and retargeted, even before the first transition has finished (Emil Kowalski, Building a Toast Component)

Tunneling

—

Game developers know this problem as tunneling, where a fast-moving bullet passes through a wall because no frame ever caught it inside the wall. In tldraw, an eraser is a bullet you drag around with your hand. (Steve Ruiz, Erasing shapes)

## U

UI splinters

—

You can ensure any rough edges are smoothed out, and any 'UI splinters' are ones you get (and fix) in place of your users. (Jim Nielsen, Sanding UI, pt. II)

Uniform stagger

—

Uniform stagger removes any sense of hierarchy and makes the movement feel artificial. (Emil Kowalski, Train Your Judgement)

## V

Vaul

—

Using Apple's Sheet component on iOS feels natural, I wanted to create the same experience, but for the web. That's how Vaul was born. (Emil Kowalski, Building a drawer component)

Vibe code

—

A key part of the definition of vibe coding is that the user accepts code without full understanding. (Wikipedia, quoted by Maggie Appleton in Vibe Code is Legacy Code)

Viewport

—

The viewport is the part of the canvas that is visible on the screen. (Steve Ruiz, Creating a Zoom UI)

Visual rhythm

—

When every element on a given section is signalling itself as novel or attractive, the novelty is diminished. (Rauno Freiberg, What will you ship?)

## Z

Zoom UI

—

This pattern lets a user explore a 'canvas' of content by panning around the canvas or zooming in on a specific point. (Steve Ruiz, Creating a Zoom UI)