Streaming live at 10am (PST)

How do you create gray box wireframes in Webflow?


#1

Hey folks,

I'm wondering if anyone has recommendations for the best way to create actual "gray box wireframes" in webflow. For example, if I place images in a webflow page it's pretty easy to make a quick responsive prototype. However, if I just want gray boxes instead of actual images what's the best approach? Should I just use the background colors and placeholder backgrounds or should I use actual gray images as placeholders?

I'm just trying to think about the best way to do it considering if I go back in and want to replace the images, how I would actually build out the page.

If I use background colors and images because I can do "gray" then will I just be creating a bunch of styles to make sure those placeholders take up the right space?

I might be missing something really simple here. Just wanted to see if anyone has any tips.

Thanks!


#2

Maybe nobody is using webflow to make wireframes? :smile:


#3

Use divs.

Set a div, give it the name "box" and set the basic properties: gray bg 80% opacity, overflow hidden, display box, min height 100px, min width 100px

Now duplicate it and add a class "inline" to one of them. Then set display inline box.

You now have to kinds of divs, one that is a box, the other that can be stacked.

Display the grid to design and give your boxes dimensions and margins according to the grid. Once you have set all the kind of divs you need, you can make them Symbols and drag them rom the Symbols panel.

Also use Rows, they will always stick to the grid so it's very easy to setup and offers great options for responsivity. Put your divs in the rows.

When your basic layout is done, you can unlink from symbol and give the boxes some bg images to make it more alive.

I don't personally really use WF for wireframe. It works, but wireframe tools such as Mockups are faster for that task. Webflow doesn't allow me to skip a mockup tool, it allows me to skip Photoshop as a layout tool, wich is great :smile:

Hope this simple approach helps.


#4

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