[Easystudy] Изи Веб-Дизайн. Тариф Basic (Олеся Потипако)

[Бана-НА]

Ссылка на картинку

Программа курса:

25+ часов видео-уроков с теорией и практикой

Блок 1 — Место сайта в маркетинге (00:47:43)

• Словарик веб дизайнера
• Типы сайтов
• Место сайта в маркетинге
• Лендинг пейдж

Блок 2 — Знакомство с Figma (01:56:58)

• О редакторе Figma
• Регистрация в Figma — Пошаговая инструкция
• Знакомство с интерфейсом главной страницы Figma
• Работа с командой и подготовка к работе
• Верхнее меню панель инструментов
• Левая панель Figma: работа со слоями и группами
• Правая панель
• Горячие клавиши
• Как установить шрифт и подгрузить в браузерную версию Figma
• Практика. Рисуем главный экран сайта
• Экспорт файла

Прототип сайта (02:19:41)

• Что такое UI
• Что такое UX
• Клиентский Бриф (как с ним работать)
• Глубинное интервью с клиентом
• Анализ ниши и конкурентов
• Работа со смыслами и информационный копирайтинг
• Как создавать продающие и цепляющие заголовки
• Что такое прототип и зачем он нужен
• Что такое Модульная сетка
• Как создать модульную сетку в Figma
• Figma Community - твой незаменимый помощник
• Плагины в Figma Community
• Файлы в Figma Community
• Карта сайта (UX Site map)
• Wireframe - что это, и для чего он нам нужен
• Практика: Прототип сайта

Материалы модуля:
Статья: Изи UX/UI. Просто о сложном
Конструктор заголовков 4U
Шаблон: 200 конструкций продающих заголовков
Чек-лист: Как должен выглядеть ваш текст
Гайд: 500+ идей для сайтов
30 триггеров: Используйте их в написании текстов для вашего дизайна
Тренажер для развития насмотренности и навыков вёрсткиБрифинг клиента:
Бриф клиента на создание сайта
Видео инструкция по брифу
117 вопросов для глубокого интервью с клиентом
Mind-map c вопросами для интервью с клиентом
Аудио: Пример живого интервью с клиентом

Дизайн сайта (04:38:41)

• 7 элементов хорошего дизайна
• Стили дизайна
• Типографика ч.1
• Типографика ч.2
• Колористика (Цвета)
• Работа с изображением
• Как и где искать Референсы
• Референсы и мудборд. Что это и как с этим работать?
• Стили в Figma (текст, цвет, эффекты)
• Дизайн-система (design language/ UI-kit)
• Маска в Figma (мини-урок)
• Компоненты в Figma
• Практика Figma. Сайт Доставки
• Остальные экраны в Figma
• Мобильная версия сайта в Figma
• Как создать уникальный дизайн из референсов
• Auto Layout

Материалы модуля:
Подборка стилей дизайна
Подборка сайтов со Шрифтами
Виды Сеток
Сервисы по подбору цветов
Статья про UI-киты с примерами
Топ-плагины для работы в Figma

Блок (05:18:00)

• Регистрируемся на Tilda
• Разбираем функционал для начинающих
• Приветствие
• Обзорная экскурсия по ZERO-block
• Настройки рабочего поля
• Работа с цветами на примере фона
• Работа с фоновым изображением
• Работа с текстом в ZERO-block
• Работа с картинками и формами, 3 части
• Работа с кнопками
• Практика: Делаем главный экран сайта
• Адаптируем под мобильные устройства
• Практика: Экспорт из Figma в Tilda
• Практика: Мобильная верстка сайта и настройка меню
• Настройка рабочего поля и сетки
• Размеры, цвета, фон
• Работа и практика в Zero-блок
• Мобильная версия и адаптив

Материалы модуля:
Советы по переносу макета из Figma в Tilda

Блок (05:11:00)

• Базовая анимация в ZERO-block
• Step-by-Step анимация в ZERO-block
• Мастер-класс по анимации в ZERO-block
• Многостраничный сайт на Tilda
• Сквозная шапка и подвал сайта
• Карточка товара и хлебные крошки
• Настройка корзины и оплаты
• Настраиваем корзину для тарифов
• SEO-оптимизация сайта в Tilda
• Как подключить домен в Tilda
• Настройка форм обратной связи в Tilda
• Как использовать в работе Nolim
• Как перенести сайт заказчику
• Как купить и подключить домен на сайт
• Настройки поддоменов и структуры сайтов
• Создаем Pop-up (модальные окна)
• Подключаем формы обратной связи к e-mail и Телеграму
• Делаем кликабельные e-mail и телефон
• Делаем квизы в Tilda
• CRM — что это такое?
• SEO-оптимизация сайта в Tilda
• Настраиваем HTTPS протокол домена
• Подключаем Яндекс Вебмастер
• Про сервисы, где есть готовые коды с фишками

Блок (05:09:50)

• Другой дизайн в Figma+ Rubehance
• Как сохранить многостраничный PDF
• Редизайн презентации (практика)
• Оформление для GetCourse
• Баннеры и оформление соц.сетей
• Практика: Дизайн карточки на Wildberries с нуля
• Разработка логотипа в Figma
• Стиль — Техдизайн (РУБиханс) ч.1
• Стиль — Техдизайн (РУБиханс) ч.2

Материалы модуля:
Бонус: Дизайн сайта для сериала WEDNESDAY NETFLIX в Figma

Блок (01:24:32)

• Кейс на Behance
• Behance: обзор кейсов
• Оформление кейса в Figma
• Как пользоваться Мокапами в Figma (Mockups)
• Инструкция. Как загрузить кейс на Behance
• Оптимизация
• Повысить рейтинг кейса
• Кураторы
• Инструкция по работе с файлом. Шаблон оформления кейса на Behance

Материалы модуля:
Шаблон оформления кейса на Behance
Инструкция. Оформление кейса на Behance
Инструкция. Как добавлять кейсы на Behance
Как продвигать портфолио на Behance. Подробное руководство
10 Figma-плагинов с мокапами

Блок (01:51:02)

• Модуль фриланс. Интро
• Как оформить профиль на бирже
• Отклики на биржах
• Телефонная книга
• Блогеры
• Нетворкинг
• Сарафанное радио и личный бренд

Материалы модуля:
100 площадок для поиска заказов фрилансеру
11 способов поиска клиентов
Инструкция: Как настроить и оформить профиль Fl.ru
Совет: Как заполнить блок «О себе»
Примеры отклика на проект
Шаблон Прайс-листа
Пример: Бриф клиента для сайта
Инструкция по поиску первого клиента с использованием техник «Телефонная книга» + «Посоветоваться»

Блок (02:14:00)

• 10 этапов продаж
• 6 этапов реализации
• Искусство презентации коммерческого предложения
• Пакет документов ч.1
• Пакет документов ч.2

Материалы модуля:
Пример: Брифы для сайта и лого
Пример соглашения: Взаимные обязательства и NDA
Примеры КП
Список документов: Рассрочка не для РФ
Пример пакета документов (договор, ТЗ, план-график, приложения, акты и пр.)

Блок (03:18:07)

• Регистрируемся на Tilda
• Разбираем функционал для начинающих
• Разбираем функционал редактора Zero Block
• Как сделать сайт на ZERO-блок на Tilda с нуля (ч.1)
• Как сделать сайт на ZERO-блок на Tilda с нуля (ч.2)
• Как настроить форму обратной связи в Tilda
• Как настроить blur эффект
• Как поставить видео на фон в ZERO-блоке и настроить эффект печатной машинки
• Как сделать кнопку
• Как сделать градиент в кнопке
• Как настроить анимацию. Основы
• Как использовать SEO оптимизацию сайта в Tilda
• Как подключить домен в Tilda

Материалы модуля:
Рисуем главный экран сайта "Хэллоуин" в Figma
Переносим и анимируем главный экран сайта "Хэллоуин" в Tilda
Как найти клиентов

Блок (01:41:28)

• Многостраничный сайт на Tilda
• Сквозная шапка и подвал сайта
• Карточка товара и хлебные крошки
• Корзина и покупка
• Корзина и оплата 2
• SEO оптимизация сайта в Тильда
• Как подключить домен в Тильда
• Настройка форм обратной связи в Тильда

Блок (01:08:56)

• Создаем картинки с Kandinsky
• О текстах, цветах и шрифтах
• Создаем тексты с ChatGPT
• Создаем картинки с Midjorney
• Делаем сайт с помощью нейросетей

Блок (01:12:16)

• Smart-анимация в Figma
• Практика: Изи-Анимация по сериалу «Слово Пацана»
• Практика: Изи-Анимация «Капкейки»

Блок (01:12:16)

• Smart-анимация в Figma
• Практика: Изи-Анимация по сериалу «Слово Пацана»
• Практика: Изи-Анимация «Капкейки»

Блок (01:22:19)

• Личный бренд
• Личный бренд в соцсетях
• Личный бренд и связи
• Формируем свой ЛБ: вопросы
• Личный бренд, итоги
• Что нельзя и что можно делать в блоге
• Анализ конкурентов
• Алгоритмы ТикТок и Инстаграм
• Как монтировать в inShot
• Как перестать стесняться и бояться камеры
• Влияние окружения
• Аффирмации
• Авторская методика продвижения в Инстаграм
• Почему единая лента Инстаграм не работает

Блок (00:35:10)

• Масштабирование ч.1
• Масштабирование ч.2
• Масштабирование ч.3
• Как выглядел мой путь в мире дизайна (реальный опыт)

Показать больше