Introduction:

Web development is taking a huge place between Programming fields, which makes it well-known and well-used. In fact, there are more than 1.19 billion websites today! they have different purposes, different sources of income. But, the common thing is that they all have backend and frontend layers. The backend focuses more on the UX, whereas the frontend focus on the UI, which is the live contact with the user that doesn't understand anything about those layers, He only knows how a website looks like.

The only rule applied here is: the much the website looks fancy, The user will love it and use it more.

In this article, we will be discussing the Design Principles that every web designer or developer should know. Maybe you are a new one at UI UX designing, a Front end developer that works alone on his SAAS, or even maybe a Backend developer that doesn't know how to center a div. Anyways, after reading this article, you will be able to improve your design skills and save more time on designs. You will also take some amazing resources and pieces of advice to improve your work quality!

"You can’t use up creativity. The more you use, the more you have." –Maya Angelou

Good Books for Web Designers :

before starting, I want to share with you some good books, that will help you more, in your design adventure as a web developer, and take your hind to the experts' area!

1. learning web design
2. The Principles of Beautiful Web Design
3. Design is a Job

Web Design Elements

As a web designer, You need to take and use the right components in your workspace, which is the website page.

Every website is basically containing the next elements:

1. The lines
2. The shapes
3. The Colors
4. The Spaces
5. The Typography

What are lines?

A line is the basic component of a website. The borders, the underlines... are all lines. It's every point moving in some sort of space in general, and the web page specifically. Even the edges of shapes and forms are lines, which drive us to:

The Nature of Shapes:

The shape is another fundamental element in the web page and graphic design. They involve geometric, organic, or abstract figures and forms that make up all other elements in the design. It's the div, the blob created with SVG, the circle created by border-radius:50%; ... which have certain meanings that define the site design.

Colors explained:

All people know colors, what color is, their favorite color, the difference between the blue color of the sky and the yellow color of the sun. But we, the programmers know colors by another formula: HEX code😂😂😂. In fact, Red, yellow, and blue are the primary colors in our field, which are expressed in HEX and RGB, and mixed to create other tertiary colors, that can be used as background color or text color, even it can be the border color. It's present everywhere even on blank pages. So, you need always to choose fancy colors from fancy places, So maybe you are asking: "Zakaria, I can not quite follow you. Can You illustrate?". if it's true, it's okkey. but if it's not, it's also okkey 😐😂😂. I will share with you, some tricks and websites, from where you can get all of the elements needed to create the good design you are looking for, just after discussing the design principles. But before, let's jump to:

The Spaces And How To Be Used:

In the web page, it's the space between elements, columns, images, text. Space is the untouched space to smooth things out and transform the page into something elegant. In fact, it plays a major role in the design, empty space can be in any place, filled with any color. The margin, padding, the
are all spaces.

The Typography and what make it required in every website:

What is typography in website design? Simply put, typography describes the creative design of text on a web page. This includes your choice of font pairings and stylistic aspects such as letter design, kerning, and leading, as serif...

All those elements, are important and required in any advanced design. So as long as you use them in an imaginative and creative way, they will convert your ideas, to masterpieces.

"Creativity is contagious - pass it on." –Albert Einstein

The Magical Design Principles:

At this point, we will discuss the principles to be used in your next web design or your previous edited design. Before sharing some resources and pieces of advice.

The main design principles are:

1. Contrast
2. Hierarchy
3. Alignment
4. Balance
5. Proximity
6. Repetitive
7. Simplicity
8. Functionality

What is the contrast:

We mainly use the contrast effect to chock the user. for example, using a black background, and white text color. Is this similar to something for you? Yes, It's when your non-programmer friend sees you using the terminal, he seems to you shocked, trying to understand what are you doing. I bet you that you were feeling soo happy at that point😂😂. Anyways, we see this also when you give your important section a big margin, height, and padding, more than any other section on the site. It helps the user focus more on the main things. So make sure, to use nice-looking colors with different contrast, especially between the background and text color to make the last one more readable, and give the body of your page more love and make it more special than, the other page elements.

How to use Hierarchy in your design?

Hierarchy is the ability to control and arrange the visual data flow, by styling the elements in a certain way to show the important section. So yeah, we can say that contrast is included in the Hierarchy. It helps the page's design to be balanced, powerful, and right-based. There is a lot of Hierarchy types some of them are:

• Size's Hierarchy, example: The main section has the biggest font size or the biggest height. So we drive the user's eyes from the biggest to the smallest part.

• Color's Hierarchy, example: The main section is written in a different color than the other sections. so if the color of the normal section has more contrast, the main element should have a less one . and vis-versa. In order to drive the user's eyes where we want.

• Deep's Hierarchy, example: some rectangle blocks are organized in a certain way to show them as stairs. it's the same thing, explained in the table of contents of this article, so make sure to see it.

• Shapes' Hierarchy, example: using different paragraphs in the text that is containing an introduction, a development, and conclusion. It's a normal thing for the development to have more height, and more number of lines, because it's the important section.

So, we can say, that the Hierarchy target, is to show the main elements in a different way, to be easily visualized by the user.

Alignment and its purpose:

Alignment is the ability to form the website design in a given way to make it compatible with the spaces on the page. We can explain this by the CSS property text-align; if its value is either right or left, the text is aligned on a side and the space on the opposite side. meanwhile, if we give it center value, the text is centered, and space is devised between the two sides. we can use this in a lot of methods: Like putting the content in the center, or dividing the web page into two horizontal sections...

The balance and its implementations:

Everything in the world is searching for balance, atoms, people... so who can we implement this in the page design? SO, the answer is there is a lot of ways, one of the most common is using balanced colors. and here is a quick tip. if you are searching for good colors, or do not have a clear idea of what color you should use, I recommend you to visit this page of tailwindcss, which is one of the most used frameworks of CSS, and I believe it will rule the web world after some years. Pick up some fancy colors, and enhance your design.

Proximity

you as a web developer, need to maintain a relationship between elements in the web page by creating some sorts of spaces with some sizes. Proximity is one of the main needed principles for Hierarchy. For example, an article page, you found in the left the article which is the main section in the page, and in the left, a sidebar, some blogs, maybe a searching form, and of course some ads if it's monetized. In the end, the use of spaces plays a major role in it.

Repetition :

which is to use some parts of the design in a looping way, to make the design standard and stabilized for the user. a common example is to create a class for your title that has a good animation when we hover on it. And use this class multiple times on our page. It makes the design with its different sections like a unique unit, a template! You can say that repetition is a marketing brainwash operation, that gets the user's attention. of course, if it is used well.

Simplicity and why it's important:

Simplicity is the art of dropping the non-related elements to the design and keeping only the main sections. It plays a major role in user-friendliness. today we have a wider range of tools and capabilities, so keeping everything as simple as possible is usually the best approach. Designers. Also, simplicity can be attended by using some kinds of repetition in your website.

“Life is the art of drawing without an eraser, But Web Designing is the art of drawing with StackOverflow😂😂.” –Zakariaa Enajjachi joking

7 Useful Resources For You:

1. If you want to master the front end, I suggest you join the Freecodecamp community, they have a lot of programs, one of is the responsive web design program. at the end of it, you will take a certificate.

2. for nice looking UI, you will need nice-looking typography. for this, the best place to find a lot of high-quality fonts is the google fonts website. There is a lot of fonts. But I personally prefer open-sans and Ubuntu. But you can use anyone. And also as I mentioned before, visit tailwindcss colors page if you are searching for good colors.

3. For some amazing shapes, you can use Fancy Border Radius. It helps you generate good blobs, that you can use on your portfolio website! You can also use CSS Separator Generator to separate your page sections. N.B: for better results, use only one separator to keep it simple.

1. For animations, You can use this CSS library Animate.css in your projects. Visite them and try those fancy animations.

1. To learn from others' experiences and code, you need to see others' code. In fact, As a developer, You need to read code as long as you need to write it. So here is a free site, BootstrapMad to get high-quality templates and designs.

2. Any website needs some cool icons, so icon8 provides high-quality SVG icons for your project.

3. Also you will need images, so Unsplash, Pixabay are the best out there.

“I am seeking. I am striving. I am in it with all my heart.” –Vincent van Gogh

7 Pieces of Advice:

1. Simplicity! In your website, You should use simple minimal fonts and colors, to keep your text more readable, and design more amazing. Not a lot and also not a little!

2. Take care of the smallest details in your design. make the user feels choked when he recognized something new in your design. like focusing an input by clicking the slash button... but this is a UX example. But keep it in mind. Anyways, make the web page an amazing adventure for the user!

3. Make your important section in the bottom of the screen vertically, and in the middle horizontally. this is the place where the click rate is high!

4. Give every element a proper space with the other elements, In other words, make the GRID more organized!

5. Don't forget to use the box-shadow property to give elements like a 3D or 2D effects

6. Search always for UI designs on the web, you can search in Dribbble and Front end mentor, to discover other designing styles.

7. Use some shortcuts in your favorite text editor to save your time, and provide high-quality code. For VSCODE, here is an article for you Top 15 VS Code Extensions For Web Development , make sure to take a look at it!

“Sometimes you gotta create what you want to be part of.” –Geri Weitzman

#Conclusion

So to sum up, web design has a lot of components and principles, that are related between them. In fact, we can not talk about a principle or element without the others. So I made sure to share all that i know about this in this article, hope you like it, and help me improve it more by telling me in the comments sections or in my Twitter account Zenku. Finally, don't forget to practice, and practice, and again practice. See you in my next article.

Support

If you want to support me you can by:

• following me in my Twitter account, where I share my opinions, and skills hoping that I add some value to the tech community.

• Or by buying for me coffee, and this can make my whole week.

See you later , You Web cowboy :)