scrolie-polie-olie

Before we shipped the navigation you see on our website today, we made a lot of prototypes. Here’s one of them for you to open up in Webflow and see how it’s built. (Note that since it’s a prototype, we didn’t spend time making it mobile-friendly).

meganav-v2

meganav-v1

We built this animation for the hero of our page on prototyping, and after a flurry of requests, have decided to make it cloneable for you to pick apart, tinker with, and try to recreate for yourself. Enjoy!

pong-animation

Starting off projects with a style guide that contains every base tag (e.g. h1, h2, paragraph, etc.) can be a great way to manage styles and maintain a clean style sheet. But building out a page with all these elements can be a hassle.

So we did it for you. Just open this project up and copy/paste everything to a new page in your project, then style those tags however you’d like.

html-tags

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.

sample-ui-kit

2018 Trends — Video

2018 Trends — Maximalism

2018 Trends — Brutalism

2018 Trends — Floating Menu

2018 Trends — Broken Grid

2018 Trends — Illustrations

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.

the-style-guide-template

ryry.io

Ryan Miyoshi

RMv0YJlLOBe7cY7HgZ3Jox34R0Wrk7jLv3DZyBETA7I=

ZC8pa382rux3/Ya5JYmbaiFDJJqVQfa/ZkKRoDwNIOg=

zRYikcIlbF3Un7C26+4VGO/t8jKwNjjuAdQWLlZECTQ=

/zPeDB00QSmJg02UNPvvY6N+w7bL9XbOTmOZn0UHdA0=

9DmxyyZ8FEsc5DSKm/8DpcDu2e/GCLlCF0UJQCEBuSw=

Pesmw2FSIduSR93sJEVAEAHyJZ4MQP9Pbn1gPgXxcXw=

l+2HpTI8qsEqSoxz6Y8y+po4C4+PakSbBdZ2Wp0L/Zk=

p8RKstqTUsFv0yM8P1EiWUksDkzfBxAw5OAvX/lo29w=

v+7g/33q1yaaFCe5K5nIMS7poccMaWOgnqhvKFPK0l8=

xdTyVT3ZuBSNWCl2NPxJ8eZ0ifhUzatwezSwUElWFy0=

Sites

Likes

Ryan Miyoshi

About

About

About