10 UI and UX Principles When Styling With CSS

a) use suitable icon set for all buttons. If you don’t have the appropriate icons, you can download it or use its link in the stylesheet from Google Fonts. You can also use icons in emoji format. If you want to know the hex code of emoji you can refer W3 School Emoji Reference. This will increase the reach of the website.

b) keep one helping out switch. It should direct the user in either direction documentation of website, video tutorial of the product customer support of website.

C) stick to the colors, Instead of using multiple colors, decide on one color theme for your website. Make sure the colors make a sharp difference.
Here is a color theme as an example-

:root {
     --primary-color: #F0F0F0;
     --secondary-color: #FFFFFF;
     --text-color: #121212;
     --success-color: #2CE840;
     --danger-color: #FF5252;
}
.dark-mode {
     --primary-color: #121212;
     --secondary-color: #4B4B4B;
     --text-color: #FFFFFF;
     --success-color: #2CE840;
     --danger-color: #FF5252;
}
enter fullscreen mode

exit fullscreen mode

Here, var( --primary-color) background-color would be, var(--secondary-color) elements will have background-color and var(--text-color) The color of the text will be .
If you’re not sure which colors to use, you can take the help of Color Hunt. use :root {} and define colors in it and use var(--colorname) colors to use. It will also help you while creating dark mode of the website.

D) be consistent with fonts, Use a maximum of 4 fonts and a minimum of 4 fonts for your projects. Provide a different font for your heading and body text.

I) follow color standards, a Warning The background of the message should be red. a Comment The background of the message should be yellow. a success The background of the message should be green. a Advice The message should be on a blue background.

F) don’t mess it up, Use proper word-spacing, letter-spacing, padding and margins. The website should have enough free space.

g) try to make the button rectangular, So when the word is small use more horizontal padding than vertical padding.

h) use :hover And :active The background-color difference between the pseudo-class normal state and the :hover state on buttons should be a sharp contrast while :hover state and :active The state should have less contrast.

I use user-select: none; on button so that when user double click It does not select the content within the button.

j) use :focus Pseudo class for input. :focus There should be a state boundary.


Watch the full series!
Share this with someone who can benefit from it
Happy coding!
Follow for more!

Leave a Comment