Программа курса «WEB-дизайнер»
В чем заключается работа дизайнера, и какие услуги он может оказать?
Какой существует план действий для выхода на стабильный доход?
Именно этими вопросами задается человек, который хочет пройти наш курс.
Программа курса представляет собой большой объем практических задач: сначала примитивных, но постепенно все более сложных и объемных:
-
Вы получаете несколько заданий на пару дней
-
Вы получаете непосредственное курирование работы от преподавателя
Программа разработана для новичков. Основная идея в том, чтобы не только научить вас теоретическим основам веб-дизайна, но подготовить к работе с реальными проектами.
Вас познакомят с такими программами, как Figma, Photoshop, Blender, Tilda
В курсе три модуля, мы постарались очень подробно расписать программу, так как она расчитана на новичков в этом напралении.
Первый модуль
-
Вводная часть по программе курса
-
Фотографии в дизайне
Где и как искать фотографии для дизайна. Находим изображения для сайтов и вставляем фото (прикрепленная ссылка). Делаем файл «Референсы» и скриншотим в него пять экранов промышленной или производственной тематике.
-
Дизайн-исследование
Делаем дизайн-исследование со сбором референсов для определенного клиента.
-
Концепции дизайна
Учимся быстро накидывать концепции первых экранов. Зачем нужны концептуальные наброски, принцип расположения элементов, как строится работа.
Делаем концепции первого экран на для определенной компании.
-
Композиция: контраст
О композиции и делаем задание по прикрепленной ссылке
-
Композиция: близость
О композиции и делаем второй экран по прототипу
-
Композиция: равновесие
Разбираемся с равновесием, симметрией, направляющими и негативным пространством.
Рисуем следующие экраны лендинга по прототипу
-
Консистентность
Говорим о консистентности и ее роли в дизайне. В имеющемся макете создаем стили текстов, компоненты, цветов, эффектов. Перемещаем в UI кит (подробнее о UI ките позже)
-
Иконки и иллюстрации
Какие бывают, как использовать, где искать иконки и иллюстрации. Находим три новых иконки для сайта экспорта, ставим их в карточки.
Дорисовываем два новых экрана для лендинга.
-
Плагины Figma
Описание популярных плагинов, которые помогут вам в работе.
-
Основы типографики
Основные принципы типографики. Доделываем лендинг, улучшаем типографику в макете.
Делаем тренажер по верстке (Тренажер Ильяхова)
-
Основы типографики 2
Разбираемся со шрифтами. Находим визуальные примеры, где используются шрифты перечисленных видов: антиква, брусковая антиква, гротеск, акцидентный шрифт, рукописный, моноширинный
На основе любого шрифта собираем баннер или карточку товара.
-
Цвет в веб-дизайне
Изучаем теорию цвета. Примеры использования цвета на сайтах. Пробуем использовать разные схемы цветов.
Делаем 6 цветовых палитр.
Второй модуль
-
Рисуем баннер. Прикрепленная ссылка на макет. 240*400, JPEG.
Выбираем рекламный текст "открыт набор на летние смены!" или "Забронируйте специальную цену до 15 июня", делаем кнопку подробнее.
-
Многостраничный сайт: согласование референсов
Делаем акцент об особенностях многостраничных сайтов.
Начинаем подготовку проекта по выбраному техническому заданию.
-
Основы элементов UI. Базовые правила отрисовки кнопок, полей форм, практикуем.
-
Многостраничный сайт: согласование первого экрана.
Создаем концепцию первого экрана
-
Инструмент перо.
Об инструменте перо, отрабатываем на практическом примере.
-
Продвинутая типографика
Дополнительные нюансы про типографику
-
Делаем карточку товара.
Собираем референсы и делаем карточку товара
-
Использование карточек в веб-дизайне.
Зачем нужны карточки, как их рисовать, какие есть правила. Делаем карточку по референсу с использованием афтолейаутов
-
Многостраничный сайт: согласованием первой страницы.
-
Многостраничный сайт: согласование всех внутренних страниц. Работа над остальными страницами и их согласование
-
Особенности оптических иллюзий, визуальная компенсация.
Говорим об оптической компенсации
-
Практические задания, отрабатываем навыки.
Работаем над количеством. Делаем разные задания по техическому заданию.
- Свойство компонетнов.
-
Инфографика
Как использовать инфографику, и как сделать самому. Делаем инфографику на основе имеющиеся инфографике по ссылке. Повторить, переделать, добавить свое.
-
Адаптивный дизайн
Зачем нужен. Делаем адаптив по первым трем экранам. Планшет и телефон.
-
Основы Adobe Photoshop
Узнаем, как фотошоп может помочь в дизайне
-
Анимация GIF
Делаем анимированный гиф баннер из трех кадров, вес не более 150кб. Анимация зациклена
-
Таблицы.
Учимся рисовать таблицы. Рисуем таблицу в свободном стиле на основе корзины сайта.
-
Основы Тильды
Основы тильды и как эта программа помогает дизайнеру в работе.
-
Многостраничный сайт: согласование мобильной версии
Третий модуль
-
Итоговый проект: поиск референсов.
Делаем реального сайт. Берем проект на выбор, из домашнего задания или свой реальный проект.
Работаем следующими этапами: референсы, прототип, дизайн первого экрана, дизайн первой страницы, дизайн всех страниц, дизайн адаптивов.
-
Прототипизация.
Что такое и как делать
-
Заработок на дизайне.
Говорим о способах заработать, о платформах.
-
Итоговый проект: согласование вариантов первого экрана.
Ищем референсы, делаем варианты первого экрана.
-
Подготовка к верстке.
Что важно знать при подготовке к верстке.
-
Работа с клиентами.
Как работать с клиентом, обсуждаем важные моменты + шаблон брифа (ссылка)
-
Нейросети.
Какие нейросети бывают и как с ними работать
-
Итоговый проект: согласование всех страниц.
Согласуем все страницы и делаем адаптивный дизайн для телефона
-
Блендер
Основы работы в программе блендер
-
Итоговое занятие.
-
-
Количество часов: 252
Цена: 16 700
По окончании выдается: диплом установленного образца
777-665; +7 910 647-55-77 
Тверь, пр-т Чайковского, д.9 оф.315