Я работал над созданием Missive, единого приложения для электронной почты и чата, в течении последних 2-х лет. В команде из четырех соучредителей, я был единственным дизайнером.

Missive

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

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

Приложение

Мы приступили к работе над Missive в 2014 году. В то время, я все еще работал с Photoshop (вскоре я перешел на Sketch 3) и в большей степени выполнял роль веб дизайнера. Поэтому создание приложения для имейла казалось новым интересным вызовом для меня.

Да, вызов в этом был.

Missive OS X
Самый первый макет Missive. Перед нами стояла задача адаптировать вид приложения под обновления OS X

Урок 1: Вы не сможете победить в одиночку.

Если вы привыкли принимать решения касательно UI/UX, как это делал я, опираясь на свой опыт в дизайне вебсайтов, поймите, дизайн продукта — совсем другая история.

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

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

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

Для Missive я разработал несколько основных векторов:

  • Приложение должно работать как на веб, так и на OSX.
  • Рабочая область должна содержать 3 известные колонки (почтовые ящики, имейлы, общение), чтобы облегчить понимание дополнительного UX в виде чатов в переписке по электронной почте.
  • Письма и комментарии должны отображаться в хронологическом порядке.
  • Необходимость в мультиаккаунте, для возможности работать и вести переписку (играло важную роль в принятии решений по UX).

Все макеты Missive
Все макеты Missive с 2014 года до сегодня
После долгого прототипирования, мы остановились на выборе в пользу привычного вида OS X, с использованием системного шрифта, круглых серых и голубых кругов чата и минималистичного интерфейса.

Логотип

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

Мы были абсолютно уверены в названии Missive (послание), что означало «важное сообщение» и намекало на профессиональный характер приложения. Также, данное слово имеет общие корни с французским языком, что объединило нас, четырех франко-канадцев.

Первые наброски логотипа
Первые наброски логотипа

Урок 2. Найдите баланс между чутьем и стратегией. Это поможет вам в дальнейшем.

В прошлом я основывался на своем внутреннем чутье, как это делают большинство junior дизайнеров. Но для более крупного проекта, как Missive, я доверился выработке стратегии. И не прогадал. Я обозначил ценности бренда, перечислил необходимые объекты (от логотипа и иконок приложения до баннеров в социальных сетях) и провел исследование конкурентов, (некоторые сейчас являются ненужными, но есть и очень полезные).

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

В конце концов, я подошел к созданию логотипа со стороны объединения окна сообщения и иконки имейла.

1-zSfvQQTEWFZNg2fYv4nIAA

Я изобразил логотип в одной линии и загрузил его в ARS Maquette Pro для того, чтобы быть в тренде и шагать в ногу со временем.

1-ZgrMJf1boF41tqmmGBv-tA

Иконки

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

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

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

Часть иконок для Missive
Часть иконок для Missive (слева), и их более крупная версия (справа).

17х17 пиксельная сетка
Использование 17×17 пиксельной сетки помогает центрировать ионку.

Урок 3. Сделать иконки самому не составит огромного труда, но это будет очень ценно.

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

Вам не стоит пугаться длительного процесса.

Сайт

Наконец, знакомый вид деятельности.

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

Как обычно, главная страница выполняла роль основной сути вышесказанного:

Эволюция главной страницы (макеты)
Эволюция главной страницы (макеты). Только последние два были интегрированы в готовую версию.

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

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

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

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

Двигаемся дальше

Когда мы начинали работать над Missive, фон OS X Yosemite еще не существовал, равно как и круглые аватарки, которые позже стали трендом.

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

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

Но пока, попробуйте поработать с Missive и оцените нашу работу.

Присоединяйтесь ко мне в социальных сетях: Twitter, Instagram и Dribbble.