Create common design resources and templates for prototyping and wireframing

[jwflory]

Summary

Create a common library of design resources and/or templates to accelerate the speed of prototyping new changes.

Background

Is the new feature related to a problem? Describe the problem: In the process of development, we usually start with a prototype or wireframe of the change to better understand its appearance and get everyone on the same page. The problem is, setting up a wireframe can take some time, yet it is still something we do very often.

What does the new feature look like to you?: A successful implementation of this issue is a set of resources, patterns, visual assets, etc. for using in common tools for building wireframes, mockups, or prototypes. This could work in something like Figma.

Describe any alternatives considered: Design resources for the open source prototyping tool, Penpot, would also be helpful.

Details

The success criteria for this issue looks like tools and resources that any developer can use for quickly visualizing new ideas for the UNICEF Inventory theme. They can quickly emulate the look-and-feel of the site, and make changes in the wireframe to drive discussion for new changes.

I'm not an expert on this topic, but I think it is something important for the contributor experience. At a minimum, I would like to see templates and/or patterns for use in Figma. But there is room for this task to go beyond the bare minimum too. It will take some creative thinking and likely a bit of research.

Let's also hear your ideas for what this design library could look like?

Outcome

• Less barriers for prototyping and visualizing new ideas to work on the UNICEF Inventory theme
• Easier for developers to follow steps for proposing changes by visualizing their changes first using this design library