Blog
10 featured Webflow projects: December 2021

10 featured Webflow projects: December 2021

Check out 10 different ways designers are using Webflow to create stunning web designs.

10 featured Webflow projects: December 2021

Check out 10 different ways designers are using Webflow to create stunning web designs.

No items found.
Written by
Jeff Cardello

Webflow creators ended 2021 with some pretty impressive designs.

Welcome to our latest installment of featured websites from the Webflow Showcase. From futuristic NFTs to mental health blogs, we’ve gathered a few projects that caught our attention in the last month.

Here’s hoping these creations motivate you to do your best design work! 

1. Webflow year in review

Our in-house designers do amazing work every day, but the Webflow 2021 year in review site deserves a special shout out. 

An image of Webflow's 2021 Year in Review.

This page collects our greatest hits of 2021 with playful nods to the early internet like pixelated icons. Highlights are communicated through a design full of lively colors, subtle movement, and even a few hidden gems. Hint: try tapping on the love button. 

Yes, we’re excited to tell you about all that we’ve accomplished, but our year-end wrap up is also a love letter to Webflow designers — along with everyone else who has helped make our community such an inspiring space. 

2. Natalie Harris portfolio

Natalie Harris’s design work encompasses everything from museum installations to websites and branding. With a black background and white type, each featured project in her portfolio springs from the screen in full color brilliance. 

An image of Natalie Harris's portfolio website.

We’re fans of the black and white aesthetic, but what’s also great here is the custom cursor. The friendly purple sphere guides users through the design, starting at a small size and then scaling up when it hovers over a project. This keeps the focus on the content while encouraging visitors to keep scrolling. 

For those looking to spruce up or redesign their portfolio, Natalie Harris shows how a tiny embellishment, like a customized cursor, can add so much to a user’s experience. 

3. UnderWater (free cloneable) 

We always enjoy seeing web designers take the flat two-dimensionality of our computer screens and shape them into something that feels real. With a bit of Javascript, UnderWater transforms the user's screen from a grid of pixels, into liquid.

An image of the UnderWater cloneable.

This smooth visual effect makes you want to splish and splash the cursor across the screen. For designers looking for some inspiration in working with interactions and animations, UnderWater shows what’s possible with Webflow and custom code. You can see how it works and clone it for free in the Webflow Showcase.

4. Shaun McMillan

Shaun McMillan is a UI/UX designer and illustrator based in Austin, Texas. As you enter his portfolio —  progressive animation, lines and colors come together in rapid succession, drawing out Shaun’s self-portrait. Not only does this animation show off Shaun’s visual design skills, it also captures his personality and his style of design.

An image of Shaun McMillan's portfolio website.

As you scroll, you’ll see more punchy visuals with animated transitions that peel back each page and shift images and text into place. Each section has movement, making it easy to navigate and prompting further exploration.

5. Frederick R. McDonald

Frederick R McDonald is a multi-disciplinary creative who paints, writes poetry, and takes photos. As a member of the Fort McKay First Nation tribe, his website design captures his heritage along with his creative work.

An image of Frederick R. McDonald's portfolio site.

His thoughtful use of earth tones makes this digital space feel earthy and grounded — which perfectly complements Frederick’s creative work. Whatever your artistic medium, it’s important to communicate your identity, and this portfolio gives us a look into both Frederick’s art and who he is as a person.

Unleash your creativity on the web

Build completely custom, production-ready websites — or ultra-high-fidelity prototypes — without writing a line of code. Only with Webflow.

Get started for free
Unleash your creativity on the web

Build completely custom, production-ready websites — or ultra-high-fidelity prototypes — without writing a line of code. Only with Webflow.

Get started for free
Get started for free

6. La Lulu

La Lulu is a dancer, singer, and Grammy award-winning violinist. Her website features a sizzling color palette of yellow and pink along with photos that capture her vibrant spirit. 

An image of La Lulu's portfolio website.

La Lulu proves that not all brightly colored designs have to be loud and distracting. With social media channels clearly linked in the top right corner and large buttons that prompt you to listen or watch La Lulu’s work, you won’t have a hard time finding what you’re looking for.  

This web design buzzes with an upbeat sense of energy and gives you a solid sense of La Lulu’s style and creative energy. 

7. Create Captivate Close

Agency Create Captivate Close uses an unconventional homepage layout — a 2x3 grid holding different floating objects such as an origami bird or white rose. Scrolling over each square activates a background color. 

An image of the Create Captivate Close agency website.

Ironically, Create Captivate Close’s use of boxes shows you that they can think outside the box when it comes to web design. With its great use of color, variety of type sizes, and uniquely organized design, Create Captivate Close communicates who they are as an agency and how they can help prospective clients. 

8. Mixed Feelings (free to clone)

It’s amazing — and refreshing — to see more mental health resources pop up online. Safe spaces on the web like Mixed Feelings help decrease the stigma and make us all feel more comfortable talking about these often sensitive topics. 

An image of the free cloneable and site, Mixed Feelings.

The Mixed Feelings homepage uses colorful scribbles and shapes floating around a person’s head to symbolize messy thoughts and feelings. It’s a cute and relatable design — haven’t we all felt like our busy mind was just a haphazard scramble?

Mental health is a very personal and often difficult thing to talk about. Using a bright color palette and simple illustrations makes the site feel open, warm, and welcoming. This site is a great example of using the psychology of color to create a more inviting space. 

If you’re interested in how this design came together, you can clone it for free.

9. Magazine (free cloneable)

There’s something so timeless about print-style layouts. Magazine-Style Layout, provides a bit of elegance with a design aesthetic that looks like it could be from the pages of a high-end fashion publication.

An image of the free Clonable, "Magazine."

The stately Butler typeface is used for the headers, with touches of silver and muted grays giving a touch of sophistication. Of course, you can customize and personalize this template in any way you want, but the default styles are a gorgeous starting point. 

For those who want to put together a website with a magazine layout, this free template has everything you need to get one up in a short amount of time. 

10. Text particle with three JS

While there’s nothing wrong with static text, sometimes putting in a bit of extra work can pay off. This project features an effect that stretches and morphs text, turning into something that feels surreal. This is perfect for capturing someone’s attention in a hero section.

An image of the Text particle project.

There are a few moving parts to this animated text effect that was designed with Webflow along with some custom HTML, CSS, and Javascript that you can snag from Codepen. If you’re just learning more about code, working examples like this are a great foundation. 

Let’s see what you’ve been working on

Whether you’ve put together a new portfolio, launched a blog, or created a new website for a client, we want to see your creativity in action. Don’t forget to post up your Webflow designs in the Webflow Showcase and tag it on Twitter with  #MadeInWebflow.

Happy designing and we look forward to seeing what you’ve been up to.

Last Updated
January 21, 2022
Category