Видеозаписи всех лекций Школы дизайна Яндекса опубликованы на нашем. Школа дизайна яндекса Работа в команде

Отличная возможность для входа в новую профессию. Поэтому решил выполнить тестовое задание.

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

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

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

Процесс

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

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

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

Иконка

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

Начал с того, что нарисовал иконку в своём :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Прототип

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

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

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

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

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

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

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

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

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

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

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

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

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

Результат

Σ

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

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

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

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

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

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

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

«Яндекс» открывает Школу дизайна - проект для начинающих дизайнеров продукта. С 15 июня по 31 августа сотрудники «Яндекса» и приглашённые эксперты будут делиться с участниками проекта опытом работы над дизайном продукта. Программа состоит из четырёх блоков: «дизайн в крупной компании», «прототипирование», «дизайн продукта» и «работа в команде».
В конце программы участники представят личный проект - несложный и полезный сервис, который концептуально и визуально продолжил бы ряд сервисов «Яндекса».

Отбор в школу проходил в несколько этапов. С 18 марта до 19 апреля соискатели отправляли команде «Яндекса» портфолио, эссе и тестовое задание. Авторы наиболее удачных работ проходили собеседование. Всего команда «Школы» посмотрела 780 заявок и поговорила с 74 претендентами. Хотя изначально участников проекта должно было быть 30, в финальном составе их на одного больше.

Лола Кристаллинская

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

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

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

Нам важно был о найти «своих» - увлечённых
и вдумчивых одновременно.

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

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

Занятия будут проходить через день по вечерам. За прогрессом участников будут следить наставники из «Яндекса» и личные кураторы. Так как в российском дизайн-образовании нет устоявшейся методологии и литературы для дизайнеров продукта, сотрудники «Яндекса» разработали программу проекта самостоятельно.

Тарас Шаров

руководитель отдела продуктового менеджмента и дизайна

От Яндекса ждут объективности и невмешательства — такое требование к информации затрагивает и интерфейс: быть естественной средой, а не примесью.

ПРОГРАММА

Дизайн в крупной компании

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

Прототипы

Лучший способ почувствовать продукт на стадии дизайна. Руководство к освоению техник прототипирования. Избавление от страха работы с кодом. Системный подход к организации шаблонов и стилей. Методология декомпозиции интерфейса. Единая с разработчиками терминология. Знакомство с внутренними инструментами Яндекса.

Продукты

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

Работа в команде

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

Работа над проектом

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

Летом 2015 года была проведена первая Школа дизайна Яндекса . Видеоматериалы, отснятые летом, легли в основу дистанционного учебного курса. Тарас Шаров, соавтор школы, снял вводное видео, в котором кратко расскажет:

1. На кого рассчитана Школа дизайна?
2. Про что наша школа?
3. Как правильно воспринимать материалы школы?
4. Как проходить обучение?
5. С чего начать?

1. НА КОГО РАССЧИТАНА ШКОЛА ДИЗАЙНА?

Школа не рассчитана на новичков в дизайне.

2. ПРО ЧТО НАША ШКОЛА?

Обучение разбито на 4 блока:
1. Дизайн в крупной компании.
2. Прототипирование.
3. Дизайн продукта.
4. Работа в команде.
А также ваш личный проект (практика).

3. КАК ПРАВИЛЬНО ВОСПРИНИМАТЬ МАТЕРИАЛЫ ШКОЛЫ?

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

4. КАК ПРОХОДИТЬ ОБУЧЕНИЕ?

1. Настройтесь на работу.
2. Выберите бренд и представьте себя дизайнером, работающим на этот бренд.
3. Придумайте идею продукта, который дополнит продуктовую линейку бренда. Это должен быть небольшой продукт - не сложнее Instagram.
4. Работайте над русской версией продукта.
5. На протяжении первой и второй секций нашей школы действуйте, полагаясь на свою интуицию. Начиная с третьей секции, следуйте нашим рекомендациям.

5. С ЧЕГО НАЧАТЬ?

Если вы не знакомы с языками HTML, CSS и JavaScript, то начать стоит с базовых курсов на Codeacademy. Ещё, перед стартом мы рекомендуем разогреть мозги несколькими советами Бюро Горбунова.

Школы дизайна, запущенной летом 2015 года - слушатели курса смогут последовательно пройти все секции Школы, слушая лекции сотрудников «Яндекса» и параллельно занимаясь собственными проектами. Видеолекции будут публиковаться последовательно, каждую неделю по вторникам. Курс рассчитан на 10 недель и завершится 5 апреля.

Редакция сайт узнала у создателей Школы подробности о новом видеокурсе и её работе.

Расскажите об итогах Школы дизайна. Вы довольны результатами?

Лола Кристаллинская, организатор Школы дизайна, заместитель руководителя департамента дизайна «Яндекса»: Летом 2015-го года мы впервые провели Школу дизайна. Для большой команды дизайнеров «Яндекса» - в нашей компании уже, к слову, около 140 дизайнеров - это было важным событием, к которому мы серьёзно готовились.

Мы горячо спорили про программу и формат обучения: «Что такое дизайн в большой компании? Что должен знать дизайнер продукта? Как ему строить работу с командой?». Вопросов у начинающих дизайнеров очень много, и нужно было понять, как разрозненные на первый взгляд знания собрать в цельную историю и уместить в 2,5-месячный интенсив.

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

Интерес к продуктовому дизайну большой, и не только со стороны работодателей - мы получили 780 заявок на обучение, с выполненными тестовыми заданиями, и провели 70 собеседований, которые успешно выдержали 32 человека.

Один из них ещё на старте школы принял решение попробовать устроиться в «Яндекс» и, успешно пройдя собеседования, присоединился к нам. Нам было очень важно выбрать ребят, которые серьёзно подошли к обучению. Нам это удалось, и до финальной защиты проекта дошли 30 слушателей Школы из 31 поступившего.

По итогам Школы «Яндекс» пригласил на работу 16 выпускников, другие ребята отправились развивать собственные проекты или вернулись в компании, в которых работали.

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

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

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

В чем идея запущенного сегодня видеокурса Школы дизайна?

Сегодня «Яндекс» открывает дистанционный видеокурс Школы дизайна - слушатели курса смогут последовательно пройти все секции Школы, слушая лекции сотрудников «Яндекса» и параллельно занимаясь собственным проектом.

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

Подробности - в вводном уроке от Тараса Шарова:

План вводной лекции:

1. На кого рассчитана Школа дизайна?
2. Про что наша школа?
3. Как правильно воспринимать материалы школы?
4. Как проходить обучение?
5. С чего начать?

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

Могут ли слушатели курса отправить проекты в «Яндекс» на рецензию?

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

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

Планируете запускать второй набор в Школу дизайна?

Лола Кристаллинская: Да, мы планируем открыть в этом году Школу мобильного дизайна. О старте и условиях набора расскажем в марте.