How to Create UI and UX in InVision
InVision is a wireframing and prototyping tool that is used for UX and UI designing. UX and UI designs are often mixed up or are considered the same which is not completely true. UX means User’s experience and UI means user’s interface, the major difference between both these terms is that UX is the experience of a user with a product and UI is how the user interacts with the interface of that product and different functions available on interface of the project. InVision application offers services including InVision UX, and InVision UI designs.
- Part 1: How to Use InVision to Do UX and UI Design
- Part 2: How to Create UI/UX with InVision Alternative
How to Use InVision to Do UX and UI Design
InVision is now one of the major competitors of other wireframing and prototyping tools. It has a wide-ranging interface that allows designers to design UI and UX for mobile applications as well as network applications. The most remarkable feature of design UI and UX in InVision is that it is fast and easy to handle multiple projects together. Designers can easily create prototypes through static images of any level. InVision provides the web-based and desktop application-based studio with cloud storage so that the projects or prototypes can easily be accessed from anywhere. Following are the steps to create UI and UX design with InVision:
Step 1: Choose a plan.
The first thing is to choose a plan according to your budget and the feature required for your designs that depends upon the level of designing you want to do to impress your clients or users.
Consider using a free plan for the first time to get an idea of the interface and functionalities provided by InVision.
Step 2: Select the device and your role.
After creating a free account, the next thing is to choose your role like there are several roles available for instance engineer, designer, etc. After that, you have to select the device you want to create a porotype for.
Step 3: Choose source Files.
The next important thing to get started working on your design is to choose source files that can be your own or you can use Sketch files in InVision via a plugin provided by InVision known as Craft which syncs the files from Sketch with InVision automatically. You can add more than one screen at a time. There are options such as filters, add a screen, etc.
Step 4: Designing.
After adding the screen, the real work begins. Click on the screen you added, the workspace will open to work. You can select how your design appears on the home screen like it should start and appear below the status bar or complete screen transparent.
All the tools you need to design your project are available on the workspace regarding prototyping. After that, your design is ready to share with the team or client.
Some other tools that are available on InVision are
- Collaboration tools.
Collaboration tools consist of chat, annotation, etc. They are available on your workspace for clear and finer discussion on the project.
- Inspection Tools.
InVision gives a lot of data on your plan's components and screens alongside downloadable resources, slightly repetitive maybe, yet convenient when working with others.
- Design Tools.
If you accidentally closed your project or there’s been an issue with your device on which you were working, then there is no need to worry because InVision keeps track of all your prototypes and designs. It also keeps comments added by you using the commenting tool. This makes it easier for team members others to understand your design when shared with them.
How to Create UI/UX with InVision Alternative
The best alternative of InVision to create UX and UI designs is Wondershare Mockitt. Wondershare Mockitt is one of the best wireframing and prototyping tools in the market. It has the potential to beat different other popular tools like InVision. Wondershare Mockitt is mainly used for prototyping of mobile applications but is also efficient for web-based applications. It is platform-independent, both IOS and android users can work on it to create prototypes. Wondershare Mockitt has both desktop and web-based applications which allows designers to work remotely without any problem due to the feature of cloud Storage. Also, the features and options Wondershare Mockitt provides in very low pricing are a great advantage for the designers with low budget.
Following are the steps to create UI and UX design with Wondershare Mockitt:
Step 1: Choose a plan.
Choose a plan according to your budget and features needed to fulfill your requirements and design but in the free plan, Wondershare Mockitt provides more features than any other prototyping tool. The pricing of Wondershare Mockitt is less than that even an individual can afford it. Choose a free plan to see the difference between Wondershare Mockitt and InVision.
Step 2: Create a new project.
After creating a free account, the next step is to create a new project. To create a new project, you need to select the device you are creating your design or prototype for. There are several options available for instance Mobile, Tablets, Website, watches, etc but the most interesting feature that others don’t provide is that you can even create a custom project according to your requirements. Here, choose mobile and after that, there will be an option to choose the model for which you are creating your design, I’m choosing iPhone X.
Step 3: Design the project.
The next step is to design the project. Choose an Icon for your design and how the loading screen known as splash will look like when the application is started.
Now, start by designing the home screen.
Clicking on the edit Screen option will open the workspace which contains a lot of options for you to design and make your design eye-catching.
- Option to add widgets and icons.
- Option to add links between screens.
- Option to add Notes.
- Option to add and Create interactive animations.
- Adding widgets and icons.
You can create a widget for your application in just 3 steps:
1, Click "New widget" in the My Widget Panel.
When you click on “New widget”, a new workspace opens to create
widget and design, it. After designing it, you follow the next steps to add it.
2, Drag the widget in the screen to "My Widget" Panel;
3, Right-click the widget on the screen to "Add to widgets".
- Adding links between screens.
Your project will contain more than one screen. To link them, you will add links between them.
For instance, adding a link to the next page behind a button, which will open the next linked screen whenever the button is pressed.
- Adding Notes.
You can add notes that will help users to understand your application better. Notes can be added at any point.
- Creating animations.
You'll be able to create animation with state transition of the same screen instead of the old multi-screen transitions, this will give you more control on how elements will respond to user input. Click the “nav” icon and you will see a state list of current screens, you can click '+' to add a new state.
Step 3: Preview and sharing the app/prototype/animation
There are only 2 methods to preview a prototype for mobile.
- To preview the prototype on mobile, you can click the “share” button to get the sharing link to open the link on your mobile. You can also share your prototype to others using this method.
- An app named “Wondershare Mockitt Player” can be downloaded from the App/Play store to log in and preview your prototype.
