Андерс Бйарнл и Джек Андервуд: Isotope — как материальный дизайн заставит вас полюбить химию

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

Тогда Андерс Бйарнл (UX/UI дизайнер мобильного браузера Opera) поделился на MaterialUp созданным им потрясающим концептом Периодической системы элементов – там десятки тысяч дизайнеров и разработчиков делятся лучшими работами в стиле материального дизайна каждый день. Сообщество MaterialUp было заворожено и само собой мы все согласились, что приложение должно быть сделано.

Андерс собрал весь этот энтузиазм, пошел и нашел правильного разработчика, Джека Андервуда, и вместе они выпустили первую версию – Isotope.

И, ребята, ее стоило ждать.

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

Привет Андерс и Джек! Так что такое Isotope?

Isotope это классное Android приложение, цель которого сделать изучении периодической таблицы элементов более веселым и интересным.

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

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

Джек Аундервуд: Isotope это проект Андерса. Это попытка привнести хороший дизайн в ту область, где он исторически всегда был на вторых ролях.

Как вам пришла сама идея и как вы нашли партнера для проекта?

АБ: Я помню, что желание сделать собственную версию ко мне пришло, когда я случайно увидел фотографию куска угля. Иногда вас вдохновляют самые странные материалы :)

Я тогда подумал о том, где элементы встречаются в природе, и объединил эту идею с периодической таблицей. Я нарисовал несколько концептов и сделал мокап с движениями, который и опубликовал на MaterialUp и Dribbble.

Отзывы были самыми позитивными, и со мной связалось 20-25 разработчиков, желающих принять участие в проекте, в том числе и этот парень, чье имя напоминает мне персонажа «Карточного домика», написал мне, и мы теперь сотрудничаем. В отличие от Мистера Аундервуда из сериала, с этим человеком очень легко работать и все процессы протекают без каких-либо проблем – с начала и до конца.

Сколько времени это заняло?

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

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

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

ДА: Я работаю в Android Studio, обычно в последней стабильной версии, если только что-то удивительное не появляется в beta/canary сборках, тогда у меня установлено сразу два варианта.

Я сам не делаю никакого дизайна или мокапов (я не смогу использовать Photoshop даже ради сохранения собственной жизни), так что у меня даже не установлено никаких программ.

АБ: Мой обычный процесс таков:

1. Собираю вдохновение! Для начала делаю муд борды и ищу идеи. Обычно я собираю в макете цвета, которые мне нравятся, это прекрасный способ структурировать то, что находится в голове, привлекательные иллюстрации, забавные иконки, примеры использования шрифтов и так далее. Это нормально использовать для вдохновения идеи других людей, просто не воруйте их.
2. Создаю мокапы в Photoshop.
3. Создаю мокапы с движением в After Effects для того, чтобы показать пользователям и разработчикам весь поток.
4. Собираю отзывы. Даже если вы работаете над чем-то долгое время, то всегда есть шанс того, что вы что-то упустили. Лишняя пара глаз тут может вам помочь.
5. Делаю прототип, чтобы попробовать концепт, чем, в случае Isotope, занимался Джек.

Иногда я зарисовываю идеи на бумаге еще до Photoshop, так как действительно иногда не знаю, как оно должно все работать. Если вы что-то нарисуете в реальном масштабе, то с этим будет проще работать, взаимодействие с такими элементами более натурально.

Что вам дал материальный дизайн?

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

АБ: Я уже достаточно взрослый и пережил много трендов в дизайне. Я помню, как в начале двухтысячных дефолтные эффекты Photoshop, вроде Bevel и Emboss, Outer Glow и Fat Strokes, правили в мире веб-дизайна. Вскоре после этого во многих интерфейсах приложений появились градиенты, и они установили новые стандарты вплоть до появления плоского и минималистического дизайна, который оказался очень простым в использовании и визуально привлекательным для всех пользователей (если он выполнен правильно, кончено).

Я бы сказал, что Материальный дизайн это Плоский 2.0, с добавлением глубины (теней и чувства взаимодействия с реальными объектами). Это, безусловно, самый сильный дизайнерский тренд за все время — при том, что у него есть канонические гайдлайны, люди могут создавать множество различных интерфейсов и при это сохранять один стиль.

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

Вы свободны от гайдлайнов или строго следуете им?

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

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

Как вы сотрудничаете? Как у вас построен процесс?

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

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

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

И как вы продолжаете изучение и улучшение вашего творения?

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

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

ДА: По большей части это пробы и ошибки, но я многому учусь у Google. Я слушаю подкасты Fragmented и Android Developer Backstage, оба супер полезны.

Что касается анимации в Isotope, то прекрасное начало это ресурс Алекса Локвуда и я предлагаю вам изучить его руководства, прежде чем двигаться вперед.

Какой ваш любимый элемент в Isotope?

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

ДА: Анимация раскрытия прекрасна и это в первую очередь то, ради чего я хотел сделать приложение. Я не видел ничего подобного на Android.

Есть еще что-то, что вы хотите улучшить?

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

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

The app was not found in the store. :-(

Go to store Google websearch