Design Tools

Hero image for Design Tools

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.

Invision Project Example

Exporting Assets

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.

Web

For a web application, the best export format is often SVG.

Android

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)
  • 48x48(@2x)

iOS

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?

Invision Inspect Mode

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.