User Interface Design & App Development
Samuel Tomé - Programmer, User Interface & Logo Design
Jay Roth (JR01) - Programmer
FlowFx is a Particle editor and creator that allows anyone to create particles and add them to any game!
This tool was created using the Flowlab game engine, and is meant to be used by other Flowlab users and Game developers.
Developing a Versatile Tool
The idea for this app started as a Summer project, but the more we explored its concept, the more we saw its potential. Accordingly, the list of features and time needed to complete this project started to pile up, in a positive note, we were full of ideas for features this tool could have.
Since the beginning, this "Particle Editor" app had accessibility and efficiency as its development pillars.If we wanted users to use our tool, it had to be a LOT MORE efficient than their current workflow.
How were we able to achieve a versatile, fast, and accessible tool?
Allow me to tell you a bit more about our ideas and the process behind FlowFX.
When we first started, the user interface of FlowFX had a pixel-art art style, it was created using Samuel Tomé's "UI Pixel Art Icons" sprites asset pack.
Using this pack saved us a lot of time during the initial phase, as we didn't need to draw assets and instead focused on having a functional prototype to quickly test our idea and confirm its potential.
Once most features were complete, the app required a new User Interface that matched the app's intentions.Our ideal interface for FlowFx needs to allow intuitive controls, be readable by anyone, and transmit a welcoming feeling so users don't feel overwhelmed by the number of options available.
To achieve this, Samuel created a visual aesthetic for the app and designed an user-friendly interface that was easy to use! Even through the redesign, the initial layout idea was preserved - a sign that we found a great layout on the first strike!
The app features all the settings and controls on a single side panel for simplicity.The different particle properties are separated into Tabs for each category, such as particle appearance, movement, rotation, size, etc.
Users can start at the first Tab, and go down from there until they have a finished and beautiful particle.
The Particle preview is shown on the right side of the screen, showing all the user changes in real time!
To make the user experience as intuitive and fast as possible, we created responsive UI elements that could be reused for various settings. FlowFx features typeable number fields, with adding/decreasing steppers and responsive sliders.
Editing any of these options,fields or toggles reflects instantly on the particle preview, perfect for a fast and smooth user experience and workflow!
Once the user finishes creating, they can export their work with just a few clicks!
The app provides an "import code" that the user simply has to paste on the intended game's object, after importing the respective "FlowFx Bundles".
By having a simple-to-use and approachable interface that allows easy experimentation without friction or long load times, we achieved a tool that is appealing to both Professionals and inexperienced users alike!
The project was developed over one year, and the 1.0 version was officially released in the following Summer, in July 2021. It was a success amongst the community and online, and it has currently gathered more than two thousand visits and counting!
It was a pleasure to collaborate with Jay Roth (JR01), on this project. Creating FlowFx was a very insightful project that allowed us to explore different areas and more complex systems.
After receiving feedback from the community, the app had a few small updates to better accommodate the needs of our user base.
This tool has a lot potential for future updates, to further improve it and its user's workflow - so, maybe in the future there will be more to show and a new and improved FlowFx? Stay tuned!
Did you know you can support our work so we can continue creating awesome Free Tools by making a donation or buying items from the Shop!
Thanks for reading!
- Samuel Tomé
