Top 5 Web Design Fundamentals

Web design has evolved and improved a lot. We see beautiful websites are created every day. And if you want to do the same, you definitely need to learn the fundamentals.

There are hundreds of UI designer jobs and many companies, small or big, searching for them. So, it is a good time to learn it.

Places like Skillshare, Udemy, and other similar platforms offer great opportunities to learn UI design, but without fundamentals, it is hard.

In web design, there is a number of principles every designer must learn and follow in order to become a good designer and create beautiful websites.

Also Read: Best Design Resources For Your Project

UI design is crucial for WordPress too. Doesn’t matter if you use drag & drop page builders. You always have to create a design first, and then build it.

In this post, I will show you what these principles and fundamentals are and how to use them.

So, let’s dive in and find out.


1. Layout

web design layouts

The first principle of web design is the layout of your website. This is the first thing you should think of when starting the design process. Also, it can be the most important aspect.

How good and beautiful a website looks, many times it depends on the layout. And layout can be different – simple, complex, creative.

A website should have a pattern and it can be done by column and grid. Column-based UI design is very popular and standard.

12-Column Layout

A very popular and industry-standard design principle is a 12-column design. It means that the webpage should be divided into 12 columns.

It gives you flexibility and makes it much easier to create web designs. Creating a 12-column based design is very easy.

12 columns design

You create columns and you choose the width, the gap between columns, and also margins on the sides.

Then, when you place elements like images and text boxes, you can stretch them to two or three columns. So, your design will have a pattern.

And for small devices (tablet, mobile), you can create 8 or 4 column design.

Grid Layout

A grid layout is another great way to create websites. I like it for more complex, asymmetrical designs. You can use column and grid layouts together.

With a grid, you can create a grid-like structure and place elements on your pages accordingly. You will still have columns but with a grid, you will add a flavor.

Also Read: UI trends For 2021

For example, if you have 3-4 elements in a section, you can create a grid where the image will have the biggest area and other elements will fill the gaps.

You can do many things with layouts and a great thing is that you can use them both together.


2. Whitespace

whitespace

Another very important thing is whitespace. Many people don’t know what it is and they make mistakes. However, it is a very easy thing to understand.

Whitespace, also called negative space, simply is the space and gap between different elements.

Whitespace is crucial in web design. Without it, your design will look ugly, cluttered, and unprofessional.

When you use whitespace it creates space, the air between elements. Your design will breathe. And it will look beautiful and easy for the human eye.

And whitespace works for every element. It applies to images, text, line-height, padding, margins, etc.

whitespace in cards

Imagine an infobox that has a heading, a little paragraph, and a button. It needs a gap between these elements and also padding.

If these elements are too close to each other, it will look bad. So, you need to follow whitespace rules to separate them and let them breathe.

If you go to well-designed websites, you will see how good they use whitespace. If a website doesn’t have good whitespace, it will never look good.

So, always try to create spaces between elements. Use padding and margins wisely.


3. Typography

typography in web design

Many times, typography is overlooked and misunderstood in web design. And that is bad because it is a very important part of a website.

Typography can say many things about a website, it can make your webpages beautiful if it is used accordingly. So, don’t ignore it.

When you choose fonts for your website, you have to consider different things. What your website is about, what type of website it is, etc.

Also, there are different types of fonts – sans, serif, monospace, display, etc. And it is important which type of font you use in your web design.

For example, it is not a good idea to use serif font on tech websites. Serif fonts have a royal, professional look, and many times you see it on clothes brands or similar websites or logos.

Tech websites use sans or some kind of display fonts. Many beauty blogs use serif or creative typography in their design. Because it fits very well.

Fonts also can be a decorative element so use them wisely. Also, it is a good practice to use two font pairs together. Font Joy is a great tool for that purpose.

Hierarchy

In typography, hierarchy is a very important part. Every modern website should have a good hierarchy in order to look professional and beautiful. Without it, it won’t work.

Hierarchy simply means the contrast between different headings and paragraphs. For example, the heading should be different from the paragraph. And it can be done differently.

typography hierarchy

You can make the heading bigger than the paragraph and it will separate them. You can make it bold or do both. Also, color plays an important role.

You can make headings black and paragraph light black or gray and it will still work. So, there is a number of ways to create a good hierarchy.

8 Point Grid

Another great concept in typography is an 8 point grid or baseline grid system. This is the method that many designers use.

It means that you have to create an 8-point or 8-pixel grid system for typography and build according to it.

When you use this system, the text looks beautiful and the hierarchy works great. There will be whitespace and your design will have a breathing air.

So, always try to have a good hierarchy in your design and you can also use an 8pt grid system.


4. Color

colors

The one thing that can make or break your web design is color. It is one of the most important parts and also frequently misunderstood or wrongly used.

Colors make a website beautiful, adds flavor, mood, and character. But if not used correctly, it can break everything. Many beginner designers make mistakes when it comes to color.

If you want to create beautiful websites, it doesn’t mean that you have to use as many colors as you can. It is the opposite. Less color makes web design more beautiful and professional.

Different types of websites use colors differently. Some websites are very vivid & full of colors, some are monochromic, and some use only black, white, and grey.

Doesn’t matter what kind of website you build. The purpose is to use colors wisely. You have to choose the main color and use it in different parts.

60/30/10 Rule

A very popular way to use color is the 60/30/10 method. It means that you use three colors – one occupies 60% of a page, another occupies 30%, and the accent color is used for 10%.

This way color won’t be all over your website and it will not break the web design. And it will look more modern and professional which we all want to accomplish.

60/30/10 color rule

In simple words, you have to choose the main background color (white most of the time) which will occupy the most area, black can be used in 30% (mainly in the text), and then one accent color for buttons and other elements.

Also, you have to learn the basics of color theory. How it works, what different colors mean. There are many blog posts and videos you can watch and learn.


5. Consistency

consistent design patterns

And the last principle you must follow is consistency. And this applies not only the web design but design in general. You have to have a consistent design.

What does it mean? Well it is very simple.

Design consistency means that every page of a website should have the same design pattern, feel. Layout, typography, colors should be used consistently and the website should have a cohesive design.

Every page must follow the same design pattern and layout. A good site mustn’t have differently designed pages. For example, go to Apple‘s website.

apple website

When you navigate through different pages, you will see that design follows the same pattern. And that is what a good web design should be.

If a home page has a 2-column design, uses blue as its color, and uses a serif font, other pages should use them too. If you go to the services page for example and you see it uses red color and display font, you will be confused.

That is a bad user experience (UX) and that is very bad because UX is as important as UI in web design. A good website should have a good UI and UX. That is mandatory.

It doesn’t matter what kind of website you build. Consistency is as important for portfolio websites as for blogs, corporate, or other types of websites.

So, definitely try to create and build consistent designs and patterns.


Web Design Tools

Fortunately, there are tons of good tools for web designers. And you don’t have to buy anything because we have very powerful tools that are free.

With these tools, you can practice and improve your web design skills. They are easy to learn and soon you will become a better UI designer.

Also, there are great different design resources you can use in your designs. There are resources for typography, images, graphics, icons, etc.

The best free tool I recommend is Figma. It is fast, free, web-based, and very easy to use. Also, you can try Adobe XD or Sketch.

Learn the basics of these apps on Youtube and then start designing. Practice every day, take inspiration from different websites or designers and soon you will become a better UI designer.

Conclusion

Web design is a very interesting and demanding profession. In order to master it, you have to learn these fundamentals, get inspired, practice, and soon you will become better.

Follow these principles and build some fictional websites. Do it every day, make mistakes, and learn by doing.

Leave a Reply