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.

  1. Start with a program called Balsamiq Wireframes
  2. Move to Adobe XD or Figma
No alt text provided for this image

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:

  1. 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.
  2. 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.
  3. 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.
No alt text provided for this image

No alt text provided for this image

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


No alt text provided for this image

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.


No alt text provided for this image

For more about Figma or Adobe XD

Sorry, we haven’t gotten around to creating our own review. Here are a few links to other review sites

Figma by G2.com

https://www.g2.com/products/figma/reviews

Adobe XD by G2.com

https://www.g2.com/products/adobe-xd/reviews