RWD Wireframes (v. 0.0.2)

Thank you for using RWD Wireframe.

This tool is made so designers can more easily design for responsive web pages. This tutorial will give you a walkthrough how to use this app.

Viewports are the different dimensions to your web page. They simulate the devices you want to design for.

To edit the viewports, click on "Edit Viewports" in the menu. There you can edit the dimensions of the devices you want to simulate.

The Elements are "regions" in your viewports.

You can drag to move the elements, and you can resize the elements by moving the edges. When you Double Click on any of the elements, you can edit the content and other attributes.

To add a new elements, simply click "New Element" and draw on the screen from the upper left to the lower right. You'll be immediately prompted to input the element information.

For more complex designs, you might need to order the element in layers or disable elements in certain views.

In the sidebar on the right, you can simple drag and drop the elements to order or disable. (For developers, it's simply done using zindex.)

After you are done designing a view, you can click on the viewport bar to resize the viewport, and design the elements on that view.

Everytime you change the view, it will save the element settings you have made for that view. Simply click back to see the elements move back to its proper positions.

After you are done, simply login or register, and save your layout. You can view all your projects when you click "User Info"

Once your layout is saved, you can pass the url around for other people to see.