Тема 1
Введение
- Краткий экскурс в историю графической рекламы. Основные отличия современного веб-дизайна от всех остальных видов рекламы. Смысл создания хорошего дизайна для сайта. Предварительная работа с заявкой. ЦА, конкуренты, отстраивание, бриф, цели и задачи. Основные тренды современного дизайна, креативная концепция. Разнообразные способы генерации идей - мозговой штурм, мэп-майнды, скетчинг, прототипирование. Практическая часть: Выясняем что именно нужно для того, чтобы начать работу дизайнеру, выбираем идеи и референсы, знакомимся с общими понятиями дизайна. Домашнее задание: Выбрать тему сайта, который мы будем оформлять. Подготовить тексты и необходимую информацию по нему.
Начало работы с визуализацией
- Обзорная лекция по фотошопу для дизайнеров: что важно, что не важно, учимся делать простые вещи. Основной инструментарий, горячие клавиши. Принципы построения модульных сеток, различные варианты. Практическая часть: Рисуем прототип будущего сайта на бумаге, учимся работать с фотошопом, разбираем основные методы и приемы работы в программе. Домашнее задание: Практика в фотошопе. Подготовить бумажный прототип.
Продолжаем работу с визуализацией
- Примитивное прототипирование в фотошопе. Обзор программ и приложений для прототипирования. Основы текстовой композиции, размещения элементов. Юзер-интерфейсы и юзабилити. Практическая часть: Начинаем работу в фотошопе. Делаем простой прототип по итогу предыдущего урока. Узнаем, как дизайн и удобство сайтов влияет на продвижение, конверсию и СЕО. Учимся устанавливать шрифты и выбирать шрифты для работы. Домашнее задание: Закончить прототип в фотошопе.
Продолжаем работу с визуализацией
- Логотипы, брендбуки и фирменный стиль. Разбор примеров, полезные ресурсы и книги. Скетчинг, отрисовка в фотошопе. Практическая часть: Изучаем референсы фирменного стиля, узнаем, как он влияет на дизайн. Разбираем, что именно входит в фирменный стиль, рисуем скетч логотипа и отрисовываем его в фотошопе, чтобы можно было использовать в дальнейшей работе. Домашнее задание: Закончить логотип, выбрать цвета и фирменный стиль.
Дизайн-макет
- Принципы работы с цветами, композиция, формы. Референсы, полезные ресурсы и источники вдохновения. Изучаем примеры хорошего дизайна. Начинаем рисовать свои макеты. Практическая часть: Приступаем к отрисовке дизайна страницы. Разбираем основные элементы — что такое шапка, зачем нужны баннеры и слайдеры, работаем с референсами и источниками. Домашнее задание: Закончить отрисовку первых блоков сайта.
Шрифты и кое-что еще
- Основы типографики и верстки. Веб-шрифты и особенности экранной типографики. Принципы оформления различных блоков текста, списки рабочих шрифтов. Примеры интересного оформления текста. Практическая часть: Говорим о текстах и их важности для конверсии и СЕО. Учимся составлять план текстов, оформлять текстовые блоки и использовать простую инфографику для оформления и верстки. На этом этапе мы верстаем текстовую часть сайта. Домашнее задание: Закончить верстку текстовой части сайта, подобрать необходимые элементы оформления.
Продолжаем отрисовывать макет
- Различные примеры UI, кнопки, меню, слайдеры, баннеры. Красивые эффекты при верстке. Обратная связь, карты. Практическая часть: Продолжаем разбирать, из чего состоит страница сайта, как элементы являются важными для конверсии и СЕО. Оформляем «тело» страницы, разбираем примеры типовых элементов. Учимся работать с UI-наборами, и различным лайфхакам и секретам, которые позволяют дизайнерам облегчить работу и сократить время на разработку. Домашнее задание: Самостоятельно ознакомиться с различными UI-наборами, закончить оформление этой части.
Продолжаем отрисовывать макет
- Доделываем то, что не доделано в макете. Подвал, социальные сети, общий взгляд на макет. Разница в отображении сайта на разных устройствах, адаптивный дизайн. Практическая часть: Продолжаем оформлять различные блоки на сайте, такие как подвал, контакты, разбираем, как эффектнее их подать и смотрим референсы интересной верстки. На этом этапе мы заканчиваем отрисовку страницы, и получаем полностью готовый к верстке дизайн-макет главной страницы сайта/лендинга. Домашнее задание: Завершить дизайн страницы, подготовить к верстке.
Эффектная презентация
- Что такое мокапы и с чем их едят. Что такое портфолио и как его заполнить. Защита своего макета. Совместный анализ получившихся макетов, выявление плюсов и минусов. Практическая часть: Оформляем портфолио, выбираем различные примеры оформления. Учимся представлять свою работу клиенту, обсуждаем работы одноклассников.
