In this series, we’ll be focusing on creating in the Design Editor, covering the basics of web design and how to bring interactivity to your web content. To do that, we’re going to show you how we built the website for this video tutorial step by step. Build along with us to develop hot interactive design skills and immediately put them into practice.

Before we start building, let’s cover the basics of designing in Vev. Vev comes with a library full of pre-coded design components that you can easily drag-and-drop and customize to realize your creative vision faster. Components are made up of: Sections — the building blocks of your page; Elements — the content that lives inside those sections; and Add-ons – the extra functionality like animations that changes how components look and behave.

💡 Learn more about Components in Vev.

The text element might appear simple, but using it well is essential to creating SEO-optimized designs that perform.

In Vev, we’ve maximized the text element’s adaptability and responsiveness, making it much easier to customize to suit your vision.
​
💡 Learn more about using text elements.

Shared Styles is one of the most powerful workflow optimization features in the Design Editor. It’s the easiest and most efficient way to ensure all the text boxes within your project keep a consistent design from start to finish. With Shared Styles, you can update all text boxes across your design in a single click.

To reap the benefits, we recommend you establish Shared Styles at the start of your project. Simply create a text box with the different headers and text options that you want to use, then head to the right-hand Style panel and create your style.

🔥 Hot tip: Shared Styles aren’t just for text—you can also create them for add-ons, including animations.
​
💡 Learn more about using Shared Styles.

Breakpoints are the backbone of responsive web design. All modern-day websites are designed with responsiveness in mind due to the various shapes and sizes of devices. A breakpoint is essentially a point at which your webpage will adapt to suit a class of devices defined by screen size.
​
💡 Learn more about Breakpoints.

Constraints are guidelines that specify where an object will sit within its container (i.e. section or a frame in a section). This is important to maintain consistency across different device sizes. It is essentially setting up an anchor position for your element which is maintained across all device sizes. Constraints can be set in either fixed (pixels) or responsive (percentage) values.

For example, if you place an object in the top-left on your main device mode, let’s say it’s set for laptop screen size, this object will also appear in the top-left on the tablet and mobile device modes as well.
​
💡 Learn more about using Constraints.

Responsive and adaptive design are often used interchangeably, but they serve different purposes. Responsive design automatically resizes components on a webpage in relation to the size of the window or screen that you’re using. Adaptive design requires a manually set design for each different device mode to optimize webpages across different screen sizes.

In Vev, both options are available to you. As you design your page, you can make your sections with responsive design in mind, while retaining the power to manually go into the various device modes and make individual changes to each one. This gives you full creative control to realize designs exactly as you imagine them.
​
💡 Learn more about responsive vs. adaptive design

Interactivity, by definition, is the ability for a computer to respond to a user's input, giving users the opportunity to digitally interact with your content. Using interactive components in your web design make your webpages interesting, engaging your viewers to keep scrolling and keeping them on your site for longer.

Vev’s pre-coded library offers a range of interactive components that you can drag and drop onto your canvas. Check out our interactive website tutorial where we showcase some of the most popular elements that add a flair of interactivity to any project!

Fluidity refers to how your page flows from start to finish. A sleek web page full of small touches of movement can instantly give your content—and by extension brand—an instant premium feel.

There are many components in Vev’s pre-coded library you can use to increase fluidity in your web design. Some of our favorites include horizontal scroll and scrollytelling. Subtle animation add-ons can also add smooth elegance and life to your webpage.

Now that you understand web design principles and the basics of designing in Vev, let’s get to the fun part: building an interactive website!