Веб-дизайн с нуля

В первые 3−5 месяцев у тебя будет возможность зарабатывать до 50 тысяч рублей в месяц. Больше 100 тыс в месяц вряд ли получится, за исключением случаев, если у тебя уже есть опыт в граф дизайне, полиграфии или архитектуре

1 урок (Бургер)

Теория:
Сколько реально можно заработать денег на сайтах?
Что важно для заказчиков сайтов на фрилансе?
7 преимуществ работы в Тильде
Какие сайты можно сделать на Тильде?
Наш подход к обучению создания сайтов
С чего начать в веб-дизайне?
Что такое одностраничный сайт?
Из чего состоит Landing Page?
2 вида обложек, заголовок, текст, формы
Стандартный блок и zero-блок в Tilda
Что такое браузер и основные типы браузеров
Базовые понятие работы с сайтами для новичков
Что такое нейросетевая графика?
2 сайта с генерацией нейросетевой графики

Практика:
Создание сайта в Тильде
Сохранение картинок и добавление на сайт
Создание шапки сайта в Зеро-блоке
Правила именования файлов для сайтов
Добавление эффекта огня и искр на сайте
Способы размещения слоев в Зеро-блоке
Как масштабировать рабочее пространство?
Как скрывать и блокировать слои?
Как редактировать прозрачность слоев?
Создание анимации появления текста (Basic Animation)
Создание параллакс-эффекта по движению мышки
Как опубликовать сайт в интернете?
Как сделать, чтобы сайт хорошо отображался на телефоне?
Создание нейросетевого пейзажа
Как активировать бесплатный пробный период на Тильде?
Базовое, продвинутое и лидерское задание для самостоятельного выполнения

Бонус для тех кто выполнит задание вовремя:

Секретное поздравительное видео и PDF-методичка «Нейросети для дизайнера»

Внутри методички:
4 сервиса для автоматической раскраски фото
Сервис анимации лица из фотографии
Игра, в которой нейросеть отгадывает что вы нарисовали
Нейросеть, которая рисует иконки из ваших эскизов
Подбор шрифтов для сайта с помощью нейросети
Автоматическое удаление фона с фотографии с помощью нейросети

Результат урока: два сделанных и опубликованных сайта

2 урок (Авто)

Теория:

Основы передачи цвета на дисплеях
Базовые цвета в веб-дизайне 
В чем измеряется интенсивность цвета в RGB?
Что такое пиксель и зачем нужно знать это при создании сайтов?
Разрешение экранов дисплеев разных устройств
Как узнать какого размера картинка в Windows и Mac?
Типы файлов и их характеристики: jpg, png и gif
Размеры файлов для создания сайтов

Практика:

Трюк с регистрацией новых аккаунтов в Тильде
Как подключить стандартную шрифтовую пару на всем сайте?
Как задать размер рабочего поля в Zero-блоке в пикселях?
Что такое сетка и зачем она нужна?
Как дублировать готовые текстовые блоки в Тильде?
Что такое иерархия заголовков в сайтах?
Как добавить пошаговую анимацию в зеро-блоке?
События для запуска пошаговой анимации
Условия срабатываения (Start trigger) для анимации
Подробный разбор настроек пошаговой анимации
Создание вертикального parallax-эффекта
Правила работаты со слоями в Зеро-блоке
Как сделать горизонтальную анимацию на сайте?
Создание псевдо3D-эффекта на одностраничном сайте
Как зациклить фоновую текстуру (бесшовная текстура)?
Как уменьшить расстоянием между строками текста?
Базовое, продвинутое и лидерское задание для самостоятельного выполнения

Бонус для тех кто выполнит задание вовремя:

Секретное поздравительное видео и PDF-методичка про подбор цветов

Внутри методички:
3 сервиса для подбора цветов для сайтов 
Расширение для Гугл Хром для копирования цветов с любого сайта
3 проверенных сайта для подбора цвета

Результат  урока: два сделанных и опубликованных сайта

3 урок (Монстры)

Теория:

Как компьютер «запоминает» цвета?
Отличие растровой от векторной графики
Преимущества и недостатки разных видов графики
Примеры векторной и растровой графики
Характеристики и типы файлов растровой и векторной графики
Сравнение SVG и PNG в размере файла
В чем измеряется «вес» файлов?
RGB и шестнадцатеричное представление цвета
Что такое капча в сайтах?
Что такое домен?

Практика:

Как активировать пробный период на Тильде?
Скачиваем SVG файлы для сайта
Как задать шестнадцатеричный цвет в зеро-блоке?
Как создать шэйп: квадрат, круг в Тильде?
Создаем переход «Облака» между блоками сайта
Как создать адаптивную версию шапки сайта?
Используем «Просмотр» для настройки мобильной версии сайта
Создаем блок «Фраза» и «Текст» для одностраничника
Инструменты расстановки объектов в Зеро-блоке
Отзывчивый дизайн, настройки контейнера сетки и окна
SVG файл «Волна» для перехода между блоками
Используем размер в процентах для масштабирования картинок
Настройка пошаговой анимации с помощью easing
Создаем эффект «Печатной машинки» для текста
Настройка формы обратной связи на лэндинге
Как редактировать домен в Тильде?
Как зарегистрировать домен?
Настраиваем DNS зоны для домена на Тильде

Бонус для тех кто выполнит задание вовремя: 

Секретное поздравительное видео и чертовски-полезная PDF-методичка

Внутри методички:
Сайт, который конвертирует svg в png, да и вообще почти любые файлы в любые другие файлы
Сайты, который создает волнистые переходы между блоками сайтов (можно сохранить в SVG)
Сайт с большим набором векторных пиктограмм для веб-дизайна
Еще 3 сайта с пиктограммами для веб-дизайна 
Ссылка на сайт с бесплатными фотографиями
Сайт с красивыми зацикленными текстурами
Видео с обзором 14 книг для веб-дизайнеров
Видео про подбор фото для сайтов
Видео как быть здоровым и энергичным, если работаешь дома за компьютером

Результат  урока: два сделанных и опубликованных сайта с доменом

4 урок Еда в Азии

Теория:

Кириллица и латиница в шрифтах
С засечками, без засечкам и дизайнерские шрифты
Типы файлов шрифтов TTF, OTF и WOFF
Что такое конвертация и конверторы?
Меню работы со шрифтами в зеро-блоке: выравнивание, цвет, размер, отступы, межстрочное расстояние
9 видов начертаний шрифтов (жирность шрифтов)
Какой размер заголовка использовать на сайтах?
Рекомендованные размеры для абзаца с текстом
Плохие примеры использования шрифтов и отступов
Какой отступ должен быть между заголовком и текстом (простое правило)?
Примеры ошибок с отступами между заголовком и текстом
Как принять решение какой ширины должен быть текст?
Примеры распространенных ошибок с шириной текста
Какое количество строк читается хорошо, если текста много?
Правило для расстояния между строк должно быть в заголовке
Что такое характер шрифта?

Практика:

Настройки сайта: установка кастомных шрифтов из библиотеки
Как конвертировать шрифт Otf в Woff
Загрузка нестандартных шрифтов для сайта на Tilda
Выбор начертания шрифта в Зеро-блоке
Использование инструментов выравнивания в Зеро-блоке
Как использовать теоретические правила про шрифты на практике?
Задаем расстояние между заголовком и текстом
Настраиваем цвет фона: Solid, Linear
Что такое градиент и как его настроить?
Какие заголовки ставить для H1 и H2 на лэндинге?
Что такое типографика?
5 главных правил правил типографики в веб-дизайне

Бонус для тех кто выполнит задание вовремя:

Секретное поздравительное видео и бонусное видео

Внутри видео:

Как подключать шрифты кириллические шрифты через Гугл Фонтс

Результат  урока: два сделанных и опубликованных сайта с подключенными шрифтами

5 урок (Многостраничные сайты)

Теория:

На какие 2 крупных блока делятся все фотографии
6 сайтов с бесплатными фотографиями для веб-дизайна
Как искать и пользоваться сайтами с бесплатными фото?
Что такое фотостоки и 5 основных сайтов с платными фото?
Как не нарушать авторские права при использовании фото?
Способы поиска фотографий для сайта с помощью метафоры
Объект или метафора для поиска фото?
3 простых правила для поиска изображений для сайта
Размер в пикселях, ориентация, тип файла для фотогафий
Лицензия creative commons для фотографий в Google
Как и зачем сжимать фотографии в jpg и png без потери качества?
Многостраничные сайты: зачем и из каких типовых страниц состоит?
Из чего состоит типовая веб-страница?
Что такое шапка и что в ней должно быть?
Что такое подвал и как его правильно оформить?

Практика:

Как создать главную страницу в Тильде
Создаем страницу «О компании»
Работа со страницей «Контактная информация»
Настройка Блога в многостраничном сайте
Создаем страницу «Услуги»
Как добавить шапку с меню, чтобы она была на всех страницах сайта?
Как сделать при нажатии на логотип главную страницу сайта?
Создаем подвал с копирайтом и ссылками на страницы
Как поставить фоновую картинку или видео в шапку сайта?
Создаем блок с тремя колонками текста в Тильде
Что такое иконки на сайте? 
Как использовать Linea io и Tilda Icons?
Добавляем блок с командой на сайт
Как редактировать расстояние между заголовком и текстом в стандартном блоке Tilda
Добавляем видео в сайт
Создание нового потока в сайте Tilda (блог)
Как редактировать посты в потоках и выводить их в сайт?
Публикуем многостраничный сайт в интернет

Бонус для тех, кто выполнит задание вовремя: 

Секретное поздравительное видео и PDF-методичка

Внутри методички: 

Сайт, на котором вы можете найти высококачественные видео, которые можно использовать для видеофона на сайте. Можно скачать бесплатно
генератор макетов для 3D-устройств. Для анимации и неподвижных изображений. Подходит для создания презентаций, видео о продуктах, портфолио. Экспорт с разрешением до 4К за несколько минут в формате PNG, WebM, MP4 (дальше в курсе будем подробнее говорить про презентацию работ).
Сервис подбора цветов. Расширение Chrome, которое позволяет делать скриншоты всей страницы или любой части сайта.
Еще один удобный сервис подбора цветов.
Дополнительное видео про книги для для дизайнеров.

Результат урока: сделан и опубликован многостраничный сайт

6 урок (Интернет-магазин)

Теория:

Что такое домен и кириллический домен?
В чем разница адресов главной и вложеной страниц?
Всплывающее окно: Pop-up и его преимущества в загрузке
Что такое якорь в адресной строке и зачем он?
Разница между радиокнопками и чекбоксами
Карточка товара, ее вид и состав
Фильтры выбора в интернет-магазинах
Путь от выбора до покупки
Возможная ситуация с потерей заказа (как избежать)
Что такое CRM-система и чем она помогает в работе с заказами?
Виды CRM-систем: подручные и автоматические
4 примера топовых CRM-систем
Какие настройки доступны для карточки товаров?

"Невидимый блок" корзина и его важность

Как быстро найти блок на странице?

Создание якорных ссылок на разных частях сайта

Что такое цифровое название блоков 

Куда поступают заявки с лендинга?
Разбираем части заявки: статус, данные, комментарии

5 основых этапов в продажах
Что такое воронка продаж?
Сервисы приёма данных можно подключить?
Как подключить другую CRM-систему?

Практика:

Как создать главную страницу в Тильде?
Создаем страницу «Интернет-магазин»
Добавляем обложку и редактируем текст 
Активация пробного периода
Добавляем подходящую картинку из библеотеки Tilda Images
Раздел настройки: учимся работать с фильтром
Типографика и работа с настройками шрифта 
Создаем блок меню с логотипом над пунктами и переносим его
Добавление заголовка и его редактирование
Создаем 6 карточек товаров с pop-up окнами и настриваем их
Редактируем карточки: добавляем картинки и информацию

Добавляем заголок "Аксессуары" и создаем к ним 3 карточки товаров
Редактируем отступы между блоками
Добавляем и настраиваем блок "Доставка"
Добавления якорной ссылки и редактирование ее имени
Пробуем 2 способа активация якорной ссылки
Контрольная проверка всех частей сайта: якорные ссылки, отступы
Публикуем многостраничный сайт в интернет

Создание тестового заказа 
Исправление ошибок: Редакция текста на кнопках
Настройка CRM-системы Тильды
Создание листа заявок в CRM и подключение к сайту
Как добавить заявку в TildaCrm вручную?
Настройки листа: добавление этапов продаж

Бонус для тех, кто выполнит задание вовремя:

Секретное поздравительное видео и Бонусное видео по SEO

Внутри видео:

Кто такой веб-мастер?
Отличие веб-матера от веб-дизайнера
Что такое SEO? Зачем это? Как это работает?
Что такое внешняя оптимизация на простом примере
Виды внешней и внутренней оптимизации
5 простых шагов к определению структуры сайта
Сервисы для сбора семантического ядра 
Правила сбора данных через wordsat.yandex.ru
Что такое чистая чистотность и почему она важна?
Преимущества и минусы разных сервисов
Понятия разгрупировка и кластеризация
Правила создания задания для копирайтера
Что такое Title, H1, H2, абзац?
Понятие анкорный текст на примере 
Разбор разных способов перелинковки
Специальные файлы: что это и зачем они нужны? 
4 сервиса для анализа текста и условия их использования
Рекомендации для грамотного оформления статей 
Влияние поведенческих факторов на SEO
Что такое сниппет и фавикон?
Лайфхак: добавление телефона в сниппет

Результат урока: сделан и опубликован интернет-магазин с включенной TildaCrm

7 урок (SEO)

Теория:

Что такое поисковый запрос, поисковая выдача и сниппет?
Определения индексация и SEO-оптимизация
3 составлящих SEO-оптимизации
Изометрия и её примеры
Какой угол обычно используется в изометрии?
Что такое H1 и как он работает?
Свод правил для самого важного заголовка
Как задать H1 в разных блоках?
Какие еще бывают типы заголовков?
Alt: Альтернативные текст для изображений
В каких случаях используется тег alt?
Основные критерии атрибута alt
Как определить название alt тега?
Настройка alt тега в разных блоках
Что такое title и description?
Как отличить title от H1?
Взаимосвязь title и description со сниппетом
Как сделать адрес красивым и понятным: ЧПУ
Что такое бейджик?
Как сделать SEO в настройках сайта?
Что такое страница 404?
Фавикон: Маленькая иконка с большой значимостью
Простой и удобный сервис для создания фавикона
Что означает https в адресной строке?

Практика:
Создаем новую страницу «SEO»
Добавление Zero блока
Заполняем страницу основными элементами: текстовые блоки, кнопка 
Как подключить шрифты?
Работа с текстовыми блоками
Наполнение страницы графическими элементами и работа со слоями
Создание основного меню 
Добавление анимации на графические элементы
Настраиваем SEO-тег H1 на странице сайта
Как добавить alt тег к изображению в Tilda?
Пробуем настроить alt тег в галерее
Настраиваем гл. страницу: title, description, адрес и описание для соц. сетей
Создание страницы 404 и её настройка
Экспериментируем над созданием фавикона и загружаем на сайт
Учимся на примере настраивать редирект
Добавляем блоки с информацией, адаптируем их под сайт и настраиваем теги для заголовков
Закрепляем информацию: работаем с типографикой, анимацией и тегами

Бонус для тех, кто выполнит задание вовремя:
Секретное поздравительное видео и Бонусное видео про SEO тексты для сайта

Внутри видео:

Разбор правил написания SEO текста на примере интернет-магазина по продаже парфюмерии.
Как собрать симантическое ядро с помощью сервиса wordsat.yandex.ru?
Что такое чистая частотность и как ее собрать?
Правила составление title, H1 и H2
Сервис для анализа SEO-текстов
Правила повтора лючевых фраз
Тонкости составления текста: Почему написать сочнный SEO текст сложно?
Пример ТЗ для фрилансеров-копирайтеров

Результат урока: сделан и опубликован лэндинг с SEO-оптимизацией

8 урок (Клякса)

Теория:

Что такое дизайн-концепция?

4 примера сайта с разными стилями
Что отражает дизайн-концепцию на первом экрана сайта?
Как дизайн-концепция помогает при общении с заказчиками?
Что такое Shape в Тильде?
Правила создания композиции на примерах
Композиционные ошибки при работе с графическими элементами 
Способы работы с обрезанными изображениями
Как красиво размыть фигуру?
Что такое «грязная тень»?
Сетка: важный инструмент для работы с композицией
Как быстро найти нужный блок в Тильде?
Типичная ошибка в работе с фотографиями: пропорции людей и объектов

Практика:

Как создать главную страницу в Тильде?
Создаем страницу «Клякса»
Работа с графическими изображениями и текстом
Как создать графические фигуры в Тильде?
Как удобно перемещать маленькие объекты?
Тестируем создание мягкой тени
Как включить/выключить сетку в любом блоке?
Создаем кляксу с помощью специального сервиса
Как переместить элемент на задний план?
Добавляем информационные блоки и корректируем отступы 
Настройка пошаговой анимации для фигур
Редактируем контент блока с переключателем: задаем ID
Наглядный пример, как правильно выравнивать элементы по сетке
Как с помощью нейросети быстро удалить фон с фото?
Возможности сервиса для вырезания фото
Инструмент для быстрого кадрирования изображений в Тильде

Бонус для тех, кто выполнит задание вовремя:
Секретное поздравительное видео и PDF-методичка «Сервисы для клякс»

Внутри методички:

4 удобных сервиса для создания оригинальных клякс

Результат урока: сделан и опубликован сайт с использованием клякс

9 урок (3D)

Теория:

Как задавать вопросы на курсе и в жизни?
Как искать информацию по созданию сайтов в интернете?
Правила для корректной формулировки вопросов
Удобный сервис для создания снимков экрана с анимацией и без
Основные ошибки в создании дизайн-концепций?
Что такое композиция в веб-дизайне?
Правила композиции на сайтах
Равновесие в композиции одностраничных сайтов
Ошибки в композициях шапок сайтов
Вертикальное и горизонтальное равновесие в вебе
2 основных видов композиции
Разбор шапки сайта с ошибками
Еще несколько сайтов с классными фотографиями и иллюстрациями в одном стиле для использования в сайтах бесплатно

Практика:

Создание композиции в зеро-блоке
Работа с правилом равновесии в зеро-блоке
Как выравнивать элементы по вертикали и горизонтали?
Как использовать сетку для исполнения правил композиции?
Выравнивание заголовка, текста, кнопки и картинки
Правая и левая композиции зеро-блоков на Тильде
Создание текстур для сайтов с помощью веб-сервиса
Как применять текстуру к 3d объекту в онлайн-сервисе?
Создание паттерна с помощью авторской фотографии
Использование Яндекс Диска для загрузки и обмена файлами

Бонус для тех, кто выполнит задание вовремя:

Бонусное видео про теорию цвета

Внутри видео:

Что такое свет и цвет?
Как люди воспринимают цвета и какие есть особенности?
Устройство глаза и простой эксперимент
Цветовой круг: основные и дополнительные цвета
Холодные и теплые цвета
Температура цвета
Типы цветовых контрастов
Что такое комплиментарные цвета?
Цветовые модели 
Аддитивная и субтрактивная модели

Результат урока: сделан и опубликован лэндинг с акцентом на композицию

10 урок (Курсач)

Теория:

Постановка задачи для выполнения курсовой работы
Важное требование к электронной почте
Критерии оценки курсовой работы
Что будет оцениваться в творческой составляющей и технической составляющей сайта?

Практика:

Создание сайта по готовому тексту
Адаптация сайта под любое устройство
Работа с равновесием в композиции
Отработка навыков выравнивания текста, кнопки, картинок
Настройка title, description, H1, Alt-тег, 404

Бонус для тех, кто выполнит задание вовремя:

Секретное поздравительное видео. Файл с кистями для Photoshop и видео о том, как создавать переходы между блоками

Внутри видео:

Какие бывают способы перехода между блоками в Tilda?
Создание сайта в зеро-блоке
Как создать эффект погружения в сайт с помощью круга?
Разбраем эффект градиента
Сколько раз можно использовать переход при создании лендинга?
Как нарисовать облака в Photoshop?
Создаем интересный эффект для перехода с облаками
Рисуем в Photoshop заготовку для гранж эффекта
Эффект для перехода - гранж
Как в Figma нарисовать волну с помощью пера?
Создаем плавный переход между блоками с помощью волны
Эфеект разрезания страницы
Фигурные границы: как их использовать?

Результат урока: сделан и опубликован сайт, соответствующий чек-листу

11 урок (Заказы)

Теория:

Что такое CMS-система?
Что важно для заказчика сайта с бюджетом до 100 т.р.?
Какие преимущества у конструктора Tilda?
Какие типы сайтов можно создавать на Tilda?
Не каждый заказчик - твой клиент: научись отказывать первым
Как передать сайт клиенту? 
Ошибка, которую нельзя совершать при работе с разными заказчиками 
Кого мы называем заказчиком? 
2 вида поиска заказчиков

Основные ошибки ведения соцсетей
Какой оффер привлечет клиентов?
Разбираем, как правильно вести социальные сети
Правила общения с потенциальными заказчиками
На каких сайтах стоит себя продвигать?
Вредные советы от Данила Фимушкина, которые помогут тебе стать успешным веб-дизайнером
Разбираем, как нужно взаимодействовать с клиентом

Практика:

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

Бонус для тех, кто выполнит задание вовремя:

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

Внутри видео:

Основные причины появления страхов
Почему на самом деле страх - наш помощник?
Страх с научной точки зрения
Способы снижения уровня страха
Секрет создания правильного настроя перед поиском заказов 

Результат урока: грамотно оформленный профиль в социальной сети 

12 урок (UI/UX)

Теория:

Как устроено взаимодействие с заказчиками на фрилансе и в студии?
Плюсы и минусы работы на фрилансе и в студии и разница в стоимости проектов
Введение понятий User и Interface с примерами
Что такое UX и UI: понятное объяснение на примерах
Кто такой UI/UX дизайнер и чем он занимается?
В чем разница между веб-дизайнером и UI/UX дизайнером?
Как себя позиционировать на фрилансе?
Что такое графический интерфейс?
Что такое кнопка в интерфейсе и основные правил ее использования
Надпись на кнопке: правила формулировки и написания в интерфейсах
Правила расстановки акцентов: первичная и вторичная кнопка
Примеры кнопки со сплошной заливкой и контурной заливкой
Примеры кнопок с надписью, с закругленными углами
Как выбрать цвет на кнопке и цвета надписей
Виды закруглений и правила использования теней
Какие шрифты использовать на кнопках?
Отступы по вертикали и горизонтали на кнопках
Исследование про размер кнопок и вероятность точного нажатия на нее
Свойства кнопок: состояния нажатия, наведения, нажатие и неактивная
Демонстрация разных свойств кнопок на практике

Практика:

Что такое Figma и какие продукты можно в ней создавать?
Как зарегистрироваться в Figma и создать первый проект?
Инструмент Frame и создание рабочего пространства для iPhone
Инструмент создания текста и способы создания текстового фрейма
Установка шрифтов, размера шрифта и других свойств текста
Создание кнопки в Figma: скругления углов, градиентная заливка
Создание разных свойств кнопки: наведение, нажатия и т.д. с помощью группировки слоев
Добавление картинок в файл Figma
Создание модульной сетки стандартными средствами
Настройка падающей тени к блокам в Figma
Создание формы регистрации
Как создать интерактивный прототип?
2 способа поделиться ссылкой на проект и на интерактивный прототип

Бонус для тех, кто выполнит задание вовремя:

видео про восприятие интерфейсов

Внутри видео:

Как люди воспринимают интерфейсы и основные правила?
Важность взаимодействия с графическим интерфейсов
Что такое психофизиология?
Правило восприятия информации
Разное восприятие разных типов информации
Геометрическая память в создании интерфейсов
Контраст формы в восприятии информации 
Закон памяти: эффект края
Как использовать контраст размера?
Пример контраста размера при создании таблицы
Зачем нужен контраст движения и пример?
Чтение и положительная динамика с примерами
Изображение и текст в сайтах и восприятие
Контраст фона: чтение черного на белом
Длинна строки: проблемы с чтением широкого текста
Интерлиньяж и простота восприятия текста
Оформление текста путем дробления абзацев
Обратная пирамида текста

Результат урока: сделан интерактивный прототип в Fimga

13 урок (Мобильные приложения)

Теория:

Преимущества мобильного приложения в сравнении с сайтом
Что такое нотификация?
Почему мобильные приложения имеют высокую стоимость?
Минусы создания мобильных приложений для дизайнера
Гайдлайны от производителей при создании моб. приложений
2 вида гайдлайнов от производителей операционных систем
Понятие Вайфрейм (Wireframes) на простом примере
С чего начать работу над созданием моб. приложения?
Что такое шаблоны восприятия и как они облегчают нам жизнь?
Что такое контролы на Вайфрейме?
Понятия «свайпуть» и «тапнуть»
Логика сбора данных в приложении: окно авторизации
Какие жесты мы можем использовать для программирования кнопок в Figma
Что такое вилка на языке программистов?

Практика:

Создание фрейма под размер айфона в Figma
Оформление Вайфрейма страницы прослушивания трека в моб. приложении
Добавление простейших фигур в Figma
Как сгруппировать фигуры?
Добавление элементов интерфейса с помощью плагина
Пошаговая инструкция установки плагина в Figma
Создание фрейма поиска инфомрации в моб. приложении
Активируем кнопки и тестируем прототип
Создание и наполнение экрана кнопки «Лайк»
Как добавить Ui-kit к странице с прослушиванием трека?
Базовое, продвинутое и лидерское задание

Бонус для тех, кто выполнит задание вовремя:

Секретное поздравительное видео и бонусное видео про композицию

Внутри видео:

Что такое композиция?
Как работает композиция на простом примере
Для чего нужно анализировать потенциальную ЦА сайта?
Основные задачи композиции в веб-дизайне
2 базовых вида композиции
Что такое композиционный центр?
Факторы для выявления композиционного центра
Якорные объекты в композиции: правила размещения
Виды сеток для создания композиции в веб-дизайне 
Как выбрать тип размещения объектов?
Влияние композиции на восприятие информации
Базовые элементы композиции 
Оптические особенности выравнивания базовых элементов
Как можно влиять на восприятие пользователя с помощью «воздуха»?
Правило внутреннего и внешнего на примере 
3 типа группировки информации по принципу воздействия
Что такое рифмы блоков в композиции?
Законы построения композиции для упрощения восприятия на наглядных примерах

Результат урока: сделан Вайрфрейм для музыкального плеера с интерактивным прототипом в Figma

14 урок (Презентация работы)

Теория:

Что такое портфолио?
Из чего состоит портфолио у веб-дизайнера?
Главные правила всех портфолио
Что такое кейс в портфолио на простом примере
Из чего состоит хороший кейс?
Правила для создания эффектной шапки 
Как продемонстрировать дизайн сайта на носителе?
Удобный сайт для упрощенной работы с мокапами
Для чего используются файлы типа: psd?
Что такое пагинация?
Еще несколько примеров частей кейса
Как правильно определись картинку для превью?
Пример прототипа кейса сайта
Картинки для вдохновения: референсы

Практика:

Как экспортировать файл Figma в формате png?
Пробуем использовать мокап через сайт GetCover
Как открыть файл в фотошопе онлайн?
Процесс редактирования мокапа в фотошопе
Как масштабировать картинку в фотошоп?
Редактируем слой с текстом: наложение тени
Работа с инструментом пипетка 
Как изменить шрифт в фотошопе?
Экспортируем готовую работы из фотошопа
Регистрация на сайте Behance и первичная настройка профиля
Как поделиться проектом на Behance?
Тестируем ссылку на проект в режиме инкогнито перед отправкой
Как создать скриншот всего сайта?

Бонус для тех, кто выполнит задание вовремя:

Секретное поздравительное видео и бонусное видео

Результат урока: создана и выложена картинка PNG с презентацией сайта с помощью фотошопа 

15 урок (Курсовая работа)

Теория:
Что такое дизайн-концепция?
Анализ конкурентов: что в себя включает?
Создание мудборда
Редизайн: что это значит?

Практика:
Выполнить редизайн сайта

Бонус для тех, кто выполнит задание вовремя Секретное поздравительное видео и бонусное видео про маску в фотошопе:
Что такое маска?
Виды масок
Рассмотрим несколько интересных кистей
Создание композиции с помощью маски и кисти

Результат урока: создано 2 мудборда, по одному из них сделать дизайн-концепцию в Тильде

16 урок (Дипломная работа)

Теория:

Ниша- разбираем понятие
Что такое нишевание?

Практика:

Создание самого лучшего сайта за все время вашего обучения

Бонус для тех, кто выполнит задание вовремя:

Секретное поздравительное видео и  видео .

Внутри видео:

Результат урока: создания лучшего сайта, который можно поместить в портфолио.