Hi all - I’ve been working on creating some screenshots for a partner we’re working with (also @paul121 and @mstenta are working with them). While not always helpful, in some cases being able to quickly and accurately mock up new features / changes / modules is really helpful to share and build consensus among the interested parties.
Personally I’m a huge Inkscape fan and have been using it since the early aughts, but have recently found Miro to be a nice and easily shareable way to do UI stuff also. I find more professional options like Adobe and stuff overwhelming and frankly I hate adobe.
So I copied in a bunch of screenshots in Miro for 2.x components and created ‘Miro ready’ versions (ie actual vector objects in Miro). Miro is gaining new tools (like color pickers and auto-croppers) which make UI and UX work very possible when you start with a screenshot.
So anyway, here’s a link to that Miro board which contains these elements. Please…
- Don’t resize existing elements - they are sized this way on purpose!
- To modify elements - copy them first to your own miro board, then modify away!
- If you want to contribute, add new elements or add comments next to existing to improve them. Don’t willy nilly change them plz
- If there’s another OS ag tool you want to create elements for, free free to make a new section for them (I may do this for SurveyStack once we finish out redesign).
When creating custom icons w/ alpha channels, I found this site especially useful → https://icon-sets.iconify.design. It allows you to create custom colors, sizes, etc. If you want to import into Miro from this site - just (1) select svg and svg in the options (see image below for where) and (2) copy the text into a file, save it as .svg and (3) poof you can drag and drop it into miro!!!
I hope this is helpful for others in quickly communicating improvements or changes for others.