When building in Vev, it's important to maintain a consistent structure in your designs. This structure, or "anatomy" as we like to call it, is made up of six main components: Projects, Pages, Sections, Frames, Elements, and Interactions and Animations. In this article, we will explain what each of these components is, and how they fit together to create a cohesive design.

A Project represents the final output you want to publish, whether it's a website or any other digital experience. Acting as a container, it holds all content, pages, and assets associated with that project. Each project can have multiple pages and comes with its own settings. It also has the ability to inherit global settings and styles such as hosting, integrations, fonts, and colors. Projects facilitate seamless collaboration, allowing multiple users to contribute and work together efficiently.

Pages represent the individual views or screens within a project. Each page can be uniquely designed while maintaining consistency across the project. A page consists of multiple sections, and you can create as many pages as needed to structure your website. Pages inherit styles and settings from the project level but can also have individual configurations.

A Section is a horizontal or vertical division of a page, used to group content logically. Sections help maintain a structured layout and improve user experience. They can contain multiple frames and elements. Sections allow you to define scrolling behavior and background properties.

Frames are the building blocks within sections that help arrange content in a flexible and responsive manner. Frames act as containers for elements such as text, images, or videos. They can be nested within other frames for complex layouts and enable responsive behavior, adapting to different screen sizes.

Elements are the fundamental components used to design and build your project. Elements can be styled, resized, and positioned freely within frames and sections. They form the visual and interactive aspects of your design.

There is a large variety of different components within the add menu, separated into different categories to help you find the right tool for the job.

Interactions & Animations bring life to your design by adding movement and user engagement features. Interactions define how elements respond to user actions, such as clicks or scrolls. Animations create motion effects, such as fades, transitions, and transforms. They help enhance the user experience by making designs more dynamic and interactive.

Vev provides essential design tools that allow you to craft visually compelling and engaging experiences. The primary tools include text, images, videos, and shapes, each serving a specific purpose in building a cohesive design.

Text is a crucial component for conveying information and enhancing the visual appeal of your project. You can customize text elements by adjusting fonts, sizes, colors, and spacing. Text blocks can be placed freely within frames and sections, allowing for structured typography and improved readability.

Images play a vital role in storytelling and aesthetics. Vev allows you to upload and position images with precision, ensuring they align seamlessly with your design. Images can be resized, cropped, and layered to fit within different sections and frames, creating dynamic and engaging compositions.

Videos add an interactive and immersive element to your project. You can embed videos directly into your design to capture attention and communicate complex ideas effectively. Vev supports various video formats and playback controls, giving you flexibility in how videos are presented within your project.

Shapes are versatile design elements that can be used to enhance layouts, create visual dividers, or add stylistic accents. Vev offers a variety of shape options, including rectangles, circles, and custom vector graphics. Shapes can be customized in terms of color, size, and opacity, helping to create depth and balance in your design.