Программа курса:
"WEB - дизайн"

Тема 1

Введение

• Краткий экскурс в историю графической рекламы. Основные отличия современного веб-дизайна от всех остальных видов рекламы. Смысл создания хорошего дизайна для сайта.
• Предварительная работа с заявкой. ЦА, конкуренты, отстраивание, бриф, цели и задачи.
• Основные тренды современного дизайна, креативная концепция. Разнообразные способы генерации идей - мозговой штурм, мэп-майнды, скетчинг, прототипирование.
• Практическая часть: Выясняем что именно нужно для того, чтобы начать работу дизайнеру, выбираем идеи и референсы, знакомимся с общими понятиями дизайна.
• Домашнее задание: Выбрать тему сайта, который мы будем оформлять. Подготовить тексты и необходимую информацию по нему.

Тема 2

Начало работы с визуализацией

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

Тема 3

Продолжаем работу с визуализацией

• Примитивное прототипирование в фотошопе. Обзор программ и приложений для прототипирования.
• Основы текстовой композиции, размещения элементов.
• Юзер-интерфейсы и юзабилити.
• Практическая часть: Начинаем работу в фотошопе. Делаем простой прототип по итогу предыдущего урока. Узнаем, как дизайн и удобство сайтов влияет на продвижение, конверсию и СЕО. Учимся устанавливать шрифты и выбирать шрифты для работы.
• Домашнее задание: Закончить прототип в фотошопе.

Тема 4

Продолжаем работу с визуализацией

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

Тема 5

Дизайн-макет

• Принципы работы с цветами, композиция, формы.
• Референсы, полезные ресурсы и источники вдохновения.
• Изучаем примеры хорошего дизайна.
• Начинаем рисовать свои макеты.
• Практическая часть: Приступаем к отрисовке дизайна страницы. Разбираем основные элементы — что такое шапка, зачем нужны баннеры и слайдеры, работаем с референсами и источниками.
• Домашнее задание: Закончить отрисовку первых блоков сайта.

Тема 6

Шрифты и кое-что еще

• Основы типографики и верстки.
• Веб-шрифты и особенности экранной типографики.
• Принципы оформления различных блоков текста, списки рабочих шрифтов.
• Примеры интересного оформления текста.
• Практическая часть: Говорим о текстах и их важности для конверсии и СЕО. Учимся составлять план текстов, оформлять текстовые блоки и использовать простую инфографику для оформления и верстки. На этом этапе мы верстаем текстовую часть сайта.
• Домашнее задание: Закончить верстку текстовой части сайта, подобрать необходимые элементы оформления.

Тема 7

Продолжаем отрисовывать макет

• Различные примеры UI, кнопки, меню, слайдеры, баннеры.
• Красивые эффекты при верстке.
• Обратная связь, карты.
• Практическая часть: Продолжаем разбирать, из чего состоит страница сайта, как элементы являются важными для конверсии и СЕО. Оформляем «тело» страницы, разбираем примеры типовых элементов. Учимся работать с UI-наборами, и различным лайфхакам и секретам, которые позволяют дизайнерам облегчить работу и сократить время на разработку.
• Домашнее задание: Самостоятельно ознакомиться с различными UI-наборами, закончить оформление этой части.

Тема 8

Продолжаем отрисовывать макет

• Доделываем то, что не доделано в макете.
• Подвал, социальные сети, общий взгляд на макет.
• Разница в отображении сайта на разных устройствах, адаптивный дизайн.
• Практическая часть: Продолжаем оформлять различные блоки на сайте, такие как подвал, контакты, разбираем, как эффектнее их подать и смотрим референсы интересной верстки. На этом этапе мы заканчиваем отрисовку страницы, и получаем полностью готовый к верстке дизайн-макет главной страницы сайта/лендинга.
• Домашнее задание: Завершить дизайн страницы, подготовить к верстке.

Тема 9

Эффектная презентация

• Что такое мокапы и с чем их едят.
• Что такое портфолио и как его заполнить.
• Защита своего макета.
• Совместный анализ получившихся макетов, выявление плюсов и минусов.
• Практическая часть: Оформляем портфолио, выбираем различные примеры оформления. Учимся представлять свою работу клиенту, обсуждаем работы одноклассников.