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

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

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

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

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

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

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

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

• Canva
• Pinterest
• Adobe Spark
• Milanote
• Miro

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

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

Мокап (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-дизайн
• книжная иллюстрация, печатная графика
• комиксы, иллюстрации и плакаты
• арт-дирекшн

Если заканчивали вуз или колледж, после окончания курса вы получите удостоверение о повышении квалификации НИУ ВШЭ. Если учились без среднего или высшего образования — сертификат.

Формат итогового проекта — презентация с описанием прототипа веб-сайта, выполненного в Figma в нескольких вариантах адаптивов под одну выбранную визуальную концепцию.

Состав презентации:

1. Цель проекта.
2. Особенности прототипа: предоставить информацию о функциональности, дизайне и особенностях пользовательского опыта, которые необходимо продемонстрировать.
3. Технические аспекты: по возможности описать технические детали прототипа, такие как используемые технологии, стек технологий, методы разработки и т. д.
4. Макеты и дизайн.

Пример презентаций из студенческого портфолио.