Artists tend to heavily procrastinate on building an online portfolio. The why? We're yet to find out, yet game-changing tools such as Webflow can help us create unique website experiences from scratch, giving us a sea of possibilities to explore, transform, and showcase our work.

However, artists and creators can give the web several other uses than just to market their own product or skills, turning screens into a novel vehicle for creative expression. 

We live in a time where creating videos, taking pictures, publishing books, and releasing songs is a riddle anyone can solve. But what about unearthing the power of one of the most complex yet fascinating inventions of our era? Code.

Using HTML, CSS, and JavaScript to create art isn't by any means ludacris, rather disruptive and beautiful. Webflow, amongst other web tools, has made this new artform easy, accessible, and learnable as it has never been without the need for actual coding. Based on the primary logic that developers use, you can create unique web experiences upon an interface that doesn't differ much from Photoshop or Illustrator.

Want to draw an angry beaver front and center on your landing page? Just draw it! The code writes itself.

Art and Technology—forever

The movers and shakes of the artistic landscape across human history were more than aesthetically conscious. Many of them practiced creativity as an enabler for inventiveness, and vice-versa. And from that imaginative soup—technology, methods, and artifacts, were born to change the culture, to elevate the human mind, to increase love and dignity in society’s deepest identity. 

We could talk about anything and describe what defines an artist in 2020. We could dab upon social media, Youtube, streaming, networking, and other modernity-relevant KPIs to develop and measure an artist's career. But there is one specific skill that could define the artistic stereotype, and that is curiosity

Curiosity is our formal invitation for the Muse to come visit us in our studio and deliver today’s dose of inspiration. Curiosity is also what led me towards the world of code.

Websites are like books, notepads, cyber surfaces where you can illustrate your ideas freely. I picture a website in the hands of Leonardo Da Vinci and can't help to imagine what would he do with it. What would Da Vinci do with a tool like Webflow? What kind of mesmerizing artifact would he invent, prototype, paint?

Well, I guess unfortunately we'll never know, but what's for sure is he would have to open a starter plan account.

Webflow: The No-Code Revolution

Getting started is super easy and entails zero costs. You just need to open an account, explore the Designer interface, play around, and check the different screens. Whenever you hit a roadblock, Webflow's University has got you covered with plenty of instructive material to ease the learning curve.

If you know little about HTML, CSS, or JavaScript, don't hassle! They offer comprehensive tutorials of the fundamentals ranging from the Box Model, to Flexbox, to styling, animations, responsiveness, you name it.

Once you've got the basics down it is time to begin experimenting and that's where curious you kicks in. Inspiration comes unannounced when we give standardized tools alternative uses. Use to your advantage that Webflow wasn't created with artists in mind to create a unique website experience.

What does it looks like?

Looks like that. On the right, you have everything related to the styling section: colors, spacing, size, position, some movement, displays. On the left, you have the main HTML elements: blocks, links, sections, paragraphs, images, navigation, and more. And finally, up top, you have different screen views, the preview button, and the publish button. And on the top right, you have the interactions and animations.

So, left side column HTML, right side column CSS, and top right corner JavaScript. That simple!

Unique websites experiences design with Webflow

Alright, let's feed that idea machine of yours.

By now you feel like if Da Vinci has possessed you, and you are not only ready to paint La Monalisa but to also prototype the next flying apparatus. You feel part artist, part engineer, part hacker, and very very bold and crazy. You are inspired by words, but you now need the visual juice. Let's give you the visual juice.

What you are about to see are not pieces of art made with Webflow. Instead, I'm going to show you sites that contain beautiful interactions and smart functionalities. Remember, aesthetics are not everything, we also want to invent stuff.

opendoodles.com

The landing page of the opendoodles website, showing a grid of white and red doodles.

Opendoodles is exactly what its name says, free doodles to download. But not only that, but they also have a generator. You can create your own doodle, color it the way you want for your project.

This website is made by an artist, an illustrator, but is not just made to show the work. It also works for other people who might not be capable of drawing doodles, is inventiveness at its peak.

finsweet.com

The hero section of Finsweet's website, showing a beautiful illustration of a lion in purple and green.

The people at Finsweet are artists in their own way. They create beautiful websites, structures, experiences, they are like architects. However, the most interesting thing about this site is the lion's animation. Please check it out and then come back, take your time.

Are you back? Perfect then. Did you see how everything moves? You can do all of that without a single line of code. But let me be clear, I encourage you to learn code. You can also experiment with custom code. What is custom code? Custom code is a piece of code that executes a specific action, animation, or interaction.

Let's say you want to add a contact form from Mailchimp. You copy the code from Mailchimp (they give it to you), and embedded on your site. Webflow allows you to add custom code and scripts that are applied to your entire site or to individual pages on your site. 

Back to the point, you can create your own gallery with these interactions, wait there's more inspiration coming.

Tip: Explore CodePen to search for beautiful custom code animations.

okalpha.co

Hero section for Okalpha website.

This is one of my favorite websites. Again, this is not a piece of art in the standard sense, but it is a deeply beautiful experience. Okalpha is an animation studio. Their layout, the movement of the pieces on scroll, and the geometric shapes reminds me of Mondrian.

Even though they are selling their services, this website is a piece of art. Take your time to check it out and see for your self.

Again, I'm not showing actual pieces of art made with web development tools. I'm just giving you a range of ideas of what you can do with Webflow, so you get inspired and try it out for your next project.

Tip: You might build a collage with scrolling interactions, for example.

sky-box.webflow.io

The whole site of sky box by Kai Jolli

Sky-box is actually a piece of art made with web development elements. It is described by the creator as an "Experimental fan art using divs and SVGs with mouse movement and scroll interactions".

Divs are the basic HTML element. A div can be used as a section, as a container for a header, a navigation bar, and forms. Divs can also be used to create lines and shapes. You can style them and animate them. Divs are very important and versatile.

Kai Jolli also has another website with a beautiful and disruptive experience called web elements. If you visit it you can explore ways to make navigation different.

Tip: Look at websites beyond the content or the selling proposition, the most detailed ones can inspire amazing ideas.

cloud-nine.webflow.io

Cloud nine has only on e section with an animation.

This is another interesting idea to implement pieces of art with Webflow.

If you have different pieces to show, you could create as many pages as you need to create what you have in mind. This example shows how simple it is to get on board with the no-code revolution. It is not necessary to make complicated websites. Simple things can be striking, too.

To close the list I want to show you one of the most amazing examples of interactive design.

translate-wf.com

A section in Weglot's website where you have to click to brake the block on the right.

Weglot is a translation integration for Webflow websites. Their landing page design shocks anyone beyond languages. The animations that Weglot used to create this website are so detailed and sleek, you'll want to clone this site.

Guess what, you can actually clone it. Webflow allows you to clone many sites for you to learn how are they created. You can check their structure, animations, styles and more. This platform really gives you all the help you need to break the code barrier. Isn't it inspiring?

Tip: Visit Webflow's showcase page and explore the clonable websites. Well, you have the links in the last sentence. You are welcome. 🙂

Start creating!

I hope you are by now inspired, or at least full of questions you're eager to answer.

If you want to learn more about how to make unique website experiences using Webflow please feel free to drop us a comment down below. We can only invite you to go to Webflow and start experimenting and learning. Don't underestimate the learning curve, for further help go to Youtube and watch Ran Segall or Pixel Geek's "How to Webflow" series.

Happy no-coding creation!