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.
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 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
ColorSpace : give it the base colour and it will generate various colour palettes for you
Colorhunt : gives you some predetermined set of colors based on various different styles
Muzli Colors : 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.
WebGradients : makes available various predetermined background gradients available
Dribble : to get design inspirations
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.
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.
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).
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.
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.
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.
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.
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.
But for a tech brand , you would probably use a sans-serif font.
💡
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.
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?
Now we will need to adjust the heights of the different headings. For that we will need to use a type-scale.
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.
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!
Top comments (1)
Nicely written!
Another good skill I have found essential while learning to design for the web is wireframing. It is a skeleton for your UI design that helps build clarity for the components that will be involved in the final version of the design.
What is Wireframing? The Complete Guide [Free Checklist]| Figma
Building excellent apps or sites starts with great wireframe design. Apply best practices to your wireframing process with Figma.