Теперь Кью работает в режиме чтения

Мы сохранили весь контент, но добавить что-то новое уже нельзя

Как отрисовать дизайн мобильной версии сайта?

ДизайнСайты+2
Анонимный вопрос
  ·   · 4,2 K
Веб-дизайн, UX/UI, разработка интерфейсов. Опыт...  · 15 апр 2021  · figma.com/@beartdesign

Уже давно предпочтение отдается адаптивной верстке вместо создания мобильной версии сайта на отдельном домене. Это решение имеет множество преимуществ, но и требует понимания ряда нюансов. Для создания дизайна мобильной версии сайта можно использовать такие программы, как Figma, Sketch и другие.

В первую очередь, нужно понимать, что потребуется создать еще 2 макета, помимо десктопной версии, так как нужно уместить весь сайт в ограниченную ширину экранов мобильных устройств разных типов. Поэтому в выбранной программе первоначально создают артборд/фрейм, который будет соответствовать размерам экрана. Кстати, в Figma можно выбрать уже готовые шаблоны, которые созданы по размерам устройств iPhone и Android.

Как только новый артборд будет добавлен, его можно растянуть в длину для удобства дальнейшей работы, поскольку мобильная версия однозначно будет длиннее десктопной. После этого накладывают сетку с соответствующим количеством колонок: для планшета 8, для смартфона 4.

Поскольку ширина мобильной версии меньше десктопной, все крупные блоки располагают друг под другом, перетягивая их с созданного макета веб-сайта и редактируя размер. Но при этом важно обеспечить сохранение в мобильной версии всего функционала сайта и важной информации. Поэтому некоторые блоки со списками, например, меню, прячут под кнопками, нажатие на которые приводит к раскрытию списка. Такие кнопки называют меню-бургер ("выкидушки"). Частенько их делают в виде вписанных в прямоугольник 3-х линий, но можно нарисовать любую по собственному усмотрению.

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

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

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

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

Веб-дизайн, интерфейсы и бренд-айдентика🍒. Опыт...  · 21 дек 2020  · ux-journal.ru
Первым делом создаем артборд/фрейм с размерами телефона. В Figma есть уже предустановленные размеры для iPhone и Android. 🔥👌 Добавляем сетку для мобильного размера экрана, если для веба было 12 колонок, то для планшета будет... Читать далее
Делюсь подходами к дизайну сайтов и интерфейсов в международных проектах.Перейти на breezzly.ru
Дизайн-лид из Ozon отвечает на вопросы об интеракт...  · 6 июн 2019  · slashdesigner.ru
Если у вас есть макет для обычной версии (например, 1280), проанализируйте, какие блоки на нём играют ключевую роль. Откройте Фигму, создайте фрейм шириной 320px. Отрисуйте блоки в виде простого одноколонного списка. Если в... Читать далее
Через свойство в css код код @media (max-width: 480px) { здесь прописываются отдельные свойства для мобильной версии. Например, p {margin:5} } код код Читать далее