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.
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.)
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.
- 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?
Disclaimer: the navbar is not yet optimised for mobile, to name one, so bear with me ^^