Website design: graphic layout (text and pictures) and modular grid, which is better?

Question

User interface

Hello. I am a beginner website designer.
I came across different approaches to wrapping (specifically graphical, I mean not html) text and images by different website designers and I want to determine for myself what style it is worth working in.
Suppose you need to design a business card site.
1 approach - everything is simple and linear , as here, for example,
https://dribbble.com/shots/1826549-ISPRIVE-Luxury-...
https://dribbble.com/shots/1541853-Two-Mountains/a. ..
A picture, followed by text, then another picture, and so on. This approach is characteristic primarily of Western designers. Probably, it’s easier to make adaptive sites this way, you can even do without a design layout. However, this is already a template. I'm not saying that templates are bad, it's clear that usability is higher the more familiar the structure is, but still it seems to me that then a designer is not needed, a programmer (or html layout designer) can do everything.
2nd approach - non-standard content layout , for example,
prntscr.com/6zg2em
prntscr.com/6zg2p5
prntscr.com/6zg2tb
In my opinion, it looks nice and unusual, but it seems not very convenient. It is not clear how convenient it is to turn such a design into code, how adaptive such a design is, etc.
Also advise what to read / see on the graphic layout of the site, please. I read a lot of Russian-language books about grids, but there the emphasis is on printed materials, not website design.

Answer 1

lavanden :
>Suppose you need to design a business card website. In this case, which layout option is more relevant
? In web design, there is no such thing as, for example, in baroque and rococo architecture or something that would require different approaches, technical processes and tools. Here you have one technical process, photoshop and google. The sooner you understand this and start simply to draw persistently, the faster it will start to turn out.
And according to your questions, it seems that they arise due to an insufficient number of layouts (html/css/js) layouts. The ability to typeset improves the level of web design at least twice. that often the design is done without photoshop.

Answer 2

Let's not mix soft, white and cold in one pile.
1. Rococo or baroque or gothic differ only in size and bows.
At the heart of everything is only a grid, that is, the Golden Ratio. This is a general principle for books / newspapers, as well as for websites, architecture and everything else. Those. even badly done on the grid will be perceived better than unmistakable, but as God put it on the soul. This is the law!
An experienced artist/designer will intuitively scatter everything across the page with a margin of error of 1-2 pixels if he were to use a grid. But a very experienced one, after spreading, will still check on the grid.
2. Law number 2. A good designer knows exactly how to follow the rules and follows it. Everything will be smooth, without prosirs and ups.
A very good designer knows all the rules and knows how to correctly break them without breaking the laws and fundamentals. regulations.
3. Law number 3. ALL SITES ARE BUSINESS! And only this makes landings, business cards, shops, promotional, corporate, portals and everything else related.
But approaches to all should be different, although they should obey the general rules (Golden Ratio, user behavior and expectation, standards, etc.).
4. In your examples, the first two are very well-made landings, taking into account trends (large spaces, flat, picture backgrounds, carpet, differently colored viewport, etc.).
The other three have 2 landing catalogs. I don’t know how they look in the viewport, but I think that they never interfere or make viewing details uncomfortable.
Another one is a shop. Here I could argue with the author, because. I think that on the product purchase page there is no longer room for horizons and a good view from the window, only to encourage you to press the "Buy" button.
5. On your question: throw a grid into the bottom layer (depending on what proportions you have chosen), quickly throw rectangles in accordance with your ideas. This is the structure of the page.
And then we start filling these blocks.
I do it in a completely different way (most likely because I haven’t been a beginner for a long time): I don’t sit down to do anything until I have a general picture in my head of what I want to get. Then I make a quick sketch-concept of the structure in a vector program (I use Corel for this, because it is incomparably better sharpened for drawing).
Showed.
Again, in a vector (because it is an order of magnitude faster than in FS), I add detail: backgrounds, pictures, text fish, little things. I save it as a picture and top it up with absolutes for active elements - menus, buttons, selects, pop-ups, accordions, sliders, etc., everything that the customer can play with. I save as html, I send a link.
After editing, I start typesetting cleanly.
Notice, without Photoshop at all until the last stage, when every little thing is needed, because. I consider the use of FS for website layout to be a rudiment.

Answer 3

About reading:
artgorbunov.ru/bb/soviet/20140519 - about basic layout elements and layout principles. Start with this article and follow the links. The value of the material is that it is presented concisely and clearly.