top of page
Profile picture of Kiera Carter

1.3.2023

3 min read

How I Made This: A hover interaction that’s smooth as clockwork

This feature is a web design lesson in capturing people’s attention without overwhelming them—and it works.

A collage that showcases the top of Noa Shabtai's portfolio. It features several flat, black semi-circles forming an abstract pattern over a beige background.

Illustration by Anita Goldstein. Images courtesy Noa Shabtai.

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

How can a minimalist create a stand-out website without compromising their clean aesthetic?


That’s the challenge Noa Shabtai, a graphic designer based in Israel, embarked on when creating her portfolio. “I wanted people to pay attention to the graphics while maintaining a minimal aesthetic that makes the user feel calm and more willing to explore the site,” she says.


The most eye-catching graphic on her site is the smooth and rhythmic hover interaction above the fold, which feels clean and contemporary against white space. Here, as part of our How I Made This series, she shares how she did it.


Noa Shabtai's eye-catching above-fold hover interaction triggers shapes across the screen to synchronously pivot.



Describe your website and company.


This website is my digital home where I can express myself, my work, and my vision. I want to take users on a visual journey, in which they are first intrigued by the hero then inspired by the portfolio section. I love working with clients who have interesting visual content, like interior designers and photographers, which always boosts my imagination and motivation.



What was your goal in designing this website?


My main goal was to create a design portfolio for my studio that highlights my best client work and makes a good first impression. I also wanted to see how far I could go with Editor X and explore new ways to be creative in digital media.



What’s the one design feature on your site with a major wow factor?


There’s more than one feature that I love, but the hover interaction above the fold tops them all. The mouse cursor effect also adds a special touch, when combined with the minimal design. I wanted to keep the tone relaxing to encourage users to explore the rest of the website.


Two stills showcase how the shapes change orientation and size upon hover.



What do you love about the feature?


It's like the main show piece in the living room when you enter someone’s home. It immediately catches your eye. I enjoyed the challenge. It allowed me to push the limits of what I thought was possible when web designing, while still being able to keep the look simple and minimal with white space. I feel that white space is essential for users to stay focused and pay attention to the content and images.