[WIKI] Tips to have the best UI in your app (and some UX tips)

, ,

Have an already prepared UI design

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.

Don’t have a good idea?

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.

https://dribbble.com/shots/popular/mobile

Use nice fonts

Fonts are really important for apps. You can find some best ones at here:

Where can I download fonts?

There are many websites for that. Here’s one => https://www.dafont.com/
Here’s another one, probably 99 % already knows it, but ok: https://fonts.google.com/

Do not overuse animations

This is pretty self-explanatory, please don’t overuse animations.

Do not create useless features

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.

Use good icons

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:

Use HQ images

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.

Know color contrast

Please don’t make the user’s eyes go blind :rofl:
Here’s a pallete that might help:

image

Make custom notifier dialogs

Kodular’s default notifier dialogs aren’t the best, so I suggest making your own.
Here’s an idea:

Check if your app is needed

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.

Do not spam with ads

I get it, everyone needs to earn but do not bombard users with ads.

Things you mustn’t do:

  • 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

Create a board of things needed

To keep you organized, I suggest you make a board on Trello.
Here’s my example.


Yes, I know, super nice.

Responsive elements

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.

Card View

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

images (1)

then you can take a card view, Properties: -

Color: Your wish, Padding (All): 0, Corner Radius: 100, Elevation: 0.

Then add your switch inside.

Margin

Please, maintain some margin in-app at left and right, use 2-4% Space. It looks arranged and neat.

Dark Mode

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!

Use Buttons Made With Card view

If we use Card view as a button then it looks good.
More details are in this guide.

Guide credit to @Xoma

31 Likes

1- Are the fonts open source?

2- And what program or “site” do you use for To-do-list

1 Like

You can check on each page.

Uhm:

2 Likes

I recommend to use list of fonts given down which I preferably use in my apps.

  1. Comforta bold
  2. Montserrat black
  3. Creo
  4. SF pro
  5. Roboto
2 Likes

@Sherpuraala Please provide inks too for more convenience that where to find these

2 Likes

You can search on Google or dafont.com
I am not providing the links because some of them are not for commercial use.

2 Likes

Please don’t go off topic. You’ll be handed an official warning/silencing of two days if you continue to hijack topics

1 Like

This topic isn’t about “unusual reactions to wiki topics”. It’s about the “tips to have the best UI in your app”. If your post isn’t about the topic (as can be understood from its title), it’s off-topic.
If you still feel the need to comment on the reactions to the topic, feel free to do so, but in a PM with those who you want to talk to.
Community members who come to this topic expect posts relevant to the topic title, and not a parallel discussion about reactions and whatnot.

6 Likes

The last edit was by me

I don’t get this.
Should we use Bright color, or dark colors?
Light is the same as Bright

What is this supposed to mean?
The default palette we provide is the 500 variant of the official Material Design colour palette.

4 Likes

i ment dark

I edited the section.

2 Likes

Actually, the whole section was removed because it was a duplicate of

2 Likes