Generated with Avocode. Generated with Avocode. Generated with Avocode. Group 15 close hat Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. path40

Sketch: как нарисовать сайт для мобильного устройства

Современный сайт должен быть удобным в использовании с любого устройства: компьютера, планшета или смартфона. Поэтому дизайнеры сразу создают версии для разных размеров экрана. Мы нарисовали макет сайта под экран смартфона и расскажем, как это сделать.

Рисуем под адаптивную верстку

В прошлых статьях мы рисовали макеты сайта в Sketch на основе бумажных скетчей этого сайта и прототипа. Теперь адаптируем эти макеты для экрана мобильного телефона.

Есть две концепции создания сайтов для мобильных телефонов: создание отдельного мобильного сайта или использование адаптивной верстки. Обычно мобильная версия сайта находится на отдельном домене и при этом выглядит сильно упрощенной.

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

На каждом из разных экранов макет меняется: на планшете становится меньше колонок, а на мобильном блоки собираются в одну колонку, меню складывается в кнопку. Технически сайт остается одним и тем же, но дизайнеру приходится перерисовывать макеты под разные разрешения.

Выбираем маленькую ширину экрана

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

Поэтому для создания мобильной версии выбирают минимальное устройство в своем классе. Можно отталкиваться от ширины экрана для первых моделей iPhone — 320px.

Создаем в Sketch новый артборд с шириной 320px. Для этого выбираем Insert → Artboard или просто клавишу A на клавиатуре, а затем выбираем нужное разрешение. Подойдет шаблон Mobile с шириной в 320px.

Новый артборд готов. Так как наш макет будет длинным, артборд можно увеличить. Можно задать длину в px в колонке свойств или просто потянуть за край артборда.

Мобильная страница будет значительно длиннее десктопной. Поэтому все большие блоки с контентом из широкого артборда в мобильной версии необходимо разместить друг под другом.

Длинный артборд для мобильного

Думаем о пользователе

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

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

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

Рисуем шапку сайта и бургер-меню

Для такого меню можно использовать одну из готовых иконок или нарисовать свою. Простой вариант — сделать ее с помощью трех линий и прямоугольника.

Рисуем три линии (Insert — Shape — Line). Вокруг них добавляем прямоугольник (Insert — Shape — Rounded).

Готовое бургер-меню

Кнопку с обратным звонком и телефон можно поместить внутри раскрывающегося меню — так мы сэкономим место.

Адаптируем первый экран

Перенесем первый блок сайта в мобильный макет. Для этого выделяем нужные слои на артборде и перетаскиваем их на другой макет с зажатым Alt. Также слои можно вырезать и вставить в нужном месте.

Переносим контент

После этого адаптируем изображение под мобильный макет — уменьшаем размеры.

Десктопная и мобильная версии главного экрана

У заголовков уменьшаем размер, меняем начертание и сам текст, чтобы смотрелось лаконично.

Элементы из строки перемещаем в колонку

Второй экран сайта — описание строительного блока и его основные преимущества. Разместим их один под другим.

Сначала дорисуем серый фон

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

Выделяем узловые точки

Затем тянем их вниз курсором.

Фон готов

Переносим изображение блока и текст. Кегль шрифта и размер изображения оставляем таким же.

Следующая строка на сайте — описание преимуществ. Иконки и текст из этого блока логично также расположить друг под другом.

Переносим иконки

Похожим образом располагаем и остальные элементы: слайдеры, кнопки, карточки.

Соблюдаем правила

Чтобы сделать мобильный макет удобным для пользователя, нужно:

  • упрощать интерфейс сайта,
  • располагать блоки один под другим,
  • следить за масштабом шрифтов и картинок.

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

Доля мобильных устройств в интернете растет с каждым годом, поэтому все сайты должны быть хорошо адаптированы под маленькие экраны. Узнать, как создать мобильную версию сайта и упростить интерфейс без вреда для юзабилити, можно на курсе «Веб-дизайн с 0 до PRO» от Skillbox.

Курс «Веб-дизайн с 0 до PRO»
Годовой практический курс для тех, кто хочет освоить веб-дизайн с самого начала с индивидуальным наставником, сделать отличное портфолио и получить первые заказы или стажировку в студии.
  • Живая обратная связь с преподавателями
  • Неограниченный доступ к материалам курса
  • Стажировка в компаниях-партнёрах
  • Дипломный проект от реального заказчика
  • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

Комментарии

0
Чтобы оставить комментарий,  авторизуйтесь
Хочешь получать персональную подборку статей по дизайну?
Подпишись на рассылку Skillbox