アプリケーションを作る上で、ユーザーインターフェース（UI）とはとても大切なものです。誤ったUIを作ることで、ユーザーが誤動作させまくるようなアプリになってしまうこともあります。
デザインというと感性による芸術的な何かに思えるかもしれませんが、大抵のアプリのユーザーインターフェースに必要なデザイン能力は感性ではありません。論理的なものです。
まったく意味合いの違うパーツ同士がくっついていると、ユーザーには大きく誤解をまねくでしょう。
操作の流れとして同じもの、関連するものをグルーピングしてみましょう。
色をランダムに使ってもユーザーは混乱するだけです。
大抵の場合、赤いボタンは何かしら危険な動作をするボタンです。赤い文字は大抵は重大な警告を意味します。
黄色い文字は赤ほど重大ではないものの何かしらの警告を示すことが多いでしょう。
一番無難な方法は、bootstrap やマテリアルUIなど、既存のデザインシステムに乗っかることです。
デザインについて練習する一番手っ取り早い方法は、よく使うサイトや、好きなデザインのサイトのコンポーネントをトレースすることです。
Reactコンポーネントや、HTML+CSS、Figma などを使って、真似るのです。もちろん単なるコピペでは意味がありません。
このとき、Google Chrome ならば Chrome Developer Tools を使うと、どういうHTML/CSS構造になってるかを丸裸にできます。右クリックを押して出てくるメニューから「検証」を選ぶと、その部分に該当するHTMLのソースにアクセスできます。どういうHTMLタグで、CSSがあたっているかを確認できるのです。
これを数をこなして練習すれば、ウェブにまつわるデザイン能力や、それをコードに落とし込む能力が身につくでしょう。
ウェブではないアプリの場合は少し大変ですが、それでも Figma のようなツールを使えば、似たようなことは可能です。
既存のものは、大抵の場合はよくよく考えられて作られています。それらを読み解くことで、デザインに必要なロジックを頭に思いかべることができるようになるでしょう。
もちろん、実際にアプリを使うときには、トレースしたものそのものを使うべきではありません。どういったところで商標や著作権など、法律を侵害してしまうか分かりません。
盗作しないようにご注意を。