Дизайн и конверсия

Как создать макет сайта в Figma?

Евгений, Челябинск 1,9 тыс. просмотров

Скачал Figma, посмотрел пару уроков, но не понимаю, с чего начинать макет. Тексты для лендинга у меня уже готовы - десять блоков, нужно их разложить по экрану красиво и по делу. Подскажите порядок действий.

Дмитрий Акиндинов разработчик лендингов, 15 лет практики

ответил

Порядок такой: сначала создаёте фрейм под нужный размер экрана - 1440 px для десктопа, 375 px для мобильного, - потом строите сетку с колонками и отступами по краям, и только после этого раскладываете блоки текста без оформления, просто прямоугольниками и надписями. Дизайн - цвета, шрифты, отступы - добавляется в последнюю очередь, а не в первую.

Начинайте с мобильной версии, а не с десктопа: на телефоне блоки сами встают в один столбец, и сразу видно, какой текст длинный и не помещается, какую картинку можно убрать без потери смысла. Десктопная версия после этого собирается быстрее, потому что структура уже проверена на самом узком экране.

Для блоков лендинга стоит сразу использовать Auto Layout - функцию, которая сама растягивает контейнер под текст и держит отступы одинаковыми, если текст станет длиннее или короче. Без неё при любой правке текста придётся вручную сдвигать всё, что расположено ниже.

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

Подробный разбор Сначала телефон, потом компьютер: как это меняет макет лендинга
Не нашли свой вопрос

Задайте его напрямую

Отвечаю сам, на почту, обычно в тот же день. Разбор самых частых вопросов потом попадает в этот раздел.

Похожие вопросы

Все вопросы темы "Дизайн и конверсия"

Помогу выбрать

Сомневаетесь — напишите, разберёмся за 10 минут

Расскажете про ваш бизнес и задачу — подскажу, что нужно: лендинг, многостраничник или вообще не сайт. Без обязательств, бесплатно.

Отвечаю в течение 15 минут в рабочее время (будни 11:00–20:00 МСК). Если удобнее e-mail: 9123578@gmail.com

Telegram TG MAX MAX Звонок