Веб-дизайн с Данилом Фимушкиным

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

Вводный урок 

Знакомимся с правилами  

Урок 1. Анимация

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

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

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

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

Урок 2. Цвет

Теория:

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

Практика:

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

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

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

Урок 3. Графика

Теория:

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

Практика:

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

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

Урок 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 (блог)
Как редактировать посты в потоках и выводить их в сайт?
Публикуем многостраничный сайт в интернет

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

Урок 6. Интернет-магазин

Теория:

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

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

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

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

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

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

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

Практика:

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

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

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

Результат урока: сделан и опубликован интернет-магазин с включенной 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-оптимизацией

Урок 8. Дизайн-концепция

Теория:

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

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

Практика:

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

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

Урок 9. 3D

Теория:

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

Практика:

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

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

Урок 10. Проверочный проект

Теория:

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

Практика:

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

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

Урок 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. Адаптивность и плагины

Теория:
Что такое Ui-kit и его составляющие 

Для чего нужна дизайн система? 
Что такое Гайды/Гайдлайны? 
Разбор основных элементов UI на примере 
Ключевые цвета, как часть бренда компании 
Что такое TAG и ACCORDION? 
Какие виды кнопок могут быть в Ui-kit? 
Преимущества объемных дизайн систем 
Чекбоксы и радиокнопки в дизайн системе 
Что такое модальное окно, notification и switch в Figma? 
Примеры использования переключателя Switch в повседневности 
Чем отличается текстовая форма от поля ввода? 
Выпадающие списки,элементы выбора и переключатель TAB в Ui-kit 
Поля ввода: виды и возможные состояния 
Почему важно использовать Label над каждым полем ввода? 
Какие еще виды дизайн систем бывают? 
Где брать UI-kit в Figma? 
Инструмент для совместной работы: Fig.Jam.file 
Что такое плагины и как они помогают в создании сайта? 
Раздел с полезными материалами explore community 
Из каких элементов состоит интернет-магазин? 
Любимая пиктограмма начинающих дизайнеров: Бургер 
Что такое выкладка товара? 
Популярные фильтры товаров в интернет-магазинах 
Подробный разбор составляющих карточки товара 
Что такое пагинация на сайте интернет-магазина

Практика: 

Как переключать и создавать страницы в Figma?
Пробуем инструменты для работы в Fig.Jam.file
Как настроить доступ для других пользователей к Fig.Jam.file?
Пошаговый процесс установки виджета в Figma
Как скопировать файл к себе в аккаунт?
Добавление иллюстраций в Figma при помощи плагина
Как правильно выравнять элемент с помощью сетки?
Работа с графическими элементами и слоями иллюстации
Создание текстового блока и выбор шрифта
Адаптируем сайт: создание макетов для мобильной версии и планшета
Как поделиться ссылкой на проект?

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

Урок 14. Мобильные приложения

Теория:

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

Практика:

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

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

Урок 15. Презентация работы

Теория:

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

Практика:

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

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

Урок 16. Стили дизайна и редизайн сайтов 

Теория:

Скевоморфизм - что характеризует этот стиль?
Стиль Flat
Material Design - язык, на котором говорит Google
Минимализм - особенности этого стиля
Неоморфизм - плоский или выпуклый?
Разбираем локальные стили

Практика: 

Сделать шапку сайта в ретро стиле
Бонус для тех, кто выполнит задание вовремя:
Секретное поздравительное видео и видео об e-mail рассылках:
Зачем нужны рассылки?
В чем отличие от веба?
Из чего состоит e-mail маркетинг?
Как делать дизайн писем?
Разбираем, какие существуют ограничения
Струткура письма
Разбираем техники верстки
Ответы на вопросы студентов

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

Урок 17. Брифинг

Теория:

Брифинг с заказчиком

Практика: 

Создать сайт, адаптированный под разные устройства (по брифу от заказчика из видео)

Результат урока: создан готовый сайт на Тильде по тексту (брифу)

Урок 18. Работа с заказчиками

Теория:
Кто оплачивает покупку картинок, видео, иконок и т.д. при создании сайта для заказчика?
Как определить цену за услуги?
3 способа определить стоимость своих услуг
Общение с заказчиком
Как застраховать себя от непредвиденных расходов?
Как передать сайт клиенту?
Что делать, если нет текста: способы решения
Как расширить функционал Тильды и реализовать все потребности заказчика?

Практика: 

Пытаемся взять первый заказ на сайт

Результат урока: возможно, первый заказ на сайт

Урок 19. Вредные советы

Теория:

Правильная расстановка акцентов
Скорость загрузки сайта
Какие цвета не следует использовать?
Шаблоны взаимодействия: стоит ли придумывать новые?
Шрифты, которыми лучше не пользоваться
Орфография и пунктуация: нужно ли о них забывать?
Надо ли проверять доступность сайта?

Практика: 

Находим в интернете плохие сайты
Создаем свой ужасный сайт
Переделываем хороший сайт, делаем его "страшным"

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

Урок 20. Аппликация

Теория:

Что такое аппликация?
Примеры хороших аппликаций

Практика: 

Создаем новый файл в фотошопе
Как в фотошопе пропорционально уменьшать картинку?
Учимся вырезать объект
Как редактировать имя слоя?
Создаем тень от картинки в фотошопе
Делаем фон, который выглядит, как аппликация
Экспортируем файл в Тильду

Результат урока: создана апликация в фотошопе

Урок 21. Полосы

Теория:

Различные варианты использования полос для фона

Практика: 

Создаем фон: полосы, переходящие в фон.
Рассматриваем различные варианты использования полос для фона
В фотошоп делаем интересную маску с использоваением звезды
Переносим все в Тильду и создаем очень классный эффект

Результат урока: использование эффекта полос на сайте

Урок 22. Портфолио

Теория:

Определение понятия портфолио
Что такое кейс?
Из чего состоит портфолио?
Как может быть оформлено ваше портфолио
Главное правило веб-дизайнера
Что должно быть на сайте с вашим портфолио?
Если мало работ, что можно сделать?
Рекомендации, которые вам помогут в создании портфолио

Практика: 

Создаем портфолио

Резултат урока: создано и опубликовано портфолио

Урок 23. Работа над заказом

Теория:

3 универсальных параметра в дизайне при создании чего-либо
Чем отличается дизайнер от художника?
Задачи, которые решает веб-дизайн
Как отличить хороший дизайн от плохого?
Что такое дескрипт?
Что такое юзер сторис с примерами?
Понятие мудборд и его составляющие

Практика: 

Работа с подбором цвета: сервис от Adobe

Урок 24. Финальная учебная работа

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

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

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