How to create interactive wireframes from images
Create interactive wireframes from image files and screenshots in no time, using hotspots and transparent input elements.
First, you need to add images to your wireframe. You have several ways to do this:
- You can start a wireframe from image files. Just create a new prototype and choose to start it ‘from images’. If you select the option “Include images in prototype”, Justinmind will create a screen for each of the images you’ll upload.
The “Link to image files” option is very useful if you want to build your prototype whilst also working on it in another design tool such as Adobe Photoshop or Illustrator.
It will give you the freedom to reload images in your prototype when you make changes in your editor. The images will be updated whenever the remote files are modified. You can embed them manually later on by choosing the option “embed in prototype”.
You can choose to link images when you start a new prototype with images or afterwards, when you add an image in your prototype.
- You can drag an Image widget onto the canvas, and then double-click on it to select the image file you want.
- You can drag the image files directly from your file system to the canvas.
- You can click the Browse option under the “Edit -> Image” menu in the main application toolbar when the image widget is selected.
- You can click the Add Image or the dotted square option in the properties panel.
When you have an image in your prototype, you can perform multiple actions with it. If you view the context menu from an image component, you can find some image-only commands. Those commands are also available in the image toolbar and the image menu bar:
- Browse: it will let you explore your file system to select an image file that will be displayed on the image component;
- Open: opens the image with your default editor
- Open container folder: opens the folder that contains the image file
- Crop: adjusts the bounds of the image file
- Flip horizontal/vertical: invert the image across the x- or y- axis
- Set original size: changes the size of the image component restoring the size of the image file
- Embed in prototype: embeds your linked image in he prototype file
- Clear: clears the image file displayed. An image placeholder is displayed when no file is set on the image component.
Note: When using the crop or flip commands, the image will lose the “link” status and will be embedded without warning
Losing the link relationships
If you have a linked image from an external device and you lose the connection, or if you delete the image file from your file system, Justinmind is not able to continue refreshing your image, but you will not lose the last available image or the link status. The image is stored inside the working folders of your prototype, so if anything happens, there is a copy of the last change you made. You will know that the link is broken if there is a warning symbol in the top left-hand corner of your image.
Once the connection is restored or the image has been put back into its original folder, the icon will disappear and the images will be updated when you modify them.
Once you have your image files inside Justinmind, it’s time to make them interactive. For that, we will use the Hotspot widget.
- Drag the Hotspot widget over the sections of the image you want to make interactive, such as buttons and menu items.
- Drag the Hotspots from the canvas to the relevant screen in the Screens tab in order to create navigation links.
You can also turn the input sections you have in your images into real ones, thanks to transparent input elements. For instance, if you have an input field in your image and you want to make it interactive, follow the instructions below:
- Drag the Input Text Field widget over the place of your image where there is an input field.
- Select the widget, go to the Properties tab and customize its size.
- Set the background to transparent and remove the border.
The same steps can be followed for other input elements, such as buttons.
Special note for retina displays: When an image is inserted in Justinmind, it doesn’t lose any quality even if it is resized. Therefore, if you use a retina image (coming from a design of an iPhone app, for instance), and you resize it inside Justinmind, the image will keep the retina quality when you will visualize it on a retina display.
You can also save any image placed in Justinmind to your local folders. This comes in handy when you want to save an SVG vector file with the precise color you’ve been using, for instance.
Tip: save SVG files as PNG if you want the image to retain its color properties.