by 0x89a1d730aa1e78a0ede8dea988acecff0a6e99a9 (Szjanko)
Should the following $35,000 grant in the Platform category be approved?
Abstract
Decentraland No-Code UI Design Studio: an open sourced web app enabling anyone to design interactive UIs for DCL scenes without coding. This drag-and-drop platform simplifies UI creation, enhancing accessibility and efficiency for creators. Open-sourced, built using Next.js and hosted on Vercel, it will offer excellent performance and accessibility that the DCL community can use. A web app will give easy access to these tools, without having to install or setup any software on the users end.
The Decentraland No-Code UI Design Studio will be a transformative web application that lowers the barrier to entry for how interactive user interfaces (UIs) are created within the Decentraland ecosystem. Aimed at bridging the gap between design and development, this tool eliminates the need for extensive coding knowledge, making the process of creating engaging and interactive UIs accessible to a broader range of creators. Current Challenges: The existing workflow for developing UIs in Decentraland involves a multi-step process where designers conceptualize UIs using graphic design tools like Canva or Figma, followed by developers translating these designs into code. This workflow is not only time-consuming but also requires a specific skill set, limiting the number of individuals who can contribute to creating interactive experiences in Decentraland. Solution: The Decentraland No-Code UI Design Studio simplifies this workflow by providing an intuitive drag-and-drop interface that allows users to select, customize, and integrate a wide range of UI elements directly into Decentraland scenes. This tool is designed to:
Enhance Accessibility: By removing the coding barrier, this will open up UI creation to non-programmers, significantly expanding the pool of potential creators.
Increase Efficiency: This tool streamlines the UI design process with pre-built elements and templates, as well as user uploaded custom graphics, enabling rapid prototyping and deployment of ideas. This efficiency is particularly beneficial for larger teams, reducing the workload on developers and allowing designers to take a more active role in the UI creation process.
Facilitate Collaboration: Introduce features that enable collaboration among multiple creators, allowing teams to work together seamlessly on a single UI project.
Customize with Ease: The tool offers comprehensive customization options for each UI element, ensuring that creators can fully realize their vision without compromise.
Technical Implementation and Community Engagement: Built using Next.js and hosted on Vercel, the tool promises excellent performance and accessibility. Committed to community involvement and sustainability, the plan is to open-source the entire codebase, allowing for continuous improvement and customization by the community. The tool will be hosted for the first year, ensuring its availability and reliability, and subsequently, we will encourage the DAO community to take over its hosting or individuals can always run it locally on their own computer, depending on its value and utility to the community.
Preset Designs: Introduce preset UI designs for quick customization.
Custom Designs: Allow users to upload their own custom designs including sprite sheets.
Public Release: Officially launch the tool, incorporating beta feedback.
Collaboration Launch: Integrate full collaboration features.
Enable optional account creation to save, continue, as well as share work progress (using it as a guest will always be available)
Q1 2025
Feedback Integration: Enhance user experience based on community input.
Expand Library: Add new elements and templates as requested by users.
Community Contributions: Encourage user contributions to the UI library.
Educational Initiatives: Offer tutorials and documentation for all skill levels.
Progress will be shared through regular updates on Decentraland Forum, Discord, and GitHub. These updates will include detailed documentation related to both the no-code UI application and its underlying source code, live question-and-answer sessions and video demonstrations, including how to integrate it with your Decentraland project. This approach is designed to actively engage the community, solicit valuable feedback, and ensure transparency throughout the development process.
@lastraum External web app so that users don’t have to install or download anything.
I will also include documentation on how to set it up to run locally if anyone wants to modify the open source code or to just run the tool from their computer.
I have had the absolute pleasure of watching szjanko learn how to develop in DCL over the last year. He has put in many hours learning how to not only code in DCL, but understand how to do so in a way that allows him to help others. As someone who is not a developer, I’ve benefited many times from szjanko’s knowledge. He is always willing to answer a question, explain a concept, and then explain it again a different way until I get what these devs are talking about
This tool will be super beneficial to DCL because the current ways to develop custom UI are extremely inaccessible to those who don’t have an in-depth understanding of code. The roadmap and milestones cover a variety of elements for a variety of purposes making it applicable to many users despite having different goals and ability levels. I also appreciate how there is ample time allocated to testing and community feedback throughout development.
@Mimsy Working with you for the past year coding some of the UI for Knights of Antrom, based off the designs that you sent to me, is actually part of what inspired me to create this idea/grant! I think it will be very useful and help development teams speed up the process of creating UI for DCL scenes.
@lastraum The app will provide code that you can copy and paste into a DCL project.
(example: a designer can put together the UI with this tool, that will be similar to tools that they are already familiar with, and then just copy and paste the code that the tool provides and send it over to the rest of the developer team)
This will speed up the development process of larger dev teams that need UI work done.
For the last part of the grants timeline, I will also be putting documentation together, where I will also include a detailed guide on how an individual can copy this code and use it in a Decentraland project. That part would require some coding but a guide will be provided.
@lastraum Yes, if its just an individual using it for themselves and not just sending the code to a dev team, then it would require them copy and pasting the code into a coded scene.
@lastraum thanks! and I see your point but technically it still allows someone that can’t code to create UI for Decentraland. If they just send the code that the app gives them to a dev team then it is 100% no code solution, if they want to implement it themselves then that last step will require some code and I will provide a guide for that part. Maybe after I am done with this version of the app, we can team up to combine this tool into the builder tool so even that last step will be “no code”
If you are interested enough in adding an UI you probably already know how to do this in code and considering how easy it is there is absolutely no need to pay for this.
Current UI system is not easy, and it’s not very user friendly. Usually there are tons of issues, starts from dynamic UI scaling according to different screen types and other weird buggy things. Idea of this proposal was written not out of nowhere and I really like it. I feel the pain of all developers who dealt with Decentraland UI.
Can you provide evidence to support your statements here? What is your experience with coding in DCL, and do you have resources or guideance that make it so easy? It’s an area many struggle with so maybe you have some guide or insight that the rest of us don’t.
I’m very interested in UI, and design almost all the UI elements used for the project I work with. However, I don’t know code and haven’t been successful at my attempts to learn code, and this is a huge barrier for me. Being able to develop a full thing and hand the code off to our dev team will eliminate a lot of time spent on uneeded stuff, not to mention elimate a lotttt of frustration on my side.
I am in high favor of this proposal. Personally, UI is something I have always struggled with both in SDK 6 and even more so in SDK 7. It always takes the longest time to code. This external tool would be extremely useful for Vroomway and other games with very dynamic interfaces in converting to SDK 7 and even expanding upon their current UI. As an art person, it takes me a fraction of the time to design it as it does to integrate it. Having the power to own this area free’s up developers to work on more important things. I could see this tool being a great asset to new users and people like myself who do not have a coding background. We need to remember that these kinds of tools are what will make DCL on par with other building environments. Just because the SDK UI system is “easy” for “developers” doesn’t mean that’s “good”. Building should be easy for everyone, period.
I look forward to seeing this come to life and using it myself
@NikkiFuego Thank you! I appreciate your support on this, will have to organize to include all of the dev teams for the alpha and beta testing phases (if this grant passes). Specially ones like Vroomway and others that will benefit from a tool like this for their SDK 7 conversions.
If developers struggle with creating UI, they should invest time in learning how to handle it instead of resorting to paying someone else for an easier solution. It’s funny to witness creators who claim to be skilled and are also grantees supporting this, as it reveals their true abilities and lack of experience.
I’m not the one requesting a grant; I think @szjanko should present evidence of UI challenges because that would be interesting to observe. I don’t need to prove anything. UI is likely the simplest aspect of development, especially considering the thorough documentation available.
