Основы веб-дизайна

Вводное занятие: знакомство,  структура курса.

- Основы. Применение веб-дизайна в маркетинге и бизнесе
- Кто такой веб-дизайнер (UX/UI дизайнер), какие задачи решает дизайн в современном мире
- Направления в дизайне
- Основные навыки веб-дизайнера
- Виды и типы сайтов, их различия и особенности

- Что такое композиция
- Что такое сетка и для чего она нужна
- Движения взгляда (линия взгляда)
- Типы страниц и блоков сайта
- Интерактивные элементы
- Иерархия
- Виды контрастов
- Типографика, основные правила работы с типографикой
- Симметрия
- Что такое насмотренность, для чего нужно, как развивать
- Упрощения/функциональность минимум средств - (максимум выразительности)
- Правильное ведение рабочего файла

Figma
- Для чего использовать 
- Установка
- Интерфейс Figma
- Меню проектов 
- Рабочая область 
- Основные инструменты 
- Плагины
- Авто-лейауты, компоненты, варианты, стили

Практика: простые рекламные макеты, делаем 3 статичных креатива

Программа растровой графики
- Для чего использовать 
- Главный экран 
- Создания проекта (настройки) 
- Работа со слоями 
- Основные инструменты

Практика: делаем графическую обложку для Youtube, трекер привычек. 

Старт проекта:
- Выбор темы проекта
- Постановка задачи (бриф)
- Анализ конкурентов
- Прототип
- ТЗ
- Сбор контента
- Референсы/Мудборд/Где искать вдохновение

Реализация проекта:
- Отбор лучших гипотез 
- Создание первого наброска
- Разработка визуальной концепции
- Детальная проработка и визуализация
- UI-kit
- Адаптивы
- Подготовка макетов к передаче в разработку

Оформление проекта в кейс:
- Общий процесс создания кейса
- Сбор контента
- Структура кейса
- Референсы
- Оформление кейса
- Выгрузка кейса в интерактивное цифровое портфолио

- Этапы работы
- Варианты проекта, его адаптивы  
- Итоговый вариант

UX/UI-дизайн — это процесс создания инструментов для удобного и привлекательного взаимодействия пользователя с цифровым продуктом или сервисом. Он включает в себя две основные составляющие: UI-дизайн и UX-дизайн, разницу между которыми мы рассказываем в этой статье.

Мудборд (mood board, доска настроения) - это инструмент, который используется дизайнерами для сбора и визуализации идей. Он помогает дизайнеру лучше понять задачу, сформировать общее настроение проекта и донести свою концепцию заказчику.

Мудборд представляет собой коллаж изображений, фотографий, цветовых палитр, текстур, шрифтов и других элементов, которые отражают тему проекта или идею дизайна.

На мудборде можно показать:

1. Инспирационные изображения и фотографии.
2. Цветовые палитры и комбинации.
3. Различные текстуры и материалы.
4. Примеры шрифтов и композиций.
5. Элементы декора и стилизации.

Основные правила создания мудборда:

1. Определить цель и тему мудборда.
2. Собрать разнообразные изображения и элементы.
3. Соблюдать единую стилистику и цветовую гармонию.
4. Распределить элементы на мудборде логично и привлекательно.

Сервисы для создания виртуальных мудбордов:

• Canva
• Pinterest
• Adobe Spark
• Milanote
• Miro

Примеры мудбордов можно найти на сайтах дизайнеров, в журналах о дизайне, в социальных сетях (Pinterest, Behance) или на специализированных платформах для дизайнеров (Dribbble, Designspiration). Также можно поискать примеры в онлайн-журналах о дизайне и креативности.

Мокап (mockup) - это визуализация дизайна, которая помогает представить, как будет выглядеть готовый продукт или проект в реальной среде. Мокапы используются дизайнерами для демонстрации своих концепций заказчикам или для тестирования дизайна перед его финальной реализацией.

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

На мокапе можно показать:

1. Дизайн в контексте реальной среды (например, логотип на фирменной продукции, на мерче, на вывеске).
2. Различные варианты цветовых решений и шрифтов.
3. Внешний вид упаковки, брендинга или интерфейса.
4. 3D-модели продукта или упаковки.

Основные правила создания мокапов:

1. Выбрать подходящий стиль и формат мокапа.
2. Использовать высококачественные изображения и элементы.
3. Соблюдать единую стилистику и цветовую гармонию.
4. Учитывать особенности конечного носителя (например, размер экрана для мобильного приложения).

Сервисы для создания виртуальных мокапов:

• Canva
• Mockup World
• Placeit
• Smartmockups

Примеры мокапов можно найти на специализированных ресурсах для дизайнеров (например, GraphicBurger, Mockup World), на сайтах с бесплатными ресурсами для дизайна (например, Freepik, Pixeden), а также на платформах для обмена дизайнерскими идеями (Behance, Dribbble). Кроме того, многие дизайнеры и агентства публикуют свои работы на своих персональных сайтах или профилях в социальных сетях.

Да, учиться можно с нуля, даже если не заканчивали ВУЗ или колледж. Шаг за шагом вы будете погружаться в особенности растровой и векторной графики, научитесь редактировать изображения и работать с текстом. После этого вы сможете увереннее работать в сфере графического и веб-дизайна.

В итоге вы научитесь работать с инструментами вёрстки сайтов, со шрифтами и иллюстрациями, а в конце соберёте собственный прототип веб-сайта в нескольких вариантах.

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

• брендинг, создание фирменного стиля, иконок и логотипов
• веб-дизайн
• маркетинг, PR и реклама
• SMM
• медиа и журналистика
• мерчандайзинг
• UX/UI-дизайн
• книжная иллюстрация, печатная графика
• комиксы, иллюстрации и плакаты
• арт-дирекшн

Обучение проходит в формате онлайн-интенсива, расписание формируется.

Мы активно используем сервисы онлайн-общения для обмена ссылками, конспектами, заданиями и файлами и вы всегда можете связаться с преподавателем для получения обратной связи по текущему проекту.

Напишите куратору программы, проблему или вопрос административного порядка, куратор передаст координаторам учебной части. Также вы напрямую можете написать на почту: dop-design@hse.ru.

Прием документов заканчивается за 3 дня до старта программы.

Да, конечно. У нас есть более 40 курсов для детей и подростков от 7 до 15 лет в Детской школе дизайна. Результатом каждого курса становятся завершенные персональные или коллективные проекты, закладывающие начало личного портфолио.
Вы можете посмотреть список всех актуальных курсов и задать вопросы менеджерам здесь.

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

При наличии диплома о высшем образовании по окончании программы мы выдаем Диплом о профессиональной переподготовке НИУ ВШЭ.

Мы принимаем оплату от физических лиц по выставленной квитанции и юридических лиц по номеру расчетного счета. Для студентов и выпускников НИУ ВШЭ скидка 10%.