Курсы
О школе
Пробное занятие
Урок 4 · бесплатный курс по нейросетям для детей

Сайт с помощью нейросети

Четвёртый урок курса. Разбираем, что такое веб-дизайн, собираем сайт школьного кружка по текстовому описанию и рисуем для него иконки, фон и логотип нейросетью.
Урок 4. Сайт с помощью нейросети
7:14
Что в уроке
  1. 0:30 Что такое веб-дизайн
  2. 0:59 Как ИИ помогает в веб-дизайне
  3. 1:54 Сервисы, которые делают сайт по описанию
  4. 2:53 Сайт по тексту: практика
  5. 3:58 Лендинг школьного проекта
  6. 4:26 Сайт-визитка кружка вручную
  7. 5:11 Иконки, фон и логотип
  8. 6:07 Задание
Конспект урока

Что такое веб-дизайн

Это внешний вид и структура сайта: какие цвета, где меню, кнопки, фото и текст. Хороший сайт понятный, красивый и удобный - человек быстро находит нужное.

Как помогает ИИ

Раньше для сайта нужно было долго учить дизайн и программирование. Теперь нейросеть предлагает структуру и цвета, пишет тексты, рисует кнопки и собирает макет или даже готовый сайт по описанию. Figma удобна, чтобы собрать макет вручную, Кандинский и Алиса - чтобы нарисовать картинки, иконки и фоны.

Сайт по текстовому описанию

Есть сервисы, которые делают сайт из обычного текста, например Lovable: его можно попросить поменять цвета, добавить раздел или опубликовать страницу. Перед использованием смотрим пользовательское соглашение, регистрируемся только с разрешения родителей или учителя.

Сайт для кружка робототехники: главная страница с приветствием, галерея работ и контакты

Дальше сайт уточняют запросами: сделать ярче, добавить раздел "Расписание", поменять цвета на оранжевый и фиолетовый.

Яркий лендинг о школьном экологическом проекте с разделами "Новости" и "Галерея фото"

Сайт-визитка вручную

Если хочется аккуратнее, начинают со структуры: название и логотип, краткое описание, фотографии, расписание, контакты. Сначала рисуют схему - шапка, меню, главное фото, расписание, контакты - и только потом собирают макет.

Иконки, фон и логотип от нейросети

Иконка ноутбука в круге, стиль flat, яркие цвета, для сайта
Простой фон с абстрактными линиями, светло-голубой, мягкие оттенки, для сайта
Логотип с весёлым роботом и шестерёнкой, круглая форма, минимализм
Задание

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

Хотите заниматься с преподавателем

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

Записаться на бесплатный урок
Веб-дизайн3D-моделированиеПортфолиоFigma Adobe IllustratorPhotoshopBlender 3DUI/UX Веб-дизайн3D-моделированиеПортфолиоFigma Adobe IllustratorPhotoshopBlender 3DUI/UX