Как называется такой дизайн? Как научиться правильно верстать такие макеты?

Question

[Gimir]

Привет! На работе дали сложный макет, с кривыми линиями по всей длине страницы, типа линия начинается на одной точке и заканчивается в конце страницы. А на протяжении всей кривой расположены кнопки, тексты, и тд.
Макет показать не могу, но вот картинка, на которой дизайн примерно похож.
Вопрос - как правильно верстать такие страницы? Есть ли для этого какие то методы? Или все делают нестандартными способами?

Comments

[mipfikus]

это инфографика

Answer 1

[Сергей Ермилов]

Называется инструмент Timeline. Ниже примеры того как можно делать на Bootstrap:



Развлекайтесь.

Answer 2

[Стас Хитрич]

Если верстать тяжело, можете попробовать плагин, по типу: LeaderLine
Но вообще разрезать на куски ваш макет и поставлять SVG построчно. Для меня всё выглядит как пара строк, разбитых по три столбца и псевдоэлементами соединения

Answer 3

[Antony Bark]

если задача сверстать 1:1
0. этот скрин кидаете бэкграундом (размер точно в пикселях) на body, выравниваете его как вам надо по краям
1. Вытаскиваете из рисунка все тексты (заголовки и блоки) и верстаете страницу дивами, вкладывая в них H2(numbers), H3(titles) и P(параграфы) == размерами шрифта и отступами регулируйте максимальное совпадение (перекрытие) бакгроунда вашими блоками с текстом(заливка у блоков прозрачная, чтобы видеть нижний скрин).
2. Отделяете на скрине графику от текстов, тексты удаляете (в фотошопе например), и кладёте получившееся также бэкграундом вместо первоначального скрина
3. передайте текстам цвета
Готово

если стоит задача адаптивности, то бэкграунд нарезайте на части, (целыми кусками, не перерезая линии) и кидайте их бэкграундами в дивы

лучше освоить любую векторную прогу и переводить растровые рисунки в вектор, далее в SVG, с ним вам будет удобнее работать

Answer 4

[Николай Чуприк]

Макет на картинке прост до безобразия. Тут вообще всё линейно, нет никаких кривых линий. Тупо режется на блоки и укладывается хоть в grid, хоть во flex, хоть по старинке в table.

Comments

[Hulk a]

Конкретнее отвечайте

[Denioo]

Hulk a, как он еще мог конкретнее ответить? Или ему полностью решение дать? Какая в этом вопросе должна быть конкретика? Берешь режешь на блоки и верстаешь - это элементарщина.