Трехмерная графика 
VSCO (Visual Supply Company) — это известная компания, которая работает над созданием продуктов для фотографов. Не так давно она разработала популярное мобильное приложение для фотографов VSCO Cam.
В данном уроке я готов поделиться с вами секретами разработать приложение для интернет-журнала при помощи программы Скетч. Мы сможем сделать и мобильную, и декстопную версии. В конце этого урока ваши знания о данной программе значительно расширятся.
Кроме навыков, которые являются крайне необходимыми для быстрой разработки приложения, вы сможете настраивать шрифты и макеты. Мы будем пользоваться как простыми, так и достаточно сложными инструментами, и техниками для рисования. Поехали!
Краткое отступление
Прежде, чем мы откроем Скетч и займемся созданием нового документа, я должен напомнить, что данная концепция относится исключительно к теоретическому типу. Чтобы сделать его реальным, необходимо организовать очень и очень глубокий маркетинговый анализ. Многие потенциальные читатели любят, чтобы интересный рассказ сопровождался не менее интересными фотографиями. Поэтому я и разработал данный урок – я хочу научить вас следить за актуальными трендами в веб-дизайне.
Типографика
Каждый проект требует особого акцента именно на типографике. Я точно знаю, что она считается одним из самых важных инструментов в работе любого дизайнера.
Для основного текста и укрупленных заголовков я принял решение использовать шрифт Merriweather. Он отличается засечками, которые часто использовались в книжках старого типа. На экране такие шрифтовые оформления выглядят так, будто человек начал читать полноценный печатный журнал.
Для обыкновенных элементов интерфейса я решил избрать нечто более простое и понятное. Поэтому я определился с шрифтом Montserrat. Он отличается простотой и готичностью.
Настройка артбордов
Сначала я остановлю внимание на своей концепции настроек макета и типографики. Мистер Браун, который является главой печати в компании Adobe Typekit. Он разработал отменный инструмент под названием Modular Scale. Данная опция помогает определить самый подходящий размер текстового наполнения и ввести оптимальный числовой параметр. После этого, данный инструмент умножит полученное число на золотое сечение или чистую квинту. Это дает возможность распределить идеальную типографическую иерархию.
Понятно, что в некоторых случаях такое правило можно нарушить. Однако в целом данный текст позволит организовать нормальный баланс в макете, который будет удобен для чтения и приятен с визуальной точки зрения.
Я выбрал текст с кеглем на 18, а в качестве ширины мобильного макета избрал 670 пикселей.
Шаг 1
Откройте Sketch, выберите опцию Artboard (A) в меню Insert:
Для работы с мобильной версией рациональнее всего выбирать форматирование iPhone 6. Если же у вас иная модель данной техники, берите именно ее. Программа позволяет отзеркалить работу на устройство такого типа при помощи специального приложения-зеркала. Это дает возможность практически сразу протестировать окончательный результат своей работы.
Чтобы активировать данную опцию, вам нужно установить специальное приложение Sketch Mirror. Затем кликаем на иконку зеркала. Следите, чтобы файлы находились в единой сети или объединялись кабелем USB.
Для декстопной версии открываем холст Desktop HD и устанавливаем его ширину на 1440 пикселей.
После мы без труда сможем поменять размеры нашего артборда, сменив цифры на панели инспектора.
Шаг 2
Когда все нужные нам атборты выбраны, мы должны установить несколько направляющих, которые помогут разлинеить и сбалансировать наш макет. Чтобы включить линейку, нужно выполнить такую команду: View > Show Rulers (⌃R). Теперь выбираем центральную часть холста мобильной версии и устанавливаем отметку на ее первые и последние сорок пикселей. Это дает возможность сделать визуальные отступы в горизонтальных частях.
Создаем направляющие. Кликаем на линейках, отмечаем там 40, 375 и 710 пикселей.
В декстопной версии ставим центральную направляющую на уровне 720 пикселей и делаем отступы в 100 пикселей..
Разработка верхней навигации
Если вы желаете разработать максимально реалистический макет с меню Сафари, вы можете снять скрин и вставить вырезанный участок. Также вы можете установить для этих же целей оригинальное приложение скачать iPhone 6 GUI Template (iOS 8).
В Скетч вы также найдете вмонтированный шаблон, который находится в меню File > New From Template > iOS UI Design.
Шаг 1
Для разработки верхней панели навигации нам необходимо выделить инструмент для создания прямоугольников.
Я являюсь приверженцем необходимости изучения горячих клавиш. Ими достаточно просто и, главное, удобно пользоваться. Это значительно ускорит горячий процесс. Как правило, горячая клавиша соответствует первой букве в наименовании нужного вам инструмента. К примеру, чтобы вызвать линию, надо нажать L (Line).
Рисуем прямоугольник, в котором ширина будет составлять 750 пикселей, а длина – 120 пикселей. Цвет фона выбираем таковым: a#F9F9F9.
Чтобы быстро настроить цветовую схему, можно воспользоваться параметрами оттенок, насыщенность, яркость, альфа. Их можно очень быстро поменять, тут же наблюдая за окончательным результатом.
Шаг 2
Выберем инструмент овала, после чего зажимаем на клавиатуре Shift + Alt,. Теперь рисуем круг в 80 пикселей. В инспекторе нажимаем на заливку. В районе четвертой вкладки грузим фото профиля.
Если зажать Alt и сдвинуть курсор, можно заметить пиксельное расстояние между выбранными элементами.
Шаг 3
Выбираем инструмент Текста. Вводим рядом с аватаркой имя пользователя. Также нам нужно учитывать отступ слева в 20 пикселей. Размер шрифта ставим 22-ым, цвет выбираем #9E846E. Чтобы напечатать весь текст заглавными буквами, выполняем такую команду: Type > Uppercase.
Попробуем ввести текст ‘New story’, оставив для него настройки, идентичные правой стороне артборда и делая отступы по 20 пикселей.
Шаг 4
Разработаем первую иконку в виде знака +
Для этого делаем прямоугольник со сторонами в 36 на 6 пунктов. Используем для этого одноименный инструмент. Прямоугольник делаем такого же цвета, каким обозначен текст. Если вы хотите настроить параметры прямоугольника, вам нужно его продублировать.
Выделяем второй прямоугольник, который находится на правой панели инспектора. Разворачиваем его на 90 градусов.
Теперь размещаем один прямоугольник ровно по центру над вторым. Перетягиваем первый и вставляем его на вторую панель слоев. Так два слоя слились в единую иконку, размеры которой составили 36 на 36 пикселей.
Шаг 5
В десктопном варианте мы снова создаем прямоугольник, который станет основой панели навигацией. Его высота должна быть 70 пикселей, ширина во все рабочее поле, а непрозрачность – 80 процентов.
Текст кнопок в меню делаем помельче, устанавливая его на уровень 14 пикселей и делая отступы в 40 пикселей. Разделитель цвета - a#CCCCCC.
Оформление закрепленной нижней панели навигации
Для мобильной версии мы разработаем установленную панель навигации в нижней части экрана. Так пользователь сможет перейти в сетку, любимые места, профиль и поиск.
Шаг 1
Примерно так же, как и при работе с верхней навигационной панелью, мы начинаем рисовать прямоугольник. Его высота будет 100 пикселей, непрозрачность – 90%, ширина – на всю страницу. Цвет устанавливаем #FFFFFF. Также мы добавляем линию, окрещённую в оттенок #E6E6E6 на верхнюю сторону прямоугольника. Толщина линии – 1 пиксель. Делим прямоугольник на четыре одинаковые колоны.
Все иконки должны составлять 50 пикселей в высоту цвета #666666.
Во время работы вы можете уделить внимание разработки новой колонки для Grid. Для этого рисуем девять прямоугольников 14x14px и размещаем их в четырех пикселях друг от друга.
Шаг 1
Для нашего главного изображения мы будем рисовать длинный прямоугольник, назначив ему высоту в 850 пикселей. Его мы будем заполнять фотографией по аналогии с рисунком профиля. Чтобы лучше читался текст на картинке, мы наложим на нее черный фон, установив непрозрачность на 20%.
В десктопной версии высоту установим на 1000 пунктов. Убедитесь, что картинка установлена под навигационной панелью.
Шаг 2
Для заголовков и подзаголовков ставим шрифты на 60-й и 24-й кегль. Заголовки пишем шрифтом Merriweather Bold, а для подзаголовков пользуемся Montserrat Regular.
Шаг 3
Финальным элементом главной картинки является кнопка ‘Get Inspiration’. Ее размер шрифта установим на 24 пикселя. Расстояние между буквами – 1,33. Кнопка выполнена в размерах 338x89px с белой границей толщиной 3px. Установим ее в семи пикселях от нижнего края рисунка.
Для десктопной версии шрифт берем поменьше – 18 кегль.
Создание карточек статьи
Шаг 1
Сейчас мы расскажем о том, как разработать область для самой читаемой истории. Разрабатываем прямоугольник с размерами 670x480px. Теперь нам нужно заполнить его характерным изображением. В правом верхнем углу прямоугольника будет размещена специальная иконка. Пользуясь ею, целевая аудитория сайта отметит свои самые полюбившиеся темы о путешествиях.
Теперь рисуем белый круг размером в 80 пикселей. Ставим ему толщину границ в 2 пикселя, назначаем ей внутренний тип. Иконка с иглой имеет 12 пикселей в ширину и 18 в высоту. Шрифт ставим на 18 кегль, это будет Montserrat Regular. Иконке присваиваем 70%-ую непрозрачность и отступаем справа и вверху по пятнадцать пунктов.
В десктопной версии это будет изображение размером 1240x750px, а иконка ‘favorite location’ (любимое местоположение) — 50x50px.
Шаг 2
Делаем нашу первую карточку. Сначала рисуем прямоугольник размерами 670x522px. Заполняем его изображением. Рядом рисуем прямоугольник 670x435px #FFFFFF и накладываем его на предыдущий.
Создаем третий прямоугольник 670x744px и накрываем оба первые. Он должен размещаться под предыдущими слоями. Давайте дорисуем ему тень, чтобы он немного выделялся.
Радиус границ имеет большое значение на этом этапе. Для него мы установим значение в пять пикселей. Чтобы такой радиус был применен ко всем слоям, кликаем на тень и используем его в качестве маски.
В мобильной версии отсутствует видимость наведения курсором. Поэтому данное состояние не слишком отличится от стандартных вариаций с полной видимостью всех данных.
Выделяем все слои из этой карточки. Теперь нам нужно соединить их в группу при использовании одноименной функции. Дублируем их, зажимая Alt. Теперь сдвигаем их слегка ниже.
Грамотная организация слоев имеет колоссальное значение для всех проектов.
В десктопной версии мы можем пользоваться все теми же карточками. Также мы можем немного побаловаться с границами и шрифтами.
Помните о том, что декстопная версия все же имеет состояние hover. Поэтому мы можем разработать упрощенную версию карточки для первоначального состояние. Когда же пользователь будет наводить на карточку, автоматически будет проявляться усложненный дизайн.
Дизайн раздела с картой и коллекций поездок (Map и Journey Collections)
Пользуясь разделом карт, можно провести фильтрацию поисков поста по их размещению. Результативность будет проявлена в виде сборок постов от определенных авторов.
Шаг 1
Делаем прямоугольник размером 750x850px и заполняем его простым скриншотом из Google Maps. Чтобы была создана строка поиска, мы наложим на этот прямоугольник дополнительный, который будет владеть непрозрачностью в 80%.
Чтобы упростить выравнивание, делаем в сайдбаре дополнительный квадрат. Он упростит установку иконки на ее место.
Рекомендую в данной ситуации использовать в качестве главного цвета всего интерфейса #B3483E. Он будет эффектно смотреться в нашем дизайне.
Шаг 2
Если человек ищет пост по тому или иному размещению, результативность в поисках будет изображена как маленькая тетрадь. Каждая из них строится из прямоугольника 320x414px, который заливается картинкой и оформляется легкой тенью.
Теперь попробуем настроить радиус границ. Выделяем нашу фигуру и кликаем на Enter. Если нам удалось выделить какую-то точку, устанавливаем ей радиус границ. Также устанавливаем радиус точкам по вертикали на 12 пунктов.
Шаг 3
В десктопной версии действуем по аналогии с мобильной. Единственное что нужно учесть – результаты мы будем выводить не снизу карты, а сбоку от нее.
Дизайн мини-карточек со статьями
Шаг 1
Дизайн мини-карточек в целом будет идентичным с оформлением больших вариантов. Единственное изменение коснется отсутствия описаний и аннотаций. Так мы подадим еще больше информации в таком же участок, чтобы читатели смогли узнать гораздо больше данных.
В компьютерной мы можем не просто уменьшить карточки, но и поместить их в сетку из трех колонок. Так будет гораздо удобнее читать информацию на сайте.
Call to Action
Перед рисованием футера, который выступит финальным этапом, мы будем делать раздел с призывом к действию.
Шаг 1
Опять рисуем прямоугольник с изображением. Его размер ставим на 750х1000 пт. Чтобы текст лучше читался, добавляем на фотографию белый слой градиента. Его делаем от
Как всегда, нам понадобится заполненный изображением прямоугольник, размер 750x1000px. Чтобы текст был читаемым, добавьте белый градиентный слой на изображение. Градиент идет от #FFFFFF с уровнем непрозрачности 30% до непрозрачности 70%.
Подсказка: небольшой, но иногда очень весомый фокус поможет улучшить разборчивость текста — просто добавьте слабенькую тень. Я применил мягкую, светлую тень к заголовку и обычному тексту.
Создаем подвал
В подвале (или футере) мы поместим набор иконок доступа к социальным сервисам и текстовые кнопки.
Убедитесь, что иконки соц. сервисом остаются видимыми на маленьких мобильных экранах. Давайте сделаем их как минимум 44px в ширину или в высоту.
И еще идея
Для компьютерной версии мы можем сделать дополнительный принцип навигации. Однако будьте осторожнее, ведь он будет нормально смотреться только на экране в
1440px.
Сделано!
Мы завершили рабочие процессы с разработкой оформления интернет-журнала о путешествии. Надеюсь, вы уже узнали множество интересных аспектов о работе с такой программой благодаря моему уроку. Вот что получилось в результате нашего труда:
