FarmOS UI Elements in Miro for UI/UX design - plz use!

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 :slight_smile:
  • 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 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.


Very cool @gbathree!! Thanks for sharing!

1 Like