Design & all that stuff. Experimenting at inb4.webflow.io. Check me out @vinchubang
vin has 1660 followers on Webflow.
CSS only Parallax with Webflow
More an experiment than an example to follow... a vertical parallax using only webflow and custom CSS code. It's a bit hard to fine tune and maintaink lot's of tweaking, but it mainly works.Tags:
- vertical nav
- don't read my tags
My Webflow Sandbox
You'll find here all the experiments made to answer public questions on the Webflow forumTags:
- custom code
- easing modes
A CSS solar system. Apart from one small SVG and an animated GIF for title texture, it's all CSS within Webflow designer. Custom code only for title effect. Custom font from FontSquirrel.
This is not the responsiveness we're looking for.Tags:
- star wars
- solar system
www.je-rom.fr — Furniture design
Jerom is a furniture designer. I shot photos and films for his site, along making the design with Webflow.Tags:
Apple WWDC15 Logo
This logo is remade entirely within Webflow. No custom-code, no images, nothing.
The Apple Logo is a unicode character, the Lato font is by default in Webflow, discs and superellipses are styled divs. All the effects, shadows, gradients, highlights etc are added and tweaked from the Webflow UI.Tags:
Webflow Project Showcase
(Note: this project is the first step of my Webflow Starter Project, a starter template aiming at facilitating some of the recurring design tasks)
You have done Webflow projects for others, or projects that are hosted outside of Webflow, and for various legal and CEO reasons, you can't showcase it as-is in your Webflow profile page?
Then use this starter template to showcase your work. It currently has two sections, one showing your homepage on devices, and one showcasing your homepage in full height for the desktop and mobile breakpoints.
- all graphics in SVG
- browser windows made in Webflow with blocks and icons, customizables
- standard + material design color palette, very handy, check it out!
- responsive, of course
- devices graphics made of a SVGbackground and container for screenshots, absolute positionning so you can rework the layout for every breakpoints
- smartwatch ready because why not?
- orange Webflow project favicon and springboard iconTags:
People Wish - A layout with Webflow
A simple one-pager with a grid of teasers and full nodes as hidden panels. Both the page and the panels are scrollable vertically. There is still an issue with double elevators that I wish I could resolve.
There are two things to consider when reviewing this work:
1/ The teaser + panel is one element with one reusable interaction. It means you can duplicate it and it will continue to work without interferences. That was not easy to do. That's why the clising button is outside of the element and works for every element.
2/ Check the Dashboard page: as the full node panels are hidden, it can be tedious to edit. So the content of the panels sits in a div that is transformed to a Symbol. This page hosts all the symbols so the edition of the pages is way easier. There are many occasions where you can use Symbols for difficult to access content, so you can create a dashboard page for it.
Clone it, make it better! Check in the comments about how to licence the images for yourself.Tags:
The Green Print Button
A one pager to showcase multiple methods to play with background animations, and try to popularize a design idea for rebooting the Print Button.
You're welcome to clone this site and dig into how it's made.Tags:
Infield Label Form Template
There's a lot of noise around infield label forms lately. Some say they're the fastest browsable forms. I anted to try this approach in webflow and make a clean reusable structure. i made it on a dark background, and transparent, but it's easily adaptable.
Duplicate it and make it your own!
Bonus: Standard and material design color palette.Tags:
www.lovela.fr — Bike rentals
Bike renting company on the French West Coast, city of la Rochelle. Lovela stands for "Location de Vélos à La Rochelle" (Bike Renting in La Rochelle). Particular attention here to the logo and icons, drawn especially to mimick the real bikes. Lots of little funny details...Tags:
This is a site for a cruises company. Had a lot of fun designing this site. I made all the 3D illustrations, drew all the icons, shot all the pics and videos.
• Schedules are managed with the CMS so they can be sorted and filtered
• Structure of the database makes it simple to import all the data with CSV
• Dates are translated live with JS
• Hours are converted from AM/PM format to military/international with JS
• Mobile views get a special app-like bottom menu
• there a /slide page that display an elastic fullscreen section, crafted for HD and 4K Tvs for conferences booths, shows and shopsTags:
Webflow Cookie Template
This website is made with Webflow and is a demo on how to set a cookie using Jquery, and use it to show a popup message or not. It's supposed to show you a popup message on your first visit every 24 hours.
You can clone this project and see how it's made.Tags:
pardon my French! Translate your CMS dates and time
inb4.webflow.io — My blog about designing with Webflow
Tips and tricks for designing websites with Webflow, the obvious answer for designers who want a visual way to build world-class websites.Tags:
The HTML5 Robot
Let this made-in-webflow robot chose the appropriate HTML5 tag for you element. Answer its questions and it will tell you what semantic element to use and why.
This mini site comes with an article for the Webflow Blog, about HTML5 Tags. https://webflow.com/blog/html5-semantic-elements-and-webflow-the-essential-guideTags: