Gimir
@Gimir
JavaScript dev

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

Привет! На работе дали сложный макет, с кривыми линиями по всей длине страницы, типа линия начинается на одной точке и заканчивается в конце страницы. А на протяжении всей кривой расположены кнопки, тексты, и тд.
Макет показать не могу, но вот картинка, на которой дизайн примерно похож.
Вопрос - как правильно верстать такие страницы? Есть ли для этого какие то методы? Или все делают нестандартными способами?
5f103ef3c2ead179559012.jpeg
  • Вопрос задан
  • 1120 просмотров
Решения вопроса 3
sergeiermilov
@sergeiermilov
Веб-дизайн, фронтенд и WordPress разработка
Называется инструмент Timeline. Ниже примеры того как можно делать на Bootstrap:



Развлекайтесь.
Ответ написан
Комментировать
Snova_s_vami
@Snova_s_vami
JavaScript ES5-8, TypeScript, Angular
Если верстать тяжело, можете попробовать плагин, по типу: LeaderLine
Но вообще разрезать на куски ваш макет и поставлять SVG построчно. Для меня всё выглядит как пара строк, разбитых по три столбца и псевдоэлементами соединения
Ответ написан
Комментировать
tolfy
@tolfy
Фирменный стиль
если задача сверстать 1:1
0. этот скрин кидаете бэкграундом (размер точно в пикселях) на body, выравниваете его как вам надо по краям
1. Вытаскиваете из рисунка все тексты (заголовки и блоки) и верстаете страницу дивами, вкладывая в них H2(numbers), H3(titles) и P(параграфы) == размерами шрифта и отступами регулируйте максимальное совпадение (перекрытие) бакгроунда вашими блоками с текстом(заливка у блоков прозрачная, чтобы видеть нижний скрин).
2. Отделяете на скрине графику от текстов, тексты удаляете (в фотошопе например), и кладёте получившееся также бэкграундом вместо первоначального скрина
3. передайте текстам цвета
Готово

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

лучше освоить любую векторную прогу и переводить растровые рисунки в вектор, далее в SVG, с ним вам будет удобнее работать
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@choupa
Архитектор (обычный, который строит)
Макет на картинке прост до безобразия. Тут вообще всё линейно, нет никаких кривых линий. Тупо режется на блоки и укладывается хоть в grid, хоть во flex, хоть по старинке в table.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы