Дизайнер Антон Реппонен написал заметка в своем блоге на Medium, в которой он поделился опытом создания приложения-путеводителя по улицам Нью-Йорка — Городские прогулки .
В разделе «Интерфейсы» — перевод примечания.
Независимые проекты очень сложны.
Они могут показаться простыми, но если вы намереваетесь сделать что-то действительно стоящее, это может оказаться весьма трудоемкой задачей.
Особенно, если вы создаете проект без бюджета и к тому же только в свободное от основной работы время.
Я дизайнер, одержимый путешествиями, картами и фотографией.
Да, это банально.
С тех пор, как семь лет назад я переехал в Нью-Йорк, у меня появилась мечта создать собственный путеводитель по городу.
Все это время я пытался воплотить идею в жизнь.
Например, журнал .
NET попросил меня создать концепцию такого путеводитель в 2010 году я также запустил небольшой ресурс , в котором он рассказывал об интересных местах для фотосъемки в Нью-Йорке и отмечал их на карте с описанием используемой техники, ракурсов и так далее.
Но ни одна из попыток не увенчалась успехом.
Мой друг Данил Криворучко , знавший о моих предыдущих попытках, обратился ко мне в марте прошлого года с инициативой создания Urban Walks. Услышав в его предложении слова «приложение», «фото» и самое главное «карты», я согласился.
В мире нет другого города, подобного Нью-Йорку.
Поэтому нам хотелось сделать приложение, которое позволило бы туристам, да и просто любопытным жителям, увидеть город таким, каким его видели мы – с его историей, невероятной архитектурой и богатой культурой.
Вскоре мы собрали небольшую группу заинтересованных людей, чтобы придумать и создать интерактивный туристический путеводитель.
Единственным недостатком этого проекта было то, что все члены команды могли работать только в свободное время, то есть по вечерам и в выходные дни.
Теперь, когда приложение уже доступный в App Store я хочу рассказать историю разработки приложения и то, через что нам пришлось пройти в процессе работы.
Карты
Одним из ключевых элементов, определявших ощущение всего приложения, были карты.С самого начала проекта я тесно сотрудничал с Данилом и именно он собрал подборку изображений, в которых сгруппировал различные интерпретации карт. На этом этапе нам нужно было определить стиль, который впоследствии будет определять внешний вид всего приложения.
Должно ли оно быть чистым и минималистичным, мультяшным и немного эксцентричным или просто большим изображением? Светлый или темный? На этом этапе мы много спорили о том, стоит ли нам использовать код из других ресурсов карты или пойти по более длинному маршруту и нарисовать каждый элемент на карте вручную с самого начала, а затем объединить все части в одно большое изображение, как в Open Карты улиц.
Мы хотели, чтобы карта была «живой», то есть определяла точное местоположение и направление движения участников экспедиции.
В конце концов мы решили сделать все с нуля и получить именно тот вид, который хотели.
Были изучены и другие сервисы с открытым исходным кодом, но нам не удалось найти в конечном продукте то, что мы хотели.
Мы хотели создать максимально уникальные и «личные» карты.
Чтобы пользователи хотели тратить время на знакомство с ними и изучение деталей; что-то, что имело свой характер и текстуру.
Я открыл Photoshop и начал шаг за шагом создавать карты.
Первый шаг Скриншоты выбранных областей из openstreetmap.com были перенесены в фотошоп.
Шаг второй Я выделил края суши и начал подбирать «правильные» цвета между водой и Манхэттеном.
Шаг третий Это была та часть, которая заняла у меня много времени.
Поскольку карта должна была быть «активной» и показывать точное местоположение пользователя, каждая улица должна была располагаться на своем фактическом месте.
Я наложил прозрачную карту из «первого шага» и потратил много времени на рисование каждой улицы с помощью инструмента «Перо» в Photoshop и пера Wacom. Звучит глупо, но это правильно для того пути, который мы прошли для достижения желаемого стиля.
Когда были получены подходящие результаты, я проделал то же самое с остальными участками, но гораздо быстрее.
Файл в Photoshop при рисовании улиц и мелких деталей На всякий случай я хотел сохранить все улицы в виде вектора.
Скриншоты, сделанные на дисплее Retina, имеют гораздо больший размер.
Шаг четвертый После улиц я начал работать над мелкими деталями, которые сделали карту уникальной.
Чтобы карта выглядела так, как будто она нарисована на бумаге, я добавил много акварельных текстур.
Деревья в парке, гуляющие жители и, конечно же, оранжевые дымовые трубы на улицах – без этого сложно представить настоящий Нью-Йорк.
Еще я сделал то, что было не совсем нужно - нарисовал Бруклинский мост , но и без него Нью-Йорк вовсе не Нью-Йорк.
Ниже вы можете посмотреть финальный вариант карты на одну экскурсию.
Маршрут, по которому должен следовать пользователь, выделен черно-белой линией.
Также видны все достопримечательности, рекомендованные гидом к посещению.
Хитрость здесь в том, что все точки (памятники, музеи и т.п.
) находятся рядом и нужно было сделать так, чтобы пользователь мог указать на каждую из них и получить информацию.
Мне нравится результат. Карта выглядит достаточно лёгкой, несмотря на насыщенность текстур и шумов.
Он красочный и в меру яркий.
Этого удалось добиться за счет использования синего цвета, но без фанатизма, чтобы можно было проследить видимую границу между водой и сушей.
Здесь также очень помогли насыщенные цвета: зеленый, например, хорошо сочетается с синим, а черный использовался только для важных мест, таких как небольшие иллюстрации и названия улиц.
Иллюстрации
Я никогда не думал, что работать над иллюстрациями будет так сложно.Каждая экскурсия включает от 20 до 30 точек (остановок).
Некоторые из них выделены на карте.
Например, " Нью-Йоркская фондовая биржа «- люди об этом знают, поэтому оно «выделено» и его обязательно нужно увидеть, если вы турист. Поэтому мы решили выделить небольшими иллюстрациями около десяти мест на одной улице.
Это должно сделать карту более интересной.
Техника создания иллюстраций была проста – достаточно обрисовать здание.
Решение об этом определяется количеством необходимых чертежей.
Технически нарисовать мелкие детали можно было, но это заняло бы много времени.
Чтобы добавить объемности, я использовал две линии разной толщины: толстую для выделения контуров и тонкую для внутренних линий и мелких деталей.
Теоретически при таком подходе на создание одной иллюстрации должно уйти от пяти до восьми минут. Вы находите в Интернете фотографию, открываете ее в фотошопе, делаете немного прозрачной и обводите.
Все легко и просто.
Один из будущих файлов иллюстраций Большую часть времени я провел в поисках.
Я не учел этого при планировании.
Чтобы быть уверенным, что вы рисуете правильно, вам необходимо изображение здания, сделанное под прямым углом.
Думал в поиск введу, например, « Вулворт Билдинг «И я получу то, что хочу.
Вместо этого я увидел миллионы фотографий, сделанных туристами без какой-либо перспективы и с земли.
По этим фотографиям трудно определить пропорции здания и его уровни по отношению к земле.
Хороший пример изображения для создания иллюстрации В среднем поиск фотографии, сделанной под нужным ракурсом, или технического чертежа фасада занимает около 20-30 минут. На некоторые здания у меня ушло около часа.
А иногда это было невозможно, например для « Музей современного искусства », который должен был быть одним из обязательных к посещению.
После нескольких часов попыток найти фотографии я решил использовать скриншоты из Google Street View и подделать все, что находится над первым этажом.
В итоге получилось 36 иллюстраций, которые были использованы для четырёх туров в первоначальной версии приложения.
Если объединить их и разместить на одном холсте, то получившийся постер будет намного лучше и привлекательнее любой рекламы Нью-Йорка.
Дизайн приложения
Теперь, когда карты и иллюстрации были готовы, мы могли приступить к разработке приложения.Мы начали с создания главного экрана и размещения на нем всех доступных экскурсий.
Это можно реализовать несколькими способами: в виде списка, сетки, «карусели» или карты.
Организация экрана в виде списка была нашим первым вариантом, поскольку приложение работало в портретном режиме.
Именно поэтому мы не выбрали решетчатую раскладку, ведь ширины экрана недостаточно для отображения всей необходимой информации об экскурсии.
«Карусель» реализовать не так-то просто, к тому же этот вариант может отображать лишь небольшую часть информации, а для получения дополнительной информации нужно «листать».
Организация его в формате карты — хорошая идея, но у пользователей могут возникнуть трудности с знакомством с приложением.
Мой первый блин оказался комом - как всегда.
И тогда я подумал, что каждую доступную экскурсию можно было бы изобразить в виде почтовой марки (не слишком реалистично), добавив при этом немного текстильного эффекта.
К тому же, это приятное напоминание о тех временах, когда было модно коллекционировать марки.
Идея марки в значительной степени решила для меня все.
Внешний вид контейнера хорошо подходил для отображения изображения, представляющего тур.
Размещение текста по центру также выглядит вполне естественно.
Даже место для цены в правом верхнем углу идеально вписывается в общую концепцию.
В качестве завершающего штриха я повторно использовал одну из иллюстраций для каждого тура и разместил ее над заголовком.
Варианты оформления марок для экскурсий с разным статусом Вот короткое видео о том, как работает главный экран: Следующий раздел – «Информация об экскурсии».
На главном экране не так много элементов пользовательского интерфейса и цветов, поэтому все цвета, представленные на странице, являются «фирменными» цветами.
Я начал выбирать те, которые сочетались друг с другом и хорошо сочетались с карточками, которые я создал ранее.
Информационный экран содержит все, что помогает продать экскурсию пользователю: фотографии мест, описание тура (но не очень длинное), основные достопримечательности маршрута, инструкции, как добраться до начальной точки и дополнительную информацию.
например, о местах со свободным доступом в Интернет. При работе над интерактивными проектами очень важно уделять внимание анимации и переходам.
Переходы очень важны для пользователей, поскольку помогают им понять, что они делают, откуда пришли и где оказались.
Поэтому мы решили сделать «перетекание» от главного экрана к информационному практически незаметным.
И последнее — экран экскурсии.
Мы решили использовать два режима: «Режим карты», в котором карта занимает почти все пространство экрана, а все вспомогательные элементы расположены внизу, в виде отдельных маленьких карточек, и «Режим карты» — в котором информация Информация о каждой достопримечательности отображается поверх основной карты.
На сегодняшний день весь контент написан Джонатаном Эрле.
Он живущий в Нью-Йорке журналист-фрилансер и любитель истории, который также работал репортером в Москве.
Он провел несколько месяцев в библиотеках, изучая информацию по каждой экскурсии (и без Википедии).
Самое главное, ему удалось найти невероятное количество интересных фактов, о которых мы, местные жители, даже не слышали и которые обязательно нужно увидеть каждому туристу.
Все, что он нашел, было в порядке, и мы не могли использовать это как обычный текст. Поэтому я быстро создал разные шаблоны для каждого типа информации: цитаты, художественные галереи, интересные факты и так далее.
Мы даже запустили систему управления контентом, позволяющую выбирать и менять шаблоны для каждой остановки во время тура.
Параметры шаблона Что касается дизайна и пользовательского опыта, мы потратили немало времени на настройку приложения.
Мы стремились оптимизировать продукт для использования во время ходьбы.
Есть несколько моментов, которые помогли нам добиться этого.
Во-первых, это крупные шрифты и правильно подобранный межстрочный интервал.
Использование различных шаблонов, о которых я говорил выше, помогает разбить весь текст. Так, если во время прогулки вы вдруг отвернетесь, чтобы посмотреть на что-то, а затем снова переведете взгляд на телефон, вы легко сможете найти место, на котором остановились.
Было очень важно, чтобы истории (описания) были очень короткими, потому что мы хотели, чтобы пользователи наслаждались прогулкой и видом, а наше приложение просто указывало им, что посмотреть.
Наша цель — не более двух минут на одну карту.
Фото
Последнее, что звучит здорово, но очень сложно сделать, — это сделать фотографию.Для каждой карты POI нам требовалась фотография местоположения, чтобы пользователь мог визуально определить его местонахождение, а не искать адресный знак (который иногда невозможно найти).
Как оказалось, нас ждали две проблемы.
В идеале мне хотелось, чтобы на фотографиях не было пешеходов.
Пустой Нью-Йорк? Ха, удачи! Это возможно только если вы Уилл Смит фильм «Я легенда».
И вторая проблема — фотографии небоскребов.
Сделать приличные фотографии с земли просто невозможно, если только вы не захотите еще одно туристическое фото.
Чтобы решить первую проблему, я проснулся в четыре утра и поехал на Манхэттен, чтобы наблюдать восход солнца (хорошее освещение) и поймать момент, когда жители заполнят улицы.
Еще лучше сделать это на выходных.
У вас есть всего час после рассвета, прежде чем в кадре появятся машины и пешеходы.
Вы слышали, что Нью-Йорк никогда не спит? Это верно.
Иногда в пять утра можно встретить людей, покупающих кофе в закусочной Нью-Йоркской фондовой биржи.
Но Фотошоп все исправляет.
До и после К сожалению, Photoshop не может решить проблему с фотографиями высотных зданий.
Летом я пытался получить доступ к крышам близлежащих зданий, чтобы сфотографироваться.
Я просил друзей, их друзей и так далее попасть на эти крыши.
Иногда при использовании ТВ-оптики удавалось получить подходящие кадры (я использовал камеру Canon с объективом 70-200 мм и диафрагмой 2,8, а иногда и конвертор 2x, чтобы получить 400 мм).
В итоге мне удалось сделать несколько хороших кадров.
Фотографии здания Вулворт, сделанные с земли (слева) и с одной из крыш в центре Манхэттена (справа).
Для обработки фотографий я использовал Adobe Lightroom. Каждому фото я присвоил оценку: пять звезд — отлично, четыре звезды — запасной вариант, а одна звезда означала удаление кадра.
Цветокоррекция обычно не занимала у меня много времени.
я тоже большой фанат упаковка VSCO для Lightroom, и я рекомендую его всем фотографам.
Процесс оценки фотографий, сделанных на Манхэттене Абсолютно все участники проекта вложили в эту работу много сил, драйва и искреннего желания сделать что-то действительно крутое.
Хочу сказать спасибо Данилу Криворучко за то, что он собрал всех и поверил, что мы это сделаем несмотря ни на что.
Спасибо российской компании «Гиперболоид» — благодаря ребятам все задуманное стало технически возможным, и в итоге мы реализовали фантастическое приложение.
Особая благодарность моей партнерше Ирине из студии Anton&Irene, которая помогала мне на протяжении всего времени.
Теперь каждый может дешевле, чем цена хот-дога или стакана кофе, получить интересную 2,5-часовую экскурсию, которая не только проведет вас по достопримечательностям и важным местам Нью-Йорка, но и удивит тайной.
места этого города, даже если вы уже давно здесь живете.
-
Swift Tablemanager
19 Dec, 24 -
Yahoo Объявила О Закрытии Pipes 30 Сентября.
19 Dec, 24 -
Из Богатства В Лохмотья За Один Вечер.
19 Dec, 24 -
Глобальный Конкурс Aws Для Стартапов
19 Dec, 24
