13 марта 2014 в 16:28

Дизайн сайта в Sketch.app. Часть 2.1: наводим красоту tutorial

Первая часть про прототипы.

intro-img-2

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


Модульная сетка


Настроить сетку можно из двух мест. Отображение — из настроек программы:

параметры сетки

Размеры и количество колонок/ячеек — из меню на панели инструментов:

меню сетки

Давайте возьмем 12 колонок с шириной колонки 60пкс и расстоянием 30пкс между колонками. Основной текст будем делать размером 16пкс, значит базовая линия — 24пкс («полуторный» интервал). Но горизонтальные направляющие сделаем вдвое меньше (12пкс) — так мне удобнее.

параметры колонок

меню


Основной шрифт оставим пока по умолчанию — пусть Гельветика. Для заголовков возьмем PT Serif. Выравниваем меню и пишем название нашего магазина. Ну, пусть «Наушники» и будет. Для выравнивания слоев идем в правый верхний угол:

выравнивание

В меню выравниваем по сетке крайние правую и левую ссылки. А для равномерного распределения пунктов между ними есть команда Arrange->Distribute Objects->Horizontally.

выравнивание

Меню получилось слишком широким (расстояния между пунктами больше, чем от меню до поиска), поэтому я немного подвинул правую ссылку и еще раз выровнял все:
до

меню до

после

меню после

Поле поиска делаем высотой 24пкс и «вдавленным» в подложку.

поиск по высоте

(Красим в светло-серый и добавляем две внутренние тени. В Скетче можно добавлять сколько угодно теней внутри и снаружи, так же как и обводок или заливок.)

поиск стиль

Курсивная Гельветика выглядит не особо красивой, поменяем на PT Sans, например.
до

поиск до

после

поиск после

Стиль сохраним на будущее — у нас еще в фильтре поля есть.

панель стилей закрытая

панель стилей открытая

панель стилей добавлено

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

стиль текста

стиль текста новый

Потом выбираем остальные пункты меню и к каждому привязываем стиль.

слайды


Бесплатные картинки можно найти на Фликре. Для этого в «advanced search» выберите параметр «с лицензией Creative Commons»

поиск фликр

Мне пришлось долго поскроллить, но все же я нашел более-менее подходящую фотографию.
Выбираем прямоугольник-заглушку, потом импортируем картинку поверх (обязательно поверх). Выбираем заглушку вместе с фотографией и жмем волшебную кнопку «создать маску».

кнопка «создать маску»

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

белый текст слайдов

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

черный текст на подложке

Отступ по 20 пкс от края подложки — как-то многовато, сделаем по 15. Внимание: сверху и снизу считаем отступы от высоты строчных букв (x-height), а выносные элементы не учитываем. Это для того, чтобы строчка текста была сбалансирована по центру подложки.

отступы по 15пкс

У Скетча есть неплохой измеритель расстояний, но с текстовыми объектами он не очень хорошо работает — у текста всегда есть внутренний паддинг. (Чтобы быстро менять размеры объектов, используйте Cmd+→ / Cmd+← (ширина) или Cmd+↓ / Cmd+↑. Если параллельно держать Shift, размер будет увеличиваться на 10пкс.)

создание отступов

Теперь делаем то же самое с описанием слайда и ценником

описание и цена с подложкой

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

«кликать насквозь»

Рисуем листалки. Сделаем немного полегче, чем на прототипе. Оставим только стрелки, но сделаем их достаточно большими, чтобы не приходилось целиться. Для начала рисуем косые линии, потом делаем им скругленную обводку. Дальше группируем и называем «<>», например.

листалки

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

точки

Давайте максимально увеличим высоту у слайдов, чтобы эффекней выглядели.

высокий слайд

Пока все. В следующей главе займемся контентной частью.

Оригинал трехнедельной давности
Евгений Резник @reznik_e
карма
38,0
рейтинг 0,0
Веб-дизайнер
Похожие публикации
Самое читаемое Дизайн

Комментарии (10)

  • 0
    добавте ссылки на другие части. В целом спасибо! После одной конференции, где презентовали Sketch было крайне интересно его попробовать :)
    • 0
      спасибо, обновил
  • 0
    Ушло минут 15 чтоб полностью разобраться со Скетчем. И вот уже 3 проекта на нём закончил. Просто шикарное приложение. Ещё бы не тормозило так на мбпрошке.
  • 0
    Почему-то кнопка Grid Settings неактивна. Sketch скачивал из appstore…
    Не у кого такой проблемы не было?
    • 0
      Попробуйте сначала что-то нарисовать. Сетка может не работать, если на холсте ничего нет.
  • 0
    спасибо за статью
    добавьте, пожалуйста, в конец ссылку на следующую часть habrahabr.ru/post/222433/
    • 0
      спасибо, обновил
      • 0
        о класс, большое спасибо
  • 0
    не совсем ясен один момент:
    у вас artboard на 1200px и он заполнет полностью, а layout(grid) вы выбираете на 1050px,
    я думал что нужно было все сдвинуть чтобы влезть в размер макета(1050px), скачал ваш вариант — там все лишь выровнено по сетке.
    Тогда не совсем понятно зачем был взят такой размер макета в 1050px если он не соблюдается.
    Извиняюсь за сумбур, надеюсь вы поняли мой вопрос.
    • 0
      1050 — ширина только контентной части, ее по сетке и рисуем. а весь холст при этом можно любой ширины делать, просто я хотел показать, что у нас по краям происходит, когда окно шире, чем 1050.
      • 0
        благодарю, теперь ясно

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