Redirecting to default login... Implement – Mobility Center of Excellence Team Website

Implement: Partnering with development teams

Specifications Post It
Specifications

Specify sizes, colors, and position for screen elements and text

Assets Post It
Assets

Export graphical assets for UI implementation

Communication Post It
Communication

Maintain communication with developers throughout implementation


Specifications

When designs have been tested and approved we use a tool called Zeplin to hand over the designs to the developers. It’s a simple tool to allow developers to pull all the assets and specs for the design without needing to ask us a lot of questions, need documentation or own Sketch. During this phase, collaboration with developers is crucial. The designer and developer should continually collaborate during this phase to review screens produced by the developer. This will ensure that the final product reflects intended designs, transitions, flows and layouts. In this phase, the UX design becomes the responsibility of the whole team as well. This is where the mobile product will begin its life.

Zeplin spec image example

Assets

Exporting assets is also an important part of the implementation phase. Tools like Sketch have built in export tools to quickly create .png, .svg, or .pdf assets for developer implementation. Android assets are usually exported as .png or .svg files, and iOS assets are usually exported as .png or .pdf files. Rasterized assets like .png need to be exported in several sizes @1x (mdpi), @2x (xhdpi), @3x (xxhdpi), and @4x(xxxhdpi) to accomodate for various device sizes. Vector assets like .svg can be re-sized by the system so they do not require multiple assets.

Sketch asset export image example

Communication

To ensure quality, we recommend running audits over your work at different points in the implementation process. Make annotated documents when necessary. You can create your own, or utilize one of many tools such as Notebook for Sketch. One of the most important aspects of the implementation phase is to communicate early and often with the developers about how screens are rendering and making sure assets are displaying correctly.

Go back to the Design Thinking overview to view a summary of the Design Thinking process.