UX contribution guide (mockups)
This is a collection of docs, links and design resources for UX as it relates to the CiviForm project.
- Use the channel
#product-uxon the team slack for UX discussion & updates.
- Miro: tiny.cc/cvf-flow is our main interface for design output and collaboration (comments, mockups etc.). Use the cvf-flow project to create boards, add screenshots/images/links to mockups/prototypes and for comments. Anything that can be translated here through a screenshot should, but if you link out to a prototype or mockup, please make sure it's publicly accessible.
- Tasks are listed as Github under the
UXlabel here. We do try to keep some labeled as
good first issue, which are great for first-time contributors. Feel free to ask in Slack if you don't see any good first time issues to tackle.
In order to streamline all of the fantastic work everyone's been doing, I'd like to propose two new process additions:
To illustrate how to use the Figma file: (I'll use you, @Becky, as an example!)
- 1.Becky signs up for "Civiform admin; Main page (list of all programs)" in the sheet of screens by putting her name down in column C.
- 2.She then goes to the "Admin" file within the Figma file and starts designing. For convenience, she can go to the 'Applicant" design file and copy and paste a few mobile and desktop screens into her Admin file -- this will port over the same components, and make sure her mobile and desktop designs are the same size as everyone else's designs across the board.
- 3.If you simply want to use a component (say a radio button, or a dropdown menu), you can A) copy and paste them from another design, or B) access them in your designs by clicking on "Assets" on the left hand side, and dragging and dropping components into your designs.
- 4.If you would like to design a whole NEW component, components are built/designed in the "Component and team library" design file in Figma. I've found it's easiest to design with both Figma files open as tabs so I can switch back and forth. Once you're done with a new component (or have made edits to an existing one), Figma will offer you a popup to publish these changes to the team library. Once you do so, any other Figma file in the entire project using that component will see a popup to accept these changes, and any instance of the component will auto-update. In other words, the "Component and team library" design file is the source of truth, so if you're designing anything that requires the same text/box/input/color/button over and over, make sure it's a component so that A) making updates to it in the future will be easy and B) other people can easily use it.
- 5.For ease, I've also codified the CiviForm color palette in the "Component and team library" design file (right hand side), and it's been published project-wide, meaning that when you want to add color to a button or text, the palette of blues and grays is already suggested when you click on the four dots labeled "Style" in the Design column.
- 6.We review in the UX Office Hours on Friday!
The goal is for there to be ONE design file for Applicant screens (if you click on that design file, you can see WIP mocks for mobile and desktop); ONE design file for Admin screens (also with mobile and desktop); and ONE design file for TI screens. Please refer to the components built in the "Components and team library" file when building out your screens.
I know this is a lot, so please @ me or ping me with questions, and I'll also do another walk through of this in UX Office hours this week.