Веб-журнал: дизайн и публикация
Детская редакция: создаём своё медиа. Курс 2
Освоение основ веб-дизайна и создание онлайн-версии журнала: разработка макетов в Figma, работа с интерактивными элементами и публикация готового выпуск на Tilda.
О чем этот курс?
Веб-журнал — цифровое издание, которое объединяет авторские материалы с помощью общей структуры, навигации и визуального оформления. Читатель может последовательно знакомиться с публикациями или самостоятельно выбирать интересующие темы. Текст и изображения дополняются галереями, видео, звуком и интерактивными элементами, расширяющими способы представления истории.Переход печатного журнала в веб требует переосмысления содержания и дизайна. Развороты превращаются в страницы и разделы, содержание — в систему переходов, а композиция адаптируется к разным экранам. При этом важно сохранить характер издания, авторские голоса и узнаваемость рубрик.
В рамках курса обучающиеся создадут веб-версию журнала на интересующую их тему. Проанализируют материалы, разработают структуру сайта, освоят инструменты Figma и подготовят макеты для компьютера и телефона. Затем соберут страницы на Tilda, настроят навигацию, добавят медиаматериалы и проверят удобство чтения.Итогом станет опубликованный лонгрид, объединяющий материалы участника. Каждый обучающийся разработает собственную страницу и вносит вклад в общую структуру и оформление издания.
Кому подойдет этот курс?
Этот курс подойдет:
Школьникам 11–15 лет, заинтересованные в веб-дизайне, создании цифровых публикаций и работе над собственным медиа.| Длительность курса 8 недель.
| Количество контактных часов: 64 академических часа.
| Занятия проходят в очном формате.
Пререквизиты курса
Перед началом курса обучающийся должен уметь:◆ выделять главное в тексте и структурировать материал;
◆ применять базовые принципы композиции и типографики;
◆ работать с файлами, папками и браузером;
◆ представлять свои решения и учитывать редакционную обратную связь.Необходимо наличие подготовленного авторского материала: текста, изображений и его печатного оформления. Предварительный опыт работы в Figma и Tilda, а также навыки программирования не требуются.
Чему научатся слушатели курса?
В процессе обучения на курсе слушатели научатся:
1. Проводить анализ цифровых изданий, определяя особенности структуры, навигации и взаимодействия текста с медиаматериалами.2. Адаптировать печатный материал для веб-публикации, изменяя структуру текста и подачу изображений с учётом экранного чтения.3. Проектировать структуру веб-журнала и читательские маршруты, связывая главную страницу, рубрики и авторские публикации.4. Применять основные инструменты Figma для создания схематичного прототипа страницы.5. Разрабатывать общую визуальную систему веб-журнала, используя согласованные стили и повторяющиеся элементы.6. Создавать дизайн-макет авторской публикации, выстраивая иерархию, композицию и ритм чтения.7. Адаптировать макет для мобильного экрана, сохраняя читаемость и удобство взаимодействия.8. Собирать страницу на Tilda по подготовленному макету, используя стандартные блоки и Zero Block.9. Настраивать навигацию и размещать медиаматериалы, обеспечивая их связь с содержанием публикации.Какие практические задания будут выполнять слушатели курса?
В процессе обучения на курсе слушатели будут выполнять следующие задания:
1. Сравнительное исследование печатной и веб-публикации. Краткое сопоставление структуры, оформления и способов чтения на предложенных примерах.2. Редакционный проект адаптации материала. Подготовленный текст с заголовками, подписями и планом размещения изображений и дополнительных материалов.3. Схема структуры веб-журнала. Карта страниц и переходов с обозначением маршрута к собственной публикации.4. Упражнение по прототипированию в Figma. Схематичный макет страницы из 4–6 смысловых блоков.5. Проект визуальной системы веб-журнала. Общий набор цветов, текстовых стилей, кнопок, карточек публикаций и навигационных элементов.6. Дизайн-проект авторской веб-публикации. Законченный макет страницы для компьютера.7. Упражнение по адаптивному проектированию. Мобильная версия ключевых блоков с последующей адаптацией всей страницы.8. Практический проект страницы на Tilda. Собранная по макету авторская публикация.9. Упражнение по настройке навигации и медиаматериалов.Тематический план занятий
1. Веб-журнал и особенности экранного чтения
Устройство цифрового издания. Главная страница, рубрики и публикации. Последовательное чтение и самостоятельный выбор материалов. Отличия печатного разворота от веб-страницы. Роль навигации и мультимедиа.
Состав: лекция, просмотр примеров, воркшоп.
Элемент контроля: сравнительное исследование печатной и веб-публикации.2. Адаптация содержания печатного номера
Анализ материалов первого курса. Деление текста на смысловые блоки, редактирование заголовков и подписей. Отбор изображений, определение необходимых дополнений. Подготовка файлов и сохранение сведений об источниках.
Состав: редакционный воркшоп, индивидуальные консультации.
Элемент контроля: редакционный проект адаптации материала.3. Структура сайта и читательские маршруты
Объединение материалов в веб-журнал. Логика главной страницы и рубрик. Переходы между публикациями, возвращение к содержанию и знакомство с авторами. Распределение ответственности за общие страницы и элементы.
Состав: лекция, редакционный воркшоп, работа со схемами.
Элемент контроля: схема структуры веб-журнала.4. Основы Figma и прототипирование
Интерфейс программы, фреймы, слои, текст и изображения. Выравнивание, группировка и организация файла. Создание схематичного прототипа без детального оформления. Проверка порядка блоков и объёма содержания.
Состав: упражнения по образцу, практический воркшоп.
Элемент контроля: упражнение по прототипированию авторской страницы.5. Дизайн авторской публикации
Композиционная сетка, ширина текстовой колонки, поля и отступы. Иерархия заголовков, цитат и подписей. Масштаб изображений, чередование блоков и визуальные паузы. Применение Auto Layout для повторяющихся и изменяемых элементов.
Состав: лекция, практические воркшопы, индивидуальные консультации.
Элемент контроля: дизайн-проект авторской веб-публикации.
6. Мобильная версия и доступность содержания
Перестроение композиции для узкого экрана. Размер текста и элементов управления, контраст, кадрирование изображений. Сохранение последовательности чтения и доступности важных материалов.
Состав: лекция.
Элемент контроля: упражнение по адаптивному проектированию.7. Сборка страницы на Tilda
Создание страницы, работа со стандартными блоками и настройками оформления. Основы Zero Block для индивидуальных композиций. Размещение текста и изображений, настройка размеров и расположения элементов. Сопоставление результата с макетом Figma и адаптация для разных экранов.
Состав: лекция, индивидуальные консультации.
Элемент контроля: практический проект авторской страницы на Tilda.8. Навигация и мультимедийные элементы
Меню, ссылки, якорные переходы и связанные публикации. Галереи, аудио и видео как способы дополнить содержание. Выбор интерактивных приёмов по смысловой задаче. Проверка элементов управления.
Состав: лекция, воркшоп.
Элемент контроля: упражнение по настройке навигации и медиаматериалов.9. Подготовка к публикации
Заголовки и описания страниц, обложки для представления материалов. Сведения об авторах и источниках. Проверка комплекта публикации, размещение в общем сайте и контроль опубликованной версии.
Состав: демонстрация, воркшопы.
Элемент контроля: проект публикационного комплекта.10. Презентация веб-журнала
Показ цифрового выпуска. Обоснование структуры, дизайна и выбранных медиаматериалов. Сопоставление печатной и веб-версии. Обсуждение индивидуального вклада и правил дальнейшего обновления издания.
Состав: итоговый просмотр, презентации участников, рефлексия.
Элемент контроля: итоговая презентация веб-журнала.
Итоговый проект
Совместный веб-журнал, включающий главную страницу, навигацию и авторские публикации участников.Индивидуальный результат каждого обучающегося:
адаптированный материал печатного номера;
макеты страницы в Figma для компьютера и телефона;
опубликованная страница на Tilda.Для начального уровня рекомендуется ограничить авторскую страницу 6–10 смысловыми блоками, используя общую систему оформления.
