Pull to refresh

Дизайн сайта в Sketch.app. Часть 2.2: финальный макет

Reading time 4 min
Views 31K
intro-img-3

Последняя часть по работе с сайтом в Скетче.

Для трех основных категорий наушников сделаем небольшие описания и поставим фотки (Фликр и тут нам поможет).
Чтобы растянуть заглушки на всю ширину сетки, сохранив при этом нулевое расстояние между ними, выделите все три и просто растяните, как обычно в любом граф. редакторе. Работает тоже и растягивание с зажатым Option — блок расширяется сразу в обе стороны.

категории

Поставим блоки по сетке. Второй и третий блоки у нас немного пересекаются (на картинке выше), поэтому немного подправим расстояние с помощью плагина Space Horizontal. Двигаем на 0 пикселей, т.е. «склеиваем» блоки.

расстояние

Плагин спрашивает у вас, на какое расстояние раздвинуть выбранные объекты. По умолчанию стоит 10пкс. Двигает с левого края и от нижнего из выбранных слоев.
Кладем «поверх» фото наушников.

фото категорий

Заголовки категорий покрасим в белый и попробуем сделать плашку на все случаи, чтобы текст всегда оставался читаем. Но для начала подвинем каждый заголовок к краю соответствующего фото: выбираем текст и фотографию и жмем справа вверху «Align Left».

выровнять влево

Затем выделим все три заголовка и подвинем «на два шифта» вправо — сделаем отступ т.е.

сдвиг вправо

Выделяем фото категории и рисуем поверх прямоугольник. Красим его градиентом от черного к черному (!), но с разной прозрачностью.

градиент поверх категорий

И заменим шрифт в названиях. Скетч показывает текущие использованные в панели текстовых стилей.

последние шрифты

Торговые марки


Для примера просто найдем в интернете 6 «наушных» брендов. По возможности ищем черно-белые логотипы, но и цветные подправим, если что.

логотипы

«Сенхейзер» вот цветной. Но у нас есть примитивные инструменты редактирования картинок (в правой панели свойств). Ставим галочку в «Color Adjust». Открываются три ползунка, которыми мы и сделаем из цветной картинки черно-белую.

цвет в чб до



цвет в чб после

«Как правильно подобрать»


Небольшой абзац о том, на что ориентироваться при выборе. Для начала поменяем шрифт заголовка на наш PT Serif и растянем до нужной ширины. Поищем в Википедии что-то более-менее подходящее.
Если тянуть текстовый блок за нижний край, он будет увеличиваться вниз. Если за середину — и вверх и вниз. Если за верхний край — вверх.

размеры текстового блока

В Скетче, как и многих други программах, кроме «Вставить» есть и команда «Вставить и заменить стиль». Вторая — на случай, если вы хотите добавить текст в блок, у которого уже настроили стили.

вставить с заменой

Выносим названия пунктов на отдельные слои (вырезать/вставить). Сделаем из них подзаголовки.

пункты на отдельных слоях



подзаголовки

Текста получается многовато, постараемся максимально сократить все, что сможем.

многовато текста до



многовато текста после

Фильтр справа чуть опустим, чтобы в первую очередь был заметен текст, а потому уже люди переходили к выбору. В верстке можно было бы этот блок просто зафиксировать, чтобы не прокручивался вместе с текстом слева.

Фильтр


Определимся, сколько будет занимать места. Изменим стиль заголовка.

ширина фильтра

Потом — стили для названий полей и кнопки.

лейблы

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

стиль инпута

Задать радиус угла можно в панели свойств (справа) или с помощью плагина «Set Radius»
К параметрам цены хорошо бы добавить значок рубля. Используем шрифт «ALS Rubl».

значок рубля

Ползунок диапазона


У нас есть линия с обводкой по центру. Нам остается закруглить ее и (возможно) подкрасить покрасивше. Параметры обводки — все там же справа.

обводка

У треугольников скруглим края. Если выбрать точку в фигуре, на панельке сверху появятся параметры привязки точки к пикселям (к целому пикселю, полупикселю или вообще без привязки). Там же можем настроить скругление только у этой выбранной точки.

скругление у точки

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

радиус не меняется

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

диапазон

Выпадающие списки


Для начала скопируем стиль у полей ввода, но вместо внутренней тени сделаем внешнюю — список не «вдавленный», а «выпуклый». И сохраняем стиль.

стиль дропдауна

Рисуем чекбокс — стиль уже есть, правим только размер.

чекбокс

Осталась кнопка


Сначала подгоняем размер к сетке. И делаем на всю ширину фильтра, но с учетом отступов по 30пкс.

кнопка

«Подобрать» ставим по центру и красим в белый (ну, пусть пока белый). Перед этим не забудьте убрать у него стиль, иначе перекрасите все текстовые объекты.

стиль надписи

И подгоняем высоту подложки:

высота подложки

Нужно определиться с цветами. У нас пока все черно-белое, но зато есть фотографии. Сохраним верхнюю часть страницы в картинку на рабочий стол. Затем откроем картинку в приложении Spectrum — эта штука поможет нам в подборе цветов (Спектрум не обязателен, подойдет и Кулер, например, или даже системная панель цветов).

цвета из картинки

Дальше выберем 3-4 цвета и сохраним в картинку.

цвета

цвета в картинку

Затем в системной цветовой панели в Скетче откроем картинку

цвета в панели

И, собственно, все — у нас есть палитра для дальнейшего использования.

готовая палитра

Покрасим фильтр

цветной фильтр

Текстовый блок про «Как подобрать» получился скучноватым, надо бы подать информацию поживее. Попробуем добавить иконок и расставить абзацы «плиткой». Для примера можно взять любые иконки, какие под руку попадутся.
Так чуть повеселее:

иконки параметров

Футер


Собственно, тут все просто: делаем ссылки на разделы и копируем поиск из шапки.
Думаю, стоит добавить подчеркивание в ссылки. Тонкое подчеркивание придется делать вручную: рисуем линию, заливаем цветом с непрозрачностью примерно 50% и сохраняем стиль.

подчеркивание

Потом дублируем линию для каждой ссылки:

дублируем линию

Очень советую в процессе внятно называть слои. Хотя бы самые важные. Встроенный в панель слоев поиск (Cmd+F) потом может очень пригодиться, если нужно что-то поправить в нескольких объектах одновременно. Например, сдвинуть вниз подчеркивания ссылок в футере. В поиске ищем наши подчеркивания, выделяем все сразу и двигаем на пару пикселей вниз.

сдвиг подчеркивания

Еще нужно привести длину линий в соответствие со ссылками. Используем плагин «Equalize Width...». Выбираем слово, линию и в зависимости от того, что длинее, используем «Equalize Width Down» или «Equalize Width Up» — т.е. или уменьшаем, или увеличиваем длину подчеркиваний.

длина линий

С футером все.

готовый футер

Теперь добавим подчеркивание остальным ссылкам на макете.

подчеркивание везде

Заполним поля в фильтре:

поля в фильтре

И все, макет готов.
Website-in-sketch.sketch

индекс

Эпилог


Пока я рожал статью, вышел уже 3й Скетч. И если старый справлялся вполне неплохо, то новый нужно прям бежать и брать. В связке с плагинами, которые уже как грибы, это пока самый мощный инструмент на Маке для дизайна интерфейсов (если учитывать, что Фаервокрс давно уже того).
Всем трудовых успехов и до новых встреч.

Предыдущие посты по теме:
Дизайн сайта в Sketch.app (Mac OS). Часть 1: плагины и прототип
Дизайн сайта в Sketch.app. Часть 2.1: наводим красоту
Tags:
Hubs:
+24
Comments 21
Comments Comments 21

Articles