March 2023 projects: portfolios, interactive cloneables, and story-focused design

Spring into these fresh projects that show off a range of design styles.

This month we’re highlighting projects that demonstrate strong visual branding, fun interactions, and narrative-focused navigation.

Personalized portfolios

Explore three portfolios that show off the creators’ unique styles.

Oscar Dykeman

Photosensitivity warning: flashing on load. 

Oscar Dykeman’s portfolio gives off cyberpunk vibes with glitch effects, intense color contrasts, and an edgy look.

Oscar Dykeman portfolio homepage. Purple and black background "Oscar Dykeman" written in 3D balloon graffiti-style letters

Oscar’s name appears in graffiti font balloon letters that move in response to your cursor. Previews of various projects appear as you scroll down the page, with project names appearing upon hover. Each project page includes a summary of the work alongside a quick list of the Oscar’s responsibilities such as photo composition, product 3D rendering, photo retouching, graphic design, creative direction, packaging, etc. This organization makes it simple for potential clients to quickly review Oscar’s skills, style, and results. 

Pedro Matas Chaves

Pedro Matas Chaves opens his portfolio with a straightforward headline, “Multidisciplinary designer focusing on branding and digital media” and key information like his years of experience and work availability above the fold. 

Off-white background and black text "Pedro Matos Chaves Multidisciplinary designer focusing on branding and digital media.

Pedro provides a clear overview of who he is and what he does right away, then encourages you to check out his work by scrolling down. To keep things fresh, he includes a few featured projects in a photo carousel. Underneath the photos, you’ll see an archive of past projects with tags like visual identity and UX/UI.

Esmeralda Studios

Enkhmaa of Esmeralda Studios adds touches of her personality with a logo made up of purple plants and an animated hand waving a peace sign on her homepage. 

Purple hand making a peace sign next to text "Hello! I am Enkhmaa Interaction designer inspired by functional designs that highlight human experience.

Enkhmaa breaks her work examples into two categories: gallery and case studies. Her gallery is a visual exploration of her style, without descriptions. Case studies, on the other hand, include a summary and table of contents that covers key areas like brand overview, project overview, style guide, brand mockup, UX research, UI designs, and demo videos. Organizing information in this way allows potential clients to get as much information as they desire by either reading straight through or skipping to certain sections.

Interactive cloneables

Experiment with these interactive cloneables to add cool and engaging elements to your next design.

Synth audio with playable keyboard

Design studio Roem created a cloneable synth keyboard with DuoSynth sounds that can be played with either your mouse or (computer) keyboard.

Animated Synth keyboard with letters indicating which keys on a computer keyboard correspond to the synth keyboard.

The minimal keyboard is fun to play with on it’s own, but Roem also includes an explanation for how to incorporate the keyboard into your own projects. 

Cursor cut-off with background video

Eloy Be’s cut-off cursor effect project shows a window circle animated using native Webflow interactions to follow the mouse through the viewport.

Neon green background with large circle showing marbled shades of green

Using CSS3 blending modes, Eloy made the background visible through the window — as if you are looking through a moving portal — and displayed a mesmerizing video of green, marbled liquid. You can also switch to “warm” to change to a red color scheme. 

3D Spiral Portfolio 

Take the 3D spiral portfolio for a spin to see a carousel of images move in an upwards spiral.

Still of an animated photo carousel moving in a 3D spiral

This simple but impressive interaction would work well on a portfolio site for a photographer or any other visual artist. It would also be a unique way to display various product photos. 

Immersive storytelling

Take a look at a few projects that pull you in by weaving a story through design. 

Fern — From dawn ‘till dusk

Navigating the website for luxury restaurant Fern feels a bit like a virtual tour that begins with a summary of the restaurant’s atmosphere followed by a large photo of the restaurant interior.

FERN restaurant website, showing a bowl of oatmeal with blueberies next to "Begin your day the right way"

As you move down the page, you’re taken through the breakfast, all-day, and after work drink menus. The chronological order sets the scene, taking you through a day at Fern restaurant from open to close. 

Full page interactive scroll animation

Ashish Kumar’s full page interactive scroll animation is a peek into a larger storytelling site project.

Magenta background, several chat bubbles appearing

This project uses scroll-triggered interactions to make pages appear to swipe to the right or up as the background changes color. Speech bubbles also appear gradually, which projects the feeling of a conversation happening as you explore.


Sean Armstrong created Finsweet-island-d3 to practice storytelling skills — and the result is a fun, illustrated site that feels like a storybook.

Cartoon scene, small black character walking in a dark forest

The horizontal scroll makes navigating the site feel like turning the pages of a book that moves through three chapters. You control the story movement — forwards or backwards — speed, and progression with your scroll, making this an engaging experience. 

Submit your work to Made in Webflow

Whether you’ve got a full site build or some cloneable elements you’re experimenting with, the Webflow community would love to see them! Submit your work to Made in Webflow to connect with other creators and potentially be featured in next month’s round up!

Source link