Legowerk wireframe kit

Community resources Show & Tell
1

Hello everyone.
I’ve been working on this wireframe kit for a while. Before I finalize it I would like to show it around and gather some feedback.

This is the beta the UX kit: http://legowerk.webflow.io/

Why I’m making this:
A best design practice while designing a website is to go through sitemap and wireframes, before jumping to the time consuming visual design phase. I couldn’t find any good template with only components and no graphics style applied to it, so I created my own.

Workflow
The idea behind this library is to create interactive and responsive wireframe prototypes directly in Webflow. Ideally skipping combos like Sketch + Invision.
Then, after the wireframes are nailed, you can add content and style to the components, to create the final website.
(I’ve already tried this kit in a client project, and it worked pretty well.)

Features

  • I created a custom flexbox grid. The grid is editable (width, gutters, number of columns).

  • I also added a grid overlay that allows you to know exactly if the elements are aligned. You can toggle it and customize it just like in Photoshop or Sketch. Check the website and try yourself.
    The reason why I made it is that the default Webflow grid is kind of narrow, and not very flexible.

  • To define the responsive behaviour of the columns, I’m using a similar naming convention to Bootstrap.
    E.g: “lg-4”: four columns in desktop; “md-2: two columns in tablet”

  • I also added a live styleguide, to make it easy to stylise the components.

  • I will turn all the components into symbols, so it’s easier to paste them in the website.

  • the kit comes with a starter website.

Feedback

  • Does all this make sense to you?
  • Any extra component I should make?
  • I’ve already spent almost 50 hours on this project (!) and, differently to other wireframe kits, I want to sell this in the marketplace. Would you pay for it if it was complete with a lot of components and working well?
  • Any other comments?

Thanks!

Disclaimer: the navbar is not yet optimised for mobile, to name one, so bear with me ^^

13 Likes
2

LEGO?! Webflow?!

3 Likes
3

I realllllly like this - need a bit more time to look through fully - but great work!

1 Like
4

This is awesome!!

Absolutely LOVE the navbar. And I can definitely see this providing a TON of value for freelancers as you build out the responsive behavior.

Keep up the amazing work!!

5

Hey guys, thanks for the comments!

I created a landing page with the features, and an email form to get notified when the library is ready.
Feel free to add your email if you are interested.

I still have to create a few extra components and fix some mobile issues, and then it’s pretty much ready.

http://legowerk.webflow.io/

6

Hi @Dario

I noted you are hoping to sell on the marketplace - just checking if you’ve started the approval process or if you are going to be selling independently?

7

Hi StuM,

Thank you for sending the link over. Yes, I want to sell this on the Webflow marketplace mainly.

I’m aware of the approval process as I’ve sold one template a few years back. I will start the process when I feel the template is ready for submission.

Do you think something like this could be approved for the marketplace?

8

Hi @Dario

Best to check with your previous contact in the Templates team to see if this is something they would like to add :slightly_smiling_face:

9

This is amazing!

I will definitely be waiting for this to hit the marketplace :sunglasses:

Keep crushing it!

10

awesome idea, really just wow