Саша Бизиков

Руководитель отдела дизайна в ФанБоксе

Школа мобильного дизайна: процесс выполнения тестового задания

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

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

Задание состоит из двух частей:

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

Записал видео с демонстрацией ошибки авторизации в приложениях через Яндекс.Ключ.

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

Процесс

О наборе в Школу узнал прямо перед отправкой в Екатеринбург на ДАМП. По дороге в поезде начал продумывать интерфейс приложения и рисовать в блокноте экраны.

Прототип на бумаге

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

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

Дни до дедлайна

Иконка

Пользователь знакомится с приложением до того, как запустил его. Иконка приложения имеет большое значение, поэтому я начал с неё. За основу взял иконку уже существующего веб-сервиса Яндекс.Путешествия.

Старая иконка сервиса Яндекс.Путешествий

Начал с того, что нарисовал иконку в своём альбоме для прототипирования:

Прототип иконки приложения Яндекс.Путешествия

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

Солнце и холмСолнце и мореПросто солнце

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

Первая ассоциация, которая пришла в голову — это стакан с коктейлем, он позволяет расслабиться, как путешествие на море.

Версия 4

Согласен, выглядит жалко. Хотя тут даже можно заметить Y из логотипа Yandex. Вариант не подходит, так как ассоциация сервиса с алкогольным напитком — не лучшая идея. Следующие ассоциации с путешествиями: пальмы!

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

Кто захочет принять в семью такого уродыша?

Изгой в семье Яндекса

У Яндекса иконки приложений простые, далеко за ассоциациями не ходят. Для Транспорта у них автобус, для Почты — конверт, а для Маркета — продуктовая тележка.

Иконки мобильных приложений Яндекса

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

Вариант 9

Прекрасно. То, что нужно. Дальше начинаю шлифовать, накладывать на существующие иконки, чтоб были правильные отступы и расположение.

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

Версия 11

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

Иконка хорошо себя чувствует в естественной среде обитания:

Приложение в естественной среде

Мобильное приложение

Открыл Яндекс.Путешествия на смартфоне, чтобы посмотреть, как выглядит мобильная версия сайта. Далее установил приложения: Букинг, Островок, Travelata.ru, Aviasales и AirBnB, чтобы посмотреть, как может выглядеть интерфейс в приложениях, посвящённых путешествиям и поиску отелей/туров. Установил все доступные для айфона приложения Яндекса, чтобы найти общие паттерны в интерфейсах.

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

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

Пример экрана приложения с Дрибббла

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

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

За основу взял интерфейс мобильной версии сайта и доработал его под мобильные реалии. В результате получился скетч-файл на 8.7 мб и 15 артбордов:

Артбоарды приложения в Скетче

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

Прототип

На этом этапе я понял, что совершил самую большую ошибку за всё время выполнения тестового задания.

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

В Скетче мои экраны имели размеры 320 на 480 пикселей, а надо было 640 на 960. Начал переделывать все экраны. Дальше понял, что в Скетче элементы смотрятся хорошо, а на смартфоне они маленькие.

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

До того, как приступить к выполнению тестового задания, определился с инструментом для прототипирования — это Фрэймер Студия. Там можно писать на КофеСкрипт и делать классные анимации. На деле оказалось, что в сжатые сроки освоить возможности Фрэймера и реализовать на нём мой интерфейс — нелегко. Деваться некуда, дедлайн на носу, надо флексить.

Прототип приложения во Фрэймер Студии

В школе Яндекс.Дизайн Антон Шеин упомянул сервис ИнВижн. Начал разбираться.

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

Прототип приложения в ИнВижн
Процесс прототипирования в ИнВижн

Без проблем не обошлось. Пришлось помучиться со статус баром.

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

Статус бар слился с фоном

Когда сохраняем иконку сайта на домашний экран и запускаем его, то сайт открывается через веб-вью. Статус бар можно настроить через мета-тэг apple-touch-icon. К сожалению, статус бар нельзя настроить так, чтобы он был прозрачным и с чёрным текстом. Только с белым текстом и чёрным фоном.

Решение проблемы: установить ИнВижн Апп и использовать его для демонстрации.

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

Результат

Σ

Да, совсем забыл сказать. До тестового задания я ни разу не работал в Скетче. Как оказалось, его легко освоить.

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

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

Недавно прошёл курс Яндекс.Дизайн. Самостоятельно изучил материал. Но у меня не было возможности общаться с другими студентами, задавать вопросы лекторам и сложно было прочувствовать атмосферу Школы.

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

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

Буду рад услышать замечания и предложения по тестовому заданию.

°°°

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

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

°°°

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

, ,

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

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

16 комментариев

  1. Роман Шавня

    Круто! Молодец.

    Было интересно почитать.

    По поводу иконок, я давно уже пользуюсь сервисом
    https://thenounproject.com/

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

    • Александр Бизиков

      Спасибо!

      Noun уже поставил себе, пальмы как раз оттуда 🙂

  2. Антон Бузулуцкий

    И правда, очень здорово.
    Желаю тебе успехов!

    • Александр Бизиков

      спасибо!

  3. АБ

    Директор по дизайну Яндекса впечатлен)) Значит точно примут. Успехов!

    • Александр Бизиков

      Спасибо, надеюсь и правда примут. Но пока особо не буду на это надеется и буду готов к любому решению.

  4. Костя сыч

    А как пользователь догадается что предложение можно добавить в избранное? Ведь функция добавления скрыта. Было бы круто наверно ( незнаю есть ли в реале такая функция) горящие туры.

    • Александр Бизиков

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

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

  5. Костя сыч

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

    • Александр Бизиков

      Да, такое тоже может быть. Надо подумать, как можно лучше сделать 🙂

  6. Whaleboom

    «В Скетче мои экраны имели размеры 320 на 480 пикселей, а надо было 640 на 960. Начал переделывать все экраны. Дальше понял, что в Скетче элементы смотрятся хорошо, а на смартфоне они маленькие.»
    Рисуй в 1х и используй экспорт в 2х

    • Александр Бизиков

      Спасибо за совет!

    • Rustam Shaekhmurzin

      А еще есть sketch mirror, он автоматически скейлит изображение из 1x в 2x на твой девайс, и ты видишь изменения в макете в режиме реального времени.

    • Саша Бизиков

      да, о нём уже позже узнал 🙂 Полезная функция

  7. Наталья Климова

    Привет! Скажи,тут твоя иконка тут используется? https://naithonburi-beach-resort.ru/ https://uploads.disquscdn.com/images/d06c6dfaea321d9b5d800d6adcf7db9554ca886d6863b0e4643a186c813c4283.png

    Искала себе тур путевку, а иконка у них прям твоя. Или я ошиблась.

    • Саша Бизиков

      Это иконка Яндекса 🙂 Я ее указал в заметке, как изначальную, а потом начал обновлять её.

Написать комментарий

Ещё заметки

2019 — год тяжёлый и насыщенный

2019 год оказался насыщенным на события и самым тяжёлым. В заметке подвожу итоги года.

Лайфлист дизайнера презентаций

За последние два года я сверстал 91 презентацию. Все они сделаны в рамках ФанБокса и по понятным причинам показать их не могу. Зато могу поделиться списком материалов, которые стоит изучить, чтобы научиться делать презентации.

2018 — год руководства, дизайна презентаций и личных хобби

В 2018 году стал руководителем команды дизайнеров, занялся дизайном презентаций, пленочной фотографией, велопутешествиями и впервые увидел море.

Сплав на байдарках по Селигеру

В июле отправился в сплав на байдарках по Селигеру.

2017 — год практики в дизайне

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

Прошёл курс «iOS-программирование для дизайнеров»

С 4 по 13 июля я проходил «iOS-программирование для дизайнеров» — это курс для дизайнеров, которые хотят разобраться в том, из чего состоит разработка мобильного приложения для айфона. В заметке рассказываю, чему научился.

Характер и эмоции в штрихе, итоговое занятие

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

План

Третья часть из серии заметок про составление плана развития на год. Описываю как составить план развития дизайнера.

Инструмент

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

Цель

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

Первые 90 дней в компании

С 5 декабря работаю младшим дизайнером в ФанБоксе. Пришло время составить список для развития навыков в рамках компании, разобраться во внутренних процессах и пройти испытательный период. Для этого посмотрел пару лекций и составил конспект.

Мобилизация, итог обучения

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

Мобилизация, четырнадцатый день

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

Мобилизация, с восьмого по тринадцатый дни

Последние пять дней были насыщенными: узнал про инструменты для создания прототипов, мастерство презентации, писал во Фреймер Студии, узнал подробнее про развитие продукта и как исследовать интерфейсы.

Конспект: Дизайн + 1

Посмотрел все части «Дизайн + 1». Половину лекции Людвиг рассказывает, как стать хорошим дизайнером, вторую половину отвечает на вопросы. Упорядочил информацию и составил конспект.

Мобилизация, седьмой день

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

Мобилизация, пятый и шестой день

Прошло две лекции и два семинара, поэтому опишу впечатления по прошедшим дня. Они были насыщенными.

Мобилизация, четвертый день

Нам начали рассказывать про особенности проектирования интерфейсов под мобильные устройства.

Мобилизация, третий день

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

Мобилизация, второй день

В начале недели у нас была вводная лекция. О том дне писать не стал, т.к раскрывались организационные моменты. Появилось понимание того, что всё серьезно. Будет не до отдыха.

Яндекс.Книга

В заметке кратко расскажу о чём книга, но лучше самостоятельно прочитать её.

Мобилизация, первый день

Вчера в инстаграме написал о том, что буду делиться впечатлениями и подводить итоги дня от обучения в Школе дизайна Яндекса. Первый день в школе Мобилизации был насыщенным и состоял из тренингов, в заметке подвёл итоги дня.

Школа мобильного дизайна: результат поступления

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

Конспект курса «Школа дизайна Яндекса 2015»

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

Лайфлист дизайнера, первый год

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

Велосезон, 2015

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

Диплом

Привет. Я тут диплом получил год назад. Руки не доходили написать об этом заметку.

Джони Айв — легендарный дизайнер Apple

Советую к прочтению всем, кто интересуется историей великих компаний и историей Apple в частности.

Краткая история числа Пи

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

Кувандык, 2014

Сегодня расскажу немного про свою любимую долину счастья — Кувандык. Говоря «долина счастья», я не преувеличиваю. С башкирского Кувандык именно так и переводится.

2013 год

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

2012 год

Вот мне и 22.

2011 год

Совсем недавняя традиция, писать в свой день рождения о том как прошел мой год. На этот раз, мне 21. В этом году у меня произошло очень и очень многое.

2010 год

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