Wiry is an open source wireframe template that helps designers create wireframes clients will understand.

Visual Design, Frontend

There’s a problem with traditional wireframes—clients have a difficult time understanding a collection of boxed Xs. Even when you explain that one element is an icon, the other is a text overlay, it can be difficult for them to see. On the other end, the designer doesn’t want to show too much detail, as to loose flexibility when working on visual design. This is where Wiry comes in—to help designers create wireframes clients can understand.

Wiry is a small project that I’m working on with Chris Rowe. Using his personal wireframe kit as a starting point, we’re adding new elements, device mockups and building a site to show off its features.

Wiry Macbook

 The Work

Building a website. I designed and built a simple landing page for Wiry. My goal was to create a site with a similar aesthetic to the wireframe template itself, which is why the site’s color palette is gray, pink and green.

Wiry Download Browser

Wireframe Elements. I’m in the process of making my own additions to the 70 plus components already part of the wireframe template. There are many items missing such as error messages, a mobile keypad and tooltips that will be added in version 1.1. Perhaps, we can also include some core icons from Icon Yard.

Device Mockups. These mockups were created to display the wireframes in an environment on the landing page. However, we’ve decided to include them in the initial release. Perhaps, the environments will give designers the ability to show clients what to expect above the fold on certain devices.

Wiry Devices

Final Thoughts and Next Steps

What gets an open source design project off of the ground? We’re hoping that this template will be incredibly useful to freelancers and agencies. There are a ton more elements to add. We’re hoping that a few of them can make a contribution. Also, we’re looking into getting a LayerVault account to help keep track of versioning.