This step is really important. You should design the UI first in a Designing tool like Figma. The reason is simple; to know what to expect.
Do you not have a good idea for a UI design? You could visit the Dribbble Mobile section. There are hundreds of thousands of posts.
Fonts are really important for apps. You can find some best ones at here:
This is pretty self-explanatory, please don’t overuse animations.
A good example of this is a loading screen that for e.g. always takes 2000 milliseconds to finish, and it doesn’t load a thing.
Please don’t download icons, and then put them as an image. They will be so blurry and will take more space (APP). Instead, use the Material font in the Label properties.
For the name of the material icons, visit this website:
If your app needs internet connection, I will always advise you to store the images on a server, and load them in the app. It will reduce the App space. Also, enable Enable High quality images in the Screen1 properties.
Please don’t make the user’s eyes go blind
Here’s a pallete that might help:
Kodular’s default notifier dialogs aren’t the best, so I suggest making your own.
Here’s an idea:
Before even starting, check if the app is needed. For example, please don’t make browser apps, music players, etc. There are 100s on the Play Store.
I get it, everyone needs to earn but do not bombard users with ads.
- Have more than 2 banners visible at the same time
- Run a clock and show an interstitial every e.g. 60 seconds
- Run accidental-click ads
To keep you organized, I suggest you make a board on Trello.
Here’s my example.
Yes, I know, super nice.
look at your sizings! No app is good if it just displays good on your device but not on others! So, look up resources and Guides for Responsive screen sizing, e.g.
If you’re using Card View in an arrangement, then you can set the arrangement background color to Light grey, then set the card view evaluation to Zero or you can reverse it.
If you want to do similar to this
then you can take a card view, Properties: -
Color: Your wish, Padding (All): 0, Corner Radius: 100, Elevation: 0.
Then add your switch inside.
Please, maintain some margin in-app at left and right, use 2-4% Space. It looks arranged and neat.
If you add dark mode option in you’re app then you can: -
- Use Dark grey #121212 instead of pure black, it strains the user’s eye.
- Use light grey for card views
- Use white/purple background for buttons and black for text, don’t use blue color while using dark mode.
If anyone finds more tips feel free to edit this Wiki.
Credit to @Sherpuraala!
If we use Card view as a button then it looks good.
More details are in this guide.
Guide credit to @Xoma