A field guide to craft jargon269 terms · 7 craftsported from a Notion glossary

269 entries · 7 crafts

/ˈjär-gə-ner-ē/ · noun· the dictionary for words that make you sound like you know what you’re doing. Every craft hoards its own vocabulary — here they’re all in one drawer, with 206 specimens you can actually look at.

269 entries7 craft areas206 live specimens71 must-knows
📅 Term of the dayAPIApplication Programming Interface. A set of rules and protocols that lets different software applications communicate with each other. APIs define how requests and responses should be structured so one system can use another's functionality.

Web & Code

the plumbing nobody sees63 entries
API★ MUST-KNOW
№ 001

Application Programming Interface. A set of rules and protocols that lets different software applications communicate with each other. APIs define how requests and responses should be structured so one system can use another's functionality.

e.g.Use the Stripe API to process payments in your app...

Live specimen
API Endpoint★ MUST-KNOW
№ 002

A specific URL path that an API exposes for clients to interact with. Each endpoint typically maps to a particular resource or action (e.g., /api/users or /api/movies/search).

e.g.Call the /api/movies endpoint to get a list of all movies...

Live specimen
API Gateway
№ 003

A single entry point that sits in front of multiple back-end services and routes requests to the right one. It handles cross-cutting concerns like authentication, rate limiting, logging, and request transformation in one place.

e.g.Route all API requests through an API gateway that handles auth before forwarding to services...

Live specimen
API Key★ MUST-KNOW
№ 004

A unique string used to identify and authenticate a client making API requests. API keys are simpler than OAuth but less secure — they act as a basic password for machine-to-machine communication.

e.g.Pass your API key in the request header to authenticate with the service...

Live specimen
Authentication★ MUST-KNOW
№ 005

The process of verifying who a user or system is — confirming identity. Common methods include passwords, API keys, OAuth tokens, and biometrics. Answers the question: 'Who are you?'

e.g.Add authentication to your API so only registered users can access it...

Live specimen
Authorization★ MUST-KNOW
№ 006

The process of determining what an authenticated user or system is allowed to do. It controls access to resources based on roles, permissions, or policies. Answers the question: 'What can you do?'

e.g.Set up role-based authorization so only admins can delete records...

Live specimen
Caching
№ 007

Storing a copy of data in a faster-access location so future requests can be served without hitting the original source. Reduces latency, server load, and API costs. Common tools include Redis, CDNs, and browser caches.

e.g.Cache API responses in Redis so repeated queries don't hit the database...

Live specimen
CI/CD
№ 008

Continuous Integration / Continuous Deployment. A practice where code changes are automatically tested (CI) and deployed (CD) through a pipeline. Tools like GitHub Actions, Jenkins, and CircleCI automate the build-test-deploy cycle.

e.g.Set up a CI/CD pipeline so every push to main automatically runs tests and deploys...

Live specimen
Column★ MUST-KNOW
№ 009

The vertical slices of a table, also called a field or attribute. Columns define the type of data stored (e.g., poster, rating, runtime).

e.g.Select the summary and rating columns... / Filter by the platforms field...

Live specimen
CORS
№ 010

Cross-Origin Resource Sharing. A browser security mechanism that controls which websites can make requests to your API. By default, browsers block requests from a different domain — CORS headers tell the browser which origins are allowed.

e.g.Enable CORS on your API so your front-end app on a different domain can access it...

Live specimen
Database★ MUST-KNOW
№ 011

The entire collection of data. It holds all your tables, views, and stored procedures. Think of it as a warehouse that organizes everything in one place.

e.g.I am working with a database for a movie streaming app...

Live specimen
DDoS Attack
№ 012

Distributed Denial of Service. An attack that floods a server or network with massive traffic from many sources to overwhelm it and make it unavailable to legitimate users. Mitigated with CDNs, rate limiting, and services like Cloudflare.

e.g.Put your site behind Cloudflare to protect against DDoS attacks...

Live specimen
Docker / Container
№ 013

A container is a lightweight, standalone package that bundles an application with everything it needs to run (code, runtime, libraries). Docker is the most popular tool for building and running containers. Containers ensure your app runs the same everywhere.

e.g.Containerize your Node app with Docker so it runs identically in dev and production...

Live specimen
Encryption
№ 014

The process of converting readable data (plaintext) into an unreadable format (ciphertext) using an algorithm and key. Only someone with the correct key can decrypt it. Protects data at rest (stored) and in transit (moving over a network).

e.g.Encrypt user data at rest using AES-256 before storing it in the database...

Live specimen
Environment Variable★ MUST-KNOW
№ 015

A key-value pair stored outside your code, typically in the operating system or a .env file. Used to keep sensitive data (API keys, database URLs) out of source code and to configure apps differently per environment.

e.g.Store your database password in an environment variable instead of hardcoding it...

Live specimen
Firewall
№ 016

A network security system that monitors and controls incoming and outgoing traffic based on predefined rules. Acts as a barrier between trusted internal networks and untrusted external ones. Can be hardware, software, or cloud-based.

e.g.Configure the firewall to only allow traffic on ports 80, 443, and 22...

Live specimen
Foreign Key
№ 017

A column that links to the primary key of another table, creating a relationship between the two. For example, a director_id column in a movies table that points to a directors table.

e.g.Link the movie table to the director table using the foreign key...

Live specimen
GraphQL
№ 018

A query language and runtime for APIs that lets clients request exactly the data they need in a single request. Unlike REST, the client defines the shape of the response, reducing over-fetching and under-fetching.

e.g.Use a GraphQL query to fetch only the title and rating for each movie...

Live specimen
Hashing
№ 019

A one-way function that converts data into a fixed-length string of characters. Unlike encryption, hashing cannot be reversed. Used for password storage, data integrity checks, and digital signatures. Common algorithms: bcrypt, SHA-256.

e.g.Hash user passwords with bcrypt before storing them in the database...

Live specimen
HTTP Method★ MUST-KNOW
№ 020

The verb in an HTTP request that tells the server what action to perform. The main methods are GET (read), POST (create), PUT (replace), PATCH (partial update), and DELETE (remove).

e.g.Use a POST method to create a new user record...

Live specimen
HTTP Status Code★ MUST-KNOW
№ 021

A three-digit number returned by a server to indicate the result of an HTTP request. Grouped by hundreds: 2xx (success), 3xx (redirect), 4xx (client error), 5xx (server error).

e.g.Return a 201 status code after successfully creating a resource...

Live specimen
HTTPS / TLS
№ 022

HTTPS (Hypertext Transfer Protocol Secure) is HTTP encrypted with TLS (Transport Layer Security). It encrypts data in transit between client and server, preventing eavesdropping and tampering. The padlock icon in your browser means TLS is active.

e.g.Enforce HTTPS on all API endpoints to encrypt data in transit...

Live specimen
Infrastructure as Code (IaC)
№ 023

Managing and provisioning servers, networks, and cloud resources through code files instead of manual setup. Tools like Terraform, Pulumi, and AWS CloudFormation let you version-control your infrastructure like application code.

e.g.Define your AWS infrastructure in Terraform so it's reproducible and version-controlled...

Live specimen
JSON★ MUST-KNOW
№ 024

JavaScript Object Notation. A lightweight text format for structuring data as key-value pairs and arrays. The standard data format for APIs and configuration files because it's easy for both humans and machines to read.

e.g.Send the request body as JSON with the movie title and rating...

Live specimen
JWT (JSON Web Token)
№ 025

A compact, URL-safe token format used to securely transmit information between parties as a JSON object. JWTs are signed (and optionally encrypted) and commonly used for authentication and session management.

e.g.Generate a JWT after login and include it in the Authorization header for subsequent requests...

Live specimen
Kubernetes (K8s)
№ 026

An open-source platform for automating the deployment, scaling, and management of containerized applications. It groups containers into logical units called pods and manages them across a cluster of machines.

e.g.Deploy your app to a Kubernetes cluster so it auto-scales based on traffic...

Live specimen
Load Balancer
№ 027

A system that distributes incoming network traffic across multiple servers so no single server gets overwhelmed. Improves availability, reliability, and performance. Can operate at the network layer (L4) or application layer (L7).

e.g.Put a load balancer in front of your servers to distribute traffic evenly...

Live specimen
MCP (Model Context Protocol)★ MUST-KNOW
№ 028

An open protocol that standardizes how AI applications connect to external tools, data sources, and services. It provides a universal interface so AI models can interact with the outside world in a consistent way.

e.g.Use MCP to let your AI assistant read and write files on your local machine...

Live specimen
MCP Server
№ 029

A lightweight program that exposes specific capabilities (tools, resources, prompts) to AI applications via the Model Context Protocol. Each server typically wraps one system — a database, file system, API, or service.

e.g.Run an MCP server that gives Claude access to your Postgres database...

Live specimen
MCP Tool
№ 030

A function exposed by an MCP server that an AI model can call to perform an action — like querying a database, sending an email, or fetching data from an API. Tools have a defined name, input schema, and return value.

e.g.Register an MCP tool that lets the model search your knowledge base...

Live specimen
Message Queue
№ 031

A system that lets services communicate asynchronously by sending messages to a queue, where they wait until a consumer processes them. Decouples services and handles traffic spikes gracefully. Examples: RabbitMQ, AWS SQS, Kafka.

e.g.Push email jobs to a message queue so the API responds instantly and emails send in the background...

Live specimen
Microservice
№ 032

An architectural pattern where an application is built as a collection of small, independent services that each handle one specific function (e.g., auth, payments, email). Each service can be deployed, scaled, and updated independently.

e.g.Split the monolith into microservices so the auth service can scale independently...

Live specimen
Middleware
№ 033

A function that sits between the incoming request and the final response in a server application. Middleware can inspect, modify, or reject requests — used for logging, authentication, error handling, and more.

e.g.Add logging middleware to track every incoming request to your API...

Live specimen
Monolith
№ 034

An application architecture where all functionality (auth, payments, email, etc.) lives in a single codebase and deploys as one unit. Simpler to start with than microservices but harder to scale independently as the app grows.

e.g.Start with a monolith and split into microservices only when you hit scaling bottlenecks...

Live specimen
OAuth
№ 035

Open Authorization. A standard protocol that lets users grant third-party apps limited access to their accounts (e.g., 'Sign in with Google') without sharing their password. Uses access tokens instead of credentials.

e.g.Implement OAuth 2.0 so users can sign in with their Google account...

Live specimen
OWASP
№ 036

Open Worldwide Application Security Project. A nonprofit that publishes free resources, tools, and standards for web application security. Best known for the OWASP Top 10 — a list of the most critical security risks for web apps.

e.g.Audit your app against the OWASP Top 10 before going to production...

Live specimen
Payload
№ 037

The data sent in the body of an HTTP request or response. In a POST request, the payload is the data you're sending to the server (e.g., a JSON object with user details). In a response, it's the data the server sends back.

e.g.Send a JSON payload with the user's name and email in the POST request...

Live specimen
Penetration Testing
№ 038

An authorized simulated cyberattack on a system to find security vulnerabilities before real attackers do. Pen testers use the same tools and techniques as hackers but report findings to the organization so they can be fixed.

e.g.Hire a pen testing firm to audit your app's security before launch...

Live specimen
Phishing
№ 039

A social engineering attack where attackers impersonate trusted entities (banks, colleagues, services) through fake emails, messages, or websites to trick victims into revealing sensitive information like passwords, credit card numbers, or API keys.

e.g.Train your team to recognize phishing emails that impersonate internal tools...

Live specimen
Primary Key★ MUST-KNOW
№ 040

A column (or combination of columns) that acts as the unique identifier for every row in a table. No two rows can share the same primary key value.

e.g.Join these tables on the primary key...

Live specimen
Query★ MUST-KNOW
№ 041

The actual code or request you send to a database to retrieve, insert, update, or delete information. Written in SQL (Structured Query Language).

e.g.Write an SQL query to fetch...

Live specimen
Rate Limiting★ MUST-KNOW
№ 042

A technique that restricts how many requests a client can make to an API within a given time window (e.g., 100 requests per minute). Protects servers from abuse, brute-force attacks, and accidental overload.

e.g.Add rate limiting to your API to prevent abuse — max 100 requests per minute per user...

Live specimen
RBAC (Role-Based Access Control)★ MUST-KNOW
№ 043

A method of restricting system access based on user roles (e.g., admin, editor, viewer). Permissions are assigned to roles, and users are assigned to roles — instead of granting permissions to each user individually.

e.g.Implement RBAC so editors can update content but only admins can delete it...

Live specimen
REST API★ MUST-KNOW
№ 044

Representational State Transfer API. An architectural style for building APIs that uses standard HTTP methods (GET, POST, PUT, DELETE) and treats data as resources identified by URLs. The most common API pattern on the web.

e.g.Build a REST API with endpoints for creating, reading, updating, and deleting users...

Live specimen
Result Set★ MUST-KNOW
№ 045

The data that comes back after you run a query. It is a temporary table of rows and columns that match the conditions you specified.

e.g.Order the result set by date...

Live specimen
Reverse Proxy
№ 046

A server that sits in front of your application servers and forwards client requests to them. It handles tasks like SSL termination, caching, compression, and load balancing so your app servers don't have to. NGINX and Cloudflare are common examples.

e.g.Set up NGINX as a reverse proxy to handle SSL and forward traffic to your Node app...

Live specimen
Row★ MUST-KNOW
№ 047

The horizontal slices of a table, also called a record or entry. One row represents one single item (e.g., one specific movie with all its details).

e.g.Return the top 10 rows... / Delete the record where the ID is...

Live specimen
Schema★ MUST-KNOW
№ 048

The blueprint or structure of a database, including column names, data types, and rules. It defines how data is organized without containing the data itself.

e.g.Here is the schema for my table... (followed by your CREATE TABLE code).

Live specimen
SDK★ MUST-KNOW
№ 049

Software Development Kit. A collection of tools, libraries, and documentation that makes it easier to build with a specific platform or API. Instead of writing raw HTTP requests, you call pre-built functions.

e.g.Install the Stripe SDK to handle payments without writing raw API calls...

Live specimen
Secrets Management★ MUST-KNOW
№ 050

The practice of securely storing, accessing, and rotating sensitive credentials like API keys, passwords, and tokens. Dedicated tools (e.g., AWS Secrets Manager, HashiCorp Vault) prevent secrets from being exposed in code or logs.

e.g.Use a secrets manager to store production API keys instead of .env files...

Live specimen
Server★ MUST-KNOW
№ 051

A computer or program that listens for incoming requests and sends back responses. In back-end development, a server runs your application code, handles API requests, connects to databases, and serves data to clients.

e.g.Deploy your server to handle API requests from the front-end...

Live specimen
Serverless★ MUST-KNOW
№ 052

A cloud computing model where the provider manages the servers and you only write functions that run in response to events. You pay per execution, not for idle servers. AWS Lambda, Vercel Functions, and Cloudflare Workers are common platforms.

e.g.Deploy a serverless function that resizes images on upload...

Live specimen
SQL Injection★ MUST-KNOW
№ 053

A security vulnerability where an attacker inserts malicious SQL code into user inputs (like form fields) to manipulate the database. One of the most common and dangerous web attacks. Prevented by using parameterized queries.

e.g.Use parameterized queries to prevent SQL injection on your login form...

Live specimen
SSH★ MUST-KNOW
№ 054

Secure Shell. A protocol for securely connecting to and controlling remote servers over an encrypted connection. Used to run commands, transfer files, and manage infrastructure. Authentication typically uses key pairs instead of passwords.

e.g.SSH into your production server to check the application logs...

Live specimen
SSL Certificate
№ 055

A digital certificate that proves a website's identity and enables HTTPS encryption. Issued by Certificate Authorities (CAs). When your browser shows a padlock icon, it means the site has a valid SSL/TLS certificate. Let's Encrypt offers free certificates.

e.g.Install an SSL certificate on your domain so traffic is encrypted over HTTPS...

Live specimen
Table★ MUST-KNOW
№ 056

A specific collection of data organized in rows and columns, similar to a spreadsheet. Each table stores one type of entity (e.g., movies, users, orders).

e.g.Write a query for the movie_cache table...

Live specimen
Two-Factor Authentication (2FA)★ MUST-KNOW
№ 057

A security method that requires two different forms of verification to log in: something you know (password) and something you have (phone, hardware key) or something you are (fingerprint). Blocks most account takeover attacks.

e.g.Enable 2FA on all admin accounts using an authenticator app...

Live specimen
Value★ MUST-KNOW
№ 058

The specific piece of data located at the intersection of a column and a row (e.g., '120 mins' or 4.5). Also referred to as a cell.

e.g.Find rows where the value in the runtime column is greater than 90...

Live specimen
VPN★ MUST-KNOW
№ 059

Virtual Private Network. Creates an encrypted tunnel between your device and a remote server, hiding your traffic from outside observers. Used to access private networks securely, bypass geo-restrictions, and protect data on public Wi-Fi.

e.g.Connect to the company VPN to access internal services from home...

Live specimen
Webhook★ MUST-KNOW
№ 060

A mechanism where one application sends an automatic HTTP POST request to another when a specific event occurs. Think of it as a reverse API — instead of you asking for data, the data comes to you.

e.g.Set up a webhook so Stripe notifies your server whenever a payment succeeds...

Live specimen
WebSocket
№ 061

A communication protocol that provides a persistent, two-way connection between a client and server. Unlike HTTP (request-response), WebSockets let the server push data to the client in real time (e.g., chat apps, live dashboards).

e.g.Open a WebSocket connection to stream live price updates...

Live specimen
XSS (Cross-Site Scripting)★ MUST-KNOW
№ 062

A vulnerability where an attacker injects malicious scripts into web pages viewed by other users. The script runs in the victim's browser and can steal cookies, sessions, or data. Prevented by sanitizing and escaping user input.

e.g.Sanitize all user-generated content to prevent XSS attacks on your forum...

Live specimen
Zero Trust
№ 063

A security model that assumes no user, device, or network should be trusted by default — even inside the corporate network. Every request must be authenticated, authorized, and continuously validated. 'Never trust, always verify.'

e.g.Adopt a zero trust architecture so every internal service verifies requests...

Live specimen

Interface

the bits you click55 entries
Accordion
№ 064

A vertically stacked list of collapsible sections. Clicking a header expands its content while optionally collapsing others. Useful for FAQs and dense content.

e.g.Create an accordion for the FAQ section where only one answer is visible at a time.

Live specimen
Avatar
№ 065

A circular or rounded image representing a user, typically showing a profile photo or initials as a fallback. Often used in headers, comments, and user lists.

e.g.Display user avatars in a stacked row showing who else is viewing the document.

Live specimen
Badge
№ 066

A small visual indicator attached to another element, typically showing a count, status, or label. Often used for notifications, categories, or unread items.

e.g.Add a red notification badge to the inbox icon showing the unread message count.

Live specimen
Bento Menu
№ 067

Grid-based menu of actions or links.

e.g.App home screen with tiled feature cards.

Breadcrumb
№ 068

A secondary navigation pattern that shows the user's current location within a site hierarchy, typically displayed as a horizontal trail of links.

e.g.Add a breadcrumb above the product title so users can easily navigate back to the category page.

Live specimen
Button
№ 069

Clickable control to trigger actions.

e.g."Submit" on a checkout form.

Live specimen
Card★ MUST-KNOW
№ 070

A rectangular container that groups related information and actions about a single subject. Cards are modular, scannable, and work well in grid layouts.

e.g.Display each blog post as a card with thumbnail, title, excerpt, and publish date.

Live specimen
Carousel
№ 071

A slideshow component that cycles through multiple pieces of content—images, cards, or text—in a horizontal or vertical sequence. Users can navigate manually or let it auto-advance.

e.g.Add a testimonial carousel that shows one quote at a time with navigation arrows and dots.

Live specimen
Checkbox
№ 072

Square input for multi-select options.

e.g.Choose interests: Art, Music, Sports.

Chip
№ 073

A compact, pill-shaped element used to display tags, filters, or selections. Often dismissible with an X button and can be interactive for filtering content.

e.g.Show selected filters as chips above the product grid with an X to remove each filter.

Live specimen
Command Palette
№ 074

A searchable overlay triggered by a keyboard shortcut (often Cmd+K or Ctrl+K) that lets users quickly navigate, search, or execute actions without using the mouse.

e.g.Build a command palette that opens on Cmd+K, showing recent pages, quick actions, and a search field for site-wide navigation.

Live specimen
Comments
№ 075

Chronological user-submitted messages.

e.g.Blog post discussion thread.

Cookie Banner
№ 076

A notification bar or modal informing users about cookie usage and requesting consent. Typically fixed to the bottom or top of the viewport with accept/reject options.

e.g.Add a cookie banner at the bottom of the page with 'Accept All,' 'Manage Preferences,' and a link to the privacy policy.

Live specimen
CTA Button★ MUST-KNOW
№ 077

A prominent button designed to drive a specific user action. Typically styled distinctively with contrasting colors, larger size, or visual emphasis.

e.g.Add a primary CTA button with 'Start Free Trial' in the hero section.

Live specimen
Date Picker
№ 078

A calendar-style input that lets users select a date or date range. Often includes month/year navigation and preset options like 'Today' or 'This week.'

e.g.Add a date picker to the booking form that disables past dates and highlights available slots in green.

Live specimen
Design System
№ 079

A collection of reusable components, guidelines, and standards that define the visual language and interaction patterns of a product or brand. Includes tokens (colors, spacing, typography), UI components (buttons, inputs, cards), and documentation for consistent implementation across teams and platforms.

e.g.Reference the design system tokens for button colors and spacing instead of hardcoding values...

Live specimen
Döner Menu
№ 080

Vertical three-line filters menu (varying lengths).

e.g.Filter panel icon on mobile search.

Dropdown
№ 081

List that expands to select one option.

e.g.Country selector in a profile form.

Dropdown Menu
№ 082

A toggleable menu that expands downward when triggered, revealing a list of options or links. Common for navigation, settings, and form selects.

e.g.Add a dropdown menu under 'Products' that shows three category links on hover.

Live specimen
Empty State
№ 083

A placeholder view shown when a list, page, or section has no content to display. Typically includes an illustration, message, and a call to action.

e.g.Design an empty state for the projects list with an illustration and a 'Create your first project' button.

Live specimen
Feed
№ 084

Stream of content sorted by time.

e.g.Social timeline of posts.

Floating Action Button
№ 085

A circular button that floats above the interface, usually in the bottom-right corner. Triggers a primary action like composing a message or adding an item.

e.g.Add a floating action button with a plus icon that opens a quick-add task modal when tapped.

Live specimen
Footer
№ 086

The bottom section of a webpage containing secondary navigation, contact info, social links, legal text, and other supplementary content.

e.g.Create a four-column footer with links, a newsletter signup form, social icons, and copyright text.

Live specimen
Form
№ 087

Grouped inputs for structured submission.

e.g.Shipping address and payment details.

Form Field
№ 088

An input element with associated label, placeholder text, helper text, and validation states. Includes text inputs, selects, checkboxes, and other form controls.

e.g.Create form fields for email and password with inline validation that shows errors below each input.

Live specimen
Hamburger Menu
№ 089

A navigation icon consisting of three horizontal lines that, when tapped, reveals a hidden menu. Common on mobile interfaces to conserve screen space.

e.g.On mobile, collapse the navigation into a hamburger menu in the top-left corner.

Live specimen
Icon
№ 090

Small graphic representing actions/content.

e.g.Magnifying glass for search.

Infinite Scroll
№ 091

A loading pattern that automatically fetches and appends new content as the user scrolls near the bottom of the page, eliminating traditional pagination.

e.g.Implement infinite scroll on the blog archive so new posts load seamlessly as readers reach the end of the visible list.

Input Field
№ 092

Text-entry control for user data.

e.g.Email field in signup.

Kebab Menu
№ 093

Three vertical dots for more options.

e.g.Overflow actions on a card.

Lightbox
№ 094

An overlay that dims the page background and displays enlarged images, videos, or galleries in focus. Typically includes navigation arrows and a close button.

e.g.When the user clicks a thumbnail, open a lightbox showing the full-size image with left/right arrows to browse the gallery.

Live specimen
Loader
№ 095

Indicator that a process is running.

e.g.Spinner during file upload.

Meatballs Menu
№ 096

Three horizontal dots for extra actions.

e.g.Post settings on social media.

Mega Menu
№ 097

A large, multi-column dropdown menu that expands from the navigation bar, displaying grouped links, images, or featured content. Used on sites with extensive navigation.

e.g.Design a mega menu for 'Shop' that shows four product categories in columns with thumbnail images and 'View All' links.

Live specimen
Modal★ MUST-KNOW
№ 098

An overlay dialog that appears on top of the main content and requires user interaction before returning to the underlying page. Also called a dialog or lightbox.

e.g.Use a confirmation modal before permanently deleting a user's account to prevent accidental data loss.

Live specimen
Navigation Bar★ MUST-KNOW
№ 099

A horizontal bar at the top of a website containing the logo, main navigation links, and often a CTA or search. Serves as the primary wayfinding tool across pages.

e.g.Create a navigation bar with logo on the left, five text links centered, and a 'Get Started' button on the right.

Live specimen
Notification
№ 100

Status alerts (success, error, new items).

e.g.Red badge on messages icon.

Picker
№ 102

Structured selector (dates, times, values).

e.g.Date-of-birth calendar widget.

Progress Bar
№ 103

A horizontal bar that visually indicates the completion status of a task or process. Can be determinate (showing percentage) or indeterminate (showing activity).

e.g.Show a progress bar at the top of the multi-step form indicating the user is on step 2 of 4.

Live specimen
Radio Buttons
№ 104

Circular single-select options.

e.g.Choose one: Small, Medium, Large.

Search Bar★ MUST-KNOW
№ 105

An input field that allows users to search for content within a site or application. Often includes an icon, placeholder text, and autocomplete suggestions.

e.g.Add a search bar in the header with autocomplete that suggests results as the user types.

Live specimen
Search Field
№ 106

Input optimized to find items in-system.

e.g.Site-wide search bar.

Sidebar
№ 107

Lateral area for navigation/content.

e.g.Left rail with section links.

Live specimen
Sidebar Navigation★ MUST-KNOW
№ 108

A vertical navigation panel positioned along the left or right edge of the screen. Can be fixed, collapsible, or toggle between icon-only and expanded states.

e.g.Build a collapsible sidebar nav that shows icons only when collapsed and full labels when expanded.

Skeleton Loader
№ 109

A placeholder UI that mimics the layout of content while it loads. Uses animated gray shapes to indicate where text, images, and elements will appear.

e.g.Show a skeleton loader with pulsing rectangles while the user profile data fetches from the API.

Live specimen
Slider
№ 110

Drag control to set a value/range.

e.g.Price range slider on marketplaces.

Snackbar
№ 111

A brief, non-blocking message that appears at the bottom of the screen to confirm an action or show a status update. Auto-dismisses after a few seconds.

e.g.Show a snackbar saying 'Item added to cart' with an 'Undo' link after the user clicks 'Add to Cart.'

Live specimen
Stepper★ MUST-KNOW
№ 112

A navigation component that guides users through a multi-step process, showing numbered or labeled steps with visual indicators for completed, current, and upcoming stages.

e.g.Build a checkout stepper with steps for Cart, Shipping, Payment, and Confirmation.

Live specimen
Sticky Header★ MUST-KNOW
№ 113

A navigation header that remains fixed at the top of the viewport as the user scrolls down the page. Maintains access to navigation without scrolling back up.

e.g.Build a sticky header with the logo on the left, nav links centered, and a CTA button on the right.

Tab Bar★ MUST-KNOW
№ 114

A horizontal set of labeled tabs that switch between different views or content sections without leaving the page. Only one tab is active at a time.

e.g.Use a tab bar to switch between Overview, Features, and Pricing sections on the product page.

Live specimen
Tag
№ 115

Keyword label for categorization.

e.g.Chips showing "Design", "Photography".

Toast Notification★ MUST-KNOW
№ 116

A brief, non-blocking message that appears temporarily to provide feedback about an action. Typically slides in from a corner and auto-dismisses.

e.g.Display a success toast in the bottom-right corner when the form submits successfully.

Live specimen
Toggle
№ 117

On/off switch for binary state.

e.g.Dark mode toggle.

Tooltip
№ 118

A small popup that appears when hovering over or focusing on an element, providing additional context or explanation without cluttering the interface.

e.g.Add a tooltip to the info icon that explains what the setting does on hover.

Live specimen

UX & Layout

why it feels right22 entries
Above the Fold★ MUST-KNOW
№ 119

The portion of a webpage visible without scrolling. Critical for first impressions, this area typically contains the primary headline, value proposition, and main call to action.

e.g.Keep the headline, subhead, and primary CTA above the fold so users see them immediately.

Live specimen
Affordance★ MUST-KNOW
№ 120

A visual or interactive cue that suggests how an element should be used. Good affordances make interfaces intuitive by signaling actions like clicking, dragging, or scrolling.

e.g.The raised appearance of that button provides strong affordance—users instinctively know to click it.

Asymmetric Layout
№ 121

A deliberately unbalanced composition where elements are not mirrored or evenly distributed. Creates visual interest and directs attention through intentional imbalance.

e.g.Design an asymmetric layout with a large image taking 60% width and text content in the remaining 40%.

Live specimen
Chunking★ MUST-KNOW
№ 122

Grouping related pieces of information into digestible units (chunks) to aid memory and comprehension. Common examples include phone numbers (555-123-4567) and card number fields split into groups of 4.

e.g.Apply chunking to the pricing table: group features under clear category headers like 'Collaboration,' 'Security,' and 'Support.'

Live specimen
Cognitive Load★ MUST-KNOW
№ 123

The mental effort required to process information or complete a task. Good design minimizes extraneous cognitive load by reducing clutter, using familiar patterns, and presenting information clearly.

e.g.Reduce cognitive load: limit the form to 5 fields max, use inline validation, and pre-fill defaults where possible.

Live specimen
Data Table
№ 124

A structured table displaying rows and columns of data, often with sorting, filtering, pagination, and inline actions. Common in dashboards and admin panels.

e.g.Build a data table for orders with columns for Order ID, Customer, Status, and Date—sortable by any column with a search filter.

Live specimen
Data-Ink Ratio
№ 125

Edward Tufte's principle that maximizes the share of ink (or pixels) devoted to displaying data versus non-data elements like borders, backgrounds, and decoration. Higher ratio means cleaner, more efficient visualizations.

e.g.Maximize the data-ink ratio: remove gridlines, use subtle axis labels, and eliminate chart borders—let the data speak.

Live specimen
F-Pattern
№ 126

A reading pattern where users scan horizontally across the top, then move down and scan a shorter horizontal line, creating an F-shape. Common for text-heavy pages like blogs and search results.

e.g.Structure the article page for F-pattern scanning with a strong headline, bold subheads, and left-aligned content.

Live specimen
Flexbox★ MUST-KNOW
№ 127

A one-dimensional layout method for arranging items in rows or columns with flexible sizing, alignment, and distribution of space. Ideal for navigation, cards, and component internals.

e.g.Use flexbox to center the logo and nav links horizontally with space-between alignment.

Live specimen
Full Bleed
№ 128

A layout where images or background colors extend edge-to-edge without margins, creating an immersive, expansive feel. Often used for hero sections and feature highlights.

e.g.Make the hero section full bleed with the background image spanning the entire viewport width.

Live specimen
Gestalt Principles★ MUST-KNOW
№ 129

A set of perceptual laws describing how humans group visual elements. Key principles include proximity (close items seem related), similarity (like items seem grouped), and closure (we complete incomplete shapes).

e.g.Use Gestalt proximity: place the label directly above its input field with minimal spacing, and add more space between separate form groups.

Live specimen
Grid Layout★ MUST-KNOW
№ 130

A two-dimensional layout system using rows and columns to organize content. CSS Grid enables complex, responsive layouts with precise control over alignment and spacing.

e.g.Use a 12-column grid layout with content spanning different column widths at each breakpoint.

Live specimen
Information Architecture★ MUST-KNOW
№ 131

The practice of organizing, structuring, and labeling content so users can find what they need and understand where they are. Defines the skeleton of an app or site before visual design begins.

e.g.Use clear information architecture: group settings by function (Account, Notifications, Privacy) with descriptive labels and logical nesting no more than 3 levels deep.

Masonry Layout
№ 132

A grid layout where items of varying heights stack vertically like bricks, filling gaps efficiently. Popular for image galleries, portfolios, and Pinterest-style feeds.

e.g.Display the portfolio thumbnails in a masonry layout so images of different aspect ratios fit together seamlessly.

Live specimen
Microinteraction
№ 133

Small, contained animations or responses triggered by user actions. They provide feedback, guide tasks, and add personality to interfaces.

e.g.That subtle bounce when a task is checked off is a nice microinteraction—it makes completing items feel satisfying.

Live specimen
Progressive Disclosure
№ 134

A design pattern that reveals information or options gradually, showing only what's needed at each step. Reduces overwhelm by hiding complexity until the user needs it.

e.g.Apply progressive disclosure: show basic options by default, and reveal advanced settings only when the user clicks 'Show more options.'

Live specimen
Responsive Design★ MUST-KNOW
№ 135

An approach where layouts adapt fluidly to different screen sizes and devices. Uses flexible grids, images, and CSS media queries to ensure usability across viewports.

e.g.Make sure the dashboard uses responsive design so it works on tablets and phones, not just desktop.

Live specimen
Signal-to-Noise Ratio
№ 136

The proportion of meaningful content (signal) versus distracting or irrelevant elements (noise). High signal-to-noise means users focus on what matters without visual or informational clutter.

e.g.Increase signal-to-noise: remove decorative icons that don't aid comprehension, simplify the color palette, and cut the copy by 30%.

Single Column★ MUST-KNOW
№ 137

A linear layout presenting content in one vertical column, maximizing readability and focus. Common for articles, landing pages, and mobile-first designs.

e.g.Use a single-column layout for the blog post with a max-width of 720px centered on the page.

Small Multiples
№ 138

A series of similar charts or graphics using the same scale and axes, displayed side by side for easy comparison. Lets viewers spot patterns, differences, and trends across categories or time periods.

e.g.Display sales by region using small multiples: create a row of identical line charts, one per region, so trends are instantly comparable.

Wireframe★ MUST-KNOW
№ 139

A low-fidelity visual guide showing the skeletal framework of a page or screen. Wireframes focus on layout and content hierarchy without styling details.

e.g.Let's start with a wireframe to nail the information architecture before moving into high-fidelity mockups.

Z-Pattern
№ 140

A layout strategy based on the natural eye movement across a page: top-left to top-right, then diagonally down to bottom-left, then across to bottom-right. Effective for pages with minimal text.

e.g.Arrange the hero with logo top-left, CTA top-right, supporting image bottom-left, and signup bottom-right following a Z-pattern.

Typography

the shapes of words25 entries
Body Copy★ MUST-KNOW
№ 141

The main readable text of a page, typically set at 14–18px. Prioritizes legibility and comfort over visual flair, with optimal line length and spacing.

e.g.Set the body copy at 16px with a 65-character line length for comfortable reading.

Live specimen
Box Shadow
№ 142

A CSS effect that adds a shadow around an element's frame, creating depth and separation from the background. Can be customized with offset, blur, spread, and color values.

e.g.Add a subtle box shadow to the card container: 0 4px 12px rgba(0,0,0,0.1).

Live specimen
Display Type
№ 143

Large, decorative typography designed for headlines and short text rather than body copy. Often features unique character details that shine at bigger sizes.

e.g.Use a bold display typeface for the hero headline to create strong visual impact.

Live specimen
Drop Shadow
№ 144

A visual effect that creates a shadow offset from an object, simulating light casting a shadow. Unlike box shadow, drop shadow follows the shape of the content including transparency.

e.g.Apply a drop shadow to the logo so it pops off the textured background.

Live specimen
Embossed Text
№ 145

A typography effect that makes text appear raised or stamped out from the surface. Achieved using carefully positioned light and dark shadows to simulate 3D depth.

e.g.Apply an embossed effect to the logo text for a premium, tactile appearance.

Live specimen
Font Pairing★ MUST-KNOW
№ 146

The practice of combining two or more complementary typefaces—typically a display font for headings and a readable font for body text—to create visual contrast and harmony.

e.g.Pair Playfair Display for headings with Source Sans Pro for body text.

Live specimen
Glow Effect
№ 147

A luminous halo or aura surrounding text or elements, creating a neon or ethereal appearance. Often achieved with multiple layered text shadows or box shadows with high blur values.

e.g.Add a cyan glow effect to the headline for a futuristic neon sign aesthetic.

Live specimen
Gradient Text
№ 148

A design technique that fills text with a color gradient instead of a solid color. Achieved in CSS using background-clip with a gradient background.

e.g.Apply a blue-to-purple gradient to the main headline for a modern tech feel.

Live specimen
Kerning★ MUST-KNOW
№ 149

The adjustment of space between individual letter pairs to achieve visually balanced spacing. Poor kerning creates awkward gaps or collisions between specific character combinations.

e.g.Adjust the kerning between the 'A' and 'V' in the logo—they look too far apart.

Live specimen
Leading★ MUST-KNOW
№ 150

The vertical space between lines of text, measured from baseline to baseline. Proper leading improves readability and prevents text from feeling cramped or disconnected.

e.g.Increase the leading on body text to 1.6 for better readability on long-form content.

Live specimen
Ligatures
№ 151

Special glyphs that combine two or more characters into a single form for better aesthetics or readability. Common ligatures include fi, fl, and ff combinations.

e.g.Enable ligatures on the body text to improve the flow of letter combinations like 'fi' and 'fl'.

Live specimen
Measure
№ 152

The length of a line of text, typically measured in characters. Optimal measure for body text is 45–75 characters per line to maintain readability.

e.g.Constrain the article width to keep the measure around 66 characters for comfortable reading.

Live specimen
Modular Scale
№ 153

A sequence of harmonious sizes generated by multiplying a base value by a consistent ratio (e.g., 1.25 or 1.618). Creates visual rhythm and hierarchy for typography, spacing, and component sizing.

e.g.Apply a modular scale with ratio 1.25: base text at 16px, then 20px, 25px, 31px, 39px for heading levels.

Live specimen
Sans-Serif★ MUST-KNOW
№ 154

A typeface category without decorative strokes, featuring clean, simple letterforms. Associated with modernity, clarity, and digital interfaces.

e.g.Use a sans-serif font like Inter for the UI to keep the interface clean and modern.

Scannability★ MUST-KNOW
№ 155

How easily users can glance at content and extract key information without reading every word. Improved by clear headings, bullet points, bold keywords, short paragraphs, and visual hierarchy.

e.g.Optimize for scanability: use bold for key terms, keep paragraphs under 3 lines, and add descriptive subheadings every 2-3 paragraphs.

Live specimen
Serif★ MUST-KNOW
№ 156

A typeface category featuring small decorative strokes (serifs) at the ends of letter stems. Often associated with tradition, elegance, and long-form reading.

e.g.Use a serif font like Georgia for the blog body text to create a classic editorial feel.

Small Caps★ MUST-KNOW
№ 157

A typographic style where lowercase letters are replaced with smaller uppercase letters. Used for acronyms, subheadings, or elegant body text treatments to maintain even color on the page.

e.g.Set the author byline in small caps to differentiate it from the article title.

Live specimen
Strikethrough★ MUST-KNOW
№ 158

A horizontal line drawn through text, indicating deletion, completed items, or deprecated content. CSS offers control over color, thickness, and style variations.

e.g.Apply strikethrough to completed tasks in the checklist for clear visual feedback.

Live specimen
Text Masking
№ 159

A technique where text acts as a mask revealing an underlying image, video, or pattern. The text shape clips the background, creating visually striking headlines.

e.g.Mask the hero headline with a looping video of ocean waves for an immersive effect.

Live specimen
Text Shadow★ MUST-KNOW
№ 160

A CSS property that adds shadow effects specifically to text characters. Useful for improving readability over images or creating stylized typography effects.

e.g.Add a soft text shadow to the hero headline so it reads clearly over the background image.

Live specimen
Text Stroke
№ 161

An outline applied to the edges of text characters. Creates hollow or outlined typography effects, often used for bold display headlines or layered text treatments.

e.g.Use a white text stroke on the dark headline to create an outlined display effect.

Live specimen
Tracking★ MUST-KNOW
№ 162

The uniform adjustment of letter spacing across an entire word, line, or block of text. Unlike kerning, tracking affects all characters equally.

e.g.Add loose tracking to the all-caps subheading to improve legibility.

Type Hierarchy★ MUST-KNOW
№ 163

The visual organization of text using size, weight, color, and spacing to establish importance and guide readers through content in a logical order.

e.g.Establish a clear type hierarchy with H1 for the page title, H2 for sections, and body text for paragraphs.

Live specimen
Underline Styles
№ 164

Decorative line treatments beneath text, beyond the default browser underline. CSS allows control over color, thickness, offset, and style (solid, dashed, wavy, dotted).

e.g.Use a wavy underline in the brand color beneath key terms for playful emphasis.

Live specimen
White Space★ MUST-KNOW
№ 165

The empty or negative space between design elements. Proper use of white space improves readability, visual hierarchy, and overall composition.

e.g.Add more white space around the CTA button so it stands out from the surrounding content.

Live specimen

Aesthetics

vibes, formalized25 entries
Aesthetic Photography
№ 166

Style-forward images using color/lighting/composition.

e.g.Low-key gritty palette with desaturation.

Aurora UI
№ 167

A design trend using flowing gradient backgrounds that mimic the northern lights, with smooth color transitions and ethereal, glowing effects.

e.g.Add an aurora gradient background with purple, blue, and teal flowing behind the hero section.

Live specimen
Bento Grid
№ 168

A layout style inspired by Japanese bento boxes, featuring asymmetric grids with varied card sizes that create visual interest while maintaining organization. Popular for dashboards and portfolios.

e.g.Design a bento grid layout for the features section with mixed-size cards highlighting different product capabilities.

Live specimen
Brutalism
№ 169

A raw, bold web design style characterized by stark typography, unconventional layouts, clashing colors, and intentionally rough or unpolished elements. Rejects traditional design conventions.

e.g.Design a brutalist portfolio site with oversized monospace type, harsh contrasts, and asymmetric layouts.

Live specimen
CFG Scale★ MUST-KNOW
№ 170

Classifier-Free Guidance scale. Controls how closely the AI follows your prompt versus allowing creative freedom. Higher values = stricter adherence; lower values = more variation.

e.g."Set CFG scale to 7 for balanced creativity, or 12+ for precise prompt matching."

Chiaroscuro
№ 171

A dramatic lighting technique using strong contrasts between light and dark areas. Originally from Renaissance painting, now a popular prompt term for moody, cinematic imagery.

e.g."Portrait with chiaroscuro lighting, deep shadows, Caravaggio-inspired"

Live specimen
Claymorphism
№ 172

A soft, playful design style featuring 3D clay-like elements with rounded edges, pastel colors, and subtle inner shadows. Creates a tactile, approachable feel.

e.g.Create claymorphic buttons and icons with soft rounded shapes and pastel gradients for a friendly app interface.

Live specimen
Corporate Clean
№ 173

A professional, polished aesthetic using structured layouts, conservative colors, ample white space, and readable typography. Conveys trust, stability, and competence.

e.g.Design a corporate clean homepage with a blue accent color, professional photography, and clear navigation.

Live specimen
Cyberpunk
№ 174

A futuristic aesthetic combining neon colors (pink, cyan, yellow) against dark backgrounds with glitch effects, tech imagery, angular shapes, and dystopian vibes.

e.g.Design a cyberpunk gaming site with neon pink accents, glitch animations, and a dark grid background.

Live specimen
Dark Mode
№ 175

A color scheme using dark backgrounds with light text and UI elements. Reduces eye strain in low light, saves battery on OLED screens, and creates a sleek, modern appearance.

e.g.Build a dark mode dashboard with a near-black background, muted accent colors, and high-contrast text.

Live specimen
Flat Design
№ 176

A minimalist style using simple 2D elements without shadows, gradients, or textures. Emphasizes clean shapes, bold colors, and crisp typography for clarity and fast load times.

e.g.Design flat UI icons using solid colors, geometric shapes, and no drop shadows or bevels.

Live specimen
Glassmorphism
№ 177

A design trend featuring frosted glass effects with background blur, transparency, and subtle borders. Creates depth through layered, translucent surfaces that reveal blurred content behind them.

e.g.Design glassmorphic cards with a frosted blur effect, white border, and soft drop shadow over a gradient background.

Live specimen
Material Design
№ 178

Google's design system combining flat design principles with subtle depth cues like shadows and motion. Uses a grid-based layout, responsive animations, and a bold color palette.

e.g.Build a Material Design app interface with floating action buttons, card elevation, and ripple effects on tap.

Live specimen
Maximalism
№ 179

A bold, visually dense design style embracing complexity, layered elements, vibrant colors, mixed patterns, and abundant decoration. The opposite of minimalism—more is more.

e.g.Design a maximalist fashion site with overlapping images, bold typography, animated elements, and clashing colors.

Live specimen
Memphis Design
№ 180

A bold 1980s style featuring geometric shapes, squiggles, clashing colors, and playful patterns. Named after the Memphis Group design collective.

e.g.Add Memphis-style decorative elements with colorful geometric shapes and zigzag patterns.

Live specimen
Minimalism★ MUST-KNOW
№ 181

A design approach that emphasizes simplicity through generous white space, limited color palettes, clean typography, and only essential elements. Prioritizes clarity and focus.

e.g.Create a minimalist landing page with a single headline, one image, and a centered CTA button.

Live specimen
Monochrome
№ 182

A design approach using a single color in various shades and tints, creating visual harmony and sophistication. Often paired with black, white, and gray.

e.g.Design a monochrome portfolio using only shades of deep blue against white backgrounds.

Live specimen
Negative Prompt★ MUST-KNOW
№ 183

Instructions telling an AI image generator what to exclude from the output. Helps refine results by specifying unwanted elements, styles, or artifacts.

e.g."Negative prompt: blurry, low quality, extra limbs, watermark"

Neomorphism
№ 184

A soft, extruded design style that uses subtle shadows and highlights to create the illusion of elements pushing out from or pressing into the background. Combines flat design with realistic depth.

e.g.Create neomorphic buttons with soft inset shadows that look like they're molded from the background.

Live specimen
Organic Design
№ 185

A nature-inspired aesthetic using soft curves, irregular shapes, earthy color palettes, natural textures, and fluid layouts that feel handcrafted and human.

e.g.Create an organic landing page with blob shapes, earth tones, leaf illustrations, and flowing section dividers.

Live specimen
Retro/Vintage
№ 186

Design styles that evoke nostalgia through references to past eras—whether 70s groovy, 80s neon, 90s web, or Y2K futurism. Uses period-appropriate colors, fonts, and visual motifs.

e.g.Create a 90s retro homepage with pixel art, animated GIFs, bright colors, and a hit counter.

Live specimen
Skeuomorphism
№ 188

A design approach that mimics real-world objects with realistic textures, shadows, and details. Buttons look like physical buttons, notebooks have paper textures, and switches toggle like hardware.

e.g.Design a skeuomorphic audio player with brushed metal textures, embossed buttons, and a realistic volume knob.

Live specimen
Swiss Design★ MUST-KNOW
№ 189

A clean, grid-based approach emphasizing clarity, readability, and objectivity. Features strong typography hierarchy, asymmetric layouts, and mathematical precision.

e.g.Build a Swiss-style portfolio with a strict grid, Helvetica typography, and generous white space.

Live specimen
Vaporwave
№ 190

A retro-futuristic aesthetic blending 80s/90s nostalgia with surreal imagery—pink and teal gradients, Roman busts, palm trees, old tech, and glitchy visuals.

e.g.Create a vaporwave landing page with sunset gradients, Greek statue imagery, and retro computer elements.

Live specimen

Photography

pointing the box at things61 entries
Add Human Interest
№ 191

People add life and scale.

e.g.Lone pedestrian traversing historic bridge.

Live specimen
Architecture Photography
№ 192

Depicting buildings with attention to lines/composition.

e.g.Tall structure shot with corrected verticals.

Background Context
№ 193

Slightly blurred backdrop that identifies setting.

e.g.Seagull with recognizable city street behind.

Live specimen
Balance Elements
№ 194

Secondary subject counterweights off-center primary.

e.g.Lamppost balanced by distant Eiffel Tower.

Live specimen
Black & White Photography
№ 195

Monochrome tonality emphasizing contrast/form.

e.g.Converting harsh daylight scenes to emphasize texture.

Live specimen
Brand Photography
№ 196

Visuals expressing a company's identity.

e.g.Lifestyle images aligning with brand values.

Break the Pattern
№ 197

Single anomaly to create emphasis.

e.g.One red candle among vanilla ones.

Live specimen
Centered Composition & Symmetry
№ 198

Balanced subject placement exploiting reflection/axes.

e.g.Bridge centered with symmetrical water reflection.

Live specimen
Color Combinations (Complementary)
№ 199

Use color theory for striking contrast.

e.g.Yellow-lit façade vs deep blue sky.

Live specimen
Commercial Photography
№ 200

Product/brand-driven imagery for advertising.

e.g.Studio-lit sneaker campaign shot.

Conceptual Photography
№ 201

Idea-led visuals summarizable in one concept.

e.g."Swimming across the street" surreal scene.

Contrast Photography
№ 202

High dynamic difference between blacks/whites.

e.g.Stark shadow/highlight street scene.

Live specimen
Decisive Moment
№ 203

Timed capture of fleeting peak action/expression.

e.g.Cyclist perfectly aligned before car reaches bridge.

Diagonals & Triangles
№ 204

Angled forms adding dynamic tension.

e.g.Bridge cables forming implied triangles.

Live specimen
DIY Lighting Hacks
№ 205

Low-cost setups to shape light creatively.

e.g.Homemade diffusers/reflectors for portraits.

Editorial Photography
№ 206

Story-driven images for journalism/features.

e.g.Portrait that accompanies magazine profile.

Event Photography
№ 207

Live coverage of non-repeatable moments.

e.g.Candid toast at a gala.

Fill the Frame
№ 208

Subject dominates, minimizing distractions.

e.g.Tight crop on cathedral façade details.

Live specimen
Film Photography
№ 209

Analog image capture with distinct aesthetic.

e.g.35mm grainy street scene.

Fine Art Photography
№ 210

Reality-subverting, interpretive imagery.

e.g.Butterflies composited around subject.

Foreground Interest & Depth
№ 211

Near elements add 3D feel and lead viewer inward.

e.g.Dock cleat in foreground before city skyline.

Live specimen
Frame Within the Frame
№ 212

Natural/manmade borders to guide focus/depth.

e.g.Archway framing basilica across piazza.

Live specimen
Glamour Photography
№ 213

Beauty-centric, flattering depiction of subjects.

e.g.Fashion model with soft light and styling.

Golden Ratio (Phi/Spiral)
№ 214

Fibonacci spiral guiding visual flow.

e.g.Venice bridge leading spiral to seated figures.

Live specimen
Golden Triangles
№ 215

Diagonal grid guiding placement via right-angle splits.

e.g.Light trails aligning corner-to-corner diagonal.

Live specimen
HDR (High Dynamic Range)
№ 216

Combining exposures to extend tonal range.

e.g.Surreal yet detailed cityscape from bracketed shots.

Live specimen
Hero Section★ MUST-KNOW
№ 217

The prominent, above-the-fold area at the top of a webpage, typically featuring a large image or video, headline, and primary call to action.

e.g.The hero section should immediately communicate the value prop with a bold headline and demo video.

Live specimen
High-Speed Photography
№ 218

Capturing fast events with short exposures/triggers.

e.g.Popping balloon mid-burst.

Infrared Photography
№ 219

Imaging beyond visible spectrum; often heavy post.

e.g.IR landscapes with surreal foliage tones.

Isolate the Subject (Shallow DoF)
№ 220

Wide aperture blurs background to focus attention.

e.g.Cat sharp, background soft bokeh.

Live specimen
Juxtaposition
№ 221

Contrast/complement elements to tell a story.

e.g.Rough bookstalls vs ordered cathedral.

Live specimen
Landscape Photography
№ 222

Natural/manmade vistas emphasizing place.

e.g.Purposeful sunset with foreground silhouette.

Large Format Photography
№ 223

Cameras 4×5 to 8×10 producing ultra-detailed images.

e.g.8×10 portrait with shallow DoF and fine tonality.

Layers in the Frame
№ 224

Foreground/midground/background for depth.

e.g.Canal bridge, riverside buildings, distant tower.

Live specimen
Leading Lines
№ 225

Lines guiding eyes to the subject.

e.g.Paving patterns pointing to Eiffel Tower.

Live specimen
Left-to-Right Rule
№ 226

Motion flowing in reading direction (culture-dependent).

e.g.Dog walker crossing left to right in gardens.

Live specimen
Let the Eye Wander
№ 227

Dense scenes inviting exploration.

e.g.Busy nightlife street full of characters.

Long-Exposure Photography
№ 228

Slow shutter emphasizing motion/light trails.

e.g.Night city light trails on highways.

Live specimen
Macro Photography
№ 229

Extreme close-up, often 1:1 magnification.

e.g.Insect eyes filling the frame.

Live specimen
Motion Blur
№ 230

Visual streaking from subject/camera movement.

e.g.Long-exposure waterfalls rendered silky.

Live specimen
Natural Light Photography
№ 231

Sun/moonlight used without artificial sources.

e.g.Golden-hour outdoor portrait with bounce.

Nature Photography
№ 232

Broad natural subjects beyond wildlife.

e.g.Macro of dew on leaf; mountain panorama.

Negative Space
№ 233

Open areas simplify and spotlight subject.

e.g.Statue isolated against clear sky.

Live specimen
Night Photography
№ 234

Low-light shooting with longer exposures/unique lighting.

e.g.Moonlit abandoned sites with light painting.

Panoramic Photography
№ 235

Stitching adjacent frames into wide vistas.

e.g.Mountain panorama from multiple shots.

Live specimen
Patterns & Textures
№ 236

Repetition and surface detail for visual harmony.

e.g.Arched colonnade; textured stonework.

Live specimen
Portrait Photography
№ 237

Focus on people/animals as main subject.

e.g.Character-defining headshot.

RAW Processing
№ 238

Developing sensor-native files for maximum latitude.

e.g.Workflow in Capture One/Lightroom.

Real Estate Photography
№ 239

Property visuals emphasizing clarity and layout.

e.g.Wide-angle, well-lit interior room overview.

Rule of Odds
№ 240

Odd-numbered subjects feel more natural.

e.g.Three arches and three people in frame.

Live specimen
Rule of Space
№ 241

Leave space ahead of gaze/motion direction.

e.g.Boat placed left moving into right-side space.

Live specimen
Rule of Thirds
№ 242

3x3 grid placing key elements on lines/intersections.

e.g.Horizon on top third; subject on right intersection.

Live specimen
Shoot from Above
№ 243

High vantage for context/geometry.

e.g.City grid from tower rooftop at blue hour.

Live specimen
Shoot from Below
№ 244

Low angle for dramatic scale/perspective.

e.g.Eiffel Tower from base looking up.

Live specimen
Simplicity & Minimalism
№ 245

Clean backgrounds and few elements.

e.g.Lone tree at dawn with mist.

Live specimen
Smoke Art Photography
№ 246

Controlled smoke forms captured and stylized.

e.g.Studio smoke patterns against black backdrop.

Sports Photography
№ 247

Fast action captured with long/fast lenses.

e.g.Freeze a game-winning goal mid-kick.

Street Photography
№ 248

Candid everyday scenes with spontaneity.

e.g.Unposed city moments revealing social life.

Tilt-Shift Photography
№ 249

Lens movements to control plane of focus/lines; miniature faking.

e.g.City scene made to look like a model.

Live specimen
Wedding Photography
№ 250

Events documenting couples and ceremonies.

e.g.Creative couple portrait reflecting personality.

Wildlife Photography
№ 251

Animals in natural habitats, often remote.

e.g.Telephoto shot of hunting predator.

Film & Video

lies at 24 frames a second18 entries
Continuity Editing
№ 252

Seamless time/space/action matching across cuts.

e.g.Close-up to wide as character stands smoothly.

Live specimen
Cross Dissolve
№ 253

Gradual blend from one shot to another.

e.g.Slow dissolve between locations in The Shining.

Live specimen
Cross-Cutting
№ 254

Interleaving simultaneous events to build tension.

e.g.Rescue racing vs. house fire.

Live specimen
Cutaway (Insert)
№ 255

Shot that departs main action for detail/context.

e.g.Insert of a letter inside a drawer.

Live specimen
Freeze Frame
№ 256

Pause on a still to emphasize narration/moment.

e.g.Goodfellas explosion frozen for VO.

Live specimen
Invisible/Hidden Cuts
№ 257

Concealed edit via whip pans/occlusions/VFX.

e.g.Birdman/1917 "one-shot" stitching in darkness.

Live specimen
J Cut
№ 258

Next video follows previous audio start.

e.g.Hearing a reply before cutting to speaker.

Live specimen
Jump Cut
№ 259

Intentional temporal/spatial skips to compress or energize.

e.g.Fixed-camera packing sequence with time jumps.

Live specimen
L Cut
№ 260

Previous audio continues after video cuts away.

e.g.Staying on listener while dialogue continues.

Live specimen
Long Take / Not Cutting
№ 261

Extended uninterrupted shot to immerse/shape pace.

e.g.The Bear episode-long moving master.

Live specimen
Match Cut
№ 262

Cut aligning composition/motion across time/place.

e.g.Door closing matches another door opening in a new scene.

Live specimen
Montage
№ 263

Music-led sequence compressing time via many shots.

e.g.Training or preparation sequence.

Live specimen
Overdub (VO/Subtitles)
№ 264

Hearing one track while seeing another.

e.g.Character inner monologue over live action.

Live specimen
Parallel Editing
№ 265

Intercut narratives to compare/contrast arcs.

e.g.One character's rise vs another's fall.

Live specimen
Planned Transitions
№ 266

Compositional/VFX-driven shot bridges designed in advance.

e.g.Scott Pilgrim stylized scene transitions.

Live specimen
Smash Cut
№ 267

Abrupt high-contrast cut (tone/volume/action).

e.g.Scream cuts to screeching train brakes and calm scene.

Live specimen
Split Screen
№ 268

A layout dividing the viewport into two equal or weighted vertical sections, often used to present two options, combine imagery with text, or create visual tension.

e.g.Create a split-screen hero with a product image on the left and headline with CTA on the right.

Live specimen
Wipe
№ 269

Transitional reveal via directional image wipe.

e.g.Star Wars-style screen wipe following character motion.

Live specimen

No entry matches that. Even a dictionary has limits.