Cubyts
Cubyts
×

      How to prepare design Assets for development?

      May 23, 2023

      Preparing design assets ensures smooth handover of design for development.

      Duration

      1 week

      Complexity

      Advanced

      Contributors

      UX designer, UI designer, Design manager, Product manager

       

      Getting Started

      At the end of the design process, the design team needs to hand over the design to the development team. If done right, this enables development work to start on the right note. This is an important step in order for the design to get developed as expected.


      Preparation

      Preparation for design assets handover should: 

      • ensure all the required material is available

      • be easy to find

      • be organized 

      • be present in required formats

      The following items are required for starting with Development, hence need to be prepared for the handoff

        1. HEX codes

        2. Fonts variations as used for each UI element

        3. Icons in required formats such as SVGs, PNGs, GIFs, JPGs, etc

       

      Earlier designers used to create specifications for the design once finalized. Now automated handover tools are available. This has simplified the handover process. Specifications are not required to be created manually anymore. Designers can grab all the specifics from the source design file itself and share it for development.

      How to?

      Handover

      Handing over a design for development has 2 parts to it.

      1. Preparing the material for handover that includes the final design, specifications, style guide, etc. depending on the project requirement.

      2. Knowledge transfer regarding design, which is usually done through a live interaction between designers and developers like a Handover workshop


      Building rapport with Developers

      Apart from a well-done handover, good rapport between designers and developers is essential for building good products. A lot of communication and collaboration is required between designers and developers in order to develop the product as per the design and refine it to further fit it to the users’ needs.

       

      Here are a few guidelines to help have a good rapport between designers and developers:

      • Encourage communication

      • Understand and appreciate respective roles

      • Set clear expectations

      • Raise a flag as soon as any issue is identified

      • Share constructive feedback 

      • Focus on making things happen together rather than pointing out mistakes

      • Don't take feedback personally

      • Build design systems together rather than creating individual UIs

      • Use tools in the design & development process as much as possible

      • Respect a different point of view

      Do’s & Don'ts

       

      Do’s

      Don’ts

      1. Keep your files organized and labeled clearly.

      2. Create pixel-perfect designs.

      3. Provide clear and detailed specifications.

      4. Use vector graphics whenever possible.

      5. Provide multiple versions of assets.

      6. Work on building rapport with the development team.

      7. Keep a checklist of items that need to be handed over for development.

      8. Make the prototype as intuitive as possible.

      9. Have a simple file structure to manage working files.

      10. Only show finalized designs to developers.

      1. Don’t confuse developers with too much information.

      2. Don’t use jargon or cryptic names.

      3. Don’t assume that developers will understand what you mean or want.

      4. Don’t use non-standard fonts.

      5. Don’t rely on colors alone. 

      6. Don’t use non-editable file formats.

      7. Don’t forget about responsive design.

       

       

       

       

       


      Suggested Tools 

      • Zeppelin

      • MarvelApp

      • Avocode

      • Sympli

      • Mockplus

      • Figma

      • GoogleDocs


      References 


      Other Related Best Practices