Разработка прототипа сайта в 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 #ПрототипИнтерфейсаСайта
32 views
1217
320
2 years ago 00:02:31 1
Блок 4 Разработка прототипа 4 Создание прототипа
6 years ago 00:16:16 3
Урок №6 Разработка прототипа сайта
6 years ago 00:45:58 1
Разработка приложений для IOS (iPhone). Урок 5 - Создание прототипа приложения
2 years ago 00:16:26 10
Разработка настолки. Долгожданный летсплей прототипа! #6
6 years ago 00:11:47 36
Дизайн сайта в Figma (часть 1). Разработка прототипа. Figma - design prototype (part 1)
8 years ago 01:22:19 193
Разработка прототипа дизайн проекта в Revit. Дизайн интерьера в Ревит.
8 years ago 00:02:13 33
Процесс разработки прототипа сайта | Qwerty Design Studio
5 years ago 00:00:00 15
разработка bzu-gmb-beta3 допиливают до прототипа [stream,, MSK]
4 years ago 00:12:44 58
Обзор прототипа cardknife
6 years ago 00:58:45 50
Блок 3 - Создание прототипа
5 years ago 00:21:55 38
[ИСТОРИЯ] Nintendo Wii Balance Board: Разработка. Прототипы. Игры.
7 years ago 00:19:36 46
Moqups: простое создание прототипа сайта
6 years ago 00:26:30 63
Прототип печи Сопутник. Разработка Григория Соколова
3 years ago 00:42:40 25
Российский электросамокат, первый выезд прототипа.
7 years ago 00:40:38 49
Простое создание прототипа сайта в Photoshop
4 years ago 01:01:30 108
Граникон 2021 создание прототипа на Тейблтопии
7 years ago 00:29:26 100
UNREAL ENGINE: Создание прототипа игры. Часть 5.
8 years ago 00:38:12 15
Разработка новой C# диагностики. Как мы это делаем, от идеи до прототипа
3 years ago 02:33:16 12
#2 Разработка схемы работы сервиса, прототипов интерфейса и дизайна