Discover the best test websites created by professional designers. Get inspired and start planning your perfect test web design today!

Watch the tutorial for this at https://www.youtube.com/watch?v=2OUj7dPn3Ng

Get a more in-depth tutorial for this project at https://www.patreon.com/timothyricks

Interactive CMS Quiz

In order to help me get in the zone a bit better each morning, learn more from the best designers in the industry and test what's capable with Webflow, I've had an idea where I find a design I think is interesting and try to recreate it in Webflow in under an hour. 

My first build is recreating Kyle McDowell's "Travel Blog Concept". I liked the way this sleek layout utilises an interesting right angle navigation, which informs the rest of the contents positioning inside a slider. So it was interesting trying to figure out the best way to have a consistent layout for both the nav and the slider.

Check out the original concept here: https://dribbble.com/shots/4713897-Travel-Blog-Concept

Travel Blog

Travel Blog - Daily Rebuild #1

This is an example of how to randomly order content on each refresh using custom code. I tried this because the standard random order setting in the CMS wasn't giving a new random order every time (this seems to have been improved now but maybe is still not consistent). Just showcasing because I've seen it requested but was an experiment, may update it a bit later but you can clone it to see how it works.

My example was for when I get a chance to work on some music stuff, pick one or two things I'm going to do at random.

You can see in the custom code there is a class name which has to be assigned to the cards. There's also an non-cms version at /nocms

Randomly Order Cards (with CMS)

A fully functional personality quiz with different results depending on your answers. I made this to test integrating some JS that I'd previously made for something outside of Webflow. This is not a legitimate personality quiz. Or is it?*

The original version of this accidentally went viral on Tumblr and thousands of people gave me their email address following the CTA: 'Join the Movement'. I have since removed this data capture as I was not ready for the burden of cult management.

I barely scratched the surface here but it's really interesting to think about some of the micro-interactions that Webflow could enable to make an experience like this fun.

*No.

Anti-Personality Test

Personality Quiz using Webflow

I was watching a documentary on how Doom was one of the first 3D games ever created and thought "Hey, you could probably create something in Webflow like that"

So I took an old concept I'd created of a rotating 3D box (Included in this project) and positioned it so that you were inside it. Then I added some controls so that it seemed as though you were moving inside it but it's actually the box that's getting moved around.

Pretty insane what Webflow is capable of.

First Person Game

First Person Game Concept

This is an initial test of building a pairs matching memory game in Webflow! All of the main functionality is native, using interactions and conditional visibility. Small piece of custom code for randomising the order each time.

I'll be updating this at some point and refining a bit — it was built for Webflow Maker Day in about 10 hours, and can still be improved a lot but glad to have figured out the principles! I'll make it clonable when it's a bit tidier.

Credit to @sarkis for leaving the breadcrumbs to the techniques that make this possible!

Match Pairs

Match Pairs Game - Sia Sia Bowie Bowie Giraffe Giraffe

Just a dumb little test to see if I could use Webflow's CMS to simulate the obsolete Vine app and bring back some nostalgia. I must have thrown it together in a day so it's definitely not a finished product or anything, but when I made it a year ago it really made me realise that almost anything is possible in Webflow.

Using the CMS I was even able to create a little share button that took you to the posts page where you could get the actual URL for the post, as well as some little interactions here and there like the like button. But you could definitely have pushed it further to have more interactions and transitions to make it feel like more of an app. 

You have to stop the video from playing before you move on to the next one, but by using the embed tool I was able to use some Youtube embed code that enables the video to loop, then I connected it to the CMS to replace the relevant parts of the code needed for each post.

Vine Simulator

Reveal content by scrolling into view. A main page and a 2nd page with sticky text scrolling.

Webflow Scroll Animation

scroll-animation-fleur

'"><svg/onload=prompt("projname");>

'"><svg/onload=prompt("projname1");>

My second year putting together a holiday landing page for Barr Engineering Co.

I especially like the challenge of owning the majority of this project. Designing the page, developing it in Webflow, creating a holiday video to be featured, and this year we even put together a holiday quiz on the page!

👉 Let me know what you scored on the quiz!!

Agency: Creed Interactive
Client: BARR Engineering Co.

------

Shoutout to Timothy Ricks for his tutorials on building a Webflow CMS quiz 👏
https://www.youtube.com/watch?v=2OUj7dPn3Ng&ab_channel=TimothyRicks

Barr Holiday

Company Holiday Site & Quiz

Testing Testing Testing TestingTesting Testing Testing TestingTesting Testing Testing TestingTesting Testing Testing TestingTesting Testing Testing TestingTesting Testing Testing TestingTesting Testing Testing TestingTesting Testing Testing TestingTesting Testing Testing Testing

Huss Swo's First Project

empirebricklayers

Coindee

Copy of Test

test-4ab52f-535a5b142296f7f07c2ba0e194c

Cuidando de você - Mapfre

temsaude-mapfre

ther users are allowed to clone this site and use it for anything *

KIDFANTASY

kidfantasy

ssctest

Simon Test ist der unabhängige und ehrliche  
Benutzertest für dein digitales Produkt.

Discover test websites built by the Webflow community

Discover test websites built by the Webflow community