A site created for a competition at my workplace. It's still somewhat of a work in progress, I want to continue to make updates on it.
animation, history, cartoons, disney, simpsons, bugs bunny, website, responsive, scrolling website, graphic design, designer, interactive, interaction design, fund
Full Landing Page + All Details - http://janlosert.com/store/webflow-cards.html My first fully web based UI Template, 100% developed in Webflow Designer. All elements ready to copy & paste or fully clone in to your projects! I prepared all styles for all the main typography elements (H1-H6, links, paragraphs etc.), button, tags, alerts or social icons. And then using these ���atoms� create as many cards as possible for you to have a nice starting field for new designs. I ended up with 28 cards in total My main aim was to create something visually beautiful for new users or developers who are, to put it nicely non-designers.. All of them are obviously responsive in all Webflow stages. There are 2 hero sections, nice product cards, article thumbnails for the blog or even sign up dialog with all form elements covered.
ui kit, ui design, responsive, webdesign, web, blog, sign up, landing page, hero, clonable, resources
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.
css, parallax, vertical nav, space, sandbox, experiment, don't read my tags
Hey guys, Was inspired by the cards UI from @Jan Losert that was shared earlier in the week. I've been wanting to do something similar and share some UI elements. I plan to keep updating this showcase and adding new features / improving existing elements. I share some hover CSS effects that use the custom code section of webflow, and will be sharing plenty more custom code tips and tricks. Hopefully some find this useful!
ui kit, uidesign, ui design, web, webdesign, landing, dribbble
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.
star wars, solar, solar system, cloneable, template
Hey, Just finished another template, it uses a nice bold design, is very simple and easy to edit and focuses on content. This was an interesting site for me because I set myself the challenge of designing it in only an hour which means that I really had to cut the features to just what was needed. PLEASE LIKE, COMMENT AND CLONE! I want to see what you guys come up with! Arthur
freebie, template, clone, throughflow, slick, agency, portfolio, arthur, throughflow labs, brain
Hey all, I was playing around with overflows to create a one page multi windowed site for personal or creative use. Feel free to clone and edit. Check out this link for help: http://forum.webflow.com/t/help-with-focus-template/8554 Arthur
one page, webflow template, templates, portfolio, personal, interactions, unique, user interface, experimental
This is a quick example showing it is possible to add/integrate React Components into your existing Webflow sites. How I did this: - I first created a static component with all the elements and styles - Published the site and copied the component's HTML from the live site - Converted the HTML into JSX with http://magic.reactjs.net/htmltojsx.htm - Coded a quick todo app functionality and retrofitted the generated JSX - Placed a div on the page where the React Component needs to render (It's a good idea to keep the static components alive on a separate page somewhere for when you want to update the styles etc) That's it; you now have a React Component using Webflow generated styles!
A free kit to help get you started Wireframing in Webflow. The base colour is light blue but it can be easily changed. I use this as a template for my new UX wireframing projects. It's fully responsive and consists of about 40+ unique elements. Remember... Close���, Play, Enjoy! Many more projects to come so if you clone, get inspired or like this... Follow me :)
wireframes, wireframing, free, freebie, blue, ui kit, ui design, ux design, ui/ux
Another unused personal project I'm giving away free to the Webflow community. Clone, Play, Enjoy! Many more templates to come so if you clone, get inspired or like this... Follow me :)
playfair font, free, freebie, template, blue, white, slider, parallax, icons, news, stock, interactions, portfolio
We built this freely cloneable style guide template to help you kickstart your design process and make your sites more consistent. Just clone it to your dashboard, then use it as a jumping off point for every site to get your type, colors, logo treatments, and component styles locked in from day one ��� and super-easy to update as needed. For example, if you want to change the style for every H1 on your site, just edit the instance on your style guide, and it�۪ll automatically update across your site.
styleguide, cloneable, template
Taking advantage of Webflow's visual designer and powerful visual CMS, this responsive ecommerce template gives you a jumpstart on launching your online store. Simply add your products into the visual CMS, connect to your Foxy account, and deploy your website. Foxy is a powerful ecommerce platform that allows merchants to sell any type of product in their Webflow website. Take advantage of live shipping rates, auto tax calculations, coupons, discounts, and more while allowing your customers to securely pay online with nearly 100 payment gateways and alternate payment methods. Creating your Foxy account is quick, easy, and affordable at www.foxy.io. If you have any questions, feel free to comment here or email email@example.com
ecommerce, e-commerce, shopping cart, webstore, minimal, flat, foxy, foxycart, responsive, store, online shopping
A collection of useful animations made on wedflow. telegram: https://t.me/webflow_io youtube: https://www.youtube.com/channel/UCYqajjjpMZJ5h4P3M-PVvUA
interaction, interactions2, animation, animations, 3d animation, tutorial, tutorials, cms, webflow, webflowcms, expert, webflowexpert
The Webflow Editor is pretty intuitive, but that doesn't mean clients couldn't use a handy reference work on it. Which is why I built this site, and am now making it free to clone. So go ahead: clone it, customize it, share it with your clients. And if you or your clients have feedback on how I could make it even more useful, please let me know!
webflowcms, editor, guide
Just a quick template for a photography site or personal portfolio, feel free to clone and use however! Some of the images are pretty big so it might take a while to load.
free, templates, clone, web design, throughflow, photography, photography website, amazing, cool
Hey everyone, I just made this little template - it has quite a unique "grid" design and if based of the Focus Template which I previously made. It's not yet responsive but I am happy to make that work if people would like. Hope you like it, Arthur
classy, throughflow, freebie, free, clone, freelance, free site, arthur, throughflow labs, focus, grid, grid design, portfolio, creative, creative designs, personal
A site where I will put all examples for people I help on the forum, as well as just a collection of cool examples of the awesome things you can do in webflow :) . If you have any Webflow questions PM me here: http://forum.webflow.com/users/arthur/ Arthur
throughflow, throughflow labs, arthur, forum, help, webflow, playground, sandbox
The Commonwell reimagines the heart of Tahoe City as a must-visit destination that brings together community spaces, food purveyors, local retail and recreation.
architecture, graphic design, branding, agency, development, real estate, sustainability, landscape design, california, tahoe, hospitality, interior design, tourism
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.
apple, logo, html, css, wwdc, experiment, pixel-perfect
Edd is a (fake) code editor and this is a landing page created for it. It's a part of my yearly challenge of creating at least 1 free resource per week. You can clone it, export it, do whatever you want. If you want to publish it on your website as it is, you must give some credentials to my Webflow account.
landing, webflow, website, page, homepage, colors, product, code, editor, dribbble, animation, html, css, free, freebie
(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. Features: - 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 icon
template, free, clone, showcase
A minimal, unique portfolio design with organic animations. Perfect for a designer portfolio or related showcase. [ Heads up: Each portfolio thumbnail hooks into it's own interaction. It was once-upon-a-time a version of my portfolio so it's default content contains my past work ;) ]
template, web design, agency, portfolio, white space, minimal
Simple, cloneable implementation of the Isotope Masonry layout plugin with easy filter controls. All styling + filtering is controlled WITHIN the Webflow interface. You have a ".grid" container, inside that you have individual grid ".items"... In a div above that you have your filter/sorting functions in a ".filter" container that holds your buttons. Just add a custom "data-filter" attribute to the buttons to control the filtering. Enjoy.
isotope, filter, grid, gallery filter, masonry
This was inspired by the following CodePen: https://codepen.io/farmok/full/aYbKOO Learn about how I used the BEM naming convention to create the page in the following YouTube video: https://www.youtube.com/watch?v=gcKprnFVCUQ Also, feel free to ask any questions
bem, codepen, text
Hey all, I was just playing around with a few effects and created this app display template, based on this Cody House gem: http://codyhouse.co/gem/app-introduction-template/ CLICK START Hope you like it! Arthur
template, app, throughflow, throughflow labs, app introduction template, full page
interactions, animation, timeline, construction, parse, webflow, pretty, flat design, mobile
Now that you can copy and paste between projects, you can create (and share!) your own UI kits to jumpstart builds on new sites. To kick things off, here�۪s a small scale UI kit that you can clone and repurpose however you�۪d like. Got a UI kit you want to share with the Webflow world? Showcase and let others clone it, then share it with the hashtag #WebflowUIKit.