It takes a lot of attention to details and impeccable organizing skills to work as a web designer or as a web developer, because any piece of information that is wrongly applied can lead to catastrophic consequences. Whether you start from a brand new idea or work on an existing product, it’s very important for every component of the project to be out in the open and perfectly understood by all who partake in it.
Think of when you develop an iPhone app. Every time a client issues a task for the development team, it usually comes in the shape of an idea, followed by the specification of what that app should do. At this point, the app is all schemes, descriptions, and in the best case scenario – flowcharts (Nota pt. Bogdan: /logical schemes). On first glance, it seems like a pleasant little story about how everything ought to work. Actually developing the app in this stage is quite difficult, impossible even, because there is no visual feedback: where does each component belong in the app? How’s the workflow within the app? What happens or what changes in the app when specific commands are entered by the user? You see, it’s just as if a builder was trying to raise a house without a blueprint. The result would be chaotic.
If you wish to avoid these obstacles altogether, the next step after having received the idea and specifications is for the development team and client to sketch the app using a wireframe tool. It is this wireframe tool that helps you see the bigger picture, and realize how the program works – as well as what the app looks like from a logical perspective.
I am about to reveal a list of five extremely useful wireframe tools that I strongly recommend for web designers and web developers to use in any project, no matter how complex.
(My favorite) PowerMockup
I myself use two wireframing tools: one browser-based for when I don’t have my own laptop with me, and one that is actually a PowerPoint plugin. The second one is called PowerMockup and I simply love it because it’s not just very easy to use, but also because I can save my projects as a PowerPoint file. This is a great advantage, as almost everyone worked at least once in PowerPoint. In other words, my clients will most likely know how to open the wireframe, how to view it, and more than anything, they will know how to modify it. This means that there is no learning curve involved.
Furthermore, you can embed your wireframe into Microsoft Word documents via drag-and-drop, and it’s even possible to modify it afterwards directly from within Word. Besides, PowerMockup has a lot of cool features, such as hundreds of stencils and icons, instant search, or smart categories. Every graphical component is fully editable, and if you don’t want to settle on a pre-made object, you can create one from scratch instead, or simply import it.
Briefs is a robust application and can seem daunting when you first get started, but once you’ve mastered it, it will help you create designs that people can interact with. Briefs is used in the process of developing wireframes for iPhone and iPad. It stands apart from classic tools, in the sense that it offers many features that will help you make some very interesting sketches. For instance, the feature called BriefsLive transfers in real time the newest version of your wireframe to all devices where your app is installed. Therefore, you’d no longer have to send dozens of emails to everyone who is involved in the project.
Xiffe is a multipurpose tool for mobile apps prototyping that operates within your internet browser, so you don’t have to install anything on your computer. It can be used to create wireframes for iOS, Android and Windows Phone, which means you are basically covered for any type of mobile project. Xiffe includes different platform-specific user controls, as well as features that are unique to each operating system. It provides a simple interface with drag-and-drop functionality. In addition, a collaborative feature is promised to be added soon.
Armature works as an extension for Adobe Illustrator CC and CS5+, and it’s compatible both with Mac and PC – although it doesn’t support Illustrator versions older than CS5. It comes with a large collection of commonly used objects, such as tooltips, placeholders, content blocs, headers, footers, or form elements that are fully editable and resizable. The downside is that, in order to use it, you absolutely need to have Adobe Illustrator. Feel free to download a 15-days trial version, or buy it for $24.
NinjaMock has all the typical stencils that you need for creating web and mobile prototypes, as well as a collaboration tool to share your work with team members, and a project management feature that offers a great way to keep things organized. Its wireframe editor and components are designed to look as if they have been hand-drawn, because the team behind NinjaMock believes that this helps users concentrate on the interaction and content in their wireframe rather than on colors, detailed layout, and other high-fidelity aspects.
So, here they are: five awesome wireframe tools that are vital every time you need to put an idea into practice. Do you already use a wireframe tool? If so, which one is your favorite?