(English) How To Make Beautiful Website Design

عفوا، هذه المدخلة موجودة فقط في الإنجليزية الأمريكية. For the sake of viewer convenience, the content is shown below in the alternative language. You may click the link to switch the active language.

WEBSITE design turns into a design that is nostalgic for some reason!
I want to make a more sophisticated design, but I don’t know where to fix it!
So that’s it! At first, anyone who aims to design a website is not confident in their design and cannot show the design with confidence. This time, we will carefully explain the points of creating beautiful Website designs so that we can eliminate such concerns! Xploid media gives you more detail about creating the website. If you Want to know more then check out my blog
I have been designing web sites and DTP designs for the first time in about 18 years, and have worked with major advertising agencies to design several websites, including famous companies. At first, he was worried about the design, trained with “hard orders” and “rigorous words” from clients, and grew up!
In that experience, I summarized how to create a sophisticated and beautiful WEB design, a design that can be conveyed, and a design that can attract customers from nine angles.
Also, let’s introduce a book that helped learn web design! I hope that it will be helpful for those who want to learn WEB design and those who want to go further, so please read this article!
The design becomes beautiful with “margin and balance”

What is balance in WEB design

From here on, the basics of WEB design, first of all, balance is very important in creating a beautiful WEB design. This is a part that cannot be immediately grasped as a sensation unless you study and study a lot of design examples.
Be aware of the lump of design
One of the most easy-to-understand adjustment methods in the balance of web design is that it is important that these photos, texts, and figures are regarded as “chunks” and that the chunks are arranged in a well-balanced manner.
The chunks should not be too clumped in one place, and each needs a reasonable margin. In particular, the balance between the top, bottom, left and right of this block is important. When it comes to the left, it is necessary to arrange it in the right balance when you look down at the entire design, such as the right.

The key to a beautiful layout with a balance of gravity!

Specifically, in the things which are arranged as an element of design, in the arrangement of dark elements, such as photos and solid color, the center of gravity balance is the state, such as those taken look beautiful!
For example, if you look at the design in this figure, it looks at first glance, but if you look at the red-framed part as a dark color arrangement like a photo in the design element, it is all on the left side, Do you feel an unstable impression?
So what does this look like when placed in a balanced manner?

Design to add balance and play

Of course, a well-balanced design like this is fine, but if you add ” play ” or ” break ” to the design somewhere, it will add a bit of thickness to the design! However, if you don’t just add play, but also add some play, but the overall balance isn’t that good, you can’t call it a beautiful design!
So, this time, I made a design with play as a sample. A fictitious car dealer website. The diagonally inserted design gives a strong impression on the website and gives the car a product with an advanced image and a sense of speed.

How to get beautiful margins
Next is how to get the margin that is consistent with the balance. How much space, such as “the margin between character paragraphs”, “the margin around the image”, and “the margins of the right and left columns”, will make a beautiful and beautiful WEB design?
This depends on the content of the website. For example, when you want to pack a lot of information on one screen, such as an information site, make the margins smaller. If you want to prioritize beauty like a photo portfolio site, make it more beautiful with more margins.
“Character size and line spacing” is also difficult to read if it is too open, and it is difficult to read even if it is too narrow.

There is no single, correct answer to this margin, but it depends on the content of the site, the amount of text, and the number and type of elements.

Examples of margins and line spacing

For example, in the following example, I think that the impression before modification is cramped, but you can see that the beauty and visibility for viewing are different by taking appropriate margins and line spacing. Perhaps it has changed to a refreshing impression.
Changing the margins, line spacing, and size of the same design element changes not only the legibility but also the impression of the site. After understanding these, it is necessary to study by looking at the example site and to learn with your body as your sense.

Don’t just copy the example of WEB design.

No one can make a beautiful web design from the beginning. The most important thing in designing a beautiful web design is to collect a lot of example sites and see a lot. And as an example, what is different about this web design, not just looking at the web design? Why does it look beautiful? Why is it easy to see? It is necessary to study WEB design on your own from the viewpoint of!
In that sense, some practice copying the example design as it is, but it is not wasteful, but simply copying does not give an understanding of why it is. It is important to repeat the method of experimenting with the example design method on your website instead of just copying it.
Furthermore, the trend of WEB design evolves every day in proportion to the progress of technology! While studying the latest technical information, it is necessary to always gather and study new WEB designs from overseas!

WEB design changes with “font”

Choosing fonts in web design is one of the factors that will change the impression of the site. Whether it’s Mincho or Gothic depends on the content of the site.
It is important to know what fonts are used on a so-called royal road, but unlike DTP, fonts in web design use device fonts except for imaging fonts, so all fonts are used. It is not usable, and the font changes depending on the viewer even on the same site. You have to understand that when designing.
However, as mentioned earlier, the technology of WEB sites advances. Recently, the technology of WEB fonts has come out, so it is not always necessary to use the fonts in the device. Free web fonts such as Google fonts are coming out, so let’s find out more about font selection!
Knowing a lot of fonts that can be used naturally expands the range of designs, and using beautiful fonts will greatly improve the quality of design!

March 28, 2020