UI - Overview

One of the most difficult thing while building an app/webapp is the UI. If you look at programming, it's all logic, if I tell you that 2 + 2 = 4, then you can easily answer 2 + 10 (hint: 12). But if you look at designing/building UIs, there is no logic. It's all subjective.

That doesn't mean you should design shitty UIs. So, the first thing you should do is 'recognize good design and bad design'. Go to dribble or any other site, look at the apps that you are using on a daily basis, what you really like about them. Is it the color scheme? rounded borders? subtle background shadows? font choices? etc.

You can devote sometime pondering over the below mentioned topics:

1) spacing (padding, margin)
2) rounded corners (border-radius)
3) font choices (Montserrat, Fira Sans, Roboto)
4) subtle background shadows (box-shadow)
5) fluid layouts (flexbox, grid)
6) colorscheme (background-color, color)
7) subtle animations (remember, you are not competing with Pixar so use subtle animations)
8) Use a design tool: Figma (browser based and free!!!) - faster prototyping
9) accent color for you app/site (Netflix: red, Flipkart: Blue, Telegram: Sky Blue, UberEats: Green)
10) learn css fundamentals (positioning, block/inline elements, stacking order, specificity, inheritance)
11) Iterate, Iterate, Iterate...


some resources that you may find useful:

1) Refactoring UI :boom: https://refactoringui.com/
2) Brad travery design resources repo https://github.com/bradtraversy/design-resources-for-developers
3) YT channel : https://www.youtube.com/user/DesignCourse
4) Twitter thread https://twitter.com/i/events/994601867987619840
5) Dribble : https://dribbble.com/
6) UI design daily: :art: https://uidesigndaily.com/
7) subreddit: :rocket: https://www.reddit.com/r/web_design/
8) For learning css : https://css-tricks.com/