Scribd
Upload
213 views

Tutorial To Use JUST IN MIND

This tutorial provides instructions for beginners on how to use the Just in Mind application to design user interfaces. It explains how to create a new project, select a device type, add screens, and insert widgets like images, text, buttons and tables. It also describes how to position components, add images, set properties, link buttons to other screens, add events, and simulate designs. The goal is to demonstrate the basic features and workflow for getting started with Just in Mind's visual design tools.

Uploaded by

rafay
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
213 views

Tutorial To Use JUST IN MIND

This tutorial provides instructions for beginners on how to use the Just in Mind application to design user interfaces. It explains how to create a new project, select a device type, add screens, and insert widgets like images, text, buttons and tables. It also describes how to position components, add images, set properties, link buttons to other screens, add events, and simulate designs. The goal is to demonstrate the basic features and workflow for getting started with Just in Mind's visual design tools.

Uploaded by

rafay
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 14

Tutorial to use JUST IN MIND

(For Beginners)

Introduction
Just in mind is an application (with large variety of designing tools) that helps you to design the
User Interface of your application or program at very initial stage to avoid confusion at the
development phase.

After completing the installation process open JUST IN MIND.


The application will show you something like that at startup.

To Design a new project Select New Prototype under NEW section.


To open a previously design prototype select Open a prototype under OPEN section.
Or for some short beginner’s tips go to JustInMind in 3 Minutes under LEARN section.

Go for the new prototype option.


NEW PROTOTYPE
Select your corresponding device for which you’re creating your application. WEB, Android,
IPhone or IPad.
Note: The application will perform task similarly for any device you choose.
(Let’s say you chooses Web as a platform.)

A new dialogue box will appear:

At this stage select Empty.


At the next option select predefined prototype setting.
(You can also define the prototype size but better to use the predefined one.)
And Click Finish.

Now JustInMind will load his widgets library and something like this will appear.
1. SCREENS and TEMPLATES
At the top Left side of the Application there is Information about your Current Screen (The
designed screen).
You can add more screen depending upon the flexibility of your design of the application by
simply clicking on + button.
Edit the name of screen if you want to.
Press Ok.
For example you need different screens to design Home page, Contact Info Page separately.

2. Properties and Events


Make Sure your Properties Menu is Appearing at the top right side of the Application.

If Properties aren’t appearing GO TO View -> Palettes -> and Select Properties.

3. Widgets
At bottom left side Widgets Menu will appear.
The Widgets Menu have Different Options Under it.
Each option contain different components that you might need in your Design.
4. Outline
At the right bottom corner of the Screen there is a section named Outline.

This section will show you the components that you are using in your screens.
Keeping in mind the components are from the widgets section that we need to design the
Interface.
For example:
Here is a Design of Search Bar On Screen 1.
The components that we used in screen 1 are appearing under Outline section.
Here is an IMPORTANT TIP
The positioning of the components under outline section matters a lot.
The Button is name as Button_1
And the Input field is named as Input_1.
The blue shade box you see in the above image is the Rectangle_1.

What happen if you will change the positions ?


The Change is the position of components can cause hidden of some conponents.
Have a look :

As you can see the Button is hidden on the above screen that’s because the rectangle widget is
at the top of button widget and its covering the button widget.
NOTE: There positions can simply be changed by dragging them to the desiered place under
outline section.
5. Design Screen
Design Screen is where you design your screen.

Adding Widgets to Design Screen


You can add widgets to the screen by simpling dragging them to the design screen.
Here an short example.
Let say you have to design a search bar.
Go to the widgets option Under Basics you will find Image, Text and Input field option.
Just simply drag them on the screen and arrange them.
Just like:
You can resize those widgets just by pulling/pushings theirs edges from stech points.

Adding Image to Image Widget:

Click on the image box.


Now Go to the Properties section.
Explore the General Section.
You will find add image option in it.
Click on Add image.
Choose image from your computer.
Select Add image to the prototype from the dialogue box that will appear after choosing the
image.
Finally the image will be added.

Remaining Button Name:


Click on Button.
Explore the properties.
You will see Value Option there.
Change its value from Button to What ever you want (As we changed it to search here.)
Keep in mind: The ID option is to give unique id to the button throughout the prototype.
You can also change the color, padding, margin etc of Button in properties option.

Adding Place Holder to Text Field:


Simply Goto the properties.
Edit Placeholder.
That will appear on the protoype design.
Explore Other Properties for better undertsanding of platform.

Linking Button to other Screen:


Go to the button.
Right click on it a menu will appear.

Select Link Button option and then choose the screen number (or screen name if you have
edited the name of screen) and then press Ok.
The screen will be linked to that button. You can check this out in the Simulation Process.
Adding a Event to the Button:
You can add different event to the different buttons.
To add an event to the button choose the option Add Event by right clicking on the button.
A Dialogue box will appear

Choose Trigger type to execute the event.


After that choose the Action type you want to perform from the following menu.

After choosing the event.


You can choose transition type from the same dialogue box (optional).
Press Ok
And then simulate the program to check the Working of button.

Simulate:
Simulation button will on top of the Design Screen.
Simulate button will used to test or run the prototype that has been created so far.

Date Picker (Widget):


For adding a date picker widget to the document to Widgets menu.
Under Widget Menu Explore Forms and Inputs tab.
Drag Date Picker to the Design Screen.
It won’t seems to be working until you simulate the program.
Here’s the result after Simulation.
You can perform more tasks on it under properties menu.

Table (Widget):
To add a Table Widget.
Simply Select Text Table under Basics of Widgets Menu.
Drag it to the Screen.
Resize it according to your requirement.

As here we select it to create Footer.


Hope this tutorial will be helpful to you.
Keep on Exploring 
Thank You.

You might also like