1. Вводное занятие. Основные понятия. (2 часа)
- Интерфейс. Что входит в понятие интерфейс
- Структура. Составляющие части макета и их функционал
- Этапы WEB разработки и место дизайнера в них
- Особенности профессии WEB-дизайнера
- Какие программы используются на рынке и для чего (Adobe XD, Sketch, Figma, Invision Studio, Photoshop, Affinty Design, Illustrator, Principle, After Effects, Avocode, Zeplin, Abstract)
- Стоимость и сроки работы
ПРАКТИКА: Выбор темы проекта, разработка концепта.
2. Этапы разработки сайта. Бриф и ТЗ (4 часа)
- Этапы создания сайта
- Связь дизайна и продвижения
- Способы генерирования идей и разработка концепта
- Тренды и визуальные референсы
- Мудборды
ПРАКТИКА: Создание мудборда.
ПРАКТИКА: Создание ментальной карты.
3. Компоненты веб-интерфейса (2 часа)
- Структура сайта и его влияние на дизайн макет
- Виды элементов интерфейса
- Виды навигации
- Главная страница
- Различия промостраницы, корпоративных страниц и лендингов
- Компоненты главной страницы
- Правила размещения модулей на странице сайта
- Модульные сетки и их виды и особенности
- Методы оптимизации дизайна для пользователя
- Оптимизация дизайна под цели и задачи сайта без потери удобства пользования
4. Проектирование (2 часа)
- Что такое UX\UI дизайн, аналитика
- Инструменты проектирования
- Информационная структура
- Планирование навигации
- Принципы юзабилити в текстах, графике и структуре сайта
- Вайрфреймы, прототипы и мокапы
ПРАКТИКА: Прототипирование сайта. Логическая схема. Проектирование главной страницы.
5. Основы Photoshop (2 часа)
- Основные элементы интерфейса
- Функционал основных панелей и их параметры
- Создание и настройки документа
- Размеры документа, что такое dpi
- Панель слоев и управление слоями
- Разновидности слоев
- Способы организации слоев в документе.
ПРАКТИКА: разработка первой страницы: фоновое изображение и логотип, заголовок, второстепенный текст, color picker и основы работы с ним, шейпы и кнопки, особенности форматов и сохранения документа.
6. Композиция и графика+техническая сторона WEB-разработки (6 часов)
- Композиция в WEB макете, целостность и гармония
- Технические требования для макета
- Особенности восприятия цвета и его психология в интернете
- Композиция в текстах и графике
- Фирменный стиль и его значение
ПРАКТИКА: Проработка цветовой гаммы сайта, наполнение макета главной страницы контентом.
7. Типографика и текст (4 часа)
- Слои восприятие информации
- Особенности подачи текста в web пространстве
- Роль текстов в продвижении и дизайне сайта
- Виды и стили шрифтов
- Безопасные шрифты
- Шрифтовые пары и как их подбирать
- Акциденция (заголовочные шрифты) и наборный текст
- Традиции кириллической типографики
ПРАКТИКА: Наполнение главной страницы. Подбор шрифтового решения. Подпись кнопок и навигаций. Разработка структуры внутренних страниц.
8. Обработка изображений. (12 часов)
Лицензионные изображения, фотографии, иконки и иллюстрации. (2 часа)
- Авторские права и стоковые сервисы
- Уникальность графического контента
- Дополнительная векторная графика
- Создание уникальной векторной графики
Обработка растровых изображений в AdobePhotoshop. (10 часов)
- Обработка изображений в Photoshop
- Основные моменты
- Самые частые проблемы (пересвет, провалы в черном, проблемы с цветом, резкость)
- Настройки слоев
- Сатурирование изображений
- Тонирование изображений.
- Работа с уровнями и кривыми
- Настройка контрастности изображений
- Единство изображений. Работа с цветовым тоном
- Устранение мелких дефектов.
- Обтравка изображений
- Тени
- Работа с фоном
- Эффекты
9. Адаптивный дизайн. Подготовка макета для верстки (4 часа)
- Цели и задачи адаптивного дизайна
- Интерфейс сайта в адаптивной версии
- Технические требования и характеристики адаптивного макета
- Особенности композиции и юзабилити сайта для разных устройств
- Работа с верстальщиком-программистом
- Передача макета для запуска в верстку
ПРАКТИКА: адаптация макета главной страницы. Подготовка макета для верстки.
10. Landing Page. Одностраничные сайты (2 часа)
- Ключевые отличия дизайна многостраничных и одностраничных сайтов
- Особенности дизайна и размещения модулей на landing page
- Особенности дизайна и верстки одностраничных сайтов
- Отличие контента и целевых задач макета
ПРАКТИКА: Разработка концепта одностраничного сайта. Разбор особенностей работы с шаблонами и заготовками для макета. Создание макета одностраничного сайта в AdobePhotoshop
11. Презентация и переговоры. Работа с заказчиком. (2 часа)
- Что такое Behance, Dribbble
- Особенности подачи материала
- Подготовка макета для Behance
- Создание презентаций своего сайта
12. Работа над ошибками и защита проектов (8 часов)
Завершение разработки дизайна веб сайта
Подготовка сайта для презентации заказчику
Защита и выдача сертификатов
