Views Comments Previous Next Search

Как это устроено: Интерактивное приложение для iPad

2017697
Написалlorrek12 февраля 2012

Как придумывают и разрабатывают приложения, прежде чем они попадают к нам в айфоны и айпэды — на одном российском примере

В рубрике «Как это устроено» Look At Me регулярно рассказывает о том, как работает креативная индустрия. На этот раз мы объясним, как создается визуальное приложение для iPad на примере интерактивного сервиса «Яндекс.Погода», придуманного российским поисковиком и сервисом вместе с иллюстраторским агентством Bang! Bang! Look At Me побеседовал с ответственными за приложение людьми, которые в подробностях описали весь рабочий процесс.



Зачем это сделано

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

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

Как это устроено: Интерактивное приложение для iPad. Изображение № 1.
Скриншоты приложения «Яндекс.Погода»

Как это устроено: Интерактивное приложение для iPad. Изображение № 5.


Идея



Как это устроено: Интерактивное приложение для iPad. Изображение № 6.
Александр Моисеев,
менеджер проектов компании «Яндекс»

 


«Мы давно думали сделать версию "Яндекс.Погоды" для мобильных устройств или планшетов, главных причин для этого две. Первая: погода — традиционно один из самых популярных контентных сервисов у "Яндекса": на веб-версию ежемесячно заходят, по данным TNS, около десяти миллионов пользователей; вторая — погодные приложения распространены и пользуются спросом, есть даже соответствующий раздел в AppStore.
Идею конкретного проекта предложила пара наших сотрудников, дизайнер и менеджер. Им пришла в голову мысль сделать красивое приложение, которое менялось бы в зависимости от того, какая погода за окном, и помогало бы пользователям быстро оценить ситуацию. Кроме того, хотелось, чтобы люди пользовались таким приложением часто и с удовольствием — для этого оно должно быть интересным. Решили сделать версию для iPad — это необычный опыт, там все по-другому, совсем не так, как в телефонах».

 

Как это устроено: Интерактивное приложение для iPad. Изображение № 7.


Как это устроено: Интерактивное приложение для iPad. Изображение № 8.

Катя Корсунова,
координатор проектов студии Bang! Bang!

 


«Все началось в декабре 2010 года, где-то за полгода до старта проекта, в формате тестовых заданий. У "Яндекса" возникла идея сделать атмосферные и живые зарисовки, которые бы анимировались и озвучивались, без какой-либо привязки к географии, принадлежности к времени суток или веку. Ориентирами были акварельная стилистика и тот факт, что это все про погоду. Нельзя сказать, что мы вообще ничем не вдохновлялись в работе. Но это не были другие погодные приложения; мы, скорее, посмотрели на работы Петрова, вдохновились его анимацией, прикусили губу и сели работать.

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

 

 

Как это устроено: Интерактивное приложение для iPad. Изображение № 9.

Вдохновляющие картинки художника-мультипликатора Александра Петрова

Как это устроено: Интерактивное приложение для iPad. Изображение № 15.

Как это сделано

 

Как это устроено: Интерактивное приложение для iPad. Изображение № 16.

Ольга Морозова, партнер в студии Bang! Bang!

 


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

Долго решалось, делать ли проект со звуком, делать ли так, чтобы все это интересно двигалось, — около двух месяцев. Мы много раз согласовывали разные варианты, и постепенно приложение очень органично сформировалось. Скажем, изначально сюжеты должны были соотноситься с различными историческими эпохами — быть в стиле XVIII, XIX, начала XX веков и не пересекаться. Это уже потом мы начали разные безумства придумывать, с летающими рыбами, привидениями и воронами».  

 

Как это устроено: Интерактивное приложение для iPad. Изображение № 17.

Скетчи иллюстраций в начале проекта
Как это устроено: Интерактивное приложение для iPad. Изображение № 28.
Как это устроено: Интерактивное приложение для iPad. Изображение № 29.
Александр Моисеев,
менеджер проектов компании «Яндекс»

 


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

Мы старались отойти от реалистичного подхода буквального изображения погоды и передать атмосферу и ощущения — что когда идет дождь, нужно изображать капли, снег — снежинки и т. д. В программе очень много аллюзий, ссылок, намеков: на The Beatles, на игру Марио, например.

Дизайнер, который придумал приложение, выступил не только в роли дизайнера интерфейсов, но и в качестве художественного руководителя — он придумал концепцию, объяснял иллюстраторам из агентства, какими должны быть иллюстрации стилистически. Дальше копирайтер писала сюжет того, что происходит на картинке: условно — лето, стог сена, присутствуют звуки птиц; можно "тапать" такой-то элемент, происходит то-то. И делала совсем примитивный коллаж. Мы утверждали, художник рисовал иллюстрацию, ее передавали аниматору, который делал "движения".

Сначала мы хотели сделать скрытые анимации только в нескольких сюжетах, чтобы это были своеобразные "пасхальные яйца", но в процессе работы поняли, что скрытая анимация — это очень здорово, и в результате такая анимация есть почти везде, на 90% картинок. Мой самый любимый сюжет — весенний туманный, с деревьями, которые похожи на животных. Все иллюстрации с туманами получились очень красивые, но, к сожалению, туман в прогнозах встречается редко, поэтому увидеть их сложно».

 

Как это устроено: Интерактивное приложение для iPad. Изображение № 30.

Иллюстрации, нарисованные для погодного приложения

Как это устроено: Интерактивное приложение для iPad. Изображение № 42.

 

Как это устроено: Интерактивное приложение для iPad. Изображение № 43.

Миша Вырцев,
иллюстратор студии Bang! Bang! 

 


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

Основная трудность была с анимацией. Скажем, на одной из картинок летит ворон, и мне нужно было для каждого кадра рисовать отдельный элемент его полета. Потом в PSD все это передавалось дизайнеру, который собирал из картинки аниматику. Затем эта аниматика передавалась "Яндексом" команде программистов, и они на ее основе делали всю эту волшебную историю, в которую можно тыкать пальцем.

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

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

Как это устроено: Интерактивное приложение для iPad. Изображение № 44.

 

Другие погодные приложения:

 

Social Weather
Приложение позволяет делиться погодными статусами в Facebook и визуализировать таким образом, скажем, маршруты путешествий.
Как это устроено: Интерактивное приложение для iPad. Изображение № 45.

 


Better Weather 
Приложение  позволяет пальцем перетаскивать солнце из одного угла экрана в другой и продает дополнительные темы по доллару за штуку.
Как это устроено: Интерактивное приложение для iPad. Изображение № 46.

 

Nightstand Central
Приложение-будильник с погодными статусами и картинками, напоминающими фотообои.
Как это устроено: Интерактивное приложение для iPad. Изображение № 47.

 


Weather HD
Отчасти анимированное приложение с большим количеством лунных и солнечных пейзажей.
Как это устроено: Интерактивное приложение для iPad. Изображение № 48.

 

Swackett
Погодное приложение для компьютеров Apple, среди прочего сообщающее, как нужно адекватно одеться при выходе на улицу.
Как это устроено: Интерактивное приложение для iPad. Изображение № 49.

 






Рассказать друзьям
20 комментариевпожаловаться

Комментарии

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