{"id":13505,"url":"\/distributions\/13505\/click?bit=1&hash=ca3734639136826288c9056e5c8fa03a05e87c4060ae84df200f2c90f5262470","title":"\u0412\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a? \u0410 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442\u0435 \u0447\u0442\u043e-\u0442\u043e \u0432 \u0438\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u0435 \u043a\u043e\u0434\u0430?","buttonText":"\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c","imageUuid":"f5f0e11f-fefd-52f5-8712-82164a59b7ce","isPaidAndBannersEnabled":false}
Дизайн
Roman Solonovich

Как я за 8 дней сделал приложение на голландском языке для студии из Канады, находясь в России

Лето 2020 года. Мне пришёл запрос на создание дизайна приложения для одного Saas стартапа из Голлландии. Сроки были очень жесткие — 8 рабочих дней. Вот что из этого получилось.

Pov: На этом проекте я работал по контракту (на фрилансе) для студии Auxility из Канады. Сейчас всё так же существую на фрилансе только уже со своей командой.

Я и Auxility врываемся в игру

У 'Newsifier' заказчика из Голландии есть CMS, в которой клиент может настроить всё под свой продукт и сразу запуститься. Другими словами, это конструктор новостных порталов, где за вас всё сделали, вам остаётся лишь подставить свой дизайн и вауля, у вас есть готовый сайт, CRM, но не хватало приложения для их клиентов.

Пример сайта на этом конструкторе. Не говорите ничего о дизайне 😆

Исследование проекта — 2 дня

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

Скриншот брифа от заказчика

Сейчас будет немного сложно. Как выяснилось в брифе, разработка будет выполнена на Flutter – это удобый инструмент, чтобы быстро сделать приложение сразу на две платформы Android и iOS. Опыта с Flutter у меня еще не было, тем интереснее. Летс гет зис щит 👨🏼‍💻

Осознаю бессонные ночи, ребята из Auxility поддерживают

За два дня я изучил все материалы, которые мне передали. Важно заметить, что у заказчика уже был прототип, который не устраивал меня по логике. Мы созвонились и решили мелкие вопросы, пожелания по дизайну и особенность Flutter-библиотеки. У меня были небольшие проблемы с коммуникацией на созвонах из-за недостатка практики общения на англ языке, но команда помогала мне!

Разбираем прототип, который предоставил клиент

Разработчика на проекте звали Али, родом из Пакистана. Очень культурный и образованный специалист. Коммуникация была чуть ли не проще, чем с СНГ проектами.

Обсуждаем с Али, как мне эффективней использовать Material дизайн для разработки

Дизайн приложения — 4 дня

Итак. Сроки очень жесткие, задачу нужно было решать эффективно и быстро. Первым делом я купил несколько Material дизайн китов — это такие готовые шаблоны дизайна, где вам предлагают разные варианты элементов в интерфейсе. Мне нужен был этот шаблон, чтобы сэкономить время на стандартных элементах Material дизайна. Стоил он тогда около 100$ (в эту же стоимость входил и iOS кит в подарок)

Тот самый дизайн кит Figma Material Design kit 3.0

Уверен, у вас есть вопросы, а зачем покупать, если есть бесплатный Material Kit в открытом доступе. В голову приходит два ответа:

  • Я хочу, чтобы у меня был доступ к разным вариантам использования элементов. В бесплатном наборе такого нет. В в купленном же, я могу посмотреть, как элементы могут быть встроены в экран для разных задач!
  • Ну и откровенно говоря, просто ради понта 🤌 Дорогой, богатый дизайнер.

Шрифты

По рекомендации заказчика и для ускорения процесса я старался не менять общую визуальную структуру Android приложений. Накидал иерархию шрифтов с преобладающими в Material дизайн шрифтами!

Цвета подстраиваются под корпоративный стиль клиента

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

Часть из видео презентации Behance 
Показываю, какие цвет могут меняться

Получилось 8 цветов, из которых 3 (white, primary, background) клиенты могут менять у себя в CMS для приложения и, он не посыпется. Дополнительно к этому я дописал рекомендации к формированию дизайна для клиентов Newsifier.

Файлик выглядел примерно так

Главный экран

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

Слева прототип клиента. Справа варинат дизайна главного экрана

Детали

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

У Голландских проектов существует свой вайб определенного функционала. Это не первый мой проект из этой страны, но каждый раз клиент хочет видеть плавную подгрузку, будь это сайт/приложение. Такая мелочь — эффективный способ показать пользователю, что страница загружается. Я стал чаще использовать такой функционал в своей работе!

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

Состояние загрузки главной страницы YouTube

Презентация для проекта

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

На связи с заказчиком

Добавление темного режима

После правок, мы добили новый функционал. У пользователя появилась возможность использовать dark mode, всё это также подстраивалось под дизайн систему.

Проект сдан в срок!

За остальные 2 дня мы добили мелочи с разработчиком, я подготовил анимации для разработки и.... Дизайн был сдан за 8 дней!

Я понимаю, что дизайн получился не идеальный, как по UI так и по UX. Однако, этой статьей я хотел показать, что не всегда будут идеальные кейсы. Я бы хотел доработать иконки проекта, логику еще лучше, но... иногда, приходится жертвовать эстетикой ради скорости выполнения проекта.

Это не история успеха, это лишь опыт, который я бы хотел разделить с вами. Если у вас остались вопросы: блог-дневник в Telegram, Instagram, ВКонтакте, Facebook.

0
6 комментариев
Написать комментарий...
Михаил Ган

Мне кажется не особо правильно подстраиваться под сроки заказчика, а принципиально выполнять в своих временных рамках т.к. качество проекта - это самое важное

Ответить
Развернуть ветку
Roman Solonovich
Автор

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

Ответить
Развернуть ветку
Гарифуллин Христиан

Честно сказать, заголовок поста, тянет на начало хорошего анекдота

Ответить
Развернуть ветку
Roman Solonovich
Автор

надеюсь, я поднял вам настроение ☺️

Ответить
Развернуть ветку
Василий Степанофф

Бриф точно писал англоязычный заказчик?
Все конструкции построены так, будто их перевел на английский наш соотечественник

Ответить
Развернуть ветку
Roman Solonovich
Автор

Заказчик из Голландии

Ответить
Развернуть ветку
Читать все 6 комментариев
null