Invizhn allows the designer to demonstrate a prototype of an application design to the customer, making it interactive. Besides, thanks to InVision, you can organize seamless work within the team, between the designer, project manager, layout designer and programmers, regardless of platform (macOS, Windows, Linux). Here are some easy scenarios on how to use Sketch + InVision.
Tips for preparing prototypes in Sketch
1. Install the "Craft" plugin set
Craft – is a great set of plugins created by InVison LABS. We are interested in the Sync plugin, which allows you to load artboards into InVision directly from the Sketch editor. To do this, you first need to create a project at the InVision website, specifying the interface type (desktop, tablet, phone or clock application).
After that, return to Sketch, select the created project from the list, and you can unload the design. Artboards are either unloaded all at once, or only selected ones, which comes in handy when there are a lot of them.
In addition, the design can be uploaded in @1x or @2x resolution. This will make your prototype look great on devices with retina displays.
2. One section – one page
If the project is large and involves a large number of artboards, it is better to create a separate page in Sketch for each large section. Then it is convenient to unload all screens of one section at once without loading artboards of other sections.
3. Modal windows on separate artboards
Invision allows you to show modal windows "overlapping" the content. Previously, in order to show a modal window, you copied an artboard with content, drew a semi-transparent overlay on top of it and created the modal window itself. Now, you don’t need to do any extra work. Create a modal window on a separate artboard. You can specify the position of the window, the degree of transparency and the color of the overlay in Invision.
Note that if the window has a shadow, it must be inside the artboard, otherwise it will be "cropped" and not visible.
It’s important to name artboards correctly right away in Sketch, because the screens will get the same name in Invige. And if you rename an artboard after synchronization, you will create two identical screens in InVision with different names and one of them will have to be deleted manually.
In my opinion, this is a bug. Hopefully it will be fixed soon, but for now this is a point to keep in mind.
4. Element states
If you design the interface for the desktop, you need to render the hover state for dropdown lists and other interface elements. To do it, just like with modal windows, put an expanded list on a separate artboard and load it into Invizhn. You will have a separate screen with this list.
Next, we create an area above the title of the list, when hovering over which will display the expanded menu, select "Screen as overlay" and the screen with the list in the expanded state. So that everything is positioned evenly, we select "Position – Top Left", "Transition – Fade in" and specify the coordinates, which you can foresee in the Position panel of the Sketch.
5. Status bar does not need to be drawn
In your mobile and tablet app design, don’t depict the Statusbar, but leave room for it. The point is that Invision will show its statusbar when viewed through a browser. You will be able to choose the Statusbar design from 2 options : dark and light.
6. Prepare icons and graphics for export
Thanks to recent innovations, Inspect Modeappeared in InVision, through which coders and programmers can see the description of any elements, as well as export them. The designer in the Sketch editor determines which elements will be available for export from the Inspect mode and their size. Simply select an element, specify formats and sizes for export. Now the element can be downloaded in the specified formats directly from InVision.
Forgot to set up an export for an object? No problem. Go to Sketch, configure the export of the item and synchronize the artboard through the "Craft Sync" plugin. Done, the object can be exported from InVision.
Tips for working in InVision
Invision is very democratic in pricing policy You don’t need to pay anything to get acquainted with the functionality, creating one prototype is free. If you are a freelancer who simultaneously conducts no more than three projects, then the "Starter" tariff is suitable for you, for $ 15 per month. On this tariff you can create up to 3 active prototypes. Moreover, it does not matter how many prototypes you have in your archive, as long as the number of active prototypes does not exceed three. I use the "Professional" plan for $25 a month. It allows you to create an unlimited number of projects. More expensive plans are needed for companies with more than one designer working on prototypes.
As I wrote above, Invision allows Windows developers to layout or create applications created in Sketch. Agree, $25 a month is a lot cheaper than buying the whole team a Mac 🙂
7. Create an application icon
For mobile app prototypes in Invision, you can add an icon. To do this, click on "Plus" near the project name and select your icon. It will be displayed when viewed in a browser and also if you "install" the application on a mobile (about this in the next tip).
8. "Install" apps on iOs
If you copy the project link in the "Public share link" and paste it into the Safari browser on your mobile, it will open your app. Click on the "Share" icon in your browser and select "Home screen". You now have the app icon on your mobile desktop and the app itself can be viewed without the browser address bar. The labor is minimal, the customer is thrilled, he can navigate between screens on his mobile.
9. Create header and footer in applications
Often content takes up more than one screen, and you need to fix the header and footer when scrolling it. To do this, in Build Mode, move the Fixed Header and Fixed Footer sliders. The content now scrolls between them.
For now, Invige doesn’t allow you to pin the sidebar to the left or right in the prototype, which can be very useful in desktop interfaces. I hope this feature will be added someday too.
10. Use templates for navigation
For a long time I didn’t pay attention to this mega useful feature and created "clickable" areas for each screen again. In fact, for through menus (the ones that are on all pages of the site) you need to add "clickable" areas in the "Templates". Create an area, choose where to click on it and add to the template, for example, "Sidebar".
There can be any number of "clickable" areas in one template. Now in order to install areas from a template on a new screen, just select the desired template.
11. Inspect Mode
I mentioned this innovation by Invision earlier, but it’s worthy of a separate item. The inability to open a file in Windows was until recently a big problem for designers, forcing them to use Photoshop instead of Sketch. Various services have been used to transfer files, such as Avocode or the plugin Marketch Also, there has been a recent free solution from the guys at Icons8 which lets you open Sketch files from within Windows, many thanks to them!
As a solution to the problem, Inspect Mode in Invision is a good option. It provides the same functionality as these solutions.
For it to work properly – use the Craft Sync plugin to unload screens. Add developers to the project and they will have access to this mode.
And a developer only needs a free account to access any number of your prototypes in Inspect Mode.
12. Create comments and tours
When there are a lot of projects and screens, it takes a lot of time to figure out which interface screen to edit. This problem is easily solved by giving the customer access to comments. He clicks in the right place, and creates a text comment. Notification of this will fall to your email and will be available in the tab "Comments" in Invision. You can write a reply or a clarifying question to the comment, or you can complete the task and mark the comment as resolved.
Sometimes you don’t want to make a full interface, but a tour of it. For this purpose, there is a tour creation functionality in Invision. It works on the principle of comments. You create one or more points on the screen with a text description. The dots will sequentially "guide" the user through the screens, using the "Prev" and "Next" buttons. Example small presentation.
13. Store version history
If your room has no need for Inspect Mode and uploading screens as pictures is enough, it is possible to use the version repository in Invision. To do this, download layouts using the "Desktop Sync App" program rather than the "Craft Sync" plugin. The entire history of your layout changes with the ability to download previous versions will be available in the "Assets" section. Here is a short video about this functionality.
Too bad version history is not created when uploading data with the "Craft Sync" plugin. Hopefully this fic will work someday, too.
14. Present your design online (LiveShare)
A good designer should not only be able to create a high-quality interface for the future product, but also competently present it. It is very important to justify and convey your ideas and solutions to the customer. Of course, it is better to do this during a meeting in a cozy conference room, but this is not always possible. In such cases, the interface "LiveShare" is very useful, allowing you to show the screens in real time, move between them, discussing what you see. Here’s how it works :
Sketch and Invige allow you to create, discuss and improve your user interfaces. Undoubtedly, there is a lot of work to be done in InVision, but it’s already a great product for presenting your design solutions. And if you take into account the fact that there is constantly meaningful work being done on Invision and great solutions are regularly introduced, it’s worth trying it in your work!