The visual layer behind an element’s content, which can include solid colors, gradients, images, videos, or combinations of these. Backgrounds establish visual hierarchy and mood while providing contrast for readable text. Framer supports multiple background layers, allowing you to combine images with color overlays and blend modes for sophisticated effects.

A CSS effect that adds shadow beneath or around an element, creating depth and visual separation from the background. Shadows help establish hierarchy by making elements appear to float above the page surface. Framer offers detailed shadow controls including multiple shadows, inner shadows, and variables for consistent elevation systems.

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.

The structured use of heading levels (H1-H6) to organize content and communicate importance to users and search engines. Proper heading hierarchy improves accessibility, SEO, and content scanability. Use only one H1 per page and don't skip levels for visual styling. See Text styles and semantic tags.

The prominent top section of a landing page, typically featuring primary messaging and a main call to action. It sets the first impression and communicates value quickly. Effective hero sections combine clear copy, visual support, and an obvious next step.

The arrangement of visual elements on a page, establishing structure, hierarchy, and flow of information. Good layout guides the eye naturally through content while creating visual harmony. Consider reading patterns—users typically scan in F or Z patterns on text-heavy pages.

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 art and technique of arranging text for readability, legibility, and visual appeal. Good typography guides readers through content while reinforcing brand personality. Study typography fundamentals—font choice, sizing, spacing, and hierarchy—to elevate all your designs.

User Interface—the visual elements and interactive components through which users engage with a product. Good UI is intuitive, consistent, and aligned with user expectations and mental models. UI design balances aesthetic appeal with functional usability.

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.

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 perceived heaviness of an element based on size, color, contrast, and complexity, affecting visual balance. Understanding visual weight helps create balanced compositions without symmetry. Use visual weight to guide attention and establish hierarchy.

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.

A minimalist design style emphasizing clean shapes, bright colors, and two-dimensional elements without shadows, gradients, or textures. Flat design emerged as a reaction to skeuomorphism and dominates modern digital interfaces. While visually clean, ensure sufficient visual hierarchy and affordances for usability.

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.

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 Logo is a unique symbol, wordmark, or combination mark used to identify and differentiate a brand across touchpoints.

Readability describes how comfortably users can consume written content, influenced by typography, line length, spacing, and visual contrast.

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

Reference recreation is the process of rebuilding a design from an image, URL, or example while preserving its layout, style, and visual hierarchy.

In AI-assisted website creation, reference recreation helps teams move faster without losing control of structure, content, performance, or editable design details.

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 selection colors let teams align the small details of browser interaction with the site’s visual system, reinforcing brand polish even in native behaviors.

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