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

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

T.RICKS Menu + Slider

Showcase your app features in a much more interesting way! 

This was a heavily requested cloneable from one of our previous work. Only built using Webflow interactions.

Responsive for ALL breakpoints.

Specific tablet and mobile versions included!

Inspired from: https://timeframe-app.webflow.io/

Cloneable - App Feature Showcase

[Cloneable] Scrolling App Features Showcase - Responsive

Hi, I'm Dan, a UI/UX Designer turned Product Designer based out of Orange County, CA. Available for freelance work.

Dan Machado

Dan Machado - Product Designer Based out of Orange County

A fancy full-screen Webflow navigation menu, which is completely responsive and can also be used from a desktop breakpoint.

The custom open and close animation with an animated background gradient gives the navigation menu an additional character of its own. 

Check out the tutorial here on my channel:
https://youtu.be/XiPq7BcyOPs

Responsive Fullscreen Webflow Navigation With Custom Animation

Responsive full-screen Webflow navigation menu

Saw an interesting interaction online and thought I'd try to translate it into webflow. I also added the same interaction on scroll over for mobile, so nobody gets left out! Clone away, Webflow-ites!

Circular Hover Effect

Watch the YouTube tutorial here (german): 
https://youtu.be/VaVwYP5-nnk

Website Mobile Navigation

Website Mobile Navigation (user friendly)

I wanted to recreate a fun little animation I came across - lucky for me Webflow animations make projects like this fairly easy! I added a simple JavaScript reverse parallax effect to the grey skyline as well - feel free to clone the site & see how it all works!

Under Construction

Construction Animation

Turn Webflow's tab component into a dropdown menu on mobile devices.

Content inside each tab doesn't need to be pushed under an (often) long list of tab links. Feel free to clone.

Webflow Tabs as Dropdowns

Turn Tabs Into a Dropdown Menu on Mobile Devices.

JIMMY MAKES THINGS is a bespoke digital creative collective based in Sydney, Australia. We make beautiful, quality outcomes for the web and mobile.

JMT. Design + Development Collective.

Jimmy Makes Things - Design + Development Collective

d.kele :: The Portfolio of Kele Dobrinski | Freelance Art + Design Director

Kele Dobrinski :: Art Direction & Design

d.kele | Freelance Art + Design Director Portfolio

Landing Page design for Desktop Vision 
It is designed to be simplest and easiest remote desktop software to use. It also supports WebXR which allows you to project your desktop into augmented or virtual reality.

Full website: desktop.vision

Desktop Vision

Desktop.vision

Welcome to Dribbble series, where I attempt to bring to life projects created by popular Dribble artists using only the elements supplied by Webflow! Todays project is web design 04 - Photo Studio by Romeo M. • https://dribbble.com/shots/5593011-web-design-04-Photo-Studio

In my freelancing using Webflow, 95% of my work involves creating crazy, weird sliders that accomplish certain goals. This project is peak slider; displaying information, using grid, with customizations applied to the snide nav, arrows, & content.

For this project, I opted to change a few things that didn't make sense. For example, there were 3 different places in the page where social links were listed, which felt like overkill. I also nixed the mouse icon in the prev/next section, as the slider doesn't let you interact like that. Clone away, and let me know what you think in the comments! Be sure to download the Fontawesome font family to make sure the icons work (https://fontawesome.com/cheatsheet)

web design 04 - Photo Studio

CSS GRID HERO 2 - Dribbble Series - web design 04 - Photo Studio

A starter style guide for all your Webflow projects. Every layout needs
a foundation and Initium can help you lay down the main bricks of your project for a smoother no-code development experience. Clone the project today with text styles, color, buttons, links and resources.

Transfer your style guides from your designs in Figma, Sketch, Xd or any other UI design tool. Customize it for all your projects use what you need or add new items to help you develop quicker.

initium-Style Guide

initium-style-guide

An idea I had on how to perfect the way we handle notifications on mobile devices.

Have a look and let me know what you think, if we can make it even better.

Feel free to clone.

iOS Notification concept

iOS Notification NEW concept

This is a personal directory of some of the sites I often use for my design work. It doesn't include all the design tools out there!

The template uses CMS that you may customise for your own projects.

Webflow CMS - Design Tools

my-design-tools

I blended my recent seamless page tabs, along with a phone and background animation to build a fun conversational landing page. The conversations are CMS driven, and load randomly, so you can plug in a bunch of them and create a unique experience for your visitors. 

The portfolio section is a cloneable built by Aaron Rudyk which Icustomized to fit the  theme of this project. Find the original here => https://webflow.com/website/a-project-section-that-slaps

For the contact form, you can thank the folks over at Flowbase. I took one of their popular form templates, and again, made minor modifications to fit the theme. Find the original here => https://webflow.com/website/Webflow-Onboarding-Form-Clone

The site also includes an area to add a custom menu with a Lottie animation as a trigger and the navigation goes from left sidebar to bottom footer for simplicity on mobile devices.

Text Message Landing Page

text-message-landing

Display your videos with this mobile phone mockup. You can design the story layout and upload multiple videos into one mobile frame.

Video Device Mock Up

Video Mobile Mockup

A collection of tactile vibrations to elevate your users mobile experience.  Free and ready to clone and use on your next Webflow project.

Discover mobilefirst websites built by the Webflow community

Discover mobilefirst websites built by the Webflow community