This is not even a real shoe!

Lately, I've been experimenting with Midjourney AI, finding ways to integrate it into my workflow.

And so I created this interactive micro-site, as a proof of concept.

Feel free to check out, clone, and tweak this demo for yourself! 🤓

These micro-sites are fun to make, so if you enjoyed this one, leave a like, and follow me for more stuff like this!

This is NOT a Shoe Ad!

It's that time of year again! 

Santa Claus is coming to town, so hopefully, you made it to the "Nice" list and shared some love with everyone around you! 

Remember that the holiday season is all about joy and kindness, so don't wait any longer - get out there and start spreading some holiday cheer!

___

I built this to test Midjourney AI's abilities and how they work with Webflow. Many thanks to Narratick (IG: @narratick), for helping with the artwork.

If you're enjoying this micro-site, feel free to clone it and share some love by leaving a Like. 

Ho Ho Ho! Merry Christmas!

Naughty or Nice?

All the images you've seen of the Solar System are wrong.

The true size of the Sun, planets, and their orbits would make it impossible to fit everything in the same frame.

In this interactive demo, I invite you to explore that, hoping that together we can behold the sheer beauty that lies in our own cosmic backyard. 

If you found it useful in any way, don't hesitate to like, share and clone this project. I love building these animated models, so if you have a suggestion for the next one, let me know!

The Solar System

Is it possible to recreate the iconic Star Wars title scene in Webflow?

With Webflow's 3D transform, some custom animations, and a bit of JS, you definitely can! 

Feel free to like, share & clone this project and add your own 3D text using the CMS.


Merry Christmas!

star-wars-intro

Can you build a realistic iPad mockup in Webflow?

That's was my initial question, and it lead me on an interesting path...

A few days later, I am pretty happy with the result, and I'll be using this to present my designs to future clients.

If you like it, feel free to clone this template and leave a like while you're here 😁

interactive-ipad

Do you prefer to read about a product, or do you want to see it in action? 

It may sound cliché, but images do tell a thousand words! 

Presenting your product in context bridges the gap in communication, saves your customer time, and helps paint a more vivid picture of your 𝗽𝗿𝗼𝗱𝘂𝗰𝘁 and its 𝗯𝗲𝗻𝗲𝗳𝗶𝘁𝘀. 💃

I created this free webflow demo for a fictional eyewear company, to illustrate exactly that concept.

Feel free to clone this and use it as you like, like and comment if you enjoyed it! ✌️

need-eyeglasses

Can you showcase your website in context to your clients, without opening Photoshop?

Of course you can!

Clone this demo and use it to put your designs on a pedestal, and impress your clients. It works with videos, images and embedded websites.

I had a lot of fun building this, so if you found this useful, feel free to clone this, leave a like, and share it with a friend.

Cheers ✌️

Interactive Presentation

Redesign concept for the Netflix sign-up page.

As much as I love the Netflix website, the sign-up flow can use a little design love. After all, that's their main way of converting new customers.

This is how I imagined the new look of the sign-up page.

Feel free to clone and share this with a friend.
If you enjoyed it, please leave a like and a comment. ✌️

Netflix Sign Up

Although I love the Wikipedia website, I always believed that there's room for improvement when it comes to the user experience.

Here's my attempt at redesigning the article view and creating a better reading experience. 

If you find this useful, feel free to like, comment, and clone this project! ✌️

Wikipedia Redesign

No matter how isolated we feel because of the pandemic, we'll never know how it feels to be 300 million miles from anyone else.

I created this landing page in Webflow, to celebrate the astonishing feat of landing a rover on the Mars surface, and setting the foundation for future expeditions.

I had lots of fun creating this, so feel free to like, comment and clone this project. 🤘

Perseverance Mars Rover

Nobody: . . .
Me: I wonder if you can recreate the Gmail logo animation in Webflow 🤔

Now, Webflow is a no-code tool that helps you build responsive websites in your browser. 

It's certainly not meant for this kind of animations, and that's why it's the perfect candidate for the job. 😅
Also, it's an amazing platform, so I really enjoy doing these little experiments in it.

So, after a little over an hour of work, here's the result. 

No GIF or video witchcraft, just plain ol' CSS animations on this one.

I've included the demo and the cloneable project in the first comment, for other Webflow nerds like me. 🤓

Did it do it justice?

Gmail Animated Logo

Even from childhood, I've always been passionate about Ferrari. 🏎️

From the amazing cars, to the burning colors and the Ferrari spirit, it was a world that drew you in and allowed you to dream big.

And what makes Ferrari truly great (apart from the amazing cars) is that it has 𝗮 𝗸𝗲𝗲𝗻 𝘀𝗲𝗻𝘀𝗲 𝗼𝗳 𝗶𝘁𝘀 𝗼𝘄𝗻 𝗺𝘆𝘁𝗵𝗼𝗹𝗼𝗴𝘆.

The engine assembly plant The Temple. 🛕
Their factory is called The Ferrari Stable. (Scuderia Ferrari) 🐎
They're a low-volume manufacturer, so driving a Ferrari is a rite of passage for any car enthusiast. 🏆

Everything is made with purpose, and is in line with Ferrari's core values. 🧭

And so this #webflow demo is dedicated to Ferrari, and its commitment to creating dreams, while building exceptional race cars.

This demo is only desktop compatible for now. Feel free clone this and tweak it as you like!

If you'd like to see more of these, like and comment below. 🤘

Ferrari 599 GT3

Hello fellow Webflow enthusiasts.
I finally decided to roll up my sleeves and redesign my portfolio.

My mission is to equip startup founders with the tools to make a difference in the world. 

It's been a great experience, and I tried a few new animation techniques in this project.

My Portfolio

👉 If this came out tomorrow on Netflix, would you watch it?

I must confess, I was never a huge Lakers fan. 🏀

I had a lot of respect for the competitor Kobe Bryant, but beyond that, i didn't know much about him.

It was only after he tragically passed away, that I got a glimpse into Kobe Bryant, 𝘁𝗵𝗲 𝗺𝗮𝗻.

The loving father and generous giver, constantly trying to improve himself and elevate the people around him.

He was his biggest critic and also his most passionate supporter because he knew the depths of human potential.

Through the way he carried himself on and off the court, he became something greater than his achievements, he became 𝗮𝗻 𝗶𝗰𝗼𝗻.

I created this demo in #webflow as a tribute to Kobe the man, in hope that soon Netflix will share his story with the world.

Thank you Kobe! 

🙏🏼

The Black Mamba

Enjoy this freebie, a custom made mobile nav animation with four sections. 

I had a blast creating this, so feel free to clone this, find out how it works and tweak it. Don't hesitate to like, share and comment if you're finding this useful.

Note that this project is optimized for mobile screens in portrait mode.

If there's a cool UX element you'd like recreated, send me a link and I will do my best to bring it to life in Webflow.

Mobile Navigation

While experimenting with 3D perspective, I found an unique way to expand the hamburger menu.

This is a simple but effective way to break out of the monotony of the dropdown menu on mobile. Feel free like and comment and to clone and tweak this project as you wish.

3D Menu Animation

Inspired by Pontus Wellgraf's live demo on The Futur livestream with Chris Do, I wondered: can we recreate this amazing After Effects composition in Webflow?

A few hours later, this is the result.(best viewed on mobile/landscape)

Feel free to clone this, comment and like if you find this useful!

Original concept and assets by Pontus Wellgraf.

Formula One

Do you use an application or do you call in to order food?

It's baffling to me how many restaurants have a poor user experience on their websites or even ask you to order over the phone.

In the past few months, I've been ordering food more and more often. As a designer and as a customer I am baffled how many restaurant don't have good user experience when it comes to processing orders or even browsing through their menu.

I mean how hard can it be?

Out of curiosity, I created an interface for a fictional restaurant and explored how I might address these issues. If you are a restaurant owner and find this useful, feel free to clone it and use it as you wish.

Alex Hartan