Recently I have been put in charge of a company’s design of new mobile site. I have been doing web design for quite a few years now and have been doing some mobile dev a fair bit recently as well. As part of this new project I wanted to get down some quick website wireframes that I could present to the senior staff, so they could make the crucial decisions. I decided to try out the online wireframe tool Mockingbird. I am not quite sure how I came to the site to start with, probably a Google search, but after viewing their homepage I thought I would give it a try. The tool appears to be geared towards website mockups, but you could just as easily do it for general software development as well.
When I clicked the “Try Now” button I was expecting a lot of upsell garbage before it actually let me in to do some work with it. To my surprise there was none of that. It loaded up the screen and dropped me right on the canvas. It was rather simple to use and understand straight from the start. If you have any experience with data flow diagram tools, it is going to be even easier for you to understand. But on the left side of the screen they present you with all sorts of GUI elements that you can click and drag onto the canvas. Not too shabby and pretty standard as these tools go. Next you can drag around the items and see guide lines to line up the element or “controls” with other controls on the page. They also snap in line to help with quick wireframe designs. It actually reminded me a bit of the Visual Studio designer a bit.
One thing you don’t find with many GUI wireframe programs is a great array of website control types. Mockingbird has the standard buttons, scrollbars, text boxes etc but they also featured things like social media icons, general media player controls, volume, even a copyright symbol control for when you can’t remember to type Alt + 0169.
Then once you have created your masterpiece and want to replicate it across to another page, it is as simple as clicking the little icon in the top right corner of the pages heading bar. The icon looks like two squares with an arching arrow over the top. This made it really easy to quickly replicate my template over to other pages and then modify the middle portion that changed.
As expected, nothing too good lasts forever. Luckily for me I tried to save a project before I had gotten too far down the path of creating my responsive design. When you click the “Try Now” button and begin working, if you then try to save your project you will be notified that you need to login. Of course, not having an account, you click the link to get an account and it hits you with the pricing plans page. Luckily for us there is also a text link under the pricing graphic to allow you to create a limited featured free account. So I settled for that for the moment. After you login then you gain a great autosave functionality feature that will save your project as you work. Much like Google Docs does and will be a life saver if you ever close your browser or lose your computer power.
Another issue I found kind of awkward was that sometimes when I went to move a control I would inadvertently cause it to resize itself and that would often make any text on it resize too. This threw me off a few times and took a few minutes of tinkering with the mouse position to get it to fix itself. This problem usually occurred on the smaller controls with not much of a grabbing footprint. I also went to move one control and it wouldn’t let me change its position, and while you can lock controls, it wasn’t locked. It acted like it was however. Deleting it and replacing a new one got me around the issue.
But despite the drawbacks I found the little tool handy and at least worth the $9/month for the personal plan. With the free account I was able to make 10 pages, representing three design ideas, that my superiors can check out and let me know what they like. To come up with the 10 pages took me about 2 hours and that is after I spent half the time just thinking of what I want things to look like. Below I have added a screenshot of one of the quick wireframes I did with the tool and hopefully the boss is going to like it. If not, I have two more to throw at them.
If you are looking for a good free tool for wireframing a website, give Mockingbird a try. I am still out on whether or not I would have the company purchase a monthly plan just yet but if this project mockup goes over real well then I just might get them to fund me the coin. Have you found a wireframe tool that you like working with? Feel free to let us know about it in the comments below! Thanks for reading! 🙂
