Дизайн онлайн-журнала в стиле VSCO с помощью Sketch
Над чем мы поработаем

VSCO (Visual Supply Company) — компании, занимающейся продуктами для фотографов и недавно выпустившей нашумевшее мобильное приложение для фотографов VSCO Cam.

Сегодня я научу вас создавать простое и стильное приложение веб-журнала в Sketch, мобильную и десктопную версии. Мы будем использовать эстетику VSCO для вдохновения, и в конце этого урока вы будете иметь представление о множестве важных возможностей Sketch.

Помимо навыков, специфичных для разработки приложений, вы также разберетесь в настройке рисунков шрифта и макета с помощью modular scale. Мы воспользуемся базовыми и более продвинутыми техниками рисования в Sketch. Начнем!

Исходники для урока

Чтобы двигаться дальше, вам понадобятся следующие исходные материалы:

Небольшое отступление

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

Типографика

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

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

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

Настройка артбордов

Прежде всего, я бы хотел немного описать свой подход к настройкам макета и типографии.Тим Браун, глава по печати в Adobe Typekit, создал фантастический инструмент под названием Modular Scale. Он потрясающий: после определения идеального размера текста и введения желаемого числового параметра, инструмент разделить и умножит это число на математическое значение вроде золотого сечения или чистой квинты. Во время настройки типографической иерархии и базовых элементов макета я всегда пользуюсь этими числовыми значениями.

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

Я установил идеальный размер текста 18 пикселей и определил 670 пикселей в качестве ширины рабочей области в мобильном макете.

Шаг 1

После открытия Sketch, выберите опцию Artboard (A) в меню Insert (Вставить).

Дизайн онлайн-журнала в стиле VSCO с помощью Sketch 1

Для мобильной версии я рекомендую выбрать формат iPhone 6, но если у вас есть другая модель iPhone, лучше выбрать именно ее. Использование Sketch дает большое преимущество благодаря возможности «зеркалить» работу на iOS-устройство в реальном времени с помощью Sketch Mirror, потому что так можно сразу же протестировать конечный результат работы в действии.

Чтобы активировать эту функцию, понадобится установить приложение Sketch Mirror из App Store. Затем кликните на иконку Mirror в Sketch (нужно, чтобы устройства были в одной сети или соединены кабелем USB).

Дизайн онлайн-журнала в стиле VSCO с помощью Sketch 2 mirror

Для десктопной версии я выбираю холст Desktop HD шириной 1440 пикселей.

sketch-journal-desktop-artboard

Совет: Позже мы можем изменить высоту артборда, изменив числовые значения в панели инспектора (справа).

sketch-journal-artboard-size

Шаг 2

Как только нужные артборды выбраны, надо установить некоторые направляющие линии, чтобы макет был правильно сбалансирован и разлинеен для простоты работы. Для включения линеек и базовых ориентиров, выберите опцию в меню View > Show Rulers (⌃R). Потом выберите середину мобильного холста, которая находится на 375 пикселях, и также поместите отметку на первые и последние 40 пикселей, чтобы получились 40-пиксельные отступы по горизонтали.

Чтобы создать направляющие линии, кликните на линейке на отметках 40 пикселей, 375 пикселей и 710 пикселей.

sketch-journal-guides

В десктопном артборде мы также установим срединную направляющую (720 пикселей) и отступы по 100 пикселей.

sketch-journal-guides-desktop

Создание верхней навигации

Примечание: Если вы хотите создать реалистичный макет с оригинальной панелью меню Safari, можете сделать скриншот и вставить вырезанный фрагмент. Или можно скачать iPhone 6 GUI Template (iOS 8), созданный (бывшей) командой Teehan+Lax.

sketch-journal-ios-template

Подсказка: в Sketch также есть встроенный шаблон iOS, который вы можете найти в меню File > New From Template > iOS UI Design.

Шаг 1

Чтобы создать верхнюю навигационную панель, выделите инструмент прямоугольник — Rectangle ®.

Дизайн онлайн-журнала в стиле VSCO с помощью Sketch 1

Подсказка: Я настоятельно рекомендую изучить самые важные горячие клавиши, потому что ими реально легко и удобно пользоваться. В большинстве случаев горячей клавишей является первая буква в названии инструмента. Например, для рисования прямоугольника надо нажать клавишу R (Rectangle), чтобы нарисовать овал — O (Oval), линию — L (Line).

Нарисуйте прямоугольник шириной 750 пикселей и длиной 120 пикселей, укажите цвет фона a#F9F9F9.

Дизайн онлайн-журнала в стиле VSCO с помощью Sketch

Подсказка: Для настройки цветов я использую систему параметров HSBA (Hue, Saturation, Brightness, Alpha) — оттенок, насыщенность, яркость, альфа. Эти параметры легко изменять, представляя конечный результат.

Шаг 2

Выберите инструмент Oval (O) и, нажав клавиши Shift + Alt, нарисуйте круг размером 80px. Справа в панели инспектора кликните на кнопку Fills (заливка), и под четвертой вкладкой загрузите фото профиля.

sketch-journal-image-fill

Подсказка: Если нажать клавишу Alt и передвинуть курсор, вы можете увидеть расстояние в пикселях между выделенными элементами.

sketch-journal-mobile-nav

Шаг 3

Выберите инструмент Text (T) и введите имя пользователя рядом с аватаркой, соблюдая отступ слева 20 пикселей. Установите размер шрифта 22 пикселя и цвет #9E846E. Вы можете сделать текст заглавными буквами, выбрав опцию из меню Type > Uppercase.

sketch-journal-text-uppercase

Введите текст ‘New story' с теми же настройками в правой части артборда с отступом 20 пикселей справа.

sketch-journal-nav-elements

Шаг 4

Теперь нужно создать первую иконку, которая будет знаком ‘+'.

Давайте создадим прямоугольник размером 36x6px с помощью инструмента Rectangle ®, он должен быть такого же цвета, как и текст. Как только настроите параметры прямоугольника, продублируйте его.

sketch-journal-header-icon

Выделите второй прямоугольник в панели инспектора (справа) и поверните его на 90 градусов.

sketch-journal-rotate

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

sketch-journal-union

Шаг 5

В десктопном варианте также нужен прямоугольник для панели навигации высотой 70 пикселей на всю ширину, с непрозрачностью (opacity) 80%.

sketch-journal-desktop-header

Текст кнопок меню будет меньше, 14 пикселей с отступами 40 пикселей и разделителем в цвете a#CCCCCC.

sketch-journal-dektop-header-padding

Дизайн закрепленной нижней панели навигации

В мобильной версии мы создадим фиксированную панель навигации внизу экрана, с которой пользователь может перейти на странички Grid (сетка), Favorite locations (любимые места), Search (поиск) и Profile (поиск).

Шаг 1

Также, как и в случае с верхней панелью навигации, мы начнем с рисования прямоугольника на всю ширину, высотой 100 пикселей, цвет #FFFFFF и непрозрачностью 90%. Давайте также поместим 1-пиксельную линию цвета #E6E6E6 на верхний край прямоугольника и разделим прямоугольник на четыре равные колонки.

Все иконки 50 пикселей в высоту цвета #666 666.

sketch-journal-bottom-nav-mobile

Подсказка: вы можете создать свою собственную иконку для ‘Grid', сделав девять прямоугольников размером 14×14px с отступом 4px друг от друга.

Создаем заголовок

Шаг 1

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

sketch-journal-mobile-hero

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

Шаг 2

Для заголовка и подзаголовка размер шрифта должен быть 60px и 24px соответственно. Название шрифта для заголовка Merriweather Bold, для подзаголовка — Montserrat Regular.

sketch-journal-hero-padding

Шаг 3

Последний элемент на главном изображении — кнопка ‘Get Inspiration', с размером шрифта 24px и расстоянием между буквами 1.33px. Сама кнопка должна иметь размер 338×89px с белой границей толщиной 3px. Давайте разместим кнопку на расстоянии 70 пикселей от нижнего края изображения.

sketch-journal-hero-button

Для десктопной версии я советую взять меньший размер шрифта, 18px.

Создание карточек статьи

Шаг 1

В этом шаге мы создадим специальную область для самой популярной истории. Начните с прямоугольника размером 670×480px, заполните его изображением. В прямоугольнике в правом верхнем углу должна быть специальная иконка. С ее помощью читатель может отметить свои любимые истории о путешествиях на сайте.

sketch-journal-favorite-location

Это будет белый круг размером 80×80px с границей толщиной 2 пикселя (тип inside — внутренняя). Иконка в виде иголочки будет 12 пикселей в ширину и 18 пикселей в ширину, и мы воспользуемся шрифтом 18px Montserrat Regular. Вся иконка будет с заданной непрозрачностью 70% и отступами сверху и справа 15 пикселей.

sketch-journal-fav-location-desktop

В десктопной версии это будет изображение размером 1240×750px, а иконка ‘favorite location' (любимое местоположение) — 50×50px.

Шаг 2

Теперь создадим первую карточку. В начале сделайте прямоугольник 670×522px, залитый изображением, и еще один прямоугольник 670×435px #FFFFFF. Поместите второй прямоугольник поверх первого.

sketch-journal-big-card

Нарисуйте третий прямоугольник 670×744px и накройте под два предыдущих. Поместите этот слой под предыдущие. Придайте слою небольшую тень, что слегка его выделит визуально.

sketch-journal-card-shadow

Радиус границы очень важен в нашем дизайне, задайте значение 5px для border radius. Чтобы данный радиус применился к каждому слою, кликните на слой тени и используйте его как маску.

sketch-journal-card-mask

Так как в мобильное версии нет состояния hover (наведение мышкой), это состояние не будет отличаться от стандартного представления, при котором вся информация будет видимой.

sketch-journal-big-card-full

Выделите каждый слой, входящий в состав этой карточки, сгруппируйте их с помощью опции Group (⌘-G), затем продублируйте их нажатием кнопки Alt и передвиганием всей группы немного вниз (также можно продублировать стандартными сочетаниями кнопок — ⌘-C и ⌘-V).

sketch-journal-group

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

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

sketch-journal-card-desktop

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

Дизайн раздела с картой и коллекций поездок (Map и Journey Collections)

С помощью раздела карты можно отфильтровать поиск постов по местоположению. Результаты будут отображены в виде коллекций постов от разных авторов.

Шаг 1

Создайте прямоугольник размером 750×850px и залейте его простым скриншотом из Google Maps. Для строки поиска нужно поместить поверх этого прямоугольника еще один прямоугольник с 80% непрозрачностью.

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

sketch-journal-map-search

В качестве основного цвета для интерфейса с картой я выбрал оттенок #B3483E. На этот цвет меня вдохновил Pantone Marsala, цвет года 2015 на Pantone.

sketch-journal-map-color

Шаг 2

Когда кто-то ищет посты по определенному местоположению, результаты поиска будут отображены как маленькие тетрадки. Каждая такая тетрадка будет в виде прямоугольника 320×414px, залитого картинкой, с небольшой тенью.

sketch-journal-map-collections

Мы можем настроить border radius, выделив фигуру и нажав кнопку Enter. Если выделяется одна из векторных точек, ей можно задать отдельный border radius. Установите радиус для верхней и нижней точек 12px.

sketch-journal-vector-points

Шаг 3

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

sketch-journal-map-desktop

Дизайн мини-карточек со статьями

Шаг 1

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

sketch-journal-small-cards

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

Call to Action

Перед рисованием футера в качестве завершающего этапа, необходимо создать раздел «call-to-action» (призыв к действию).

Шаг 1

Как всегда, нам понадобится заполненный изображением прямоугольник, размер 750×1000px. Чтобы текст был читаемым, добавьте белый градиентный слой на изображение. Градиент идет от цвета #FFFFFF с непрозрачностью 30% до цвета #FFFFFF с непрозрачностью 70% - меняем только значение непрозрачности.

sketch-journal-call-to-action-gradient

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

sketch-journal-call-to-action-shadow

Создаем подвал

В подвале (или футере) мы поместим набор иконок доступа к социальным сервисам и текстовые кнопки.

sketch-journal-footer-mobile

Убедитесь, что иконки соцсервисом остаются видимыми на маленьких мобильных экранах. Давайте сделаем их как минимум 44px в ширину или в высоту.

sketch-journal-footer-desktop

Еще одна идея

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

sketch-journal-extra-navigation

Мои поздравления!

Мы закончили работу над прекрасным дизайном онлайн-журнала о путешествиях. Я надеюсь, что у вас появилось больше уверенности в работе со Sketch после этого урока. Вот что у нас получилось:

Дизайн онлайн-журнала в стиле VSCO с помощью Sketch

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