A Rapid Responsive Wireframing Tool To Demonstrate Hierarchy And Functionality
What Is It?
Wirefy is a collection of CSS & JS files to help you rapidly experiment with responsive wireframes. Whether you keep them to yourself or use them to help educate your clients, Wirefy is flexible and here to help. Wirefy has been built from the ground up. Following the philosophy of mobile first, Wirefy will respond to the proper viewport. Go ahead, resize this page to see how it works. Wirefy is style agnostic so that clients don't get hung up on colours, fonts, other design elements. It's meant to be another tool for your development kit that provides the most basic styles as a foundation.
The base grid is a variation of the 960 grid system. The syntax is simple and it's effective cross browser, but the awesome part is that it also has the flexibility to go mobile like a champ. Go ahead, resize the browser and watch as the layout reacts!
There is a lot you can do for with menus in responsive design. These are a couple of the options that are quite useful. Filament group has put together some excellent examples as well. You can grab those here
Images are useful to show clients. But you don't want them hung up on styles. You can change the size of any of the images just by changing the dimension at the end.
The use of slideshows and galleries can be very important in creating a solid user experience. With the help ofResponsiveSlide.js, you can create a basic slideshow. To use please review responsive_slideshow.js and select one of the slider id's listed there.
The typography of Wirefy is designed to create a strong hierarchy with basic styles for your use. In the styles, we have included rem, em and pixels depending on your needs. Regular paragraphs have been set to 1.4rem base with 2.1rem line height. No wireframe would be complete with a set of icons. Wirefy has opted to use Font Awesome.
Designing for users instead of technology is awesome.
Chris Da Sie, UX Designer
This is only a sample of what icons are available. For a full list, please visit Font Awesome.
Icon Star Empty
Icon Large Grid
Icon Zoom In
Icon Zoom Out
<p class="icon-user">Icon User</p>
Buttons are intended for action and thus should have appropriate weight. The standard button is given that weight with a little bit of depth and a strong hover.
<a href="#" class="button">Click Me</a>
<!-- OR -->
Some very simple tabs that have dead simple jQuery that hook them up to their corresponding content.