10 UI and UX Principles while styling with CSS
Tags: webdev, css, ux, news
Published: 2022-10-22 10:27:51

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

![UI UX Meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/racpeuwswcgh76533emt.gif)

**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](https://fonts.google.com/icons).

![Google](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b9ba1njzhu0hhcu3gdxr.png)

Or you can use [octicons](https://primer.style/octicons/).

![Octicons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wcagikkn1ovbvbv490rm.png)

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](https://www.w3schools.com/charsets/ref_emoji.asp). 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](https://colorhunt.co/). 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](https://color.adobe.com/create/color-wheel)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kmxf1651o3bn0g3r4hqo.png)

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](https://fonts.google.com/) for this purpose. You can get a lot of free fonts from there.

![Google Fonts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pvm29r985yvvea00urzz.png)

Well in my case I generally use some of these fonts based on the project- 
['Roboto', sans-serif](https://fonts.google.com/specimen/Roboto)
['Nunito Sans', sans-serif](https://fonts.google.com/specimen/Nunito+Sans)
['Montserrat', sans-serif](https://fonts.google.com/specimen/Montserrat)
['Source Code Pro', monospace](https://fonts.google.com/specimen/Source+Code+Pro)
['Playfair Display', serif](https://fonts.google.com/specimen/Playfair+Display)
['Rajdhani', sans-serif](https://fonts.google.com/specimen/Rajdhani)
['Aref Ruqaa', serif](https://fonts.google.com/specimen/Aref+Ruqaa)
['Amatic SC', cursive](https://fonts.google.com/specimen/Amatic+SC)

[Firefox](https://design.firefox.com/photon/visuals/typography.html) has written a wonderful article on choosing fonts, font sizes, etc.

![Fonts guide Firefox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lmd09k396b5k8ez0zz32.png)

![Fonts guide Firefox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3a2hz1i6noqrox5vo36.png)

![Fonts guide Firefox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3qzhlpo167m1fo79u2fs.png)

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!