Thursday, January 2, 2014

Using Pencil to Create Wireframes for GUI Prototyping

image courtesy of link 
If you have ever lifted weights for strength or toning, you probably know there are some muscle groups in your body that are stronger and easier to work out than others. For me the muscles in the middle of my upper back seem to always be the weaker ones.

I offer this analogy as a segue into the 'software engineering' muscles of all the disciplines and hats we must wear. One discipline that I'm not particularly an expert at is UI design. Sure I've used the splash of rich web content on sites over the years, but nothing that's getting awards for style. Listen, I don't spend day in and day out doing it so I don't consider myself a seasoned expert. Like DBAs are to database development, UI/UX Designers make entire careers out of the trade.

However most of us 'all around' software engineers do not have the luxury of working with a true designer, and at some time or another must design a UI from scratch. We probably result to white board drawings, paper and pen, or just going straight to the VS.NET IDE designer to lay down some HTML, XAML, or raw form controls.

One main prototyping tool that comes to mind immediately is Sketchflow. Sketchflow is a great tool which was integrated with Microsoft Blend, and now Blend is a part of the VS.NET IDE install (since VS.NET 2012 - check versioning for support). About a year ago I was also introduced to a free tool named Pencil for creating wireframes for GUI prototyping in applications. The later tool 'Pencil' I will speak about today.

image courtesy of link
I've had mixed opinions about 'prototyping' over the years for various reasons I could write in another post. Most of my angst came from corporate environments where accounting, HR, or some other internal company party was requesting a custom application, and was a bit too overreaching in wanting to design the application which was a slippery slope. In many of these situations it was best to have the end party define the business problem and let the engineers do what they know best: solve that problem via a custom application. 

image courtesy of link
However this is not always the situation and in many environments (especially where the client is paying for an application), a sketch or mock-up of the final product is required. Could you imagine ordering and paying 25k for a car at the dealer that you had no idea what it would look like, but rather would get you from point 'A' to point 'B' because that was your problem? No, you must know what the car looks like as it is a big part of the purchasing decision. "Hey I wanted a 4 wheel mini car not a moon bus!"

Regardless of the scenario, you control how widely exposed the wireframes you create are distributed. You may only use them for yourself to have a visual of what to do when you dig into the HTML, XAML, etc.. You may choose to keep them internal to your development team that you might be delegating the task to for creation. Lastly, you might be required to show a physical design to a client before they will approve of it and allow you to proceed. Regardless of the audience this is a great tool in the toolbox for UI mock-up / sketch / prototyping design.

Begin by downloading Pencil from the 'Pencil Project' website located below:

Pencil Project

Once installed you will see a blank canvas where you can drag shapes, controls, etc. on to the screen. I'm going to pull a few shapes onto the screen that contains a few tabs as seen below:

I just threw that sketch together in a few minutes and is quite rudimentary. However, if needing to really design an application's GUI this tool has a nice set of shapes and controls for your needs. In fact in the newer versions, shapes have peen added for iPhone and Android tablets to mock up screens for these applications as well.

The one gripe I have about the tool is getting used to how to manipulate the shapes. When I 1st dragged an iPad tablet on it was too large for my screen and the 'size' values were grayed out in the toolbar. I'm accustomed to a right-click -> properties -> change values methodology from most application but this does not hold true for Pencil. It takes a little getting used to, but for being 'free' I can not complain. Some controls like a table are defined by pipe delimited values like displayed below:

Lastly the individual mock-ups can be exported a .png files for use in documentation, and the entire Pencil Project file (*.ep files) can be exported for storing in your source or document control systems.

If you have not done any prototyping before, or used some rudimentary tools to attempt the process, give Pencil a try. It might take that design or requirements document to the next level on your upcoming project. Tools such as these will certainly help elaborate and articulate the end product in a visual as opposed to a verbal manner.

No comments:

Post a Comment