Design & all that stuff. Experimenting at inb4.webflow.io. Check me out @vinchubang
vin has 1453 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
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
My Webflow Sandbox
You'll find here all the experiments made to answer public questions on the Webflow forumTags:
- custom code
- easing modes
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:
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:
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:
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:
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:
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:
Bilingual corporate portal for pure player 1001pneus from Bordeaux, France. The smartphone version has a special app treatment for both portrait and landscape, with a toolbar on the bottom in place of the top primary menu on desktop.Tags:
O Canada - Canada Day 2015
Made only with Webflow, that was the purpose. Lots of divs, no images. Just because it's possible. Happy Canada Day to all Canadians!