Gavin Strange Explores Hover Interactions | Class with | Editor X

Hello fellow designers and design enthusiasts! We're back with another enticing design class on Editor X, where we delve into the depths of hover interactions. In today's class, we'll be going step by step with Gavin Strange, Director & Designer at Aardman Animations, as he reveals some magnificent tips, tricks, and techniques that'll help you up your design game.

In our last design class, we built the first section of our page using an epic showreel with videobox and lightbox. This time, we're kicking it up a notch by designing the subsequent section─a project gallery with a unique twist using hover interactions. Trust us when we say, you don't want to miss this one!

But before we dive in, don't forget to join our monthly NoCode Design Challenges with fantastic prizes up for grabs. Participating in these challenges not only helps you hone your design skills but also offers you an opportunity to be part of a like-minded community. Plus, our mentors at Live Learning Editor X are always here to guide you in building your design businesses and furthering your career!

Let's get started with today's class, shall we?

Setting Up the Grid for Our Project Gallery

Now that we have the foundation for our page all set and ready, it's time to work on the next section of our design: the project gallery. To achieve this, we'll be using a nifty feature in Editor X that allows us to create responsive grids.

First, navigate to the 'Design' panel and apply a grid to your section. Editor X offers a variety of layout suggestions, but for this tutorial, we'll need a custom 4x3 grid.

Adjusting the Grid and Gaps

Once you've created your custom grid, you'll need to add some space─yes, the design kind of space─between the items in your grid. To do this, click 'Adjust Grid' and then 'Edit Grid', setting the horizontal and vertical gaps to 10 pixels each.

With the gaps in place, let's turn those elongated rectangles into perfect squares. This is where Gavin's pro tip comes in: if you want to be super precise with your measurements, follow these steps:

1. Select the top tab and change the column width unit of measure from 'fraction' to 'viewport width'. This will help you calculate the exact value you require for the row height.

2. Note the value before changing it back to 'fraction'.

3. Select the tab on the left and set the row height to the previously calculated viewport width. In our case, it's 23.7 viewport width.

4. Repeat the process for the other rows.

And there you have it - a perfectly symmetrical 4x3 grid!

Incorporating Hover Interactions into Our Project Gallery

With our grid blueprint in place, it's time to make it interactive using hover interactions. This feature adds a touch of creativity to your website, charming users with eye-catching animations and transitions when they hover over your gallery items.

Here's how you can get started with hover interactions in Editor X:

1. First, add various content elements to the cells in your grid such as images, text, and other multimedia.

2. Select the content element you'd like to apply hover interaction to, and navigate to the 'Design' panel.

3. In the 'Design' panel, you'll find a plethora of presets and properties to create custom hover interactions tailored to your design. Play around with settings such as opacity, transform, shadows, and more to create your ideal hover effect.

Remember, there's no one-size-fits-all approach to using hover interactions. The key lies in experimenting with different effects and properties, and most importantly─having fun!

Wrapping Up

Congratulations, you've successfully added a visually appealing and interactive project gallery to your design! With the help of Editor X and Gavin's expert guidance, you've not only learned how to create custom grids but also brought them to life using hover interactions.

Feeling inspired? Don't forget to put your new skills to good use and join our monthly design challenges for a chance to win amazing prizes and earn some well-deserved bragging rights. Plus, remember that our mentors and vibrant community at Live Learning Editor X are always here to help you along your design journey.

Experience the joy of learning, experimenting, and growing together. Happy designing!