We've been working hard on Foundation over the past year and things just keep getting better and better. The more we use Foundation, the more ways we see it can be improved. While Foundation already comes with an extensive set of UI elements and features that make developing easier, we knew you could also use Foundation to wireframe faster than ever before!
One of the great things about Foundation is how simple it is to create hi-fi wireframes in code. We've done this for various projects in the past with great success, but sometimes you just can't solve the problem as efficiently in code. Wireframing in code saves you time during production development, but it doesn't put you in the right state of mind to truly think through the details of a layout or interaction.
For example, you have a very complex ecommerce site with lots of unanswered questions about layout, what goes on which page, etc. This would be a lot easier to fuss around with in static wireframes than in code because you would waste a bit of time refactoring code over and over again.
This is where we've always relied on Omnigraffle, making it really fast to create wireframes and re-use elements by creating stencils or master objects (copy as PDF and then paste. You'll be able to double-click and use it like a smart object).
We create wireframes at ZURB — a lot. Sometimes we'll be wireframing a specific set of interactions for over a week and having access to stencils makes things a lot simpler. To mark the birth of our first Foundation Meetup, we decided to create a massive Foundation 3 Stencil Set for everyone to use! This set includes every element that comes with any Foundation project. You can either download the Omnigraffle stenciles or the all vector PDFs that will work with Illustrator or Photoshop.
Stop wasting your time recreating elements from scratch when you decide not to code your wireframes, get these stencils now! And for those coming to tonight's meetup at ZURB HQ, we'll see yah soon!
Visit the Playground Page »