Школа дизайну яндексу. Школа мобільного дизайну: процес виконання тестового завдання. Про що наша школа

Відмінна можливість входу в нову професію. Тож вирішив виконати тестове завдання.

Завдання складається з двох частин:

1. Ознайомтеся з мобільними продуктами Яндекса та запропонуйте пару ідей щодо покращення будь-якого з них.
2. Запропонуйте концепт мобільної програми сервісу Яндекс.Подорожі. В результаті має вийти кілька ключових екранів та опис того, як це працює і чому.

Друге завдання виявилося складнішим, ніж думав. Здається, я припустився всіх помилок, які тільки міг, про це і розповім нижче.

Процес

Про набір до Школи дізнався прямо перед відправкою до Єкатеринбурга на ДАМП. Дорогою в поїзді почав продумувати інтерфейс програми та малювати в блокноті екрани.

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

Коли повернувся з Єкатеринбурга, я мав 12 днів на те, щоб виконати два завдання в рамках тестового завдання. Для кращого розуміння часу повісив перед собою листок з днями, щоб пам'ятати про дедлайн. Щовечора закреслював минулий день.

Значок

Користувач знайомиться з програмою до того, як запустив його. Значок програми має велике значення, тому я почав з неї. За основу взяв іконку існуючого веб-сервісу Яндекс.Подорожі.

Почав з того, що намалював іконку у своєму:

Друга моя помилка. Виглядає красиво, але насправді ніякої користі. Коли почав малювати у Скетчі, то вийшла повна хрень:

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

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

Згоден, виглядає шкода. Хоча тут можна помітити Y з логотипу Yandex. Варіант не підходить, тому що асоціація сервісу з алкогольним напоєм – не найкраща ідея. Наступні асоціації з мандрівками: пальми!

Зрозумів, що знову зробив помилку. Так, іконки почали малювати, виходячи від асоціацій, але вони були у вакуумі. Правильніше було б вивчити іконки мобільних програм Яндекса, виділити загальні рисиі, використовуючи їх у поєднанні з асоціаціями малювати іконку.

Хто захоче прийняти в сім'ю такого потвори?

У Яндекса іконки програм прості, далеко за асоціаціями не ходять. Для Транспорту в них автобус, для Пошти – конверт, а для Маркета – продуктовий візок.

Починаю шукати прості асоціації для подорожей: багаж, сумка, квиток. Поки що шукаю прості реалізації іконок натикаюся на компас. Справді, компас та його зображення всім знайоме. Малюю іконку та одягаю її у фірмові кольори. Перевіряю як вона почувається в сім'ї:

Згадую, що половина терміну до дедлайну позаду. Залишився тиждень. Намалювати іконку – справа не проста. Зупиняюся на варіанті з компасом та переходжу до інтерфейсу мобільного додатка.

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

Іконка добре почувається в природному середовищі:

Мобільний додаток

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

Почав шукати шоти на дрібблі в надії знайти цікаві інтерфейси та взяти їх за основу у своєму концепті. Це була моя наступна помилка.

Картинки в дрібблі виявилися відірваними від життя. Екрани, які я знайшов, були красивими, але вони були у вакуумі і не вирішували поставленого завдання.

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

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

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

На відміну від мобільної версії у додатку з'явилася сторінка з добіркою персональних турів, можливість додати результат пошуку до обраного та кнопка «Історія», яка зберігає історію пошукових запитівкористувача.

Прототип

На цьому етапі я зрозумів, що зробив найбільшу помилку за весь час виконання тестового завдання.

Інтерфейси малював під екран свого старенького айфона 4ес, щоб продемонструвати роботу концепту. Коли вперше відкрив картинку програми, то зрозумів, що розміри артбордів не відповідають розміру екрана смартфона.

У Скетчі мої екрани мали розміри 320 на 480 пікселів, а треба було 640 на 960. Почав переробляти всі екрани. Далі зрозумів, що у Скетчі елементи виглядають добре, а на смартфоні вони маленькі.

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

До того, як приступити до виконання тестового завдання, визначився з інструментом для прототипування – це Фреймер Студія. Там можна писати на КофеСкрипт та робити класні анімації. Насправді виявилося, що в стислий термін освоїти можливості Фреймера і реалізувати мій інтерфейс - нелегко. Подітися нема куди, дедлайн на носі, треба флексити.

У школі Антон Шеїн згадав сервіс ІнВіжн. Почав розбиратися.

Сервіс виявився інтуїтивно зрозумілим: завантажуєш картинки та зв'язуєш їх переходами. Можна налаштувати анімацію для переходів, встановити іконку програми, яка буде відображатися при збереженні на домашній екран айфона. Те що мені потрібно!

Без проблем не обійшлося. Довелося помучитися зі статусом баром.

Статус бар - це рядок інтерфейсу, де відображається час, заряд батареї та сигнал стільникового зв'язку. У моїх макетах був свій статус бар, але ІнВіжн вміє відображати системний. Якщо зберігати іконку на домашній екран і через неї запускати програму, то статус бар зливається з фоном.

Коли зберігаємо іконку сайту на домашній екран і запускаємо його, сайт відкривається через веб-в'ю. Статус бар можна налаштувати через мета-тег apple-touch-icon. На жаль, статус бар не можна налаштувати так, щоб він був прозорим та з чорним текстом. Лише з білим текстом та чорним фоном.

Вирішення проблеми: встановити ІнВіжн Апп і використовувати його для демонстрації.

Оскільки концепт довелося показувати через інший додаток, цілісність демонстрації була порушена. Вигадав сценарій: показати запущений додаток, повернутися до іконки, розповісти про неї і повернутися до програми, без клацання на значок.

Результат

Σ

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

Набагато складніше перебудуватися на дизайн мобільних додатків. У мене як веб-розробника в голові тільки веб-інтерфейси. У додатках зовсім інший сценарій використання, інші особливості.

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

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

Тому хочу вступити до Школи мобільного дизайну та особисто бути присутнім на лекціях, ставити запитання та головне – отримати досвід у створенні продукту спільно з іншими студентами.

Приймуть лише 30 людей, результати повідомлять до 27 травня. Залишається тільки чекати результатів і сподіватися на краще, а поки що можете підтримати мене лайком і коментарем до нотатки.

Радий почути зауваження та пропозиції щодо тестового завдання.

Влітку 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. Ще, перед стартом ми рекомендуємо розігріти мозок кількома порадами Бюро Горбунова.

«Яндекс» відкриває Школу дизайну - проект для дизайнерів-початківців продукту. З 15 червня по 31 серпня співробітники «Яндекса» та запрошені експерти ділитимуться з учасниками проекту досвідом роботи над дизайном продукту. Програма складається з чотирьох блоків: "дизайн у великій компанії", "прототипування", "дизайн продукту" та "робота в команді".
Наприкінці програми учасники представлять особистий проект – нескладний та корисний сервіс, який концептуально та візуально продовжив би низку сервісів «Яндекса».

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

Лола Кристалінська

заступник керівника департаменту дизайну

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

Спочатку ми планували взяти 30 слухачів, але цифра умовна: якби ми знайшли 23 особи, взяли б 23. Нам важливо було знайти «своїх» – захоплених та вдумливих одночасно. Ми з самого початку сформулювали мету – система відбору має бути прозорою, такою, щоб ми могли кожній людині зрозуміло пояснити, чому так чи чому ні.

Нам важливо булопро знайти«своїх» - захоплених
і вдумливиходночасно.

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

Ми відповіли кожній людині, яка нам написала, з дуже багатьма поговорили і дізналися багато цікавого про ринок дизайнерів у Росії, скоро обов'язково розповімо про це».

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

Тарас Шаров

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

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

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

Розкажіть про результати Школи дизайну. Ви задоволені результатами?

Лола Кристалінська, організатор Школи дизайну, заступник керівника департаменту дизайну «Яндекса»:Влітку 2015 року ми вперше провели Школу дизайну. Для великої команди дизайнерів «Яндекса» – у нашій компанії вже, до речі, близько 140 дизайнерів – це була важлива подія, до якої ми серйозно готувалися.

Ми палко сперечалися про програму та формат навчання: «Що таке дизайн у великій компанії? Що має знати дизайнер продукту? Як йому будувати роботу із командою?». Запитань у дизайнерів-початківців дуже багато, і потрібно було зрозуміти, як розрізнені на перший погляд знання зібрати в цілісну історію і вмістити в 2,5-місячний інтенсив.

У результаті в програмі з'явилися не тільки практичні блоки, такі як, наприклад, прототипування, а й про роботу в команді, на користь суміжних професій та інші. Порядок секцій обрано невипадково - за нашим задумом, слухач Школи поступово розвиває практичні навички, досягає певної професійної зрілості - і до фіналу вже готовий захистити свій проект.

Інтерес до продуктового дизайну великий, і не тільки з боку роботодавців – ми отримали 780 заявок на навчання, з виконаними тестовими завданнями, та провели 70 співбесід, які успішно витримали 32 особи.

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

За підсумками Школи "Яндекс" запросив на роботу 16 випускників, інші хлопці вирушили розвивати власні проекти або повернулися до компаній, у яких працювали.

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

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

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

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

Сьогодні «Яндекс» відкриває дистанційний відеокурс Школи дизайну – слухачі курсу зможуть послідовно пройти всі секції Школи, слухаючи лекції співробітників «Яндекса» та паралельно займаючись власним проектом.

На початку курсу потрібно вибрати відомий і добре знайомий бренд, уявити себе дизайнером, який працює на нього, і вигадати ідею невеликого продукту, який доповнить продуктову лінійку. З цим продуктом ви працюватимете протягом усього курсу. Просто перегляд відеоматеріалів навряд чи буде ефективним.

Подробиці - у вступному уроці від Тараса Шарова:

План вступної лекції:

1. На кого розрахована школа дизайну?
2. Про що наша школа?
3. Як правильно сприймати матеріали школи?
4. Як проходити навчання?
5. З чого почати?

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

Чи можуть слухачі курсу надіслати проекти до «Яндексу» на рецензію?

Лола Кристалінська:Ми готові набрати експериментальну групу, яка отримає можливість консультацій від наших викладачів під час вивчення проекту. Про старт та умови набору повідомимо додатково, протягом лютого.

Поки що рекомендуємо налаштуватися на серйозну роботу: дивіться лекції, читайте додаткову літературу і, паралельно з цим, працюйте над вашим проектом. У процесі навчання концепція може серйозно змінитися. Ваша мета – не так кінцевий результат, як процес. Школа дає можливість розширити світогляд і спробувати працювати над продуктом так, як це роблять у великих компаніях.

Чи плануєте запускати другий набір у Школу дизайну?

Від Яндекса чекають об'єктивності та невтручання — така вимога до інформації торкається й інтерфейсу: бути природним середовищем, а не домішкою.

ПРОГРАМА

Дизайн у великій компанії

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

Прототипи

Найкращий спосіб відчути продукт на стадії дизайну. Посібник до освоєння технік прототипування. Звільнення від страху роботи з кодом. Системний підхід до організації шаблонів та стилів. Методологія декомпозиції інтерфейсу. Єдина із розробниками термінологія. Знайомство із внутрішніми інструментами Яндекса.

Продукти

Виробничий процес від ідеї до продукту. Ролі: менеджер продукту, дизайнер продукту, технічний архітектор та маркетолог. Перетворення дизайнера інтерфейсів на дизайнера продуктів. Етапи дизайн-процесу та інструменти для кожного з них. Перевірка гіпотез: дослідження та експерименти. Просування продукту після створення.

Командна праця

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

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

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