Web design tips: Typography, Color, Image, Icons

Greem
3 min readMar 26, 2021

1. typography

Texts in websites are most important content because it clearly communicate with the users with words and there are many different ways to approach designing text. Font family, size, spacing and character number limits. There are some modern

  1. body font size 15–12px.

2. Huge headline font size 90px, 60px, 32px…

3. Use line spacing between 120 and 150%

4. 45 to 90 characters

https://creativemarket.com/fonts

1. Use a font-size between 15 and 25 pixels for body text

2. Use (really) big font sizes for headlines

3. Use a line spacing between 120 and 150% of the font size

4. 45 to 90 characters per line

5. Use good fonts

6. Chose a font which reflects the look and feel you want for your website

7. Use only one font

2. color

1. Use only one base color

2. Use a tool if you want to use more colors

3. Use color to draw attention

4. Never use black in your design

5. Choose colors wisely

3. Image and text

Images are crucially important in web design so always choose the image that tells the story for the mission of the website and select high quality images.

1. Put text directly on the image

2. Overlay the image

3. Put your text in a box

4. Blur the image

5. The floor fade

4. Icons

Icons should be vector images that simplify what the text is presenting. Don’t confuse the user by placing wrong icons. Icons are friendly way to communicate with the user.

1. Use icons to list features/steps

2. Use icons for actions and links

3. Icons should be recognizable

4. Label your icons

5. Icons should not take a center stage

6. Use icon fonts whenever possible

5. white space

The adequate use of whitespace makes a website look easy to navigate for the user.

1. Put whitespace between your elements

2. Put whitespace between your groups of elements

3. Put whitespace between you website’s sections

4. Define where you want your audience to look first

5. Establish a flow that corresponds to your content’s message

6. Use whitespace to build that flow

resource: https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3/learn/lecture/2800152#announcements

--

--