Разработка прототипа сайта в Figma: ТЗ на создание дизайна SEO-блоков. Лекция 39
В этом видео мы рассмотрим процесс разработки прототипа сайта в Figma и составление технического задания (ТЗ) на создание дизайна SEO-блоков.
В видео вы узнаете:
- Как создать прототип сайта с использованием Figma.
- Зачем нужен прототип сайта и как он помогает в разработке дизайна.
- Примеры прототипов страниц сайтов и этапы их создания.
- Как составить ТЗ на разработку дизайна для SEO-блоков.
- Практические советы по созданию макета прототипа сайта.
- Подробное руководство по работе в Figma: от создания файла до готового макета.
Мы рассмотрим каждый шаг, начиная с создания ТЗ в Google Docs, и заканчивая окончательным макетом дизайна в Figma. Вы увидите, как сделать прототип главной страницы сайта, настроить интерфейс и добавить важные элементы, такие как логотип, меню-бургер, баннеры и отзывы.
💻Ссылки:
Наш telegram-канал:
Наш сайт:
Отправить нам резюме или заявку на продвижение сайта:
Тест к лекции -
Официальные видеоуроки по графическому редактору:
Статья по созданию макета ТЗ на дизайн SEO-блоков для десктопа:
Пример ТЗ на дизайн (из видео):
В ролике приведено несколько примеров YMYL-факторов. Узнать подробнее про YMYL-факторы вы можете в инструкции для асессоров Google:
Тайминги:
00:00 - Вступление
01:09 - Зачем составлять ТЗ на дизайн?
01:39 - Для чего нужен макет?
02:18 - План работ
02:35 - Семантика
03:08 - Конкуренты
03:51 - ТЗ на дизайн
04:37 - Создание ТЗ в Google Docs
09:16 - Создание макета в Figma
09:43 - Создать файл
09:55 - Создание холста
10:27 - Первые элементы макета
10:51 - Создание шапки сайта
11:46 - Логотип
12:40 - Меню-бургер
12:50 - Загрузка иконок через Figma Community
15:28 - Главный баннер
16:12 - Кнопка
18:30 - Баннер
19:03 - Копирование объекта
19:28 - Баннер для блока с текстом
20:01 - Шаблонный текст
20:12 - Плагин Lorem Ipsum
21:30 - Отзывы
21:40 - Рейтинг
23:05 - Комментарии
24:10 - Готовый макет дизайна
26:10 - Переименование макета
26:23 - Итоги
Подписывайтесь на наш канал @SEOAntTeam/ и ставьте лайк, если это видео было вам полезно. Оставляйте комментарии с вашими вопросами, и мы обязательно ответим на них. Удачи в оптимизации вашего сайта!
Может быть интересно:
#seo #seoобучение #seoпродвижение #ПрототипСайта #СозданиеПрототипаСайта #ПрототипСайтаВФигме #SEODизайн #ПрототипДизайнаСайта #РазработкаПрототипаСайта #Figma #ПрототипСайтаПример #КакСделатьПрототипСайта #ТЗНаРазработкуДизайна #ПрототипГлавнойСтраницыСайта #СозданиеПрототипаСайтаВFigma #ПрототипИнтерфейсаСайта
4 views
948
241
1 month ago 00:00:19 15
Китайский танк VT-4 опозорился во время демонстрации на международном авиашоу
1 month ago 00:01:11 2
⚡ КУРСЫ ПРОГРАММИРОВАНИЯ ПИТОН В МОСКВЕ 🎯 КУРСЫ ПОДГОТОВКИ ПРОГРАММИСТОВ 🔵
1 month ago 00:01:04 1
ЗАРАБОТОК В ИНТЕРНЕТЕ БЕЗ СТАВОК ❗ ГДЕ МОГУТ ЗАРАБАТЫВАТЬ ДЕТИ ❕
1 month ago 00:01:04 1
🔥 Без вложений заработать деньги 🎯 Заработок слив курсов ✔
1 month ago 00:01:04 1
⚠ Я ДОМОХОЗЯЙКА ЧЕМ ЗАНЯТЬСЯ 🔥 ПРИРАБОТОК НА ДОМУ
1 month ago 00:01:11 2
PYTHON КУРСЫ 😎 АЙТИ ПРОГЕР
1 month ago 00:10:09 347
Мощные испытания новой лодки BRO 3.7 + замеры скорости
1 month ago 00:01:04 1
🏁 СКОЛЬКО МОЖНО ЗАРАБОТАТЬ НА ИГРУШКАХ РУЧНОЙ РАБОТЫ 💯 У КОГО КАКОЙ БИЗНЕС
1 month ago 01:32:01 66
Актуальные вопросы перехода на новую модель планирования перспективного развития в электроэнергетике
1 month ago 00:23:55 35
История создания необычного дома в Ижевске. Интервью
1 month ago 00:08:04 6
5 - Подготовка входных данных для модели Tensorflow Lite в приложении Swift IOS
1 month ago 00:03:07 5
6 - Обзор интеграции моделей Tensorflow Lite в приложения IOS Swift
1 month ago 00:04:25 6
5 - Получение выходных данных из модели Tensorflow Lite и их отображение в приложении IOS Swift
1 month ago 00:07:07 5
4 - Подготовка входных данных для моделей Tensorflow Lite и передача их в приложение IOS Swift
1 month ago 00:07:30 5
3 - Загрузка моделей Tensorflow Lite в приложение IOS Swift
1 month ago 00:05:46 5
2 - Добавление моделей Tensorflow Lite в приложение IOS Swift
1 month ago 00:15:14 1
Создание точных моделей по чертежам в Blender 2.8
1 month ago 00:06:02 5
4 - Передача входных изображений в модели обнаружения объектов и получение выходных данных в Android
1 month ago 00:10:28 6
3 - Загрузка моделей обнаружения объектов в приложение Android Kotlin
1 month ago 00:14:46 712
Starship _ SN10 _ Испытание на большой высоте
1 month ago 00:00:42 4
Клип @oco_home
1 month ago 00:01:21 4
Очки компьютерные с защитой от синего спектра JIE-JING, МОДЕЛЬ О (JAP-JOI-026)
1 month ago 00:11:30 1
Грузовой автомобиль Е20 и подготовка нового двигателя ДА112СМ.
1 month ago 00:00:42 3
Nvidia выпустили ИИ для создания трехмерных моделей Edify-3d