Как верстать сложные дизайны?

Question

[t800zippygod]

Всем привет скажите, пожалуйста, как верстать всякие замысловатые макеты:
— с больши количеством геометрии на фоне,
— где отсутсвует четкая блочная структура и тд.
Самая большая проблема в их адаптации под размеры экрана.
Может есть какие-то паттерны и кто-то ими поделится))

Например, есть дизайн с большим количеством геометрических фигур, все они расположены в рандомном порядке. Я бы сделал все фигуры через css и расположил их через абсолютное позиционирование.
Но ад начинается даже при небольшом изменении размеров экрана: все «поедет» и придётся каждый блок подстраивать руками. Если есть хоть какие-то варианты ускорить процесс верстки подобных макетов, буду рад узнать их

P.S. Картинка с примером дизайна не загружается((

Comments

[Ярослав Иванов]

Руками

[t800zippygod]

Ярослав Иванов, спасибо, хотелось бы что-то полезное услышать

[Ярослав Иванов]

t800zippygod, Какой вопрос такой ответ. Как строить сложные дома? Руками. С опытом все придет.

[Ankhena]

Например, есть дизайн с большим количеством геометрических фигур, все они расположены в рандомном порядке. Я бы сделал все фигуры через css и расположил их через абсолютное позиционирование.

Если они фоновые, то обычно достаточно bg size и bg position.
Смотрите, какие из фигур можно объединить в одну svg (или не svg), а какие независимые.

Но ад начинается даже при небольшом изменении размеров экрана: все «поедет» и придётся каждый блок подстраивать руками. Если есть хоть какие-то варианты ускорить процесс верстки подобных макетов, буду рад узнать их

Так не задавайте размеры в px.
Используйте %, vw, vh, calc
В каких-то макетах это полностью решит проблему, в других нужно будет дописывать media.

Если есть хоть какие-то варианты ускорить процесс верстки подобных макетов, буду рад узнать их

С опытом ускоритесь.

[t800zippygod]

Ankhena, я и пишу в процентах, но дело в том, что блоки должны находиться в определенном положении друг к другу. При изменении вьюпорта размеры пересчитываются, но положение блоков друг относительно друга меняется, чтобы их опять скомпоновать надо опять кучу времени тратить.
есть вариант с svg, но там тоже полно камней подводных, например, трансформации очень специфично работают

[Ankhena]

t800zippygod,

надо опять кучу времени тратить

Возможно, и что?

Можно бросить верстку совсем, можно не брать такие макеты.

[t800zippygod]

Ярослав Иванов, я задал вопрос для того, чтобы мне дали какие-то полезные советы по конкретному вопросу (читайте внимательнее если не поняли).
Ваш "совет": больше работать, мне ничем, к сожалению, не помог.
Вы когда просили учительницу математики помочь разобраться в графиках, она Вам говорила: "Ты дольше в тетрадку смотри и все понятно станет" или что-то объясняла?

[Ярослав Иванов]

t800zippygod, это не конкретный вопрос а абстрактный. Что есть сложной? Все измеряется потраченные временем. Причём тут математика? Одно дело человек не может сложить 2 числа и его научат другое что он и чисел то не знает. Вы же, судя по вопросу, азами вёрстки обладаете тогда к чему вопрос? Нет каких-то магических правил, которые вам якобы помогут. Я дал совет. Берете и делаете. Я сам через это прошёл и подобных вопросов не задавал.

Answer 1

[Алексей Скляров]

Ну а как человек учится ходить? Пробует, пробует и еще раз пробует. У вас задача такая же, понимание приходит с опытом. Сейчас вы можете только абсолютное позиционирование предложить, потом вы узнаете об svg, размерах в процентах, размерах в пропорциях окна браузера, узнаете что есть такая интересная вещь, как clip-path, и вся ваша геометрия уже покажется не такой сложной.

Двигайтесь от простого сложного, зачем сейчас пытаться сверстать то, о чем вы спрашиваете, если вы, допустим, не можете еще реализовать свою сетку?

Можете посмотреть макеты в интернете (сложные на ваш взгляд), открыть исходный код и посмотреть как это сделано. Само по себе решение во сне вам конечно же не придет. Либо подсмотрели, либо рассказали, либо сами додумались путем проб и ошибок.