UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Дизайн онлайн-журнала в стиле VSCO с помощью Sketch
Редакція
Редакція

Опубліковано • Оновлено

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

Дизайн онлайн-журнала в стиле 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 (R). Дизайн онлайн-журнала в стиле VSCO с помощью Sketch 1 Подсказка: Я настоятельно рекомендую изучить самые важные горячие клавиши, потому что ими реально легко и удобно пользоваться. В большинстве случаев горячей клавишей является первая буква в названии инструмента. Например, для рисования прямоугольника надо нажать клавишу R (Rectangle), чтобы нарисовать овал - O (Oval), линию - L (Line). Нарисуйте прямоугольник шириной 750 пикселей и длиной 120 пикселей, укажите цвет фона a#F9F9F9. Подсказка: Для настройки цветов я использую систему параметров 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 (R), он должен быть такого же цвета, как и текст. Как только настроите параметры прямоугольника, продублируйте его. sketch-journal-header-icon Выделите второй прямоугольник в панели инспектора (справа) и поверните его на 90 градусов. sketch-journal-rotate После разместите один прямоугольник строго по центру над другим, перетяните первый и вставьте его во второй в панели слоев. Таким способом мы объединяем два отдельных слоя в одну иконку размером 36x36px. 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 пикселей в высоту цвета #666666. sketch-journal-bottom-nav-mobile Подсказка: вы можете создать свою собственную иконку для ‘Grid’, сделав девять прямоугольников размером 14x14px с отступом 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. Сама кнопка должна иметь размер 338x89px с белой границей толщиной 3px. Давайте разместим кнопку на расстоянии 70 пикселей от нижнего края изображения. sketch-journal-hero-button Для десктопной версии я советую взять меньший размер шрифта, 18px.

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

Шаг 1

В этом шаге мы создадим специальную область для самой популярной истории. Начните с прямоугольника размером 670x480px, заполните его изображением. В прямоугольнике в правом верхнем углу должна быть специальная иконка. С ее помощью читатель может отметить свои любимые истории о путешествиях на сайте. sketch-journal-favorite-location Это будет белый круг размером 80x80px с границей толщиной 2 пикселя (тип inside - внутренняя). Иконка в виде иголочки будет 12 пикселей в ширину и 18 пикселей в ширину, и мы воспользуемся шрифтом 18px Montserrat Regular. Вся иконка будет с заданной непрозрачностью 70% и отступами сверху и справа 15 пикселей. sketch-journal-fav-location-desktop В десктопной версии это будет изображение размером 1240x750px, а иконка ‘favorite location’ (любимое местоположение) - 50x50px.

Шаг 2

Теперь создадим первую карточку. В начале сделайте прямоугольник 670x522px, залитый изображением, и еще один прямоугольник 670x435px #FFFFFF. Поместите второй прямоугольник поверх первого. sketch-journal-big-card Нарисуйте третий прямоугольник 670x744px и накройте под два предыдущих. Поместите этот слой под предыдущие. Придайте слою небольшую тень, что слегка его выделит визуально. 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

Создайте прямоугольник размером 750x850px и залейте его простым скриншотом из Google Maps. Для строки поиска нужно поместить поверх этого прямоугольника еще один прямоугольник с 80% непрозрачностью. Подсказка: Для легкого выравнивания создайте квадрат в левой части сайдбара. После этого иконку поиска легче установить на нужное место. sketch-journal-map-search В качестве основного цвета для интерфейса с картой я выбрал оттенок #B3483E. На этот цвет меня вдохновил Pantone Marsala, цвет года 2015 на Pantone. sketch-journal-map-color

Шаг 2

Когда кто-то ищет посты по определенному местоположению, результаты поиска будут отображены как маленькие тетрадки. Каждая такая тетрадка будет в виде прямоугольника 320x414px, залитого картинкой, с небольшой тенью. 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

Как всегда, нам понадобится заполненный изображением прямоугольник, размер 750x1000px. Чтобы текст был читаемым, добавьте белый градиентный слой на изображение. Градиент идет от цвета #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 Мне интересно услышать ваше мнение о процессе и конечном результате, так что делитесь впечатлениями и задавайте свои вопросы в комментариях.


Перевод статьи Daniel Korpai

Найстарші коментарі (0)