An interaction where users click and hold an element to move it, common for reordering lists, sliders, and drawing interfaces. Drag interactions should provide clear visual feedback about what's being moved and where it can be dropped. Consider touch device behavior where drag competes with scrolling gestures.

A user action or system occurrence that can trigger responses, such as clicks, scrolls, form submissions, or page loads. Events drive interactivity by connecting user actions to visual feedback and functionality. Understanding events helps create responsive, engaging experiences.

The transparency level of an element, ranging from 0% (invisible) to 100% (fully opaque). Reduce opacity to create overlays, de-emphasize secondary content, or build layered visual effects. Animate opacity for smooth fade-in and fade-out transitions.

The relative size of elements in relation to each other and the overall design, establishing hierarchy and emphasis. Scale creates visual drama—dramatically larger elements command attention while smaller ones recede. Consider how scale relationships change across breakpoints in responsive designs.

The border or outline applied to shapes and text, defined by weight, color, and style like solid, dashed, or dotted. Strokes add definition, create contrast, or achieve specific visual styles like outlined buttons. Framer offers stroke controls including width, color, and position (inside, center, outside).

Empty space in a design that provides visual breathing room and separation between elements. Whitespace improves readability, focus, and perceived quality of designs. Resist filling every available space—whitespace is an active design element.

A low-fidelity visual representation of a page layout focusing on structure and content hierarchy without detailed styling. Wireframes help validate concepts quickly before investing in visual design. In Framer, you can start with simple shapes and progressively add detail as designs evolve.

Related AI terms: First Draft and Prompt-to-Code.

An introductory screen displayed while an application loads, typically showing branding or loading progress. Splash screens set expectations and provide visual continuity during load times. Keep splash screens brief—users want to reach content quickly.

Designing and developing websites usable by people with various disabilities including visual, auditory, motor, and cognitive. Accessibility is both ethically important and often legally required. Build accessibility in from the start rather than retrofitting.

The study of how colors interact, combine, and influence perception, guiding designers in creating harmonious palettes that evoke specific emotions. Understanding complementary, analogous, and triadic color relationships helps create visually balanced designs. Apply color theory to establish brand moods and guide user attention to key elements.

A composition guideline dividing frames into nine equal parts, placing key elements along lines or intersections for visual interest. The rule of thirds creates more dynamic compositions than centering everything. Apply loosely as a starting point rather than a strict rule.

The empty area around and between design elements that gives content room to breathe and creates visual clarity. Negative space, or white space, is an active design element that improves focus and comprehension. Resist filling every available space—negative space makes designs feel premium.

Psychology-based design rules explaining how humans perceive visual elements as unified wholes, including proximity, similarity, closure, and continuity. Applying gestalt principles creates intuitive groupings and relationships without explicit visual separators. These principles underpin effective layout and information architecture.

The arrangement of elements to show their order of importance through size, color, contrast, and position. Strong hierarchy guides users through content in the intended order and highlights key actions. Squint at your design—hierarchy issues become obvious when details blur.

Visual cues that suggest how an element can be used, such as a raised button appearing clickable or an underlined word suggesting a link. Affordances draw on learned conventions and physical metaphors to make interfaces intuitive without instructions. Strong affordances reduce learning curves and help users discover functionality naturally.

A visual collage of images, colors, typography, and textures capturing the intended look and feel of a project. Mood boards align stakeholders on aesthetic direction before detailed design begins. Create mood boards to explore and communicate design concepts efficiently.

Documentation defining a brand’s visual standards including colors, typography, spacing, and component usage rules. Style guides ensure consistency across team members, projects, and time. Maintain living style guides that evolve with your design system.

Adjusting element positions based on visual perception rather than mathematical precision, making designs feel balanced. Optical alignment acknowledges that geometric centering doesn't always look centered to human eyes. Fine-tune alignments manually when mathematical precision creates visual imbalance.

A design tool used to resize selected layers proportionally, often including typography and effects. It helps preserve visual relationships when scaling multi-element compositions.

Interaction to Next Paint (INP) evaluates responsiveness by measuring the delay between a user interaction and the next visual update.

Analogous Colors are color combinations made from adjacent hues on the color wheel, often used to create cohesive and low-contrast visual systems.

A Hero Image is a large, high-impact image in the top section of a page used to establish tone, communicate value, and drive attention.

A Logo is a unique symbol, wordmark, or combination mark used to identify and differentiate a brand across touchpoints.

UI/UX Design integrates visual interface decisions with user experience research and interaction planning to improve product effectiveness and satisfaction.

Framer’s vector tools let designers craft visual assets in place, keeping illustrations, masks, and interface details editable alongside the rest of the site.

Framer designs can use wide-gamut color values for more vivid accents and gradients on supported displays, helping modern sites feel brighter and more refined.

Framer asset libraries help teams keep visual materials organized and reusable, so collaborators can build pages with consistent media and brand resources.