Записывайтесь на бесплатный онлайн-интенсив «Верстка для дизайнеров и фрилансеров» в 19:00 мск
Записаться
Вернуться к продуктам
Кратко о видео
Ты разберёшь макет в Figma, подготовишь изображения и анимации, загрузишь материалы в Taptop и создашь UI-kit проекта. Также узнаешь, зачем UI-kit нужен в реальной разработке и как он помогает поддерживать единый стиль всех секций.
После просмотра ты сможешь правильно подготовить проект к вёрстке и создать удобную основу для дальнейшей работы над сайтом.
Сайт «Наушники»: макет, материалы и создание UI-kit
Перед началом вёрстки сложного проекта важно не просто перенести элементы из Figma, а правильно подготовить основу для дальнейшей работы. Иначе по ходу создания сайта приходится постоянно искать нужные материалы, заново настраивать стили и исправлять несогласованность элементов.
Возникают вопросы: как правильно изучить макет перед вёрсткой? Какие материалы нужно подготовить заранее? Зачем создавать UI-kit и как он помогает ускорить разработку?
Грамотная подготовка проекта делает дальнейшую вёрстку быстрее и последовательнее. После урока ты сможешь анализировать макет, собирать необходимые материалы и создавать UI-kit перед началом разработки сайта.
В этом уроке курса «Продвинутые анимации» Вадим начинает разработку проекта «Наушники» и показывает этапы подготовки перед вёрсткой сайта.
Тайминги видео
00:00 — Введение
01:20 — Анализ макета в Figma
04:40 — Скачивание медиа-материалов (экспорт изображений, скачивание лотти)
06:15 — Загрузка медиа в проект Taptop
07:00 — Создание страницы UI-kit
08:00 — Зачем нужен UI-kit
09:25 — Верстка UI-kit
16:40 — Добавление текстов. Настройки на десктопе (1920 px)
