Say Hello To Proty: Interactive Prototyping for the 21st Century
"Most people make the mistake of thinking design is what it looks like. People think it’s this veneer – that the designers are handed this box and told, 'Make it look good!" That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works."
Proty is a new tool that Forum One is introducing to make the task of creating interactive wireframes and visual designs easier. We have worked over the years creating designs that are meant to be dynamic and adapt to the users actions and environment, but we have been designing on paper, a static medium. We end up showing our clients how it will look, but not how it will work. Our job as designers doesn’t end after the page loads; it’s really only just beginning.
The problem has traditionally been that creating a functioning website can be a lengthy task, requiring a lot of work to integrate data streams, code interactive elements, and assemble pages of content. Additionally, many Information Architects and Interactive Designers are wary of code, finding it difficult to express their visual ideas in HTML and CSS. So often, we start with paper, which is easier to “sketch” ideas out on quickly, make changes with, share, and distribute.
What we wanted to achieve with Proty is to give Information Architects and Interactive Designers a tool that would allow them to just as quickly assemble wireframes from pre-built HTML "primitives" that they can then quickly mold into a wireframe or visual design they desire, with minimal coding. The advantage of this is that we can begin to see exactly how the page will work and, more importantly, respond to being displayed in different devices.
Proty has numerous features that allow designers to quickly preview their work in real-world conditions:
- Built-in responsive design, using standard small, medium, and large break points. This allows us to quickly preview what the design will look like on the computer screen, tablets, and smartphones.
- Options for creating multiple working versions for A/B testing.
- A 20-column layout grid system for clean consistent design.
- Custom style sheet for designers to design using CSS. Rather than creating designs that may not work on the web, we are creating directly in the medium we will be presenting in.
- "Sketch" presentation theme for presenting early concepts to clients.
- Export functionality so that you can put the file online to share with your team or clients.
- Ability to add pop-up notes to any component.
And Proty is free. That's right, free and being offered under the BSD open-source license. We developed this tool for internal use, but we want your help in making it better, and the best way to do that is to let anyone whose interested play around with it an offer fixes and suggestions.
We’ve produced two public releases now, and it’s getting better with each one. Download it and play around.
Are you working on a site redesign? Think your site would work better with the navigation on the left rather than the right? Want to add a "fat footer" at the bottom the page? Give Proty a try to test our your ideas.
Proty is available for beta testing at www.protytype.com.