Концепт главной страницы сервиса Туту.ру

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

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

Задача

За две недели разобраться, как устроена главная страница Туту.ру и представить свою улучшенную версию.

Процесс

Как выглядела главная страница:
Текущая версия главной страницы Туту.ру

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

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

Результат

Основные тезисы новой главной:

  • «Говорящая» на одном языке с пользователем форма поиска. Откуда? Из Оренбурга.
  • На первом экране рассказываем пользователю, что его ждёт после поиска. Простые четыре шага и билет в кармане.
  • У контента появилась структура — рассказываем о преимуществах заказа билета онлайн на Туту.ру.

Макет кликабельный, подходит для экранов с шириной 1280 пикселей.

Концепт главной страницы Туту.ру

°°°

За время работы над тестовым заданием было проведено две итерации показа макета. Огромное спасибо дизайнерам из Туту.ру Никите Иванову и Льву Пикалёву за ценные советы и возможность выполнить задание!

Это был полезный для меня опыт. Почитайте моё описание дизайн-процесса для тестового задания в школу Яндекса и редизайн главной страницы моего блога.

Буду рад, если оставите комментарий с критикой работы или ценный совет как можно сделать лучше.

°°°

Результат: не прошёл. От дизайнера ожидался несколько иной набор «свойств», не вызвал чувства «а чё, так можно было?».

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

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

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

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

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

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

°°°

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

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

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

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

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

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

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

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

Σ

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

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

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

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

Арт-директор Студии Артемия Лебедева — Людвиг Быстроновский выступил с лекцией про дизайн, видеозапись доступна на канале свободного пространства «Кто такой Джон Голт?» в трёх частях.

Дизайн + 1

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

°°°

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

Дизайнер любит решать задачи

Если после создания дизайна, у вас ощущение, что что-то получилось не так, как хотели, — не переживайте, так у всех. Это нормальное поведение.

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

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

Отличный дизайнер должен уметь всё: нарисовать иконки, дизайн сайта, сверстать, запрограммировать и ещё десять раз переписать.

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

Развитие навыков

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

Имейте немножко терпения

Прочитайте книгу по ГТД, создайте доску в Трело и там собирайте все вызовы. В каждом проекте, по очереди, прокачивайте по чуть-чуть свои навыки.

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

«Дизайн + 1» означает, что, делая текущую работу, вы уже делаете следующую. Вы понимаете, как в следующий раз общаться с заказчиком, как подойти к разработке меню, чтобы получилось лучше. Если хотите делать хорошие сайты — делайте сайты. Потихоньку прокачивайте каждое умение, в итоге у вас будет получаться отлично. По-другому не бывает.

Любой дизайнер должен быть специалистом по тестированию дизайна. Например, в студии Лебедева нет отдельного специалиста по тестированию дизайна.

Как повысить интерес к работе, если стало скучно?

Есть простое решение: повысить сложность. В следующем проекте можно взять новый инструмент для дизайна или попробовать запрограммировать решение самостоятельно. Только вам нужно, чтобы ваша работа была интересной. Работодателю это не нужно. У него уже есть интересная работа — он создал контору, в которой вы работаете.

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

Этапы дизайн-задачи

Постановка задачи

Когда приходит заказчик и говорит: «Нужно сделать так-то», — это решение. Дизайнер не должен «решать решения». Он должен докопаться до сути, почему именно так и действительно ли так надо, может совсем иначе?

Задача изменяется в течение всего процесса: от начала до конца. Это нормально. То одна деталь всплывет, то другая. В итоге результат отличается от изначально планируемого.

Генерация идей

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

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

Как дизайнеру понять жизнеспособность идеи?

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

Если дизайнер не умеет программировать, первое, что ему следует сделать — научиться программировать самому.

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

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

Общение с заказчиком

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

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

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

Разработка

К технологам приносят эту бронзовую фигню и говорят: «Будем делать». На этом этапе возникают проблемы, что нельзя реализовать какие-то части интерфейса. Технологи идут к дизайнерам и начинают выяснять.

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

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

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

Презентация решения

Лучшее решение — это такое решение, которое заставляет говорить людей: «А что, так можно было?».

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

Книги — это хорошо. Но чтение книг по кулинарии не сделает вас профессиональным шеф-поваром. Надо учиться чистить картошку, овощи и мясо. Готовить, готовить и ещё раз готовить.

Сопровождение проекта

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

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

Σ

Делать, делать и ещё раз делать. По другому дизайнером, программистом, арт-директором или менеджером не стать. Чтение книг — это хорошо, но чтение книг по переговорам от Кэмпа не сделает из вас первоклассного переговорщика. Идите на переговоры и договаривайтесь.

Процесс обновления главной страницы

Задизайнил и сверстал главную страницу своего сайта, ниже опишу процесс.

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

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

Подготовка

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

Перечитал «Типографику и вёрстку», поэтому кроме освоения Скетча старался использовать принципы дизайна: правило внутреннего и внешнего, якорные объекты, врезки и модульную вёрстку.

Дизайном занимался в свободное от работы время, параллельно помогал Саше Климову делать курсовой проект для Школы Стажёров в Бюро Горбунова. Договорились о бартере: я помогаю запрограммировать вёрстку в тему Вордпрес, а Саша помогает советами по дизайну.

Прототипы на бумаге — отличная штука, но когда нет понимания чего хочешь, они только мешают.

Бумажные прототипы главной страницы

Бумажные прототипы

Макетов много, определиться сложно. Непонятно, по какому пути идти и на чём остановиться. У меня, как у начинающего дизайнера ещё нет собственного стиля. Говорят, он появляется с опытом. Когда нет опыта и собственного стиля, нужно брать то, что нравится и переделывать под себя.

В Фидли читаю 101 личный блог, прошёлся по каждому и выбрал те, у которых есть главная страница: Салават Абдуллин, Роман Шавня, Артур Кочарян, Ярослав Максимов, Александр Гурьянов, Илья Бирман, Никита Иванов, Александр БеспоясовВладислав Балабанович, Елена Глубко, Максим Ильяхов и Илья Страйков.

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

Отличные шапки у Александра Гурьянова и Максима Ильяхова.

Шапка Александра Гурьянова
Шапка Максима Ильяхова

У Ильи Бирмана отличный вывод заметок из блога, а у Максима красивая трубка и форма подписки:

Контент Ильи Бирмана
Сайдбар Максима Ильяхова

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

Дизайн-процесс

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

Первая версия главной — до того, как выбрал путь «копировать под себя» — выглядела так:

Первая версия дизайна

Раньше считал, что дизайн это просто: нарисовал картинку, а всю работу за тебя делает разработчик.

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

Итог первой итерации:

Первое приближение

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

Итог второй итерации оказался интереснее:

Второе приближение

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

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

Третья итерация

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

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

Вёрстка

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

С другой стороны, даже когда ты разработчик, нельзя быть на 100% уверенным в возможности реализации элементов дизайна.

В моем случае оказалось, что нельзя сделать стандартными средствами ЦСС и ХТМЛ обтекание врезки. Рассчитывал на флексбоксы, но даже они не позволили справиться с ситуацией. Поэтому блок с заметками идёт ровно, не утекает под врезку.

Следующая сложность — вывод заметок по тегам. На главной выводятся не все заметки, а только те, которые отмечены галкой «Показать на главной»:

Настройка отображения заметки на главной

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

В шапке добавил чередование ритма: 1, 3, 4. С правой стороны исчезла пропасть из пустого пространства, страница стала приятнее и появилось ощущение завершённости.

Итоговая шапка главной страницы

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

Разработка

Σ

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

Финальная версия главной страницы

Страница отлично чувствует себя на компьютере, планшете и смартфоне.

Главная страница на Айпаде и Айфоне

Посмотреть в живую: Бизиков.ру

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

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

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

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

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

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

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

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

°°°

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

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

°°°

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

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