Приоритеты
Определить, какое содержание важно на небольшом экране.
Создание адаптивных макетов
Разберитесь, как подготовить варианты интерфейса для разных размеров экрана.
В чём состоит навык
Создание адаптивных макетов — проектирование расположения и поведения элементов интерфейса для разных доступных размеров экрана.
В каких профессиях пригодится навык
Эти профессии связаны с навыком в каталоге KURSEZ. Конкретные задачи зависят от специализации и места работы.
Связанные профессии
Где пригодится
Варианты
Продумать перестроение сетки и элементов.
Проверка
Сравнить читаемость и действия на разных ширинах.
Подготовка, навыки и инструменты
Определите содержание, основные сценарии и диапазон устройств или ширин для проверки.
Связанные навыки
Связанные инструменты
Курсы для развития навыка «Создание адаптивных макетов»
ProductStarВеб-дизайн в Figma
Мини-курс ProductStar для начинающих веб- и UX/UI-дизайнеров: интерфейсы в Figma, компоненты, адаптивные макеты и интерактивные прототипы.
14 990 ₽
При оплате частями
1 499 ₽ / мес. · 10 мес.
ProductStarПроектирование и создание дизайн-систем в Figma
Мини-курс ProductStar о работе в Figma и создании дизайн-систем: компоненты, прототипы, визуальные основы и передача макетов разработчикам. Школа заявляет проект и две практические работы.
19 900 ₽
При оплате частями
1 990 ₽ / мес. · 10 мес.
Яндекс ПрактикумВеб-дизайнер
Курс Яндекс Практикума знакомит с веб-дизайном с нуля: в программе композиция, макеты и прототипы сайтов, Figma, Tilda, основы HTML и CSS.
112 400 ₽
Стоимость курса
от 4 588 ₽ / мес. на 36 мес.
Яндекс ПрактикумГрафический дизайнер
Курс Яндекс Практикума знакомит с графическим дизайном с нуля: в программе визуальные коммуникации, типографика, айдентика, графика и подготовка к печати.
116 400 ₽
Стоимость курса
от 4 752 ₽ / мес. на 36 мес.
Что важно знать о навыке «Создание адаптивных макетов»
Адаптивный макет описывает, как содержание и элементы интерфейса меняют расположение при разной ширине доступного пространства. Например, несколько колонок могут перестраиваться в одну, а навигация — занимать меньше места.
Важно проектировать не только отдельные картинки для телефона и компьютера, но и поведение между выбранными размерами. Проверяют длину текста, переносы, читаемость и доступность действий; конкретные точки изменения выбирают по содержанию.
Для практики возьмите карточки учебного каталога и предложите их расположение в узком и широком окне. Проверьте, что названия и кнопки остаются понятными при разной длине текста.