How to start web design?

Question

Design

How to start web design for a beginner?
Have a good understanding of the usability of program interfaces, applications and websites. Engaged in the development of prototypes in special. software, BUT there was a desire to grow and focus only on web design. And yes, I am good at Photoshop. Previously, I have never implemented a ready-made website layout intended for transfer to a layout designer for layout, this was done by a web designer based on my prototypes. Accordingly, I know little about the technical part of creating web design.
Therefore, I have a mountain of questions related to web design. One of them:
Where to get up-to-date information on the recommended layout standards for sites, you are interested in the width, the length of the site itself, and the width of the content area. Font sizes, etc. What is a grid and how to set it up?
(Now I draw information from open sources as much as possible, but unfortunately the information is different everywhere)

Answer 1

If you have been prototyping, then you (in theory) should understand what a grid is.
It is inconvenient to make layouts in Photoshop, for this there is now special software such as Figma, Sketch. They have the tools to fulfill 90% of the needs of modern websites. In terms of design, of course. Separate elements (such as complex icons, SVG masks, graphic elements) already need to be done in other programs (Illustrator, Photoshop, etc.).
Moreover, you need to have an understanding of the layout (HTML, CSS) - and the deeper the better. Otherwise, you can “design” those things that are either technically impossible or extremely difficult to implement.
Screens (typical in width; no intermediate values):
· 1920 - most "large" monitors have this resolution, but I would not take it as a standard. But it is desirable to take into account this permission too.
1300 - a conditional certain standard (laptops).
1024 Tablets (iPad 9.7" landscape).
768 Tablets (iPad 9.7" portrait).
up to 767px - smartphones.
I chose the following screens for myself, with which I start:
1. from 0 to 767
2. from 768 to 1023
3. from 1024 to 1199
4. from 1200 to 1300
5. from 1301 to 1900
6. from 1900 to 2500
But then again - on a specific project, the above ranges of values ​​\u200b\u200bmay change or even be combined, intermediate ones can be added, etc. For example, if your main resolution is 1360 pixels (laptops), but the so-called. boxed-layout, then you need to make the layout smaller so that the borders on the sides are visible + take into account the width of the Windows scrollbar (16–17px).
update. Just as other people have rightly said, don't forget the width of the content container, it usually has a fixed maximum width, but that also depends on the design.

Answer 2

The layout (!!!) is always 1920 in width.
It’s better to learn how to use the bootstrap grid right away (google it), save yourself a couple of years.
There are ready-made grids on the Internet, you can write to me, I will give my grid, which I often use. For its proper use, everyone from Kaliningrad to Khabarovsk will sing about you, both layout designers, project managers, and clients.
Font size - for headings from 20 to 35 pixels.
For text - from 14 to 16 (no more!)

Answer 3

Strange questions from a person who did DESIGN... Asking about dimensions, grid.... How did you work in general? Or go layout designers from you fired?
Yes?