“Open Source”, two little words that when combined offer a world of creativity, communication and problem solving. We all have our go to apps and programmes that we would be lost without but what happens when the cost of the proprietary software you need makes it prohibitive? It’s at that point that most of us head into open water territory, the great sea of Open Source where we can find a free alternative. It may not have all the bells and whistles or the complete functionality of the original but open source software is incredibly useful. For my part I savour that exquisitely satisfying moment when you realise that yes, you can after all do what you set out to do and not have to remortgage your house for the privilege.
And so it was that I found myself with all of the excitement of a pig hunting out that elusive truffle that I searched for an open source wireframing tool for a project I was working on. A wireframe is a visual representation of how a given page of a website, app or piece of software will look when complete. Just like an architect’s blueprints it can show the location, size and even functionality of every element on any given page or screen. It can range from a basic lo-fi sketch to full hi-def graphics. Putting together these pages or screens allows would be Designers the opportunity to create a complete user narrative for their site, software or app before they begin the expensive and time consuming process of coding. Some high end wireframing tools like Indigo Studio even facilitate the creation of a “working” hi-def interactive prototype before a line of code is even written.
Wireframing is very similar to storyboarding, think of how animators sketch out screens to show each individual piece of action before they start animating proper. This allows them to get the story flow right and correct mistakes to the narrative before they get involved in expensive animation. This is exactly why wireframing is so key to good web design or app development, it allows designers to explore different user stories, to put the User Experience (UX) front and centre and ensure that the software or website “flows” effortlessly.
In my case I wasn’t looking for a bells and whistles wireframing tool. All I needed was a basic sketching tool that would allow me to produce lo-fi screens as I wanted to test our project’s flow and story. The open source alternative I found was the PENCIL Project , a free GUI prototyping tool for all platforms including Mac, Windows and Linux. It is an extremely easy to use piece of kit and can be used for a variety of projects in the classroom; in fact any project where you or your students need to create a mock-up, storyboard, flowchart or complex hierarchical diagram.
PENCIL comes with a host of pre-installed graphics and User Interface Elements for a variety of user interfaces ranging from desktop to mobile platforms. It also has both Android and iOS stencils pre-installed so it’s extremely easy for students to begin prototyping their own apps for a variety of mobile devices. It also links with Openclipart.org, the copyright free clipart website, so that you can import clipart within the software directly into your design or diagram.
Want to test your prototype’s flow? Piece of cake. You can interlink pages by adding hyperlink functionality to a given element. In other words, click on this element and it will take you to the appropriate screen.
Finally, once complete you can export your design in a variety of formats, for example as a set of individual .pngs (great for importing as an album into PowerPoint) or as web pages.
Is it perfect? No, of course not. It’s open source and there are glitches. Fair warning – be prepared to keep saving your document and it’s an absolute pain to move pages within the document. But, it is easy to download, relatively easy to use and can be the perfect starting for point for students who want to design an app, detail a process or build a website.
Wireframing Using Pencil – Video Tutorial
[youtube]https://www.youtube.com/watch?v=WBzjz92TYBI[/youtube]