devkoustav

Posted on Oct 22, 2022 • Edited on Oct 30, 2022 • Originally published at koustav.hashnode.dev

10 UI and UX Principles while styling with CSS

#webdev #css #ux #news

Yes, I can understand there are times when coding goes well but the design doesn't

So, here are 10 UI and UX Principles while styling with CSS

a) Use appropriate icon set for all buttons. If you do not have proper icons, you can download or use link in stylesheet from Google Fonts.

Or you can use octicons.

You can also use icons in emoji format. If you want to know the hex code of the emojis you can refer to W3 Schools Emoji Reference. You can also use some shortcuts for emojis
For Windows: Windows + .
For MacOS: CMD + CTRL + space
This will increase the accessibility of the website.

b) Put a help button. It should direct the user to any documentation, video tutorial of the product, map of the website or the Customer support of the website.

c) Be consistent with colors. Instead of using multiple colors in multiple places decide a color theme for your website. Make sure that the colors make a sharp difference.

Here’s 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;
}

Here, var(--primary-color) will be the background-color, var(--secondary-color) will be the background-color of elements and var(--text-color) will be the text color.
If you are not sure which colors to use you can take help from Color Hunt. Use :root {} and define in it the colors and use var(--colorname) to use the colors. This will also help you while making the dark mode of the website. You can also get help for selecting colors from Adobe Colors

d) Be consistent with fonts. Use a maximum of 4 fonts and a minimum of 4 fonts for your projects. Give a different font for your heading and body text.
You can check Google Fonts for this purpose. You can get a lot of free fonts from there.

Well in my case I generally use some of these fonts based on the project-
'Roboto', sans-serif
'Nunito Sans', sans-serif
'Montserrat', sans-serif
'Source Code Pro', monospace
'Playfair Display', serif
'Rajdhani', sans-serif
'Aref Ruqaa', serif
'Amatic SC', cursive

Firefox has written a wonderful article on choosing fonts, font sizes, etc.

You should be clear about the importance of each text and arrange it in font10, font20, ... and so on

e) Follow color standards. A warning message should have red background. A note message should have a yellow background. A success message should have a green background. A tips message should be in blue background.

f) Don’t make it messy. Use proper word-spacing, letter-spacing, padding and margin.
The padding should be enough.
The background-color here var(--primary-color) should not visible a lot. Instead, the elements should have enough blank space which covers up over the background.

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

h) Use :hover and :active pseudo classes on buttons The background-color difference between the normal state and the :hover state should have a sharp contrast whereas the :hover state and :active state should have less contrast.

i) Use user-select: none; on buttons so that when the user double clicks it doesn't select the content within the button.

j) Use :focus pseudo class for inputs. The :focus state should have a border.

Here's one extra-

k) Use loading="lazy" in the images. For eg. <img src="/images/sky.png" loading="lazy">. This way only the picture which are needed at the moment will only load. The loading time of the website will decrease a lot then!

Check out the whole series!
Share it💚 with someone who may benefit from this
❤️ Happy Coding!
Follow for more!