Главная страницаКатегория figmaСоздание адаптивного веб-сайта Airbnb с использованием Figma

Создание адаптивного веб-сайта Airbnb с использованием Figma

Name: Создание адаптивного веб-сайта Airbnb с использованием Figma
Price: 12.5 USD
Rating: 4.3 (8 reviews)

Design a Responsive Airbnb Website with Figma

zerotomastery.io

★4.3 (всего оценок - 8)

Продолжительность

11 ч 17 мин

Категория

Figma

Количество уроков

84 Видео

Дата добавления

20 мая 2024 г., 23:28

Язык

Английский

Дата обновления

29 апр. 2026 г., 20:20

Освойте создание современного адаптивного веб‑сайта с помощью Figma и погрузитесь в практический проект разработки платформы для бронирования жилья Flexrent — аналога Airbnb. Курс поможет вам пройти полноценный путь дизайнера: от изучения брифа клиента до финальной передачи дизайна разработчикам.

Что вы изучите в ходе курса

Программа построена вокруг реального дизайн‑процесса и направлена на развитие навыков, необходимых современным UI/UX‑дизайнерам.

Продвинутые инструменты и возможности Figma

Работа с автолэйаутами и компонентами
Создание и управление дизайн‑системой
Использование библиотек, переменных и стилей
Прототипирование интерактивных макетов

Создание адаптивного веб‑интерфейса

Проектирование макетов для разных экранов
Построение сеток и адаптивных структур страниц
Оптимизация UI для мобильных, планшетов и десктопов

От концепции до готового дизайна

Курс основан на проектном подходе, что позволяет шаг за шагом пройти полный цикл создания веб‑сайта.

Разбор клиентского брифа

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

Проработка UX‑логики

Создание пользовательских сценариев
Проектирование структуры страниц и потоков взаимодействия
Разработка вайрфреймов

Создание визуального дизайна

Работа с типографикой, цветом и иконками
Визуальная система и интерфейсные паттерны
Финальные макеты для сайта Flexrent

Передача проекта разработчикам

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

Почему этот курс полезен

Чёткая методология от идеи до реализации
Фокус на практическом навыке адаптивного дизайна
Результатом станет полноценный проект в вашем портфолио

Кому подойдёт курс

Начинающим дизайнерам, желающим освоить Figma на продвинутом уровне
Практикующим UI/UX‑дизайнерам для развития навыков адаптивного дизайна
Тем, кто хочет пополнить портфолио впечатляющим веб‑проектом

Итог

После завершения курса вы создадите полноценный адаптивный веб‑сайт для сервиса Flexrent и будете уверенно использовать Figma для решения реальных задач в UI/UX‑дизайне.

Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

Урок 1. 00:02:53
Project Demo
Урок 2. 00:08:45
The Brief
Урок 3. 00:02:22
What We're Building In This Section
Урок 4. 00:08:17
Competitor UI/UX Audit
Урок 5. 00:05:41
User Flows
Урок 6. 00:11:58
Sitemaps
Урок 7. 00:01:15
Assignment - Create Your Own Userflows and Sitemaps
Урок 8. 00:03:21
Wireframes - Assets Overview
Урок 9. 00:09:45
Wireframes - Home
Урок 10. 00:12:37
Wireframes - Booking
Урок 11. 00:01:23
Assignment - Create Your Wireframes
Урок 12. 00:13:13
Typography
Урок 13. 00:01:22
What We're Building In This Section
Урок 14. 00:07:19
Colors - Primary and Neutrals
Урок 15. 00:05:50
Colors - Accents
Урок 16. 00:06:09
Elevations
Урок 17. 00:02:00
Icons
Урок 18. 00:01:33
Assignment - Set the Foundation
Урок 19. 00:03:17
What We're Building In This Section
Урок 20. 00:08:11
Badges - Avatars
Урок 21. 00:11:01
Badges - Review Badges
Урок 22. 00:03:43
Badges - Simple Location Badge
Урок 23. 00:15:49
Buttons - Interactive Basic Buttons
Урок 24. 00:07:03
Buttons - Interactive Icon Buttons
Урок 25. 00:07:47
Buttons - Interactive Profile Menu
Урок 26. 00:10:44
Buttons - Interactive Toggles
Урок 27. 00:09:46
Buttons - Interactive Like Icon
Урок 28. 00:01:38
Data Detail
Урок 29. 00:10:33
Assignment - Create Your Basic Components
Урок 30. 00:13:30
Navigation - Main Navigation Desktop
Урок 31. 00:09:22
Navigation - Main Navigation Mobile
Урок 32. 00:11:43
Navigation - Footer Desktop
Урок 33. 00:03:29
Navigation - Footer Mobile
Урок 34. 00:09:17
Navigation - Tabs
Урок 35. 00:12:19
Cards - Image Cards
Урок 36. 00:07:24
Cards - Image and Button Card
Урок 37. 00:14:04
Cards - Stacked Search Results Card
Урок 38. 00:08:36
Cards - Horizontal Search Results Card
Урок 39. 00:08:49
Cards - Booking Card Desktop
Урок 40. 00:07:24
Cards - Booking Card Mobile
Урок 41. 00:04:54
Forms - Messages
Урок 42. 00:09:00
Forms - Inputs
Урок 43. 00:14:08
Forms - All Purpose Inputs
Урок 44. 00:09:38
Forms - Checkboxes
Урок 45. 00:08:54
Forms - Radio Buttons
Урок 46. 00:08:22
Action Panels - General Action Panel
Урок 47. 00:04:51
Action Panels - Callout Panel
Урок 48. 00:07:28
Action Panels - Search Panel Desktop
Урок 49. 00:09:48
Action Panels - Search Panel Mobile
Урок 50. 00:09:07
Action Panels - Reserve Panel
Урок 51. 00:10:35
Popovers - Desktop Filters
Урок 52. 00:04:59
Popovers - Mobile Filters
Урок 53. 00:07:39
Popovers - List Menu
Урок 54. 00:08:16
Popovers - Guests Menu
Урок 55. 00:09:16
Reviews - Rating Scale
Урок 56. 00:09:45
Reviews - Collapsible Card
Урок 57. 00:02:31
Assignment - Create Your Advanced Components
Урок 58. 00:02:45
What We're Building In This Section
Урок 59. 00:11:16
Homepage - Hero Section
Урок 60. 00:13:44
Homepage - Locations Section
Урок 61. 00:09:57
Homepage - Attractions and Rentals Section
Урок 62. 00:11:41
Homepage - Action Panels and Footer Section
Урок 63. 00:14:21
Search - Filters and Results
Урок 64. 00:10:36
Search - Map and Alternate Views
Урок 65. 00:09:20
Listing - Page Setup
Урок 66. 00:12:41
Listing - Amenities and Reviews
Урок 67. 00:09:32
Listing - Policies
Урок 68. 00:12:37
Listing - Layout and Responsiveness
Урок 69. 00:19:31
Booking - Booking Creation
Урок 70. 00:05:31
Booking - Booking Creation Alternate Layout
Урок 71. 00:08:16
Booking - Confirmation
Урок 72. 00:04:29
Booking - Confirmation Alternate Layout
Урок 73. 00:02:10
Assignment - Create High Fidelity Designs
Урок 74. 00:11:52
Prototyping - Search Interaction
Урок 75. 00:07:05
Prototyping - Search Results Sticky Header
Урок 76. 00:09:07
Prototyping - Search Results Filtering
Урок 77. 00:06:09
Prototyping - Listing Scroll Behaviour
Урок 78. 00:13:01
Prototyping - Booking Flow
Урок 79. 00:02:29
Assignment - Create High Fidelity Prototypes
Урок 80. 00:06:52
The Handoff Doc
Урок 81. 00:01:58
What We're Building In This Section
Урок 82. 00:08:51
Component and Screen Documentation
Урок 83. 00:04:19
Showcasing Designs
Урок 84. 00:07:25
Showcasing Prototypes

https://danielschifano.notion.site/Flexrent-Project-Resources-ea03299c354d430dab59dbaa330a5413

Автор - zerotomastery.io

zerotomastery.io

Независимо от того, начинаете ли вы путь в программировании или стремитесь повысить свой уровень, академия Zero To Mastery помогает освоить ключевые технологические навыки. На платформе вы можете изучить React, JavaScript, Python, CSS и многие другие инструменты, необходимые для карьерного роста, успешного трудоустройства и достижения результатов в ведущих компаниях.

+268

Комментарии