Keyhole Released MockOla v2.0 With New Features

Keyhole Labs has announced the release of Version 2.0 of its free UI design tool MockOla, adding features and capabilities that enhance the design process.

MockOla is a free 2D drawing tool that allows users to easily build UI wireframes, free-form designs, and UML diagrams with a simple drag-and-drop editor. MockOla is available online, is free to use, and allows users to easily create custom designs and mockups.

This new version of MockOla includes a new dashboard with an enhanced look and feel, the addition of new palettes and elements, a function to upload and add photos into designs, and the ability to use the tool without creating an account or logging in.

Use MockOla Now

About MockOla

MockOla gives users the power to build beautiful UI wireframe widgets, free-form designs, and UML diagrams. Users insert elements from the various palettes provided and can add, move, reshape, and customize them using the drag-and-drop editor. The design can then be downloaded as a JSON or PNG.

Developed by the Keyhole team, MockOla is now written entirely in deep JavaScript using React.js and Fabric.js.

New, Updated Dashboard

The design dashboard has been redesigned to enhance user experience and usability.

The design dashboard also allows for more customization. For example, the palette sidebar can now be toggled and utilized from the top of the editor or from the left side depending on user preferences. A handy toolbar was also added to the top of the page allowing users to clear editor, save, download, etc. with ease.

New Palettes and Elements

When designing with MockOla, users have the ability to insert and customize various design elements free of charge. The update boasts the addition of new elements to make designs even more robust. New options available are geared toward software development concepts like software architecture, modeling, and project flow.

All design elements are now grouped within MockOla as five different element palettes to select from. Elements are grouped into Architecture, Shapes, UI, UML, and Flow. This differentiation makes it easy for users to find and add elements that fit their unique project goals and quickly demonstrate abstract concepts. 

New Upload Photo Feature

Users now have the ability to upload and insert personal photos. This new function gives users the power to create detailed, customized designs that will help them better execute their intended purpose.

To Upload A Photo:

  1. Click on the camera icon found in the toolbar on the top of the editor
  2. Double click the element that appears
  3. Click “Choose File”
  4. Select the .jpeg or .png you would like to insert into the design and click Open

No Account Necessary

Users are now able to use MockOla without an account. Designs are saved locally to the browser and are kept private and only available to the user that created them.

Without authentication required, users can begin designing with MockOla immediately.

Design Features

When Mockola is in edit mode, a user can interact with it, dragging, dropping, resizing, or modifying elements on their own personal “canvas” drawing areas. The main content area a grid-based canvas that they are able to drag and drop various elements to.

Creation & Modification

Using the elements available in the toolbar (i.e. text, frame, navbar, input fields, buttons, etc..), a user can create a custom design. The user creates a shape instance by dragging and dropping elements onto the drawing area and modifying them using the following capabilities:

  • Clicking an object presents drag handles, enabling the user to reshape the object. A group button creates a permanent composite object from a multi-selection of canvas shapes.
  • A user can select or multi-select objects on the canvas, to drag them as a unit.
  • Double-clicking an in-use shape opens a settings popup. This can be used to customize the element, change any associated text in the shape, and move the shape up or down in the layering Z-order (shapes can overlap).
  • Dynamic elements can be used. Some shapes are driven by the number of words in the associated label. For example, the Grid (table), list box. The grid dynamically generates a column for each current label word.
  • MockOla plays well with JSON. MockOla renders UI imported from JSON and persisting UI metadata as a JSON object stream. MockOla can also export JSON objects.

How to Use:

Take a look at the how-to video below for a more detailed explanation of how to navigate and use MockOla.

For a more specific walk through of MockOla’s User Modelling Language (UML) palette, watch our UML palette tutorial.

Get Started

Start designing today with no sign-up required. To use MockOla to create your own custom designs, simply visit MockOla.com.

Use MockOla

Comments 1

  1. Pingback: Keyhole Releases MockOla v2.0 With New Features | Keyhole Software

Leave a Reply

Your email address will not be published. Required fields are marked *