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 reusable design element that maintains consistency across your project, from simple buttons to complex navigation systems. Components create a single source of truth—update the main component and all instances reflect the change. In Framer, components can have variants, responsive states, and interactive behaviors.

The color, gradient, or image that fills the interior of a shape or element. Multiple fills can be layered with different blend modes for complex visual effects. Framer's fill controls support solid colors, gradients, and images with positioning, scaling, and opacity options.

A gradual transition between two or more colors, creating depth, dimension, and visual interest. Gradients add sophistication to backgrounds, buttons, and text without requiring images. Framer supports linear, radial, and angular gradients with multiple color stops and precise positioning.

The prominent top section of a page">landing page, featuring large headlines, key messaging, and a primary call to action. Hero sections make first impressions and set expectations for the rest of the page. Include clear value propositions, supporting imagery, and obvious next steps for visitors.

An element in the design stack that can be positioned above or below other elements, controlling visual overlap. Layers enable complex compositions with overlapping elements and effects. Manage layer order in Framer's left sidebar or use z-index for precise control.

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.

An interactive simulation of a product used to test concepts, gather feedback, and demonstrate functionality before full development. Prototypes range from low-fidelity wireframes to high-fidelity interactive mockups. In Framer, prototypes become production sites—there's no separate prototype stage to recreate.

A color transition radiating from a center point outward in a circular or elliptical pattern. Radial gradients create depth, spotlight effects, and organic backgrounds. Combine with other fills and blend modes for sophisticated visual effects.

A transform that spins an element around a center point by a specified angle measured in degrees. Rotation adds dynamism and visual interest to layouts and interactions. Combine rotation with other transforms for complex motion sequences.

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).

A saved set of visual properties—colors, typography, effects—that can be applied consistently across elements. Styles enable design system consistency and make global updates efficient. In Framer, text and color styles ensure brand coherence throughout your project.

A cohesive set of design choices—colors, typography, spacing—that can be applied across a site or component library. Themes enable consistent styling and support features like dark mode. Framer's variables support theming through switchable value sets.

CSS operations that modify element geometry—translate, rotate, scale, skew—without affecting document flow. Transforms are hardware-accelerated for smooth performance and power many animation effects. Combine transforms for complex visual manipulations.

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.

The portion of a webpage visible without scrolling, borrowed from newspaper terminology where the top half of the front page was most prominent. This prime real estate should contain your most compelling content, clear value proposition, and primary call-to-action. Studies show users form impressions within milliseconds, making above-the-fold content critical for engagement.

Content that requires scrolling to see, positioned lower on the page than the initial viewport. While above-the-fold content grabs attention, below-the-fold content tells your complete story and provides detailed information for engaged visitors. Modern web design recognizes that users do scroll—what matters is giving them a reason to continue down the page.

A prompt encouraging users to take a specific action, typically presented as a button or link with action-oriented text like 'Get Started' or 'Learn More.' Effective CTAs are visually prominent, clearly worded, and strategically placed throughout the user journey. Test different CTA copy, colors, and placements to optimize conversion rates using Framer's A/B testing.

The point at which content becomes hidden until the user scrolls, varying by device and browser window size. The fold isn't fixed—a laptop, phone, and tablet all have different fold positions for the same page. Design for common viewport sizes while ensuring content below the fold is still discoverable and engaging.

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.

User Experience—the overall experience a person has when using a product, encompassing usability, accessibility, and emotional response. Good UX anticipates user needs and removes obstacles to goal completion. UX extends beyond UI to include performance, content clarity, and trust signals.

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.

The proportional relationship between an element's width and height, expressed as a ratio like 16:9 or 4:3. Maintaining consistent aspect ratios prevents layout shifts when images load and ensures visual harmony across different screen sizes. Framer preserves aspect ratios automatically when you resize images proportionally by holding Shift while dragging.

Temporary content indicating where final content will appear, helping visualize layouts before content is ready. Placeholders can be lorem ipsum text, gray boxes, or sample images. Replace placeholders with real content before launch—they can accidentally go live.

Evidence of others' positive experiences—testimonials, reviews, user counts, client logos—that builds trust with visitors. Social proof leverages psychological tendencies to follow others' behavior. Display social proof prominently, especially near conversion points.

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.

The path a user takes through your website to accomplish a goal, from entry to completion. Mapping user flows reveals friction points and optimization opportunities. Design flows that minimize steps while providing necessary information at each stage.

The initial appearance of an interface when empty of user content, requiring thoughtful design to guide action. Zero states should welcome users and clearly explain how to add content. Design engaging zero states that reduce new-user confusion.

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 mathematical proportion of approximately 1:1.618 found throughout nature and art, often used to create aesthetically pleasing layouts. The golden ratio can guide element sizing, spacing, and composition decisions. While not a strict rule, it provides a starting point for harmonious proportions.

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.

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.

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.

Google's design system combining flat design principles with subtle shadows and motion to suggest physical depth and surfaces. Material Design provides comprehensive guidelines for creating consistent, intuitive Android and web interfaces. Many principles translate to general interface design beyond Google products.

A design approach where digital interfaces mimic real-world objects with realistic textures, shadows, and materials. Skeuomorphism provides familiar metaphors but has largely given way to flatter design styles. Some skeuomorphic elements persist where real-world familiarity aids understanding.

Established usability principles used to evaluate interfaces, such as visibility of system status, error prevention, and user control. Heuristic evaluation helps identify usability problems efficiently without user testing. Apply Nielsen's 10 heuristics or similar frameworks to audit your designs.

A fictional character representing a target user group, created from research to guide design decisions around real needs. Personas help teams empathize with users and make consistent decisions aligned with user goals. Base personas on actual user research rather than assumptions.

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.

A visualization of the steps a user takes to accomplish a goal, revealing opportunities and pain points. Mapping user journeys helps optimize flows and identify where users struggle. Design journeys that minimize friction while providing necessary information.

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.

Named values storing design decisions like colors, spacing, and typography, enabling systematic design across platforms. Tokens create a single source of truth that can be translated to different implementation contexts. In Framer, variables serve as design tokens for colors, numbers, and responsive values.

Methods for combining shapes using union, subtract, intersect, or exclude operations to create complex vector graphics from simple shapes. These powerful tools enable creating custom icons, logos, and decorative elements without external software. Boolean operations are non-destructive in most design tools, allowing later modifications.

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.