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

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

Презентую проект

Фото с презентации личного проекта, автор Станислав Сабиров

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

°°°

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

С 4 июля по 15 августа мне повезло учиться в Яндексе: слушал лекции, проходил тренинги, семинары и занимался личным проектом. Всё это дало мне отличную базу для входа в новую профессию.

Раз всё так хорошо, то возникает логичный вопрос: «почему не прошёл?». Основная причина — это недостаточный опыт в отрисовке интерфейсов. Как следствие, сложно визуализировать решение проблемы в виде живого интерфейса. Для начала рисовал экран в блокноте, а уже после этого открывал Скетч. Такой подход отнимает много времени.

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

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

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

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

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

Σ

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

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

СохранитьСохранить

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

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

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

Рука мобилизации

Рука «Мобилизации»

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

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

Кайф!

°°°

Все дни: первый, второй, третий, четвёртый, пятый и шестой, седьмой, с восьмого по тринадцатый, четырнадцатый.

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

Автор книги Дмитрий Соколов-Митрич — журналист, специальный корреспондент газеты «Известия», основатель лаборатории «Однажды».

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

Автор через интервью с людьми рассказывает о том, как появился Яндекс, какой была жизнь Аркадия Воложа, Ильи Сегаловича и какую роль сыграла Елена Колмановская. Какие были сложности в развитии своего программного продукта в Советском Союзе и современной России. Получилась история развития российских технологий и интернета в целом.

Вы знали, что вайфай был создан русскими? Саша Галицкий со своей командой сделал его для Сан Майкросистемс в 1993 году. В 1996 они сделали ВПН для Виндоус.

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

Рунетчику на заметку

Атмосфера Яндекса начиная с квартиры «на Гагарина» отдаёт романом братьев Стругацких «Понедельник начинается в субботу». Об этом не раз упоминается в самой книге.

Первая команда «Яндекс»

Первая команда «Яндекс»

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

В свои 25 лет Аркадий Волож стал по принуждению соучредителем одного из первых кооперативов в 1988 году, как раз когда коммерческая деятельность стала легальной. Они занимались продажей семечек, покупкой компьютеров, на которые устанавливали программное обеспечение и продавали как автоматизированные рабочие места. На вырученные деньги опять покупали семечки. Волож считался почти олигархом: пачка трёхрублёвых купюр, а дома стоял персональный компьютер.

Яндекс появился раньше интернета

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

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

23 сентября 1997 года на выставке Софтул была разрезана ленточка, означавшая запуск поисковика yandex.ru:

Главная страница Яндекс в 1998 году

Главная страница «Яндекс» в 1998 году

«Яндекс» один из немногих российских продуктов, который не был копией западного сервиса. Главное слово в истории компании: поиск.

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

Запуск «Яндекс» в 1997 году

Аркадий, Елена и Илья у стенда компании КомпТэк на выставке Софтул

24 мая 2011 года «Яндекс» публично разместила свои акции на фондовом рынке Насдак. Аркадий в интервью автору рассказывает, как они готовились — это долгий и сложный процесс, требующий определённых изменений в организационной структуре компании.

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

Выход на IPO

«Яндекс» выходит на IPO

Σ

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

Книга будет интересна ещё и тем, кто занимается стартапами. Автор общается с ребятами из Кремниевой долины, задаёт вопросы и получает интересные ответы.

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

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

Кроме тестового задания было скайп-интервью, в котором организаторы школы задавали мне вопросы, а я им.

Наконец, пришло письмо с результатом:

Зачислен!

Ближайшее лето проведу в Москве. Буду учиться в Яндексе, ура!

°°°

Обучение закончилось. Подвёл итоги и поставил новые цели.

СохранитьСохранить

СохранитьСохранить

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

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

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

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

  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 мая. Остаётся только ждать результатов и надеяться на лучшее, а пока можете поддержать меня лайком и комментарием к заметке.

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

°°°

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

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

°°°

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

СохранитьСохранить