PRO Веб-дизайн
Основы веб-дизайна
Конструктор сайтов Tilda
Figma
Коммьюнити веб-дизайнеров
Работа с клиентом
Автоматизация инфопродуктов
Все юридические вопросы
Эфиры с приглашенными экспертами
Бонусные уроки и эфиры в записи
Саморазвитие и новые навыки
Старт 28 февраля
4 поток
МОДУЛИ КУРСА
Let's go!
Read more
Ресурсы для веб-дизайнеров
Модуль 2.
Перед тем как приступить к урокам пройдите мини-тест по ассоциации цветов
Модуль 2.
Колористика. Психология цвета
Психология форм
Сочетание цветов
Модуль 2. Урок 8.
Типографика
Модуль 2. Урок 9.
Типографика. Анатомия шрифта
Модуль 2. Урок 10.
Типографика. Поиск шрифта. Инструменты
Модуль 2. Урок 10.
Композиция. Работа с текстом
мои инструменты для работы с текстом
Модуль 2. Урок 1.
Баланс. Визуальный вес.
Модуль 2. Урок 2.
Основы композиции
Модуль 2. Урок 3.
Иерархия и контраст
Модуль 2. Урок 4.
Расстояние
Модуль 2. Урок 5.
Белое пространство
Модуль 2. Урок 6.
Выравнивание и Ритм
Модуль 2. Урок 7.
Создаем прототип сайта
Прототип — это схема страницы, на которой мы показываем, как и где будут расположены элементы дизайна: текст, картинки, иконки, кнопки, формы связи и тд.
С его помощью мы уже сможем поработать над композицией проекта и примерно представить структуру будущего сайта и согласовать его с заказчиком. Правки можно быстро внести на уровне прототипа — это поможет избежать серьёзных доработок у финального макета.
задание 1
1. На диске создать ворд и собрать наполнение и доступы в одном месте, чтобы было удобно работать с текстом
2. Создать свой прототип сайта по примеру на Уроке 7
презентация - вводная часть
ЭТАПЫ ДИЗАЙН-ПРОЦЕССА
Исследование
Исследование
Анализ клиентов
Анализ конкурентов
Поиск референсов
Делаем мудборд
Идея

Результат: Брифинг
Мудборд и Идея


Креатив
Работа в figma
Прототипы
Макет по мудборту - редактируем дорабатываем

Итог: Макет дизайн проекта

Согласование c заказчиком
Реализация
Оформляем визуальный дизайн на Tilda
Обеспечиваем адаптивность
Настройку сайта и страниц

Итог: Завершение проекта

Сдача проекта



Этап 1. исследование
Во время работы над личным/ коммерческим проектом нельзя полагаться только на свою интуицию - очень важно провести интервью БРИФ с заказчиком
- понять цели и задачи проекта
- узнать аудиторию и узнать, что им нужно,
- изучить конкурентов
- преимущества и недостатки проекта клиента

Вытащить из этих данных ИДЕЮ ДИЗАЙНА ПРОЕКТА

ВАЖНО: Брифинг надо проводить самостоятельно, желательно с глазу на глаз (оффлайн либо онлайн видеозвонок)
задание 1
1. Определиться с темой проекта
2. Собрать исходные данные /Провести интервью - бриф с заказчиком
- Определить цели и задачи проекта
- Определить аудиторию
- Изучить конкурентов
- Определить преимущество и недостатки проекта
модуль 1
Figma
- это инструмент для дизайнеров, один из самых популярных и удобных кроссплатформенных графических редакторов для совместной работы.
Здесь можно делать макеты сайтов перемещать их на Тильду
и создавать красивые сайты.
В Figma можно работать с браузера
либо установить на ноутбук/ ПК
Для того, чтобы установить Figma, выполните следующие шаги:


  1. Загрузите установочный файл с официального сайта по ссылке https://www.figma.com/downloads/.

  2. Запустите скачанный файл.

  3. Укажите место установки или оставьте предложенное по умолчанию.

  4. Запустите программу и авторизуйтесь под своими логином и паролем.


В результате у вас запуститься программа с вашими созданными проектами в онлайн-версии.
Задание: установить figma на ноутбук и отправить мне сообщение, что Выполнили задание
задание 2

1. Установить у себя Figma - Найти сверху "+" - и создать проект
2. Перейти по кнопке "Макеты для заданий в Figma" (написать мне чтобы я подтвердила ваш вход)
3. Нужно скачать себе Шрифт Unbounded - Разархивировать папку - Нажать на шрифт в ttf - формате сверху нажать " Установить шрифт"
4. Загрузить в макет ваши референсы и добавить наполнение проекта
урок 1
Знакомство с Tilda
Про тарифы Tilda
После регистрации Вам доступен тариф Free, где можно использовать сайт на бесплатной основе постоянно. После перехода с Free на Personal обратно на бесплатный тариф не перейти, поэтому я предлагаю вам остаться на Free (то есть не активировать 14 дней Personal, как в видео) если вы и дальше хотите использовать этот проект для себя


Задание 1
1. Зарегистрироваться на этом сайте https://tilda.cc/, ввести имя, почту и придумать пароль. 2. Дать название своему проекту (сайту).
~
УРОК 2

ИНТЕРФЕЙС TILDA. cоздаем новую страницу


Задание 2
После создания проекта нажать на «Создать новую страницу» - Все блоки - из Библиотеки блоков выберите:
⭐️ 1 блок из раздела «Обложки» - Блок с заголовком, подзаголовком и кнопкой
⭐️ 1 блок из раздела «О проекте»
⭐️ 1 блок из раздела «Преимущества»
⭐️ Вставить из раздела "Формы" - Форму.
⭐️ 1 блок из раздела "Контакты"
~
УРОК 3

Редактор блоков
Задание 3
Нужно поменять под ТЗ:

1. Название заголовков и текстов.
2. Добавить блок «о проекте» добавить текст с файла и изображение
3. Добавить кнопку «Записаться» с ссылкой на форму
4. Вставить блок преимущества или с иконками - попробовать добавить иконки с библиотеки
3. Вставить форму, настроить ее по примеру в уроке
4. Обязательно сохранить нажав на кнопку сверху «Опубликовать».

~
Настройка в Tilda
УРОК 4

Обзор «Настройка» страниц и «Настройка сайта»


Задание 4
1. Поменять в Настройках сайта - в вкладке «Главное» - «Субдомен» на ваше имя на англ. языке например: http://shelomovasardana.tilda.ws
~
УРОК 4*

Настройка домена и подключение к Tilda
Домен (доменное имя) — это уникальный адрес, по которому открывается сайт в интернете. Как правило, домены состоят из букв и цифр и имеют вид site.ru, где .ru – доменная зона (https://www.reg.ru/support/domains/podbor-domennogo-imeni/chto-takoe-domen-pervogo-urovnja), а site – домен второго уровня. Чтобы купить доменное имя для сайта, нужно придумать домен второго уровня, а затем выбрать доменную зону. В REG.RU можно выбрать как недорогой домен, так и домен премиум-класса. Часто стоимость домена зависит от зоны, в которой он зарегистрирован.

ВАЖНО: Для того чтобы привязать домен, ваш аккаунт должен быть активирован на 14 бесплатных пробных дней на тарифе Personal


Задание 4 *
ЗАДАНИЕ 2* (по желанию, можете выполнить в самом конце курса): Вы можете попробовать купить домен на reg.ru за 199р - прописать свои данные - и настроить по примеру для себя, чтобы потом при работе с заказчиком быть уверенной(ым) в настройке домен и сделать это быстрее за 5-10мин ✅
~
УРОК 5

Настройка сайта формы и почты


Задание 5
В «Настройке сайта» вкладка «Формы» настроить email по примеру на видео.
На странице добавляете блок с формой и в контенте меняете текст вашей формы, должна стоять галочка на email в Подключённых сервисах и обязательно не забываем нажать «Сохранить и закрыть» - затем «Опубликовать» - Зайти по ссылке на страницу, заполнить вашу форму и отправить, сообщение с формы должно прийти к вам на почту.
МОДУЛЬ 1. УРОК 1
Знакомство с Figma
МОДУЛЬ 1. УРОК 2
Сетка в Figma
МОДУЛЬ 1. УРОК 3
Фигура и заливка Fill
МОДУЛЬ 1. УРОК 4
Линия(фигура) и контур
МОДУЛЬ 1. УРОК 5
Фигуры
задание 3.
Посмотреть короткие уроки 1-5
Создать Frame и сделать в нем фигуры как на уроке 5. Отправить в группу или мне лично в Telegram.

Срок выполнения до вскр 10.03.2024
FIGMA. БОНУСНЫЙ УРОК 1.
Плагины
FIGMA. БОНУСНЫЙ УРОК 2.
Обтравочная маска
figma. бонусный урок 3.
Вырезаем фон
БОНУСНЫЙ УРОК
Урок Canva+Tilda
здесь я беру иллюстрации, графические элементы, каллиграфию / тут же создаю гайды
/ презентации/ обложки / совмещаю ее с Tilda и создаю заказы
Бонусный урок
Сайт за 30 мин
Для самых стойких и усидчивых сайт за 30 мин для Анны Фоминой - эксперта по ораторскому мастерству ! Жду вашу обратную связь после просмотра и выполнения задания
Материалы к сайту будут ниже
Бонусный урок
Эфир с юристом
Бонусный урок
Частые ошибки при оформлении веб-дизайна
Контакты
Made on
Tilda