Mockups – A Two-App Approach

Over the past four years, I have increased my reliance on and desire to create digital mock-ups for solution development.

Here is what I have learned.

Start with a program called Balsamiq Wireframes
Move to Adobe XD or Figma

Mockups are the key to saving time and money. They simulate the user interface of your digital solution and give the idea a visual shape.

For us and the various teams we work with, our preferred tools for mockups include Balsamiq Wireframes, Adobe XD or Figma. These applications make it easy to break down mockups into a few simple steps:

Balsamique is for the person with the idea. The learning curve is quick because it is designed to be an easy to use drag and drop wireframe builder too.
Adobe XD or Figma (depending on your comfort level) is for the graphic designer on the team. These applications have a sharper learning curve and require more attention to details.
Present The wireframes first to get a general acceptance on the direction of your mock-up. Then, follow it up with a much more polished mock-up with Adobe XD or Figma.

More Balsamiq Wireframe

Our first tool of choice is Balasamiq Wireframes.

Their UI provides a simple, quick, and intuitive way to create wireframes and mockups. With this software, it is possible to create clickable prototypes of the design which can be shared with team members of all levels in the project.

Our use of the Balsamiq Wireframe is mostly for rapid prototyping. It has a drag-and-drop interface and it provides different elements for mockups like buttons, menus, text boxes, etc. It is also possible to create custom widgets from scratch by using simple HTML code.

Wireframes are just a low-fidelity representation of the final product

For a more detailed review on Balsamiq Wireframe read our article – Balsamiq Wireframes

More Adobe XD or Figma

Next, after the wireframe concept has been approved, we move on the creating Hi-Fidelity Mockups. For this we move to Adobe XD or Figma.

These two applications are more suited for a high resolution interactive mockup experience. We find high value in these platforms as they bridge the gap between ‘customer-designer’ and ‘designer-developer’. One way to look at these tools is to view them as the blueprint for the construction crew to execute upon. Ultimately, the mockups are guidelines as well as an expectation for both the client and the developer.