Connect with us

Дизайн и прототипирование

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

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

Анна Уханаева

Опубликовано

/

     
     
[pullquote align=right]

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

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

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

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

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

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

1

Urban Walks
Urban Walks
Разработчик: Urban Walks
Цена: Free+

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

Карта

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

2

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

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

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

3

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

4

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

5

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

6

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

7

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

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

8

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

Иллюстрации

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

9

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

10

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

11

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

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

12

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

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

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

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

13

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

14

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

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

15

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

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

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

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

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

16

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

Фотографии

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

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

17

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

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

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

18

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

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

19

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

20

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

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

21

Комментарии
Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru.
Advertisement
Click to comment

You must be logged in to post a comment Login

Leave a Reply

Дизайн и прототипирование

Дизайн уведомлений для приложений

Шашанк Сахай, продуктовый дизайне в Microsoft Teams, рассказал про различные подходы в  реализации уведомлений внутри приложений и их особенности.

AppTractor

Опубликовано

/

Автор:

TL;DR – в чем смысл:

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

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

Читать: https://medium.muz.li/designing-notifications-for-applications-3cad56fecf96

Комментарии
Продолжить чтение

Дизайн и прототипирование

Текст в интерфейсах: проектирование

Что и когда говорить пользователю, о чем промолчать и почему все поля — обязательные, дизайнер роботов Оля Сартакова рассказывает о текстах и контексте в интерфейсах.

Redmadrobot

Опубликовано

/

Автор:

Привет, меня зовут Оля Сартакова. Я работаю в Redmadrobot и преподаю дизайн мобильных приложений в Британке. Хочу рассказать, как работаю с текстами в интерфейсах.

Самый однозначный носитель смысла среди инструментов дизайнера — это текст. Есть ещё иконки и иллюстрации, но они, как иероглифическое письмо: ёмкие, компактные и не очень понятные. Их можно сравнить с жестами в устной речи. С их помощью можно передать эмоции, подбодрить или послать собеседника. Но, например, объяснить, что активировать банковскую карту сейчас не получится из-за сбоя на сервере, будет нелегко.

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

1. Понять, кто и в какой ситуации будет пользоваться приложением

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

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

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

После анализа результатов интервью можно придумать самого сложного персонажа в самой непростой ситуации и проектировать приложение для него.

Давайте разберём пример: проработаем сценарий оформления заказа для приложения доставки пиццы. Наш пользователь — 28-летний Василий. Характер прескверный, не женат. Он живёт во Фрязино, работает в Москве. Сегодня вечер пятницы. Василий после работы выпил немало пива с коллегами. Сейчас он возвращается домой на электричке, в которой не всегда хорошо ловит интернет, и хочет есть.

2. Выписать всё, что может пригодиться

Для этого нужно побеседовать с клиентом, побеседовать с пользователями, проанализировать конкурентов, пофантазировать самому.

С пиццей у меня получилось так.

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

Бизнес (пиццерия) заинтересован в том, чтобы Василий сделал заказ как можно быстрее и оплатил заранее.

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

Если не спросить у Василия время доставки, курьер может привезти пиццу не вовремя и ему придётся ждать под дверью. Про время надо спросить.

Василий хочет оплатить пиццу через Apple Pay, но не все с ними солидарны. Во-первых, не у всех смартфоны поддерживают Apple / Google / Samsung Pay, а во-вторых, при первом заказе люди опасаются предоплат — вдруг вообще не привезут. Получается, что в приложении нужны, как минимум, четыре способа оплаты: Apple / Google / Samsung Pay, картой в приложении, картой курьеру и наличными.

Чтобы ускорить оформление заказа, можно поле со способом оплаты предзаполнить. Для постоянных пользователей все просто — можно сохранить последний выбранный способ. Если же мы о Василии ничего не знаем, предположение можно построить на данных о посетителях пиццерии.

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

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

Итого, в форме оформления заказа нужны следующие поля:

  • Имя и телефон клиента.
  • Способ получения заказа: доставка или самовывоз (мы разберем только доставку, потому что Василию нужна именно она).
  • Время доставки: чем скорее, тем лучше, или к указанному времени.
  • Адрес доставки.
  • Способ оплаты.

Так форма будет смотреться на экране. Для начала поделю оформление заказа на 2 шага. На первом проверю, знаком ли нам пользователь, на втором узнаю, как он хочет получить и оплатить заказ.

3. Убираем то, без чего можно обойтись

Лучше не перегружать экран и подбирать максимально лаконичные формулировки. Главное при сокращении — не потерять смысл.

В черновике меня смущают повторы «доставки», «при получении» и формулировка «Способ оплаты» (хоть это и не критично, но выглядит слишком формально). Переформулируем все три подзаголовка в одном стиле, уберем «при получении» из оплаты наличными — всё равно иначе деньги передать невозможно:

Теперь меня смущает только «Укажите адрес». Можно заменить его на подсказку о том, что именно придётся указать:

Я вынесла указание адреса доставки на отдельный экран, чтобы не перегружать текущий.

Чтобы курьер доставил пиццу, нужно узнать название города, улицы, номер дома и, если есть, квартиры или офиса. Найти подъезд и этаж курьер сможет и самостоятельно. Но на поиск и вычисление потребуется время, оно же — деньги.

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

Форма получилась большая, но убрать из неё нечего. Что делать?

Один приём мы уже использовали — поделили её на 2 шага. Второй способ сработает при повторном заказе — можно запоминать введённые данные и показывать поля предзаполненными.

4. Заботимся и объясняем

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

Превышен лимит неактивности → Просто верните человека на предыдущий шаг.

Неверный формат данных → Показывайте сразу правильную клавиатуру.

Если предотвратить ошибку невозможно, формулируйте оповещения на понятном человеку языке и объясняйте, что произошло, в чем причина и что сделать. Как правило заботливое сообщение об ошибке занимает больше места, чем «роботизированное», но люди не будут на нас в обиде.

Сервер не отвечает →

  1. Если сервер недоступен из-за того, что у пользователя пропало соединение с интернетом, так и говорим → Нет соединения с интернетом. Проверьте настройки сети.
  2. Если сервер недоступен по собственным мотивам, единственный вариант, продумать автоматическое решение проблемы и подсказать, как можно решить её прямо сейчас. → Нет связи с сервером. Не закрывайте приложение, и ваш заказ отправится автоматически, как только мы устраним неполадку. Или позвоните нам по телефону +7 (495) 999-99-99 — и мы оформим заказ.

Неверный номер телефона →

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

5. Перечитываем

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

6. Тестируем на людях

Когда мы довольны результатом, пора проверить интерфейс на целевой аудитории. Лучше всего собрать прототип с нажимаемыми кнопочками в InVision, Marvel или Flinto и дать нескольким людям из целевой аудитории задание пройти целевой сценарий — заказать пиццу с доставкой на дом в 20:00. На что нужно обратить внимание:

  • Легко ли пользователям? Всё ли им понятно?
  • Где у них возникают проблемы? Почему?
  • Нравится ли им тон общения, который вы выбрали?

Что нельзя делать:

  • подсказывать, куда нажать;
  • выражать свои эмоции, когда у человека что-то не получается;
  • задавать вопросы, пока он не закончил.

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

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

7. Определяем правила

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

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

Комментарии
Продолжить чтение

Дизайн и прототипирование

Фирменный стиль: правила и механика разработки

В июле в Санкт-Петербурге прошла первая встреча глобального сообщества предпринимателей Startup Grind, на которой выступил Роман Горбачев, основатель «Логомашины». Мы пообщались с Романом, чтобы узнать об особенностях разработки фирменного стиля и его адаптации для цифровых носителей.

AppTractor

Опубликовано

/

Автор:

Расскажите, что такое фирменный стиль и из каких компонентов он состоит?

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

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

С чего начинается разработка фирменного стиля? И в какой момент вы начинаете думать, как фирменный стиль будет выглядеть на различных носителях? Бывают ли случаи, когда фирменный стиль разрабатывается именно с учетом того, что он будет использоваться только на цифровых носителях?

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

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

Какие особенности есть у цифровых носителей? Какие-то специальные технические требования или пакет из обязательных форматов?

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

Что делать, если во время разработки веб- или мобильного сервиса оказывается, что фирменный стиль не подходит? Например, если шрифт или цвета оказываются нечитабельными на экране смартфона? Что делать в такой ситуации?

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

А как бы вы решили, например, кейс уже знаменитого ДжонФедора?

В случае с ДжономФёдором мы увидели интересный проект и разработали собственный концепт. Судя по обратной связи и притоку клиентов, вдохновленных этим проектом, работа получилась отличной.

И как подстраховаться на этапе разработки фирменного стиля? Есть ли какие-то форматы тестирования, которые помогут избежать подобных ошибок?

Фирменный стиль нужно делать комплексно и показывать на тех носителях, которые будут в жизни – их должен предоставить заказчик. Также на стороне заказчика должны быть дизайнеры, которые поймут и разовьют фирменный стиль на все экраны приложения, например.

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

Лицензии шрифтов – отдельная сложная тема. По возможности мы работаем со свободными шрифтами или покупаем полную лицензию. Со шрифтами, ограниченными по аудитории, работать очень сложно.

Какие самые частые ошибки вы замечаете при адаптации фирменного стиля для веба и мобайла?

Ошибка номер один – логотип делается для большого формата, а используется в маленьком размере: на сайте, в приложении. Это встречается повсеместно — такие логотипы невозможно разглядеть. В вебе часто забывают про самый маленький формат, типа фавикона. Для приложения критически важна уникальная цветовая гамма, у многих ее просто нет. Есть один цвет, который совпадает с кучей других приложений. Это основные проблемы в узнаваемости.

И как их избежать?

Чтобы избежать таких проблем, нужно делать логотип под тот размер, в котором его будут видеть чаще всего. И презентовать на этом месте (мы называем его «Главное место»).

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

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

Обычно эта реакция не столько на редизайн, сколько на то, что пользователей не спросили. Стало непривычно и неудобно. Такая реакция неизбежна, нужно просто переждать.

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

Спасибо!

Комментарии
Продолжить чтение

Дизайн и прототипирование

Как бросить веб-дизайн и заняться мобайлом

Арт-директор направления мобильной разработки агентства AGIMA Леонид Никулин рассказал нам об особенностях мобильного дизайна.

AppTractor

Опубликовано

/

Автор:

Веб-дизайн – ровесник веб-страницы. 6 августа 1991 года британский ученый Тим Бернерс-Ли, которому мы обязаны за создание HTML, разработал первую веб-страницу. Разгуляться было негде: это был просто текст со ссылками, но отсчет существования веб-дизайна уже начался. Лишь в 1993 году удалось улучшить внешний вид страниц с помощью первого графического браузера Mosaic.

В свою очередь, мобильный дизайн – одна из областей графического дизайна, которая начала развиваться несколько лет назад. С запуском iPhone 9 января 2007 года и App Store 10 июля 2008 года, рынок создания мобильных приложений стал особенно интересен разработчикам и компаниям, так как появились аппараты, обладающие подходящей для работы приложений мощностью.

10 лет App Store: эволюция дизайна первых приложений

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

Для начала

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

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

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

Взаимодействие

Области касания по версии Скотта Херффа иллюстрируют зоны, куда может дотянуться большой палец

Наверняка вы замечали, что держа устройство в одной руке, бывает довольно сложно дотянуться до некоторых иконок. То, что для простого пользователя просто мелкое неудобство, для разработчиков и дизайнеров – настоящая головная боль. Эти “труднодоступные” зоны сильно зависят от размеров устройства и его пропорций. При создании приложения это всегда нужно учитывать, так как иногда дизайнеры располагают самые важные кнопки там, куда сложно дотянуться.

При работе с мобильным устройством ваш курсор – это палец. И так же, как и в вебе, надо думать о том, чтобы пользователь не проклинал вас, пытаясь ткнуть в нужную область экрана. В мобайле нужно делать поправку еще и на антропометрию: площадь соприкосновения пальца с экраном. При создании дизайна приложений вы столкнетесь с таким понятием, как минимальная область касания. В iOS рекомендуют не делать зону тапа меньше 44×44, а в Android – 48. В редких случаях можно уменьшить зону нажатия, но это уже большой риск: пользователь может просто перестать попадать по нужной иконке. Еще надо учитывать, что палец всегда находится около экрана, и каждое неаккуратное касание приравнивается к клику. Соответственно, возникновение ошибки возрастает.

Разнообразие устройств

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

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

Несколько базовых разрешений для примера:

  • 320х480 (iPhone 4)
  • 320х568 (iPhone 5)
  • 375х667 (iPhone 6,7,8)
  • 375х812 (iPhone X)
  • 414х736 (iPhone 6+,7+,8+)
  • 360х640 (большая часть Android-устройств)
  • 412х732 (Pixel 2)
  • 360×720 (Pixel XL)
  • 360×740 (Galaxy S8).

При создании дизайна на iOS рисуется макет в размере 1Х. Это значит, что на устройстве он потом будет увеличен, так как плотность пикселей совершенно другая. На iPhone 3 разрешение было 320х480. Пропорции экранов от iPhone 6 до iPhone 8+ не менялись и остаются 375х667. В Android принято рисовать под 360х640.

Обычно именно в таких размерах нужно создавать дизайн мобильных приложений. При этом у каждого дизайнера есть свои стандарты и наработки. Например, я использую только два разрешения – 375х667 и 360х640, так как это наиболее распространенные пропорции экранов на устройствах. Что удобнее для вас – подскажет практика.

Различие платформ

Когда вы только начнете создавать приложения, первое время будете постоянно напоминать себе о том, что в Android существует кнопка “назад” и что боковое меню – это основной элемент навигации. А на iOS наиболее распространенным элементом навигации является tab bar, а в боковом меню спрятаны наименее важные функции. И это лишь малая часть различий.

Не стоит забывать о гайдлайнах – iOS Human Interface Guidelines и Android Material Design Guidelines, но помимо их изучения вам нужен опыт использования мобильных устройств с различными платформами. Рекомендую вам хоть немного разбираться в технических аспектах и для общего понимания просматривать документацию разработчиков. Так вы сможете наладить более простую коммуникацию с техническими специалистами. Знать наименование структурных элементов тоже полезно, так как, например, навбар в iOS – это верхняя навигационная панель, а в Android – это нижняя навигационная панель, и они совершенно разные в поведении. В iOS линия, разделяющая ячейки в табличном представлении, называется сепаратор, а в Android – дивайдер.

Помните, что переносить дизайн на 100% предназначенный для одной платформы на другую – это верный способ убить юзабилити. У пользователей есть свои привычки и особенности использования смартфона. Несколько лет назад никто не мог представить, что при просмотре приложения на iOS и на Android дизайн будет одинаковый. Если такое случалось, то приложение на одной из платформ просто погибало. И когда пользователь iOS видел дизайн и навигацию из Android, то у него было ощущение, что ему подсовывают что-то низкопробное. А потом заходил в App Store и искал то, что будет соответствовать нативному дизайну платформы. Но времена меняются и сейчас все больше и больше приложений выглядят очень похоже на разных платформах. При этом в большинстве случаев учитывается то, как пользователи привыкли взаимодействовать с конкретной системой.

Не все так легко, как кажется

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

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

В целом процесс продумывания и создания дизайна для веб-сайтов, как правило, довольно статичен и не учитывает переходы между страницами. Например, сайтам не нужна кнопка “назад”, ведь она есть в окне браузера. Поэтому у веб-дизайнеров при создании приложения возникают вопросы по взаимодействию внутри приложения. Несмотря на то, что за последние годы произошли улучшения в создании сайтов при помощи JavaScript и CSS3, суть сайта не заключается в движении и взаимодействии, в отличие от дизайна приложений. Дизайн взаимодействий и микро взаимодействий сложен не только потому, что требует понимания платформы и пользователя, но и из-за необходимости быть почти невидимым.

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

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

Прототипы

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

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

При создании прототипа задавайте себе вопросы: «Какая главная цель моего приложения?”, “Какие разделы наиболее важные и куда их стоит поместить?”, “Какие действия наиболее важные, а какие – второстепенные?».

Еще один важный элемент при разработке дизайна – карта переходов. Она  играет огромную роль при создании приложения, помогая отразить все экраны, которые будут использованы в приложении, распределить между ними информацию и организовать правильные сценарии логики работы.

Какие тексты?

В наше время около 70% людей страдают заголовочным потреблением, то есть дальше первой строки никто не заходит. Суть должна быть написана коротко и понятно. В приложениях мало кто любит читать большие тексты, поэтому многие просто пропускают онбординги, подсказки и туториалы. Если у вас уже есть текст для сайта, то урежьте его минимум в два раза и вы придете к верному решению для мобильного приложения. А лучше всего обратиться к UX-писателю. Задачей UX-писателя является построение такого интерфейса, в котором пользователю не нужны были бы подсказки – все действия совершались интуитивно.

В завершении

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

Комментарии
Продолжить чтение

Реклама

Наша рассылка

Нажимая на кнопку "Подписаться" вы даете согласие на обработку персональных данных.

Вакансии

Популярное

X
X

Спасибо!

Теперь редакторы в курсе.