Дизайн Urban Walks: история прогулок по Нью-Йорку

[pullquote align=right]

Антон Реппонен, дизайнер и со-основатель Anton & Irene, рассказал о том, как он делал лучший путеводитель по Нью-Йорку
[/pullquote]

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

Я дизайнер, одержимый путешествиями, картами и фотографией. Какое клише! Я мечтал о собственном гиде по Нью-Йорку с того момента, как переехал в него семь лет назад. В течение этих лет я совершал многочисленные попытки разработки дизайна на эту тему: однажды журнал .NET попросил меня создать концепцию гида по городу для одной из их статей в 2010 году, а еще я как-то сделал маленький журнал с интересными для фотографии местами Нью-Йорка, где я писал, с каким оборудованием я делал фотографии, в каких условиях и где точно на карте. Но ничто из этого не было существенным.

В прошлом году мой, знавший о моих предыдущих попытках, друг Данил Криворучко пришел ко мне с идеей того, что потом стало Urban Walks, и все, что я мог слышать, было «карты», «фотографии», «приложение» и «больше карт». Я в деле!

В мире нет ни одного города, похожего на Нью-Йорк. Мы хотели сделать Urban Walks приложением, которое позволит его гостям и любопытным местным жителям увидеть Нью-Йорк таким, каким это делаем мы — городом невероятных личностей, исторических драм, захватывающей архитектуры и богатой культуры. Мы собрались маленькой группой людей, чтобы создать интерактивный гид по Нью-Йорку с нуля. Ключевая идея в том, что каждый из участников мог заниматься приложением только по вечерам и на выходных, поскольку у всех нас была полноценная работа.

Теперь вы можете скачать приложение Urban Walk в App Store. А также посетить сайт urban-walks.com.

The app was not found in the store. :-(

Go to store Google websearch

Но я хотел написать краткий пост о разработке дизайна, который мы сделали с командой во время разработки приложения. Итак, поехали.

Карта

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

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

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

Я открыл Photoshop и стал делать карту шаг за шагом:

Скриншоты с openstreetmap.com, перенесенные в Photoshop:

В качестве наброска я обрисовал землю и работал над Манхэттеном.

Это самая трудозатратная часть. Так как наша карта в приложении на самом деле функциональная и показывает точное местоположение; каждая улица должна была быть отдельным местом. Я сделал карту из предыдущего шага немного размытой и часами рисовал на ней улицы с помощью Freeform Pen Tool из Photoshop, используя кисть Wacom. Я знаю, звучит не очень умно, но это было необходимо, чтобы получился нужный стиль. Когда у нас получился правильный набросок, мы шаблонизировали процесс и создали остальные карты намного быстрее, потому что уже знали, как все должно выглядеть.

Я хотел оставить все улицы векторными на всякий случай. Экраны стали ретина, файлы увеличились в размере.

После того, как я закончил с улицами, я начал работать над маленькими деталями, которые делают карту уникальной и особенной. Я добавил много акварельных текстур, чтобы было похоже, как будто нарисовано на бумаге. «Посадил» деревья в парке, добавил прохаживающихся людей и, конечно, оранжевые дымоходы, неотделимые от Нью-Йорка. А да, я сделал одну совершенно ненужную вещь — нарисовал Бруклинский мост. Без него Нью-Йорк не Нью-Йорк.

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

Мне в целом понравился результат. Карта не слишком темная и очень легкая, несмотря на все текстуры и шум. Она цветная, но не слишком. Это было достигнуто за счет использования большого количества синего цвета, но так, чтобы вода не сливалась с сушей. Насыщенные цвета тоже полезны: зеленые оттенки хороши с синим, а черный используется только для важных частей вроде иллюстраций и названий улиц.

Иллюстрации

Я не думал сначала, что это будет головной болью. Каждый тур состоит из примерно 20-30 точек. Некоторые из них привлекают внимание. Скажите «NY Stock Exchange» (Нью-Йоркская биржа) — люди знают ее, это завлекалка и маст-си, если вы турист. Так что мы решили выделить 10 таких точек на карте, сделав для них маленькие картинки, чтобы карта выглядела более живой и интересной.

Стиль довольно простой — просто эскиз здания. Нужно выбрать стиль, помня о том, как много вы хотите рисовать. Технически каждая иллюстрация может быть и сложнее, но тогда это займет часы рисования каждой. Я использовал 2 разных ширины линий, чтобы добавить немного объема: толще для контура и тоньше для внутренних линий и маленьких деталей. В теории каждый рисунок занимает 5-8 минут. Находите онлайн фото, загружаете в Photoshop с прозрачностью и рисуете кистью Wacom. Все звучит просто и прямолинейно.

Больше всего времени заняли поиски. Кое-что, что я вообще не учел. Чтобы нарисовать аккуратно что-то, что нужно, нужна была фотография под прямым углом. Я думал, что просто загуглю «Woolworth Building» и получу, что нужно. Если бы! Вместо этого мне попадались миллионы туристических фотографий с земли с ужасной перспективой. Такие фотографии не дают никакого представления о пропорциях здания и на каком уровне каждая точка находится от земли.

В среднем занимало около 20-30 минут, чтобы найти фотографию под прямым углом или технический рисунок фасада (как на рисунке выше). Для некоторых зданий, чтобы найти что-то приемлемое для использования, мне пришлось искать час. Для некоторых из них это оказалось невозможным, например, для музея MoMa — ключевой точки. После двух часов попыток найти нужную ссылку, я просто сделал скрин улицы из Google Street View и переделал все этажи выше первого  с учетом угла зрения.

В конце концов, у меня было 36 иллюстраций для первых 4 туров на стадии запуска. Если сложить их вместе, получится обалденный постер Нью-Йорка.

Дизайн приложения

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

Я начал с первого экрана, где должны быть доступны все туры. Есть несколько способов сделать это: список, сетка, карусель или карта. Список был главной опцией для нас, потому что мы работали в портретном режиме. Недостаточно ширины для того, чтобы сделать сетку: мы не сможем показать всю информацию о туре. Карусель не самая простая, к тому же до свайпа видно только один элемент. Карта, хоть и отличная идея, была бы слишком сложной для пользователей.

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

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

Вот небольшое видео о том, как работает домашний экран.

Следующий экран — Детали Тура. Это место, где включаются взгляд и чувства. На домашнем экране немного элементов UI и цвета, потому что все цвета обеспечиваются фоновыми картинки. Я начал с того, что выбрал цвета, которые будут сочетаться между собой и с картой.

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

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

Последнее — страница с Туром. Мы решили сделать два режима: Map, когда большую часть экрана занимает карта, а все точки расположены ниже в виде маленьких карточек; и Card, когда каждая точка открывается в виде карточки поверх карты.

Сейчас весь контент разработан и написан потрясающим Джонатаном Эрлем, Нью-Йоркским фриланс журналистом и любителем-историком, который раньше работал газетным репортером в Москве. Это не шутка. На каждый тур он потратил по месяцу исследований в библиотеках (никакой Википедии!) и смог найти безумное количество интересных штучек, которые мы, местные, хотели бы тоже исследовать, и приправил ими обычные, стандартные вещи, которые должны осмотреть туристы.

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

С точки зрения дизайна и пользовательских впечатлений мы потратили довольно много времени на то, чтобы сделать корректными все взаимодействия, так что мы бы могли быть уверены, что все оптимизировано для использования во время ходьбы и осмотра. Для этого мы сделали пару вещей. Очень помогают большие шрифты и правильные междустрочные интервалы. Использование разных модулей, о которых я говорил выше, хорошо разбавляет материал. Так что если вы оторвали взгляд от телефона, очень легко найти потом, где вы остановились, поскольку история разбита на визуально разные блоки. Было важно сделать истории короткими, мы хотели, чтобы люди наслаждались прогулками и смотрели вокруг, наше приложение просто делает прогулку чуть более интересной. Каждую карточку можно прочесть менее, чем за 2 минуты.

Фотографии

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

Здесь два основных препятствия. В идеале, я хотел, чтобы на снимках не было людей вообще. Нью-Йорк без людей? Удачи! Только Уиллу Смиту в «Я — легенда» это под силу. Второе — фотографии небоскребов (или высоких зданий вообще). Вы не можете сделать фотографию с уровня земли, иначе получится обычная фотография туриста, который смотрит снизу.

Чтобы решить первую проблему, мне приходилось вставать в 4 утра, ехать на велосипеде на Манхэттэн к восходу (хорошее освещение) так, чтобы успеть до того, когда люди начнут идти на работу. В выходные немного полегче. У меня был всего час после рассвета до того, как в кадр начинали попадать люди и машины.

Вы знаете это высказывание, что Нью-Йорк никогда не спит. Это вообще-то правда. И иногда вы просто видите людей, пьющих кофе в 5 утра напротив NYSE в пижамных штанах, так, как будто все нормально.

Фотографирование такого типа всегда заставляет меня чувствовать себя неловко, потому что все, что я вижу в видоискателе — это 20 минут работы инструментом Штамп в Photoshop, чтобы эта девушка исчезла.

К несчастью, вторую проблему, высокие здания, не решить в Photoshop. Все лето я пытался попасть на разные крыши, расспрашивая друзей и друзей друзей, нет ли у них доступа к нужной точке. Иногда получалось добиться нужного с помощью телеобъектива (в моем случае — Canon 70–200mm f/2.8, иногда с двукратным конвертером до 400mm).

Так что вместо того, что вы видите слева, у меня получалось что-то достойное, как справа:

Для обработки всех фотографий я использовал Adobe Lightroom. Я обычно прогоняю через него все фотографии и даю 5 звезд лучшим, 4 — тем, которые «возможно» и 1 звезду — на удаление. Потом быстро делаю коррекцию света, чтобы было одинаково и чисто. Я также большой фанат VSCO для Lightroom, очень советую фотографам!

Как вы видите, мы все вложили много усилий в это приложение. Спасибо Данилу Криворучко за то, что всех собрал и верил, что приложение будет закончено, несмотря на все проблемы, с которыми мы столкнулись. Спасибо команде Hyperboloid, которая сделала это технически возможным и реализовала фантастическое приложение! И Ирен из нашей студии Anton&Irene, с которой я работал над этим.

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