Tips to make a Professional and good UI

Tip 1: Colors

Use Bright colors in-app, Use dark colors instead of light colors.

screenshot-creator-kodular-io-1593076855082

Tip 2: Text

Use different text styles for different purposes. Some of the popular best fonts are Comfortaa, NanoTech, Didact Gothic, etc. And don’t use too stylish icons. You can find many in Google Fonts.

Tip 3: Icons

Don’t use images as Icons. They look blur so, instead use Icons TTF to make it look nice. Some of the popular Icons providers are - Font Awesome 6, Material Icons, etc. Use thin icons to make it look good.

Tip 4: Images

Turn on High-quality Images in the advanced option. Try to use a 72x72 (HDPI) Icon size. Some of the best Icon(Image) providers are - Icons8, unDraw, Flaticon, etc.

Tip 5: 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, Evaluation: 0.

Then add your switch inside.

Tip 6: Margin

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

Tip 7: Sizing

If you use buttons or images or other things, try to size them in Percentage (%) and NOT Pixels (Px), this fixedly set them.

Tip 8: Animations

Don’t overuse animations, they look messy. Use simple animation in a professional app. You can use Phase Extension by @Shreyash or you can use the in-built component.

Tip 9: 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.

Tip 10: Points you can remember

  • Simple and clean UI
  • Bright colors
  • Sizing
  • Don’t overuse animations
  • Margin in-app
  • These 6 Points

You can also refer to these 2 topics: -

Pls don’t say this topic/guide a copy, they are few things which have been not said in the above topics, such as dark mode, Card view design and other cool fonts.

Some credits goes to @Sherpuraala and @Mateja

1 Like






So, I don’t get it, should we use light or dark colors?


I don’t see the point in having three topics for the same theme.

you leave about my bubble browse, because i know that i have done mistake before

Copied topic…

We will not forget this

just some new ideas such as dark mode and other things

Well, instead of making a new topic you could’ve edited ours, since it is a wiki.

how?? I din’t knew, can you merge the topic

Everyone could edit it.

why you will not forget?? your annoying me

#off-topic

104 posts in that topic

Yes please edit the wiki instead of opening another topic for this. I will unlist and close this. Copy and paste the parts that are not in the wiki.

1 Like