Implement: Partnering with development teams
Specifications
Specify sizes, colors, and position for screen elements and text
Assets
Export graphical assets for UI implementation
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.
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.
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.