Ideas or Best Practices for Creating a Clean UI in MIT App Inventor?

General Discussion
, ,
1

Currently working on a simple productivity app using MIT App Inventor and I’ve been trying to figure out how to make the user interface feel modern, clean, and intuitive especially given the platform's limitations with design flexibility.

Already tried using CardViews and some layout tricks, but I’m still not fully happy with the result.

  • What are some tips or creative hacks you use to enhance UI design in MIT App Inventor?
  • Are there any good extensions or resources that help improve the look and feel?
  • Any screenshots or examples would be super helpful!
1 Like
2

???

Define "clean"...

Show some examples of what you mean.

Have a look here for some inspiration

For extensions:

4

Post screenshots and explain what exactly you don't like and what it should look like.

5

Depends on what you consider as clean.

PS: This might be useful for you....

6

If it helps, I’ve previously tested a Figma-Enhanced App Design (FEAD) method for App Inventor—in a nutshell, you create the entire UI in a design app (e.g., Figma), import it as a background image, then overlay invisible buttons/labels for functionality.

• Paper: [2412.06793] FEAD: Figma-Enhanced App Design Framework for Improving UI/UX in Educational App Development
• Slides (Includes an example app): Hack the Climate: UI/UX Design Crash Course - Google Slides

Feel free to try this method, and hopefully it works out!

1 Like