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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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