Создание макетов: лендинги и сайты-визитки

Отлично, вы освоили Figma и базовые инструменты! Теперь пришло время применить эти знания на практике. Мы сфокусируемся на двух самых востребованных типах сайтов для быстрого старта: лендингах и сайтах-визитках. Именно с них чаще всего начинают веб-дизайнеры-фрилансеры.

Лендинг и сайт-визитка: в чём разница?

Прежде чем начать дизайн, давайте разберёмся, что это за звери и чем они отличаются.

• Лендинг (Landing Page)

  • Цель: Побудить посетителя к одному конкретному действию: купить, оставить заявку, подписаться, скачать.
  • Структура: Обычно одна страница, заточенная под одно предложение. Есть яркий заголовок, преимущества, призыв к действию (CTA), отзывы, контакты.
  • Применение: Идеален для запуска продукта, акций, сбора лидов.
  • Пример: Страница нового онлайн-курса или распродажи в магазине.

• Сайт-визитка

  • Цель: Кратко и ёмко представить человека, компанию, их услуги или продукты.
  • Структура: Может быть одностраничным или состоять из нескольких страниц ("О нас", "Услуги", "Портфолио", "Контакты"). Содержит общую информацию, контакты, иногда небольшое портфолио или список услуг.
  • Применение: Подходит фрилансерам, небольшим компаниям, специалистам, которые хотят заявить о себе в интернете.
  • Пример: Сайт фотографа с галереей работ и контактами, или сайт частного юриста с описанием услуг.

Важно: Лендинги и сайты-визитки — ваш хлеб для быстрого старта и заработка. Их относительно просто создавать, они не требуют глубоких знаний в программировании и очень востребованы на рынке.

Создаём макет лендинга в Figma: пошаговая инструкция

Давайте сделаем простой макет лендинга для вымышленного онлайн-курса по веб-дизайну.

Шаг 1: Готовим артборд и сетку

1. Создайте новый фрейм (артборд): Нажмите F и выберите Desktop -> MacBook Pro 14". Это стандартный размер для десктопной версии.
2. Настройте 12-колоночную сетку:
   • Выберите фрейм.
   • В правой панели "Design" найдите "Layout Grid" и нажмите +.
   • Измените тип сетки с "Grid" на "Columns".
   • Установите:
     • Count: 12 (количество колонок)
     • Type: Stretch (растягивание)
     • Margin: 120 px (отступы по бокам)
     • Gutter: 24 px (расстояние между колонками)
   • Нажмите на иконку глаза рядом с "Layout Grid", чтобы скрыть или показать сетку.

Совет: Сетка — ваш лучший друг для аккуратных и выровненных макетов. Всегда используйте её!

Шаг 2: Делаем первый блок (Hero Section)

Hero Section — это первый экран, который видит пользователь. Он должен быть максимально информативным и привлекательным.

1. Фон: Создайте прямоугольник (R) по ширине фрейма. Залейте его цветом.
2. Заголовок (H1): Используйте инструмент "Текст" (T). Напишите цепляющий заголовок, например: "Веб-дизайн для быстрого старта: от идеи до первых денег".
   • Установите крупный размер шрифта (например, 48-64 px), жирное начертание.
   • Выровняйте по сетке.
3. Подзаголовок/Описание: Добавьте краткое описание курса, например: "Освойте Figma и конструкторы, создавайте эстетичные сайты и начните зарабатывать уже через месяц."
   • Размер шрифта меньше, чем у заголовка (например, 18-24 px).
4. Кнопка призыва к действию (CTA): Создайте прямоугольник для кнопки, закруглите углы (например, 8-12 px). Напишите текст "Начать обучение" или "Записаться на курс".
   • Залейте кнопку ярким акцентным цветом.
   • Текст на кнопке должен быть контрастным и читабельным.
5. Изображение/Иллюстрация: Добавьте релевантное изображение или иллюстрацию, которая визуально усилит сообщение. Используйте плагин Unsplash или Pexels для быстрого поиска.

Шаг 3: Добавляем информационные блоки

Далее идут блоки с информацией, которая убедит пользователя совершить целевое действие.

• Блок "Что вы узнаете" / "Преимущества":
  • Используйте заголовки H2 (например, "Что вы освоите на курсе?").
  • Создайте список из 3-4 пунктов, используя иконки (например, из плагина Iconify) и короткие описания.
  • Располагайте элементы равномерно, используя сетку.
• Блок "Отзывы":
  • Заголовок H2 ("Что говорят наши студенты?").
  • Создайте карточки для 2-3 отзывов: аватар, имя, текст отзыва.
  • Используйте цитаты, чтобы выделить текст.
• Блок "О преподавателе" (опционально):
  • Заголовок H2 ("Ваш наставник").
  • Фото, имя, краткое описание опыта.

Шаг 4: Футер (Footer)

Внизу страницы разместите футер с основной информацией.

• Контакты: Email, телефон, ссылки на соцсети.
• Навигация (опционально): Краткие ссылки на важные разделы (Политика конфиденциальности, Условия использования).
• Копирайт: © 2025 Название компании. Все права защищены.

Создаём макет сайта-визитки в Figma

Принципы те же, но акценты смещены на представление личности или компании.

Шаг 1: Подготовка и Hero Section

• Фрейм и сетка: Аналогично лендингу.
• Hero Section:
  • Заголовок: Имя и фамилия (для личного сайта) или название компании.
  • Подзаголовок: Ваша специализация или слоган (например, "Веб-дизайнер | Создаю сайты, которые продают").
  • Фото: Качественное фото человека или логотип компании.
  • Кнопка CTA: "Связаться со мной", "Посмотреть портфолио".

Шаг 2: Основные разделы

• Блок "Обо мне/О нас":
  • Заголовок H2.
  • Текст, рассказывающий о вас/компании, вашем подходе, ценностях.
• Блок "Услуги":
  • Заголовок H2.
  • Список услуг с кратким описанием и, возможно, иконками.
• Блок "Портфолио":
  • Заголовок H2.
  • Галерея из 3-6 ваших лучших работ (миниатюры с названиями). Каждая миниатюра может быть кликабельной.
• Блок "Контакты":
  • Заголовок H2.
  • Форма обратной связи (просто макет полей ввода), email, телефон, адрес (если есть).
  • Карта (если актуально).

Шаг 3: Футер

Аналогично футеру лендинга.

Практическое задание

Ваша задача — создать в Figma макет одностраничного сайта-визитки для себя как веб-дизайнера.

1. Создайте новый файл в Figma.
2. Настройте фрейм и 12-колоночную сетку для десктопной версии.
3. Разработайте Hero Section:
   • Ваше имя и специализация.
   • Краткое описание ваших услуг или подхода.
   • Место для вашего фото (можно использовать заглушку).
   • Кнопка "Связаться со мной".
4. Добавьте раздел "Услуги":
   • Перечислите 3-4 услуги, которые вы могли бы предложить (например, "Дизайн лендингов", "Сайты-визитки", "Прототипирование").
   • Кратко опишите каждую услугу.
5. Добавьте раздел "Портфолио":
   • Создайте 3 блока-заглушки для будущих работ (можно просто прямоугольники с надписями "Проект 1", "Проект 2").
6. Создайте футер с контактами (email, ссылки на соцсети).

Помните о принципах эстетики! Используйте то, что вы узнали о композиции, типографике и цвете. Старайтесь, чтобы ваш макет выглядел чисто, аккуратно и профессионально.

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