Publishing & Prototyping
For both UX and UI, once a first version is ready, it must be uploaded and published on Invision where the Lead Developer, the Product Manager, and the client will review it.
UX Flow, Wireframes, and UI should all be uploaded as separate projects on Invision. Within each Invision project, the screens must be organized in sections. A section corresponds to one particular feature of the application.
Once the client approved the entire design, the designer needs to export the assets (icons, images, etc.) so that the developers can implement them in the final product.
Before exporting assets, the designer should check which format is best for the Lead Developer. The format will also depend on the platform the application is developed for. However, some standards can be applied in most scenarios.
For a web application, the best export format is often SVG.
Android devices cover a wide array of screen sizes and densities. Hence, a set of six different densities is what usually works best:
- LDPI (low) ~120dpi (@0.75x)
- MDPI (medium) ~160dpi (@1x)
- HDPI (high) ~240dpi (@1.5x)
- XHDPI (extra-high) ~320dpi (@2x)
- XXHDPI (extra-extra-high) ~480dpi (@3x)
- XXXHDPI (extra-extra-extra-high) ~640dpi (@4x)
In addition to the density, the assets’ size matter.
To avoid non-integer sizes, which may lead to imprecise implementation, better to stick to multiples of 4. Example:
- 18x18 (@0.75x)
- 24x24 (@1x)
- 36x36 (@1.5x)
Because Apple has a tighter control on its hardware ecosystem, there are fewer screen sizes to worry about when exporting.
Designers should export assets to @1x, @2x, and @3x.
Invision Inspect Mode
What’s the size of this button?
It is 60x60 pixels, but you don’t need to ask the designer. Invision has a feature that comes very handy to developers: Inspect Mode.
With Invision’s Inspect Mode, developers can access almost every CSS property.