Лого vc.ru

История создания приложения-путеводителя по Нью-Йорку Urban Walks

История создания приложения-путеводителя по Нью-Йорку Urban Walks

Дизайнер Антон Реппонен написал заметку в своем блоге на Medium, в которой поделился опытом создания приложения-путеводителя по улицам Нью-Йорка — Urban Walks.

В рубрике «Интерфейсы» — перевод заметки.

Поделиться

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

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

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

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

В мире больше нет таких городов, как Нью-Йорк. Поэтому мы хотели сделать приложение, которое позволило бы туристам, да и просто любопытным жителям, увидеть город таким, каким его видели мы — с его историей, невероятной архитектурой и богатой культурой.

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

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

Карты

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

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

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

Мы хотели создать максимально уникальные и «персональные» карты. Чтобы пользователи хотели тратить время на знакомство с ними, изучать детали; что-то, что имело бы собственный характер и текстуру.

Я открыл Photoshop и начал шаг за шагом создавать карты.

Шаг первый

Скриншоты выделенных областей из openstreetmap.com были перенесены в Photoshop.

Шаг второй

Я выделил границы суши и начал подбирать «правильные» цвета между водой и Манхэттеном.

Шаг третий

Это была часть, на которую у меня ушло много времени. Поскольку карта должна была быть «активной» и показывать точное местоположение пользователя, пришлось размещать каждую улицу на своем действительном месте.

Я наложил прозрачную карту из «шага первого» и потратил много времени на прорисовку каждой улицы, используя в Photoshop инструмент «Перо» и Wacom Pen. Звучит глупо, но правильно для того пути, который мы выбрали, чтобы добиться нужного стиля. Когда подходящие результаты были получены, я проделал всё то же самое с остальными участками, но намного быстрее.

Файл в Photoshop во время прорисовки улиц и мелких деталей

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

Шаг четвертый

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

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

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

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

Иллюстрации

Я никак не мог представить, что работа над иллюстрациями будет настолько проблемной. Каждая экскурсия включает в себя от 20 до 30 пунктов (остановок). Некоторые из них выделены на карте.

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

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

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

Один из файлов будущей иллюстрации

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

Хороший пример изображения для создания иллюстрации

В среднем на поиски фотографии, которая снята под нужным углом, или технического чертежа фасада требуется около 20-30 минут. Для некоторых зданий у меня уходило около часа. А иногда это было невозможно, например для « Музея современных искусств», который должен был быть одним из обязательных к посещению. Спустя несколько часов мучений с поиском фотографий я решил использовать скриншоты из Google Street View и подделывать всё, что выше первого этажа.

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

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

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

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

Организация экрана в виде списка была нашим первым вариантом, так как приложение работало в портретном режиме. Именно поэтому мы не выбрали решетчатое расположение, потому что ширины экрана не хватит, чтобы отобразить всю нужную информацию об экскурсии. «Карусель» не так проста в реализации, к тому же такой вариант способен отображать только небольшую часть информации, а для получения дополнительных сведений необходимо «листать». Организация в виде карты — хорошая мысль, однако пользователи могли испытать трудности при знакомстве с приложением.

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

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

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

Варианты оформления марки для экскурсий с разным статусом

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

Следующим раздел — «Информация об экскурсии». Домашний экран не имел большого количества элементов пользовательского интерфейса и цветов, потому все цвета, присутствующие на странице — это цвета «марок». Я начал выбирать те, которые сочетаются друг с другом и хорошо подходят к ранее созданным картам.

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

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

И последнее — экран экскурсии. Мы решили использовать два режима: «Режим карты», при котором карта занимает практически все пространство на экране, а все вспомогательные элементы находятся ниже, в виде отдельных небольших карточек и «Карточный режим» — в нем информация о каждой достопримечательности разворачивается поверх основной карты.

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

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

Варианты шаблонов

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

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

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

Фотографии

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

Как выяснилось, нас ожидали две проблемы. В идеале я хотел, чтобы на фотографиях не было пешеходов. Пустой Нью-Йорк? Хах, удачи! Это возможно только в том случае, если вы Уилл Смит в фильме «Я — легенда». И вторая проблема — фотографии небоскребов. Сделать подходящие снимки с земли попросту невозможно, если, конечно, вы не хотите получить еще одно туристическое фото.

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

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

До и после

К сожалению, проблему с фотографиями высоток Photoshop исправить не может. В течение лета я пытался получить доступ к крышам соседних зданий, чтобы сделать снимки. Я просил друзей, их друзей и так далее, чтобы попасть на эти крыши. Иногда при использовании телевизионной оптики у меня получалось сделать подходящие кадры (я использовал фотоаппарат Canon с объективом 70-200 мм и диафрагмой 2,8 и иногда двукратный преобразователь, чтобы получить 400 мм).

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

Фотографии «Вулворт-билдинг» снятые с земли (слева) и с одной из крыш в центре Манхэттена (справа)

Для обработки фотографий я использовал программу Adobe Lightroom. Каждому снимку я присваивал рейтинг: пять звезд — отлично, четыре звезды — запасные варианты и одна звезда означала удаление кадра. Цветокоррекция обычно не занимала у меня много времени.

Я также являюсь большим поклонником пакета VSCO для Lightroom и рекомендую его всем фотографам.

Процесс оценки фотографий, сделанных на Манхэттене

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

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

Статьи по теме
«Пражский электронный путеводитель» — бизнес на коленке11 августа 2013, 11:54
Google приобрёл туристический стартап по распознаванию изображений Jetpac18 августа 2014, 19:58
Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

А будет история про жизнь приложения в AppStore

Это просто шикарно. Еще хотелось бы узнать, какие именно компоненты использовались для встраивания карты в приложение, что-то типа MapBox sdk?

Да, использовали Mapbox

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

0

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

Антон, не планируете ли делать что-то подобное для Лондона, Парижа и т.д.?

0

После этих фраз:

"Я наложил прозрачную карту из «шага первого» и потратил много времени на прорисовку каждой улицы

"Иногда можно встретить тех, кто в пять утра покупает кофе в забегаловке у Нью-Йоркской фондовой биржи. Но Photoshop исправляет все." любому, кто рисует в Фотошопе стало страшно. Жалко дизайнера.

С точки зрения зрения бизнеса - если это просто хобби - то все ок, если это бизнес-проект, то лучше бы сначала создать MVP, прежде чем корпеть в шопе

0

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

Сейчас обсуждают
Nikolay Kachev
Tredwear

Так то, это вам не фотохостинг с геошэрингом

«Нас вдохновил лотос и тефлон»
0
Kirill Pankin

Смерть? Почему смерть? Целиком успешный стартап. Просто его реальный бизнес-план не был озвучен.

Смерть стартапа: Как создатели «умного» кольца BioRing собрали $460 тысяч на краудфандинге и исчезли
0
Prolis Labkk
Bpsimulator

Пономарев в 2010 сдал икеевской "Меге" в аренду дизельные генераторы, а потом не забрал их и потребовал аренду и штрафы.

Суд отменил арест 9 млрд рублей IKEA после вмешательства бизнес-омбудсмена Бориса Титова
0
Denis Sudak

" Это отличная фишка от Google, которую, к сожалению, не многие используют." Ну почему немногие используют. Этот инструмент и многое другое, что описано в статье (очень интересной кстати спасибо) используется в любом современном и уважающем себя агентстве по контекстной рекламе, например, ive агентство, которое настраивало нам рекламные материалы.

Пять лайфхаков Google AdWords при настройке рекламной кампании
0
Vladimir Alexeev

Да, помню было время переделывал iOS приложение данной студии (65apps). Денег изначально было потрачено более 1 млн. руб и ничего не работало на выходе.

Думаю лучший способ сэкономить, это не иметь дело с автором ))

8 способов сэкономить на разработке мобильного приложения
0
Показать еще