Simple, inexpensive tool for creating wireframes and workflows.

Example workflow provided by .co

If there’s one thing the UX world is not lacking in these days, it’s choices in tools. Which is best really depends on the personal preference of the designer and the needs of the project.

At Airship, we use Whimsical for creating wireflows, which are combinations of wireframes and workflows. This is a critical part of our new customer discovery session, known as a Mapping. We dive deeply into the problem the customer is trying to solve, their business needs, their customers and other details surrounding the project. During this process, I often begin either sketching ideas on a whiteboard while collaborating with the client and team, or at times go straight to Whimsical.

Identified by its creators as “The Visual Workplace”, Whimsical is primarily useful for creating wireframes, flowcharts and sticky note boards. A free account will allow up to 4 boards a month, with the paid packages being a quite reasonable $12 per user, per month and unlimited boards or $10 per user, per month when paid as a yearly subscription.

Having come from a background of using Figma and Sketch for wireframing previously, I was able to jump into Whimsical with very little learning curve. It consists of a simple UI for creating new boards which also allows categorization via Folders of those boards. Folders can be set to Private or Shared for all within an account. Boards can also be shared publicly, if preferred, which we use frequently when collaborating with clients.

The board interface allows me to name the board itself, manage my personal settings, search the board contents, view all comments and has extensive options for sharing and exporting the board view.

The Comments feature is optionally turned on and has become incredibly useful for getting client feedback (at their leisure) on wireflows as well as developer feedback and questions. Comments can be added to specific points in the UI making it clear which comment goes with which element as well as replied to via a thread format and marked as Resolved if need be. Resolved comments are removed but can be toggled on optionally as well.

The Toolbar contains 7 buttons, nearly all with their own set of features and optional Search:

Whimsical Toolbar
  1. Add Element
  2. Add Frame
  3. Add Connector
  4. Add Text
  5. Upload Image
  6. Add Icon
  7. Add Link

Add Element

This tool allows you to create your basic UI elements such as shapes, buttons (both outline and solid), links, form elements like text fields and dropdowns, and even overlays for modal views which snap nicely into their device frame when added.

Add Element Tools

Each contains their own set of options depending on the type of element. For example, the solid button element provides options to choose from a simple color palette of red, green or blue, the State which can be Normal or Disabled (disabled of course forcing a greyed out or inactive view), as well as the ability to revert the button to an Outline or convert to a Link. Additionally, one can add an icon, comments, create a copy or simply delete the element. Option+click and drag also creates a copy for those of us who simply love the shortcuts:)

If more than one element is selected, Whimsical also offers the ability to align items relative to one another and group them for easier layout management.

Element alignment options in Whimsical

Add Frame

This tool subset has six predesigned frames:

  1. Window: create a frame for a browser window
  2. Phone X: iPhone X frame
  3. Phone: standard iPhone frame
  4. Android: standard Android frame
  5. Tablet: generic tablet frame
  6. Plain: simple workspace frame
Add Frame options

Each frame can be resized and easily duplicated. If a frame has contents, duplicating also copies those contents which is particularly handy for creating flows with similar screens.

The frames themselves have a few nice viewing alternatives including landscape or portrait modes and with or without the keyboard and/or Status Bar for mobile and tablet.

Frame options

Add Connector

A connector in Whimsical is probably exactly what you’d expect: a simple line which can be solid or dashed, containing arrows or not and of various thicknesses and colors. This is useful of course for both showing the relationship between frames and views, but also for pointing to notes regarding specific elements. To further sweeten the deal, Whimsical allows for notes within connectors, allowing the option to set “Yes” and “No” paths in a workflow as well as general details about the relationships between items.

Connector options

Add Text

The Text feature provides a pretty standard set of options for creating and editing text, including colors, style (bold, italicize), six size options and basic alignment.

Text editing options

Upload Image

It will come as no surprise that uploading an image is a key option here:) However, I was surprised at Whimsical’s compliance with adding images. It not only lets me add and scale PNGs, SVGs, JPGs and other standard image formats, but provides me with options to add or hide a frame (which provides a white box background), easily replace the image if need be, and add text in a caption type format.

Image editing options

Add Icon

One of my favorite features about Whimsical! It’s been a rare occasion that I’ve needed an icon when creating wireflows which was not included in this palette. Not only can I search from the list (and a relatively smart search too), but I can browse 28 categories of icons, all with a consistent, simple style.

Icon palette

On the board, the editing features for the icon include easily resizing, color changes and a rotate option.

Icon editing options

Add Link

Our final option does in fact allow the ability to include a link on the board, but also provides some really cool options to view that link with or without a thumbnail or a snapshot of the page. The snapshot option includes both desktop and mobile screenshot views.

Link editing options

Closing Thoughts

Some additional nice touches in Whimsical include handy little keyboard shortcut hints in each tool option and the ability to add comments for each item within the editing view.

One of the features that I consider to be both a blessing and a curse, is being limited to a predefined set of sizes for buttons and text. It’s a bit of a pain when I really need these items to be larger or smaller than what’s allowed, but does simplify my workflow by ensuring consistency in my styling of these items with relative ease.

I did have a strange issue once where I’d accidentally encountered a bug by dragging a large box around several items on the board. It caused some things to disappear and I had to contact support. They were friendly, helpful and quick to respond, and soon I was back up and running.

Overall, for the incredible price, ease of use and number of features, I’d highly recommend Whimsical to anyone looking to create wireframes, workflows or general boards.

Source link


Please enter your comment!
Please enter your name here