Урок 1. Знакомство с веб-дизайном.
Узнаем, чем занимается веб-дизайнер и подробно разберём, что такое лендинг и какие структуры у него бывают. Потренируемся в генерации промпта в чат-боте “Нейрокот” и даже создадим свой первый сайт с помощью нейросети от Tilda.
▶️ Время чтения и просмотра: ~ 1ч
⏱ Время выполнения задания: ~ 30мин
Приветствуем всех на интенсиве по веб-дизайну, впереди нас ждёт 3 урока по созданию лендинга на Tilda, а также вебинар с CEO университета Zerocoder и другие активности!
Эксперт интенсива — Никита Брусков
10+ лет опыта работы веб- и нейро-дизайнером:
- На профессиональном уровне владеет инструментами Midjourney, Leonardo, ai, Recraft, Flux, Dalle-3, Photoshop (с его генеративными функциями). А также работает с видео-нейросетями Runaway Gen-3, Kling, Luma и музыкальными Suno и Udio.
Переходи на канал эксперта, чтобы быть в курсе актуальных новостей из мира нейросетей и веб-дизайна
- Поймем структуру и элементы лендинга.
- Научимся правильно составлять промпт для работы с нейросетью.
- Научимся составлять техническое задание (ТЗ) для генерации лендинга с использованием AI.
Что мы получим в результате прохождения интенсива?
Полноценный лендинг с гармоничным дизайном для доставки здоровой еды, включающий:
- тексты, сгенерированные через Нейрокот — нейросеть от Zerocoder;
- визуальный контент от Leonardo;
- анимации и интерактивные элементы, созданные в Tilda.
2. Веб-дизайнер: что это за профессия и чем предстоит заниматься?
Веб-дизайнер разрабатывает визуальное оформление и пользовательский интерфейс веб-сайтов и приложений. Это не просто создание красивых картинок, основная задача — спроектировать интерфейс, который будет удобным и приятным для пользователя.
✅ Веб-дизайнер — это специалист, который разрабатывает визуальное оформление и пользовательский интерфейс веб-сайтов и веб-приложений.
Основные направления веб-дизайна:
- UX-дизайн (User Experience): фокусируется на пользовательском опыте, который включает удобство и интуитивность взаимодействия.
- UI-дизайн (User Interface): фокусируется на визуальном интерфейсе, отвечающем за стиль и эстетику.
Основные задачи веб-дизайнера:
- Разработка структуры и интерфейса сайта;
- Подбор шрифтов, цветов, изображений (UI);
- Проработка удобства использования (UX).
Давайте разберём основные типы продуктов/сайтов, которые создаёт веб-дизайнер:
- корпоративные сайты представляют компании в интернете, рассказывают о деятельности и предоставляют контактную информацию. Основная цель — показать, что компания существует и представить основной функционал ее деятельности. Обычно это многостраничные сайты с разделами "О компании", "Продукты", "История". Пример: сайты школ онлайн-образования или крупных предприятий;
- интернет-магазины — платформы для продажи товаров или услуг. Они бывают как крупными (например, Wildberries, Ozon), так и локальными, продающими специфические товары. У них чаще всего есть католог товаров с разными категориями и фильтрами, корзиной и личным кабинетом;
- сайты-портфолио предназначены для представления работ конкретного специалиста или студии. Используются фотографами, дизайнерами, программистами и другими профессионалами;
- блоги — сайты для публикации статей, заметок, обзоров. Здесь авторы делятся информацией с аудиторией;
- промо-сайты создаются для продвижения акций, мероприятий или продуктов. Часто содержат яркие анимации и интерактивные элементы. Похожи на лендинги;
- интерактивные веб-приложения — страницы с элементами взаимодействия, такими как калькуляторы, квизы или карты;
- лендинги — одностраничные сайты с целью привлечения внимания к продукту, услуге или мероприятию. Лендинги могут содержать один экра — блок, а могут быть с долгой прокруткой и множеством блоков.
3. Лендинг: особенности и структура
Поговорим подробнее о лендинге, ведь именно его нам и предстоит создавать.
✅ Лендинг — это одностраничный сайт, главная цель которого — побудить пользователя к совершению ключевого действия (конверсию). Это действие может быть разным: оставить заявку, ознакомиться с акцией, подписаться на рассылку и многое другое.
Лендинги пользуются спросом благодаря своей эффективности и простоте
- фокус на одной цели: вся информация сосредоточена на одном продукте или услуге, что помогает пользователю сосредоточиться на главной задаче;
- высокая конверсия: структура лендинга спроектирована так, чтобы максимизировать вероятность целевого действия;
- быстрая разработка: создание лендинга занимает гораздо меньше времени по сравнению с корпоративными сайтами — обычно до недели.
- сбор заявок или контактов: особенно актуально для сложных и дорогих продуктов (недвижимость, автомобили и пр.);
- продажи: например, пользователь может купить товар или заказать услугу;
- привлечение внимания: информирование о мероприятии, промо-акции или событии;
- повышение узнаваемости бренда: например, создание уникального контента, которым пользователи захотят делиться;
- тестирование гипотез: проверка различных подходов, дизайнов или аудиторий для выявления наиболее эффективных решений.
Структура лендинга — что должно быть на странице?
- главный экран (Hero section) — это первое, что видит пользователь, заходя на сайт. Здесь важно сразу произвести впечатление:
- визуальный элемент: крупное изображение продукта, человека или анимация — что-то интересное, что бросается в глаза;
- заголовок: уникальное торговое предложение (УТП), которое должно быть ярким, четким и привлекать внимание;
- подзаголовок: уточняющая информация;
- призыв к действию (Call To Action): например, кнопка «Узнать больше» или «Оставить заявку». Кнопка должна быть контрастна фону и хорошо видна.
- Блоки доверия: эти элементы помогают установить контакт с пользователем:
- преимущества: выгоды от использования продукта или услуги;
- целевая аудитория: описание, для кого подходит продукт;
- описание продукта или услуги: более детальная информация;
- контакты: адрес, телефон, социальные сети компании;
- гарантии/возражения/вопросы: устранение возможных сомнений пользователя;
- отзывы и кейсы: демонстрация успешных историй (отзывы) или результатов (кейсы).
- Призыв к действию (Call To Action):
- покупка/бронирование услуги или товара. Вариант “купить” можно рассматривать как наиболее стрессовый, поэтому лучше выбирать другие формулировки действия;
- заказать звонок/консультацию: более мягкий варинат, побуждающий к действию;
- скачать какой-то материал: бесплатный материал (гайд, брошюра, чек-лист), также может называться лид-магнит (термин из маркетинга);
- калькулятор расчёта стоимости: рассчитать стоимость услуги с помощью калькулятора (или другие виды взаимодействия пользователя с интерфейсом);
- подписаться на рассылку или канал: призыв к этому действию чаще всего размещают в самом конце лендинга.
4. Как дизайнеру помогают нейросети
Если тебе необходимо поделиться экраном компьютера с куратором, пожалуйста, воспользуйся инструкцией по созданию скриншотов ниже:
Гайд_Как_сделать_скриншот_экрана_.pdf
Перейдём к работе с нейросетями и разберёмся, как они могут помочь нам в работе.
Прежде всего, нейросети оказывают значительную помощь на этапе генерации идей. На текущий момент полностью создать сайт только с помощью нейросетей невозможно. Например, мы не можем просто открыть MidJourney, запросить "сделай сайт", и получить готовый результат. Однако разработки в этой области активно ведутся. Вероятно, в будущем появятся инструменты, позволяющие создавать сайты, нажатием одной кнопки.
Но даже в таких условиях важно обладать базовыми знаниями. Нужно понимать:
- Какие блоки на сайте действительно необходимы?
- Какие из них можно исключить?
- Как правильно оформлять баннеры, подбирать цветовую палитру и шрифты?
Эти навыки остаются необходимыми, даже если большую часть работы берет на себя нейросеть.
- Помощь с идеями. Нейросети работают как виртуальный коллега, способный предложить новые варианты. Это полезно как на этапе выбора цветов и шрифтов, так и при определении структуры сайта, текстов и других элементов;
- Создание иллюстраций, иконок, фотографий, баннеров. Сейчас, когда мы стремимся избегать шаблонных изображений с фотостоков, нейросети становятся отличным решением. Более того, уже сегодня заказчики могут специально просить использовать изображения, сгенерированные нейросетями. Конечно, не все это поддерживают, но важно уметь работать как с нейросетями, так и без них;
- Генерация текста. Даже если мы не профессиональные копирайтеры или маркетологи, нейросети помогут создавать качественный текст для помощи в наполнении сайта. Многие специалисты уже активно используют их в своей работе, а многе заказчики будут только рады, если дизайнер сможет выполнить комплекс услуг;
- Помощь в подборе шрифтов и цветовых палитр. Это еще одна задача, где нейросети могут быть полезны, особенно, если вы новичок.
Теперь поговорим о главной составляющей при работе с нейросетями, а именно — промпте.
✅ Промпт — это текстовый запрос, который мы передаём нейросети для выполнения задачи. Промпт описывает, что именно нужно создать или выполнить, и от его качества зависит точность результата.
- Цель. Что именно нужно сделать?
- Детали задачи. Например, что должно быть включено, какие акценты нужно расставить.
- Аудитория. Для кого предназначен результат?
- Стилистика. Формат изложения — веселый, серьезный, строгий и т. д.
- Формат результата. Например, текст списком, таблицей или в виде сплошного текста.
- Дополнения. Особые пожелания или уточнения.
[Цель] + [Детали задачи] + [Аудитория] + [Стилистика] + [Формат] + [Дополнения] = Идеальный промпт ✨
✅ Чат-бот “Нейрокот” — чат-бот в Телеграм, который работает на основе технологии GPT3.5 (от OpenAI). Чат-бот разработан университетом Zerocoder и стабильно работает на территории РФ. “Нейрокот” может вести беседы, распознавать текст и аудиосообщения.
В процессе работы мы создадим структуру сайта, подберём для него изображения и текст.
🤖 Специально для участников интенсива мы предоставляем бесплатный доступ к Нейрокоту по ссылке: https://t.me/zero_neuro_cat_bot?start=ABHA
Практическая работа: создание структуры сайта с помощью нейросети
Мы начинаем с разработки шаблона промпта, который поможет нейросети понять наши задачи. Этот процесс гибкий, и его можно адаптировать под разные проекты, включая создание лендинга для компаний или других целей.
Эксперт подготовил промпт, который организован по определенной структуре для достижения чёткого результата:
- В какой роли будет выступать нейросеть + цель задачи.
- Целевая аудитория (ЦА) — на кого ориентирована задача. Если тебе трудно определить ЦА, то перед составлением промпта для структуры можно попросить нейросеть определить твою ЦА, задав соответствующий промпт с описанием проекта.
- Стилистика — пожелания к дизайну.
- Дополнения в нашем случае, это некий ориентир для нейросети, эксперт предложил лучшие книги по веб-дизайну. Можно также использовать работы других дизайнеров.
- Формат ответа — в каком виде нейросеть вернёт нам информацию.
⚠️ Если ты ещё не подключил Нейрокота, то переходи по ссылке: https://t.me/zero_neuro_cat_bot?start=ABHA
Ты можешь использовать приведённый шаблон или изменить его под себя:
Пример промпта от эксперта для Нейрокота
Я хочу чтобы ты взял на себя роль эксперта в области веб-дизайна и маркетинга. Мне нужно разработать структуру лендинга для компании, которая занимается [услугой доставки здоровой еды]
Целевая аудитория: [Описываем ЦА, можно отдельно попросить ChatGPT описать]
Ключевые действия, которые должны быть на сайте:
- Оформление заказа на доставку еды;
- Консультация с нутрициологом или специалистом по питанию;
- Скачать PDF с примером меню или рекомендациями по питанию.
- Лаконичный и современный дизайн;
- Простая и интуитивно понятная навигация;
- Не более 8 экранов (не считая футер).
Дополнительно: Возьми за основу опыт лучших мировых веб-дизайнеров, и информацию с таких книг как
- «Не заставляйте меня думать» Стив Круг;
- «Информационная архитектура в Интернете» Морвиль Питер, Розенфельд Луис Веб-дизайн: книга Джесса Гарретта. Элементы опыта взаимодействия;
- и прочие.
Ответь мне в виде списка с краткими пояснениями для каждого блока.
2. Сначала формируем контекст. Представляем, что нейросеть берет на себя роль эксперта в конкретной области. Например: "Я хочу чтобы ты взял на себя роль эксперта в области веб-дизайна и маркетинга”. Этот шаг универсален. Если задача касается другой сферы (например, составление рациона), мы просто указываем, что нейросеть должна "представиться" диетологом или специалистом по питанию.
3. Затем описываем задачу. Пример для лендинга: "Мне нужно разработать структуру лендинга для компании, которая занимается [услугой доставки здоровой еды]." Если речь идет о другом проекте, заменяем ключевые слова на соответствующие.
4. Определяем целевую аудиторию. Целевую аудиторию можно указать двумя способами:
- если есть информация от заказчика, указываем ее: "Этот сайт предназначен для людей от 35 лет с высоким уровнем дохода."
- если данных нет, можно попросить нейросеть сформулировать варианты: "Определи целевую аудиторию для услуг доставки здоровой еды."
5. Перечисляем основные действия, которые пользователь должен совершить на сайте. Например:
- оформление заказа на доставку еды;
- консультация с нутрициологом или специалистом по питанию;
- скачать PDF с примером меню или рекомендациями по питанию.
Если мы не уверены, нейросеть может предложить 2–3 подходящих действия.
6. Описываем предпочтения по стилю сайта:
- лаконичный и современный дизайн.
- простая и понятная навигация.
- ограничение по количеству экранов: "Структура должна включать не более 6 экранов (без учета футера)." Футер обычно содержит ссылки на соцсети, юридическую информацию и не считается полноценным экраном.
7. Можно добавить рекомендации по книгам или подходам, на которые должна ориентироваться нейросеть: “Возьми за основу опыт лучших мировых веб-дизайнеров, и информацию с таких книг как:
- «Не заставляйте меня думать» Стив Круг
- «Информационная архитектура в Интернете» Морвиль Питер, Розенфельд Луис
- Веб-дизайн: книга Джесса Гарретта. Элементы опыта взаимодействия
- и прочие”
8. Запрашиваем нужный формат. Пример: "Ответь мне в виде списка с краткими пояснениями для каждого блока."После ввода промпта нейросеть генерирует структуру сайта. Далее можно работать с отдельными частями структуры: что-то заменять, убирать. Например, Например, “Распиши более подробно блок 5”.
🚨 Если у тебя возникли вопросы, что-то непонятно или не получается, не стесняйся обратиться за помощью в чат с куратором. Мы всегда готовы помочь! 😊
✅ Tilda — это Российская платформа для создания сайтов, которая позволяет нам быстро разрабатывать и публиковать веб-сайты, лендинги и интернет-магазины без знания кода.
Мы можем использовать как заранее подготовленные шаблоны дизайна, так и создавать проекты с нуля, включая предварительную разработку дизайна.
В рамках этого курса мы сосредоточимся на простом варианте — создании сайта без дизайна.
- Переходим на сайт: tilda.cc.
- В правом верхнем углу нажимаем на кнопку
Регистрация.
3. Для начала регистрации вводим имя, адрес электронной почты и создаём пароль. После этого нажимаем Зарегистрироваться. Проходим проверку и ставим галочку, что мы не роботы.
4. После регистрации система предложит создать сайт. Название можно указать любое, поскольку оно всегда доступно для изменения. Вводим название и нажимаем на кнопку Создать.
5. Нажимаем на кнопку Тарифы и оплата.
6. На этапе выбора тарифа выбираем бесплатный тестовый период Tilda Personal. Он длится 14 дней и позволяет протестировать все возможности платформы. Для этого нажимаем на кнопку Активировать.
После регистрации можно приступить к созданию сайта.
2. Появляется возможность выбрать пустой шаблон или один из готовых. Также можно изучить доступные категории шаблонов: магазины, блоги, события и т.д. Нас интересует опция “Сгенерировать страницу”, чтобы создать ее с помощью нейросети. Выбираем Сгенерировать страницу, нажимаем на кнопку Сгенерировать.
3. Соглашаемся с правилами и условиями.
3. В разделе ТЕМАТИКА САЙТА пишем описание сайта (вводим промпт): «Мне нужен лендинг для компании, которая занимается услугой доставки здоровой еды. Лаконичный и современный дизайн. Зелёные цвета».
4. Добавляем основные пожелания. Структура сайта: блок «Главный экран», блок «Наши преимущества», блок «Как это работает», блок «Меню и планы питания», блок «Консультация с нутрициологом».
Пример промпта от эксперта для Tilda AI
Мне нужен лендинг для компании, которая занимается услугой доставки здоровой еды. Лаконичный и современный дизайн. Зеленые цвета.
- Главный экран
- Блок «Наши преимущества»
- Блок «Как это работает»
- Блок меню и планов питания
- Блок «Консультации с нутрициологом»
5. Нажимаем Сгенерировать страницу и наблюдаем, как платформа автоматически добавляет блоки, текст, изображения и кнопки.
6. Ставим галочку о согласии и нажимаем на кнопку Перейти к редактированию.
Перед нами несколько экранов или блоков с различной информацией. Каждый блок можно менять и редактировать. Давайте посмотрим, как это сделать:
- Сперва удалим самый нижний блок с информацией об использованных изображений, так как далее мы их заменим на изображения, сгенерированные нейросетью. Для этого необходимо выбрать блок и нажать на картинку с корзиной.
2. Все тексты на сайте можно изменить. Для этого просто кликаем на текстовый блок и вводим нужную информацию. Например, заголовок «Доставка здоровой еды» можно дополнить до «Доставка здоровой и полезной еды в Москве».
3. Для изменения текста кнопки необходимо выбрать элемент, зайти в настройки контента — нажимать на кнопку Контент в левом верхнем углу.
4. Переходим в блок ТЕКСТ КНОПКИ и меняем надпись, например, на «Заказать пробное меню».
В блоках также можно менять изображения, но этим мы займёмся на следующем уроке.
5. Сверху нажимаем на кнопку Сохранить и выйти.
Если текущая структура блока нас не устраивает, можно перегенерировать его или выбрать другой вариант.
- Для этого в правом верхнем углу нужного блока нажимаем на кнопку генерации “Сгенерировать текст блока"
2. Дополняем промпт и нажимаем на кнопку Сгенерировать.
3. Чтобы перегенерировать конкретный текст, выделяем текст и сверху нажимаем на кнопку генерации “Сгенерировать с ИИ”.
4. Выбираем действие, например, Удлинить.
Внесение изменений в структуру блока
Чтобы изменить структуру блока, необходимо выбрать нужный блок:
2. Обязательно отметить бегунки:
3. Выбираем подходящий вариант и нажимаем Применить
- Изучили структуру и элементы лендинга.
- Научились правильно составлять промпт для работы с нейросетью.
- Составили техническое задание (ТЗ) для генерации лендинга с использованием AI-инструментов.
До встречи на следующем уроке!
- Промпт — это текстовый запрос, который мы передаём нейросети для выполнения задачи. Промпт описывает, что именно нужно создать или выполнить, и от его качества зависит точность результата.
- Лендинг — это одностраничный сайт, главная цель которого — побудить пользователя к совершению ключевого действия (конверсию). Это действие может быть разным: оставить заявку, ознакомиться с акцией, подписаться на рассылку и многое другое.
- Веб-дизайнер — это специалист, который разрабатывает визуальное оформление и пользовательский интерфейс (UI) веб-сайтов и веб-приложений.
- Tilda — это Российская платформа для создания сайтов, которая позволяет нам быстро разрабатывать и публиковать веб-сайты, лендинги и интернет-магазины без знания кода.