TodaysTryout is a series of articles in which you can read reviews about UX-related softwares and tools. Each product is tested for one day and the reviews collect the main aspects and impressions of use.
In this article we will inspect an online wireframing tool, Wireframe.cc.
Separate app for wireframing?
Wireframing is not a tool-intensive task at all, you can create your WF-s even on paper. I prefer to create them with softwares I use anyway to keep my software stock fairly low, mainly in XD or Figma since I can transform them into prototypes locally. Therefore I don’t think it is necessary to have a WF app in your toolbox.
Why am I spending time with trying it out then?
A well-built WF tool is able to help in procreating a quick sketch with the combination of a simple toolset, understandable components and the opportunity for prototyping (either properly exportable boards or prototyping function within the app). I will seek these ultimate perks in the Wireframe.cc to see if it can change my mind about using a separate app for wireframing.
Also, I would like to help those who use a special tool for each task as a chef uses a special knife for each process.
So what we have here?
Interesting method
First of all, I would like to mention the interesting method of placing a new object on canvas. In drawing apps you usually place obejcts with a determined type. Meaning, you click the circle icon then draw a circle.
Not in Wireframe.cc! Here, you set up the place the new object will take up and you determine the type after that — on the nearby appearing control panel. It’s a really convenient and exciting solution.
Interesting control
The controls are the ones which we all are used to. Keeping conventions in controls are always a good call because they help your flow by not distracting your muscle memory.
There is one interesting difference though: grabbing with your mouse can not only select existing objects (grabbing from right bottom corner) but creating a new object as well (grabbing from any other corner).
Objects you can use
We have a simple kit to work from and it serves the tool well. ✓
Of course we have the rectangle and circle, the most indispensable shapes of a wireframe.
Surprisingly, there are no polygons under the well known ★star★ signed object type, you can find icons there instead! I consider that a wise choice since this solution is capable of merging the polygon and icon functions into one. On one hand, you can still insert polygons if you find the desired shape among the built-in Material Design and Font Awesome stock— they are technically icons, but the name of the resource pool doesn’t matter, only the appearance of the shape. On the other hand, you can use a large stack of icons, which are usually the only somewhat-detailed parts of a low fid design.
Beside these we can create texts or text imitations (rectangles as rows of text), lines, and a few carefully selected interaction objects (eg. slider, dropdown). These interactables are extremely useful because they are widespread on digital platforms and they all have unique roles. Users recognize these unique roles by seeing their key particles: arrows on both ends of a line are interpreted as a single scrollbar; one point-like shape on a line is interpreted as a slider, etc. This means any further simplification of these objects would cause semantical loss and become useless. And this means, if the app wouldn’t have premade objects of them you should produce them one by one consuming a lot of time. And this checks our second perk, understandable components.✓
So well done wireframe.cc, you have a really suitable set of tools.
Responsivity
The application is not refined enough to handle responsivity. Desktop, tablet and mobile frame sizes are available, however, you can’t really change the size when you already have contents on canvas. Of course this means contents won’t get rearranged either.
Prototyping
For my big relief, prototyping is available within the app. It works fine, you set up your hotspots and destinations then you can click through your design.
Exporting
You can export your work in PDF or PNG. More options would be better, but this can be enough since you can prototype in-app.
We have our third perk, opportunity for protoyping.✓
Nuisances
A list of what I’ve found unpleasant. The list itself is not too long but these matters keep to break my flow and give me jitters. I could not live with them for long.
- lines. You can draw lines but they’re madcaps and difficult to move or edit
- grouping. After grouping a bunch of objects you are unable to edit them separately
- selection. You can’t always select your obejcts properly, this is really annoying on the long run.
- master pages. Master pages are meant to be alternatives for components and master components, but their behavior is counterintuitive
- lack of overview. I like to see my artboards next to each other but I can’t do it with the app — artboards are on separate pages.
- rotation. You can’t rotate the objects.
- save. I am used to autosave in online softwares, but this app sadly doesn’t provide it.
- pixels. The width and height of an object is shown on the screen, but they are not editable — you’re stuck with dragging the sides of the objects. It’s not a big failure in a sketching tool, still, I prefer to set my pixels accurately even in a low fid sketch.
Conclusion
Wireframe.cc is not a bad tool and has a few tricks in its bag, but it has to do better to stay in my workflow. I like the carefully selected object set and the fact that I can make prototypes in-app, but I dislike the tiny inconveniences such as the lack of autosave and the grouping system.
✓ Simple toolset
✓ Understandable components
✓ Opportunity for prototyping
✘ SEAMLESS WORKFLOW
At the beginning I determined three perks the app would need but it turned out it doesn’t really matter if all three are provided when the workflow isn’t seamless. I don’t really recommend this tool because in my opinion wireframing should be a simple task with only very few types of operations, and I expect those few operations to work well. Despite of that, the work can be done, it’s just not the best experience.
One more tiny note: I still find standalone wireframing apps unnecessary.
