DevUx Toolbox

Here are a list of tools to help you unlock levels of DevUx collaborations. Do not hesitate to contact us if you have questions or want to share your discoveried!

Define a process involving the right people at the right time

DevUx Process example
Adapt this base process to your needs

Level 1 - Basics 🤝

Sync designers and developers roadmaps (1/2)

Have the designer working in parallel of the developers.

Ideal team synchronisation for DevUx
This way, developers and designers can solve unanticipated edge cases together

Level 1 - Basics 🤝

Sync designers and developers roadmaps (2/2)

The ideal project start to have developers and designers roadmaps synchronised.

For designers to have at least one feature ready in advanced for developers to work on during development cycles, you need to give them a head start when beginning a project: allow time for the designer to do user research, create the design system and prepare the first mockups. You can have your lead developer work in parallel of the designer to provide technical insights while they unblock technical dependencies and set up the project code base.

The ideal project start to have developers and designers roadmaps synchronised

Level 1 - Basics 🤝

Define what needs to be delivered alongside mockups

DevUx mockup checklist for smooth handoff
Check this list for each mockup creation

Level 1 - Basics 🤝

Centralise information with a design handoff tool

What a handoff tool should provide developers with:

  • a mockup inspector to get margin/padding between components, sizes, style properties
  • downloadable assets
  • a reference to constants (colors...) or components used throughout the project

Tools that we've been using:

zeplin Zeplin is our recommended tool for handoff

invision We work with InVision because of their interesting free plan and prototyping app

figma Figma is also a nice solution that allows designer to collaborate on the same mockups and design system. It's a full web alternative that does not require sketch to create mockups. Figma also allows handoff to developers, and mockups will always be up to date.

other handoff Avocode, Abstract, MarvelApp are also good alternatives

If you are not sure which one to use, you can check our comparative article:

Zeplin vs InVision? The best tool for design handoff

Level 1 - Basics 🤝

Define a styleguide as soon as possible on your project

Styleguide example
The styleguide is a UI contract between designers and developers
Styleguide for components
The styleguide also show basic component behaviours and states

Level 2 - Efficiency 🙌

Use real data in mockups to spot edge cases

Designers can use Craft Data plugin for Sketch to import data from an API or simply copy/paste a set of data to use inside their mockups.

It's very useful when populating tables or lists.

Designer should get a set of data that covers all edge cases. Developers can help providing such data.

For Figma users, the ContentReel plugin might be useful as well.

Craft Data plugin
This plugin helps designers populate real data in their mockups on Sketch.

Level 2 - Efficiency 🙌

Provide a userflow to explain complex feature navigation

Userflow example
The userflow show what screen the user should follow for all user journeys

Level 2 - Efficiency 🙌

Provide explanations on how the layout should change on all screen sizes

Layout map example
This layout explains what elements of the layout should shrink, grow, or be fixed
Layout example larger screen
It also reveals the elements alignment

Level 2 - Efficiency 🙌