Has anyone designed a Product Interface in Webflow?

Design help General
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

1 Like
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: Responsive Dashboard - Webflow

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.

2 Likes
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.

8

Hello Ilan!

Just came across your post about using Webflow and Semantic UI together. I’m about to start working on a dashboard for a client who’s using Semantic UI in their codebase and I am itching to use Webflow for this :slight_smile:

Would you be able to point me in the right direction on how I can use them together and hand off Semantic UI converted code to the client ?

9

Sencar,
Actually, I didn’t find the solution to use them together, since Semantic UI is completely different CSS library. The only thing I do is create a design and build interactive prototype in Webflow, simply because it’s easy and quick to test with users, yet it is rebuild from zero in Semantic UI for final product.

Best!

10

Ah okay Ilan, thank you so much for letting me know! Tough times are ahead :slight_smile:

11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.