Now that we’ve got web design principles and the basics of pre-coded components covered, let’s dive in and start creating in Vev! We’re going to break down how to recreate this interactive website.

Download the assets package to get started.

Step 1: Create a project

We’ve made starting a new project in Vev as simple as possible. From your dashboard, click on the “Create project” button on the top right. From here, you will get the option to start from a blank canvas or use a template. For this project, we will be starting from a blank canvas.

Step 2: Inherit breakpoint styles

The “inherit style from breakpoints” toggle allows you to cascade your design choices through to different device sizes. So, if you’re designing desktop-first, design and style choices will be inherited down to tablet and mobile. We recommend that this toggle be set “on” to minimize the number of changes you need to make per device.

Step 3: Select a main breakpoint

You will be asked to select the main breakpoint or device you want to build your design on. We selected “desktop first” for this project.

You’ll then be taken to a fresh new project inside the Design Editor. If you’re not yet familiar with the Design Editor, we recommend reading this article before getting started.

Let’s start by creating an eye-catching header for our page!

Step 1: Add the first section

Add your first section to the project via the Section quick-tool in the top menu, then click on your canvas to add it to your project (alternatively, use shortcut: K on your keyboard to add it).

Step 2: Add a background image

Now let’s add a background image. In this example, we’ve added an image of a grid. You’ll find this in the assets package (here’s the download link again in case you missed it).

To change the background image, click anywhere on your section and navigate to the right-hand Style panel. The Style panel will always reflect the options available for the element or section you have selected. In the Style panel, you’ll now see a “background” field. Clicking this will reveal the pop-out modal for the section background where you can choose between fill, image, or gradient. Select “Image” from the dropdown menu and upload the “light grey grid” image.

🔥 Hot tip: Add additional layers to your background for a next-level design.

Within the same modal, you can also select how the background image behaves. Since we are using a grid image in this example, we have used “contain” and “repeat image”.

Step 3: Add a text element

Now, we’re going to start adding some content to the section, starting by adding a text box. To create a text element, just click the text icon in the top menu and click anywhere on your canvas to add it. Alternatively, hit shortcut: T on your keyboard.

Note:

With the text element added to your canvas, you can now add your text. We recommend setting the tag for your title to H1, which will introduce your page and optimize for SEO in one fell swoop. With your text box selected, the top menu will update with additional contextual tools. To change text tags or format, highlight the text and select the tag you want to use.

You can add multiple text tags to a single text element, allowing you to have varied styles as well as allowing search engines to crawl your content more easily. Please note that various text tags cannot be used in the same line; they need to be unique paragraphs. However, you can use multiple formats in the same line, such as bold and italic.

In our example, we have set “Let’s make the web a more beautiful place”, using the H1 tag, with “beautiful place” set to bold. Just highlight “beautiful place” then select “B” for bold in the pop-up menu.

🔥 Hot Keys: Use cmd + B / ctrl + B for a bold tag or cmd + I / ctrl + I for italics.

Step 4: Style your text

With your text added, it’s time to add some styling. As with all components, when the text element is selected, the style panel on the right-hand side will update with relevant options. The style panel will allow you to select from a variety of different style options, including the font, size, color, and padding of your text element.

Let’s add some styling to the H1 tag. To create a bold and eye-catching tag, change the font family and increase the font size (we set this to 124 pixels). Set the font for the H1 tag to “Vollkorn” (this can be found within the selection of free Google Fonts available). Then, set the bold tag to be a different color. In our example, we’ve set this to red to create a striking contrast.

Step 6: Add shapes

Next up, we’re going to add some icons to bring more creative flair to this section and dial up the ‘90s web style. This can be achieved by using the Shape tool which allows you to access a library of free SVG icons, as well as the option to upload your own. SVGs, or vector images, are great as they are generally a fraction of the file size of images and can be resized to your heart’s content without losing image quality which results in pixelation.

Head to the top menu again to add a shape to your canvas. Click the drop-down next to the Frame/Rectangle icon to reveal other shape options. In this menu, you will find “Shape”.

Once selected, click and drag on your canvas to specify the size of your shape. In the example, we have included some icons outside of the safe zone. When an element is outside of the safe zone, it is possible that it will not be seen on certain screen sizes. As these icons are only stylistic and do not provide key information on the page, it is not vital that they are seen on all screen sizes.

The default shape that appears is our Vev logo. Just double-click the element to reveal the configuration modal where you can search and select from a large library of icons. For this project, we searched for and added: “mouse pointer”, “hand”, “arrows”, “crop”, “pencil”, and “video”.

Once the shapes have been added to the section, you can change their style properties via the style panel on the right-hand side, including the shape color, background color, and padding.

🔥 Hot Tip: By navigating to the “Project” tab in the Shapes library you can upload your own SVGs and also review the shapes you’ve added to your project so far.

Step 7: Add and group elements

Next, we’re going to recreate the look of a web browser window in a ‘90s style by adding a variety of shapes and images, then grouping them all together.

First, search for and add a frame from the + Add menu or use the shortcut the top bar. Once selected, click and drag it onto the canvas. In the style panel on the right-hand side, set the background color to black.

Then, we’re going to add another frame to mimic the look of a browser window’s “top menu bar”. Click and drag this over the top of the existing frame. In terms of design settings, set the background of this frame to white and add a solid 4px border, set to black.

To insert another element into the frame, head to the Layers panel to the left of your canvas and simply click and drag it to your frame. Once it’s inside the frame, set it to 100% width by selecting it again and hitting the “fill width” icon from the constraints panel to the right of your canvas.

Now, set the height of the "top menu bar" frame to a fixed value of 30px. To change the width or height of an element to a fixed value, navigate to the Transformation panel (below Constraints) and click on the percentage or pixel value next to the Width or Height sizes. This will open out a drop-down menu for you to choose between the three available values:

💡 Learn more about sizing components.

To further develop our browser window design, we’re going to replicate the “close”, “minimize”, and “maximize” buttons that you see on Mac devices. Select the Circle shape from the drop-down in your top menu, and click and drag it to your canvas. Hold shift when placing the element on your canvas to keep the width and height at the same value (and create a perfect circle). Check that your circle is sitting within the same frame as the frame above.

Within the transformation panel, set the width and height of this element to be a fixed (pixel px) value. We will also need to do this for the constraints (X and Y axes), so the circle stays in the same position even if the frame is resized. Then add a 3px black border in the style panel. With your first circle created, just select it and copy/paste it twice to create two more circles. You can then set their background colors to red, orange, and green respectively.

Finally, to complete the window we’re going to add an image over the front. In the example, we used a screenshot of a project created in Vev. Select the image icon from the top menu (shortcut: I) and click and drag it to your canvas. To upload an image, double-click the image element to reveal the configurations modal and upload an image from your local files. With your image added, you can then resize it by hovering over a corner of the image element and clicking and dragging it to your desired dimensions.

We’re just going to finish it up with a white 3px solid border, following the exact same process we used for our circles. Once again, just ensure that your image is sitting within the same frame you created above. With the final piece added, the asset is now complete and will work together as a single graphic!

Step 8: Reuse element groups

We’re going to reuse the web browser group we created earlier and repurpose it.

Copy and pasting in Vev is an incredibly powerful feature that allows you to reuse components of your design that you’ve already created. It allows you to copy entire sections, the elements within them as well as the add-ons that are attached. It also copies any adaptations you may have made to other devices. You can even copy between projects!

Once we’ve copied the browser window group, paste the element lower down in the same section. We’re going to replace the image with a labeled image. To do this, with the image element selected, right-click the image and select “Swap. This will open out the + Add menu so you can select the element you’d like to swap it with. In this example use “Labeled Image”.

Now we need to adapt the size of the grouped “web browser” element so that it’s large enough to house the Labeled Image. Just select the grouped elements, and click and drag the corner handles to the desired size.

Step 9: Add and configure the Labeled Image element

Find the Labeled Image in the + Add menu, and add it to your canvas. You can then double-click it to access configuration options. Here you can set the points you want the labels to appear, define the caption that appears when hovering, set a widget to appear when you click on the label, and choose how this animates into and out of view.

The Style panel provides a range of different options for visually styling the element, including the text of the captions as well as the labels themselves. For this example, we’ve taken a screenshot of the Vev interface and created labels to highlight all the UI features within the Design Editor (you can find this image within the asset package).

Note: In order to select your desired widget from the list, you need to name it using the left-side Content panel.

Finally, ensure the Labeled Image is inside the frame you created in the previous step. Simply review the Layers panel on the left-hand side and dragging the Labeled Image element to the correct frame.

For our second section, we’re going to be using some of the elements that we used previously. In our example, we introduce Vev’s founders and add a call-to-action button that will reveal a video.

Step 1: Change the section background To start, add a black section using the quick access button from the top menu and add it below your first section. Alternatively, simply press “K”, move your cursor to the bottom of the first section, then click + add section. Just like our first section, we’re going to change the background. This time, we’re going to be using a darker variant of the grid available in the assets package to create an obvious contrast between the two sections.

Step 2: Add a text element Let’s introduce this section by adding a text element, entering a title, and setting it to H2. Just like before, we can adjust the visual style of the text by adjusting the H2 tag’s properties in the Style panel. We will use the same font family “Vollkorn” as before, and since we are using a dark background we will set the text color to white and the size to 62px.

Use the Constraints panel to ensure that an element is completely centered. The constraint tool can be accessed via the Style panel when a component is selected. When moving an element around, the constraints will update manually based on the nearest corner; this can also be updated manually via the Style panel. For this text box, we’re going to ensure that this is centered so that it appears in the middle on all devices.

Step 3: Create the image collection

We’re going to reuse the web browser group once again by copying and pasting across from the first section above. This time we’re going to replace the image with another one. In the example, we used images of the Vev founders and also added some text at the top of the window to introduce their names and their roles in the company. To update the image, simply double-click the image element to open up the configuration modal and upload the replacement image.

Now adapt the size of the elements so that they are square. Once again, this is achieved by selecting the element you want to resize, and clicking and dragging the handles. Resize the elements to fit a square ratio (you may have to also resize the image dimensions to fit the frame accordingly).

Once you’ve resized the first one, copy and paste the frame twice. With the three groups now in the section, update the images and text for the other founders.

Step 4: Use Auto Layout

With the three groups created, we can ensure that these are aligned perfectly by using a helpful Vev tool called Auto Layout. Just select all three of the window groups (shift + click to select multiple elements) and the Auto Layout option will appear in the right-hand Style panel. Press the plus icon to create an Auto Layout group, which will automatically put the selected components into a frame with Auto Layout activated.

Within the configuration modal, you can set how you want the Auto Layout to act, including the gap between elements, alignment, and wrap options.

💡 Learn more about using Auto Layout

Step 5: Add a link button

We’re now going to set up a link button that will act as our call to action to activate a video pop-up (we’ll cover how to create this in Part Four on enhancements). To add a link button, go to the + Add Menu within the top menu or use shortcut: M, search for “Link Button”, then click, or click or drag it onto the canvas.

By now, you should be well acquainted with the Style panel. With Link Button selected we can define the style of this button as well as how it appears when we hover over it. In our example, we’ve set the background color to red and text to white. On the hover, we’ve inverted this so that the background is white and the text is red. This can be changed via the style panel by changing the “A hover” value for both the background and the text.

Step 6: Adding more shapes Finally, to finish up this section we’re going to add more shapes like in the first section. Just like before, navigate to the top menu and select the dropdown next to the Frame/Rectangle tool. From here, you can select the Shape tool and click on the canvas to add it. Once added, double-click the menu to open the configuration modal and select your desired icon. In this section, we searched for and used the shapes: “paste”, “plus”, and “eye dropper”.

We’ve now created the first two sections of our projects! In the next article, we’re going to cover how to use scrollytelling and horizontal scrolling to add fluidity and movement to your website.