Web Design for Beginners: Part 1
Tags: design
Published: 2024-05-05 20:24:08

---
title: Web Design for Beginners: Part 1
published: true
date: 2024-04-22 10:40:26 UTC
tags: design
canonical_url: 
---

## Software to use for Design

- We would **avoid** using Adobe Photoshop and Illustrator since their use case is not exactly web design

- **Sketch** and **Adobe XD** are great options but **not** available for **free**

- **Figma** is the clear winner here since it is great for beginners and free

Now as we are diving into the world of Web Design, there are some fundamental concepts which we will need to know. The first thing in the list is **Color Theory** which we are covering next.

## Color Theory-How to Pick the Right Color

### Basics

- There are three primary colors: red, yellow and blue.These are the building blocks and cannot be extracted by mixing other colors.

- The secondary colors are obtained by mixing the primary colors in equal proportions and they are orange (red+yellow), green (yellow+blue) and blue (red+purple).

Now we know some things about Color Theory, we are good to cover **Color Harmonies.**

## Color Harmonies, Psychology and Tools

### How to choose your primary color

Here we are going to discuss some popular use cases of different colors. Different colors hold different meanings in different situations but for now we are only limiting ourselves to the web and understanding how different websites have chosen different colors based on their product.

- **Red** shows **passion** and is **great for grabbing attention**.It shows **energy, excitement and intensity**.It can be used to make **a bold statement.** It is most often used in sports related websites.

- **Blue** (the color of the sky) is the most used on the internet and is used to convey **trust, peace, calm, intelligence and security.** It is mostly used by tech brands and financial institutions.

- **Yellow** represents fun and yet a quite **bold color**.Being the color of the sun ,it represents **joy and happiness**. Can also be used to convey **warmth** and is used a lot in the entertainment industry.

- **Green** represents **nature, health, safety and well being**. Mainly associated with brands selling eco or healthcare products.

- **Orange** represents **energy, joy, optimism** and **confidence.** SInce its complementary to blue, it works really well in different contexts.

**Purple** represents **luxury, wealth, sophistication** and **royalty.** Its mainly associated with **luxury items** and **high-end products.**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1713761481006/bd2e290c-cdc9-42a1-b5ec-321c522c36a9.png)

### Color Harmonies-How to prepare color palette for your website

Now you have chosen your primary color .But you still need to choose the secondary color for your website. Lets follow some steps to do that:

- **Step 1:** choose your primary color

- **Step 2:** move over to [https://color.adobe.com/create/color-wheel](https://color.adobe.com/create/color-wheel) and change the base color to the one you have selected in the above step

- **Step 3:** now on the left hand side you will find the options to change the **harmony rule.** You can change the harmony and based on the harmony you have selected ,the secondary colors will be selected for you. Few important ones are:  
**Analogous**

### Handy Tools

1. [**ColorSpace**](https://mycolor.space/) **:** give it the base colour and it will generate various colour palettes for you

2. [**Colorhunt**](https://colorhunt.co/) **:** gives you some predetermined set of colors based on various different styles

3. [**Muzli Colors**](https://colors.muz.li/) **:** gives you the option to choose your base color and then suggests various palettes **but also gives a live UI kit demo to checkout the combinations**. Also gives some predetermined color palettes.

4. [**WebGradients**](https://webgradients.com/) **:** makes available various predetermined background gradients available

[**Dribble**](https://dribbble.com/) **:** to get design inspirations

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1713769847496/2bd48290-40b6-41af-8b04-bcd1a0fbb4eb.png)

### Putting Knowledge to Practise

Lets assume we have to make a similar website to that of **Meta** so first we will have to prepare the color palette and for similarity we will choose the primary color based on the logo.

So first we will select our primary color which would look something like that, I suggest you to choose based on your choice.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1713770677343/8f9eb536-e8ba-451e-876e-09c5c7fed1b4.png)

Lets move to Adobe color wheel and choose our secondary color. I have used **Complementary** harmony and have chosen the leftmost one as the seconday color.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1713770787248/0c60d6ed-98de-4567-9920-3e85552075cb.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1713770876698/64b4e1f1-3eef-4985-bc9b-5ebfd36f5ce0.png)

Lets prepare the gradient (here I am assuming you know how to prepare the gradient in figma , you can make quick google search or youtube search on that).

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1713771368309/895aa498-7677-4c19-a761-7bb73a45c408.png)

Now we will need to create the various color variants for our **text related content.** So what we will do is use the darker version of the primary color so that its a variant of it but again keeps the blackish nature as required for a text (we are working in light mode for now). We will also prepare various versions of it based on opacity so that we can keep them handy in case we need some kind of muted text or something like that.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1713779874406/d50b77b0-9be7-4849-b05c-80153e1477a9.png)

I have also taken a color for showing errors based on the **square** harmony since I got a variant there with respect to my primary color.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1713781098390/42b6a0a2-486d-40ee-8099-9e67162b453b.png)

We should also check for the **Contrast** of the colors we have chosen wrt white background so that we maintain **accessibility for all people** , like lets say some might have eye problems.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1713781445653/de54642d-a7e2-482a-97dd-0d44f3b36855.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1713781327006/d55d877f-1d59-4423-9905-810d3833bab4.png)

As you can see though my primary color passes, my secondary color fails against a white background, meaning it might not be visible for visually impaired people.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1713781388223/3b466205-1424-451f-a548-55539f7e47e4.png)

But it passes against a black background, so I might just keep it in case we go for dark mode as well.

Now we have also applied our knowledge of color theory and so why not move to our next topic?

## Typography

Typography is very important since it is related to the text which is being displayed on your site. Its very essential to choose the right font ,font weight ,line height and so on. We will delve deeper into this and lets start by where to find our fonts.

### Where to find Fonts

There are many free as well as paid fonts available online. But for now we can consider these two options:

- **Google Fonts** -> free

- **Adobe Fonts** -> paid

### How to choose your Fonts

Now that we have decided which place to extract our fonts from, we will need to choose the appropriate font for our project. It can depend on **end users, brand of the audience** and maybe some other factors.

Like for a **luxury brand** , you would probably use a **serif** font.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1713799059342/680f3223-00ca-4c25-a0e0-c9a28a4b45bc.png)

But for a **tech brand** , you would probably use a **sans-serif** font.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1713799121936/48c0d5c1-53db-4fd7-a62e-454fb0fbc437.png)

💡

Some very popular serif fonts are **Garamond, Bodoni and Bitter.** Whereas sans-serif ones are **Bricolage Grotesque, Outfit and Questrial.**

### Readability

We will also need to take care of readability like how much sizes we are allocating ,whether the chosen font would look good at a relatively small size or whether it would look fine on mobile.

### Loading Time

Something we should try not to overlook. The more external fonts we use, the more time taken for loading.

### Allocating Attributes and Roles

We will need to allocate the proper roles to the fonts like whether it would be used in the header or the body part as well as the attributes like font weight, line height and so on.

### Creating Typography for a project

Assume you are assigned the work of making a **clean modern** portfolio for an **experienced** web developer .Now how would you choose your font?

FIrstly since its going to be modern so we would need to use **sans-serif font**. Maybe we can try out **Outfit**. You can also vary its size in Google Fonts page and try to test its readability.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1713803063551/713f3cd7-8d56-4e76-952b-1ce2ccc6b1e3.png)

Now lets dive in figma and create the various text elements using font but wait ,what about the text color? Well why don't we simply use the one we created earlier in out color palette?

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1713808093347/54b97922-0a40-4064-8551-99c718189926.png)

Now we will need to adjust the heights of the different headings. For that we will need to use a **type-scale.**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1713808429011/03a1487d-f7f2-4515-a7b7-734f8eed1fb3.png)

Here what happens is that you select a base size and based on the ratio you select ,it keeps getting mulitplied and applied at each level. In my case I have chosen **21px** as the base size and the ratio as **1.414**. I will be using sizes for **h2** to **h6** cause clearly **h1** is too big.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1713808850950/83f21618-dc7b-4a02-a98a-6b475372e84b.png)

Okay so next topic is.... . Just kidding ! I guess thats it for today and we shoul wrap up.

## Wrapping Up

Okay ! So thatssssss a lot of knowledge for the day. Well I am still learning Web Design to up my frontend skills and as I grasp more things ,I will make sure to add them in my blogs. I will meet you in the second part of this series and till then , Goodbye!