This document was generated automatically using UXmockup. Learn more …
Contents
01
UXmockup offers 2 methods for creating annotations and placing markers over your design mockups. The default method of creating annotations takes place within the Comments Editor and is explained in a separate tutorial. The second method of creating annotations takes place within the Preflight Environment. The Preflight Environment allows designers to review their horizontal prototypes in their local web browser prior to exporting and sharing with others.
A
To initiate the Preflight environment we must first meet 2 conditions:
- Preflight cannot be initiated unless a CompSet Exists.
- A LayerComp within the CompSet must be active.
B
Once a LayerComp within the desired CompSet is active we can click on the Snapshot tab to switch over to the Snapshot View.
02
The Snapshot View is where all CompSets created within the current PSD can either …
- be synced to the Manager, or …
- viewed locally in your web browser via the UXmockup Preflight environment.
A
Designers can enter Preflight mode at any time during their design stages. Only 1 Preflight can be launched at a time, so once the Preflight row under the desired CompSet is selected we can begin.
B
Clicking the Preflight icon will launch your horizontal prototype locally in your default browser.
03
After clicking the Preflight icon there will be a brief moment where the panel prepares the assets for your horizontal prototype. Once this process is complete the panel will provide choices to Close or View the results.
A
Click View to launch your horizontal prototype in the default browser.
04
UXmockup loads the Preflight Environment into your default browser where you can start previewing your horizontal prototype locally. The Preflight Environment’s primary purpose is to allow the designer to review their horizontal prototype before sending out requests for feedback.
A
Photoshop closely monitors the Preflight Environment. As long as the connection status appears green any changes you make within the Preflight Environment will be synced back to your PSD.
Photoshop will be unresponsive until the connection has ended. You can end the connection at any time by clicking directly on the connection icon.B
Using the Preflight Environment existing markers can be freely moved on the mockup for precision placement.
C
Adding a new annotation to your designs is as simple as dragging the marker icon and dropping it at the desired location on your mockup.
05
Annotations can be entered as easily inside the Preflight as they can within Photoshop. The advantage of adding annotations within the Preflight Environment is that it mirrors the experience of your invited contributors — you are seeing exactly what they will see. It’s also a good distraction free environment to add markers!
Any changes you make to the marker positions or annotations is automatically synced back to Photoshop. You may exit at anytime by clicking the connection icon or simply by returning to Photoshop.A
Unlike our Photoshop Comment Editor, the Preflight editor offers a 3X zoomed area beneath the marker allowing for exact marker placement.
06
While the Preflight Environment is running Photoshop will be unresponsive. This is because the Preflight Environment was not only launched by Photoshop but is actively being monitored for changes and syncing those changes back to your PSD.
A
The connection between the Preflight Environment and Photoshop can be closed from the Preflight Environment or From Photoshop. To close the connection from Photoshop, click on the Close button in the UXmockup panel.
07
To confirm the changes made while working in the Preflight Environment, simply locate the LayerComp which was being edited in Preflight and double-click it to open the Comments Editor.
08
Any modifications to marker positions, edited annotations or entirely new markers and annotations created while in Preflight are already synced and saved to your PSD.
A
Markers added while in Preflight are always synced back to Photoshop as long as the connection between the two environments is not closed.