Streaming live at 10am (PST)

Has anyone designed a Product Interface in Webflow?


#1

Webflow is amazing. Especially for websites. I built my company’s website on it and it was a blast.

Since we’re working on a new web product I started wondering if it will be feasible to prototype it and build its interface in Webflow. Do you know if anyone has done something like this?

By a product interface, I mean stuff like:



My only worry is that product interfaces rely heavily on components, such as Multiple Selection Dropdowns, Searchable Dropdowns, etc…

A potential solution to this is if I could use a CSS framework such as Semantic UI or UIkit in Webflow, but I have no idea if that’s possible.

I’m just trying to figure out a potential workflow. Maybe I can quickly build it in Webflow, so that I can play around and iterate, and once I’m happy I can give it to devs to rebuild it by using a CSS Framework?

Dunno, but accepting ideas!


#2

Yup :grinning: https://webflow.com/workshop/prototyping-product-dashboards-in-webflow


#3

Yeah, I saw your video, but it doesn’t really touch upon the points I raised. You made a sidebar nav + top bar and dropped Tabs inside. That’s cool for a basic layout.

But I’m more interested in complex components, such as a pagination, a date range picker, etc. Although, for those I guess I can just add some jQuery UI elements OR build them from scratch, just without the functionality.


#4

There has been many examples of users building dashboards in Webflow: https://webflow.com/website/Responsive-Dashboard

Also, https://www.sunlight.is/ has an ember.js dashboard whose frontend is built entirely in Webflow. I believe they create all the pages in Webflow, including all the components, export it, then convert them into handlebar templates in their Ember app.


#5

Aight, I’ll give it a go and see how it goes. :wink:


#6

Alex, did you get to any solution with CSS framework?
My team works with Semantic UI and I wonder if I can be helpful with components build in Webflow and converted to Semantic UI…


#7

Nope, I didn’t.

I ended up just styling divs to imitate how complex components look, but there’s no functionality. They are just pretty. :smiley:

For simple elements like input fields, dropdowns, selectors, checkboxes, etc. I used the Form Block and styled them there.