Курс «Веб-дизайн с нуля»

Хотите освоить популярную профессию и собирать сайты? Вы можете сделать это как главной деятельностью, так и выгодной подработкой.

Данил Фимушкин предлагает вам освоить веб-дизайн и перестать зависеть от начальников, просиживая штаны на унылой работе. Вы заслужили большего! Работая на себя, можно уделять больше времени семье и зарабатывать от 100 000 ₽ в месяц.

Вы научитесь применять на сайтах медиа, оформлять онлайн-магазины, настраивать оптимизацию. Никаких навыков программирования или дизайна не требуется.

На курсе «Веб-дизайн с нуля»:

1. Как стать веб-дизайнером.
2. Проектирование персонажей.
3. Анализ целевой аудитории.
4. Разработка интерактивных прототипов.
5. Интернет-маркетинг.

В результате вы освоите востребованную профессию и сможете уйти на фриланс. Начнете зарабатывать на создании сайтов.

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 урок (Дипломная работа)

• Ниша- разбираем понятие.
• Что такое нишевание?
• Создание самого лучшего сайта за все время вашего обучения.
• Бонус для тех, кто выполнит задание вовремя: секретное поздравительное видео и видео .
• Результат урока: создания лучшего сайта, который можно поместить в портфолио.

• Формат
  Самостоятельно с наставником
  Видеоуроки
  Обучение в ЛК на GetCourse
• Демодоступ
• Количество уроков
  16
• Уровень сложности
  Для новичков
• Когда вы будете учиться
  В любой день в любое время
• Сопровождение
  Куратором
• Техническая поддержка
  В рабочее времяТелефон