Сайты
April 21

Как сделать дизайн-макет сайта с помощью нейросети

Покажу, как с помощью нейросети создать базовый дизайн-макет и ускорить создание сайта в несколько раз.

Пошаговый алгоритм, как сделать дизайн-макет с помощью нейронки

У вас уже должен быть готовый прототип или текст для сайта. Далее идем в сервис Uizard. Регистрируемся. Сначала попробуйте бесплатную версию.

Выбираем окно Generate with Avtodesigner.

Для создания дизайн-макета с помощью нейросетей выберите Generate with Avtodesigner

Появляется вот такое окно

В окне обозначьте пожелания к сайту и описание проекта

Что нужно сделать:

  1. Выбрать, для какой версии нужен сайт: мобильный, для планшета или десктоп.
  2. На английском языке опишите проект, для которого делаете сайт. Ограничение – 300 символов. Я буду делать лендинг для своей студии – для него уже есть готовый текст, так будет быстрее.
  3. Ниже можно написать пожелания по стилю и цветовой гамме. На английском, 150 символом. Или можно выбрать из готовых вариантов ниже. Либо можно написать пожелания и выбрать из готовых

Я сделала описание проекта и загнала в переводчик.

Через переводчик сделала описание проекта

Цвет сайта я обозначила – желтый, белый и черный. Стиль минимализм, современный. Шрифт строгий дорогой.

Даем нейронке задание, какой сайт хотим увидеть

Нажимаем Generate my project и смотрим, что у нас получилось.

Нейронка за 2 минуты сделала сайт из 5 страниц

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

Можно менять цвет, изображения, текст, добавлять и удалять элементы

Нейросеть сформировала сайт из 5 страниц:

  1. Главная
  2. Стоимость работы
  3. О команде
  4. Услуги
  5. Контакты

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

Редактируем и смотрим, что получилось. Я взяла одну страницу, добавила туда свой текст и изображения.

Изменила на странице цвет и текст, добавила свои изображения

На редактирование страницы у меня ушло не более 20 минут. Но с учетом того, что у меня готов текст для сайта.

В бесплатной версии экспорт доступен только в формате png, jpg, svg и pdf. В платных версиях эти ограничения снимаются.

Интерфейс максимально простой. Если вы работали в Figma или другой подобной программе, то быстро разберетесь. Меняйте цвет, кнопки, текст, изображения. Добавляйте или удаляйте элементы. Кнопка Suggest подберет альтернативный текст.

Кнопка Suggest – генерация текста с помощью нейронки
Нейронка предлагает варианты, как изменить текст кнопки
Нейросеть предложила изменить заголовок «Продающие сайты и лендинги» на «Уникальные сайты и лендинги, привлекающие клиентов»

На мой взгляд, сервис генерирует вполне жизнеспособные варианты текста.

Как использовать сервис?

Вижу несколько сценариев:

  • Если нет бюджета, чтобы заказать сайт. Вы делаете все самостоятельно: пишите текст, делаете дизайн-макет в Uizard, верстаете лединг. Здесь придется заплатить временем, чтобы разобраться в нюансах копирайтинга, визуала и технических.
  • Если бюджет сильно ограничен, чтобы заказать сайт. Часть работ делегируете специалистам, а часть – выполняете сами. Моя рекомендация – отдать на подряд написание продающего текста. Продает, в первую очередь, маркетинг.
  • Чтобы ускорить работу над сайтом. Отдайте дизайнеру макет из Uizard в качестве референса.
  • Для быстрого и бюджетного создания лендинга. Например, если надо проверить, насколько жизнеспособна идея стартапа.

В целом, мне понравилось, как работает Uizard, и какие варианты дизайна дает. Сервис предлагает основу, которую дальше можно доработать на свой вкус.

Блог про разработку продающих сайтов: https://t.me/first_marketolog