Как я за 8 дней сделал приложение на голландском языке для студии из Канады, находясь в России
Лето 2020 года. Мне пришёл запрос на создание дизайна приложения для одного Saas стартапа из Голлландии. Сроки были очень жесткие — 8 рабочих дней. Вот что из этого получилось.
Pov: На этом проекте я работал по контракту (на фрилансе) для студии Auxility из Канады. Сейчас всё так же существую на фрилансе только уже со своей командой.
У 'Newsifier' заказчика из Голландии есть CMS, в которой клиент может настроить всё под свой продукт и сразу запуститься. Другими словами, это конструктор новостных порталов, где за вас всё сделали, вам остаётся лишь подставить свой дизайн и вауля, у вас есть готовый сайт, CRM, но не хватало приложения для их клиентов.
Исследование проекта — 2 дня
Особенность европейских заказчиков, которая отличает их от большинства в СНГ — умение структурировать и доносить информацию до исполнителя. С опытом понимаю, что чем выше бюджет проекта, тем профессиональнее коммуникация с обеих сторон. Даже черновой прототип сами сделали - клиент мечты 😍
Сейчас будет немного сложно. Как выяснилось в брифе, разработка будет выполнена на Flutter – это удобый инструмент, чтобы быстро сделать приложение сразу на две платформы Android и iOS. Опыта с Flutter у меня еще не было, тем интереснее. Летс гет зис щит 👨🏼💻
За два дня я изучил все материалы, которые мне передали. Важно заметить, что у заказчика уже был прототип, который не устраивал меня по логике. Мы созвонились и решили мелкие вопросы, пожелания по дизайну и особенность Flutter-библиотеки. У меня были небольшие проблемы с коммуникацией на созвонах из-за недостатка практики общения на англ языке, но команда помогала мне!
Разработчика на проекте звали Али, родом из Пакистана. Очень культурный и образованный специалист. Коммуникация была чуть ли не проще, чем с СНГ проектами.
Дизайн приложения — 4 дня
Итак. Сроки очень жесткие, задачу нужно было решать эффективно и быстро. Первым делом я купил несколько Material дизайн китов — это такие готовые шаблоны дизайна, где вам предлагают разные варианты элементов в интерфейсе. Мне нужен был этот шаблон, чтобы сэкономить время на стандартных элементах Material дизайна. Стоил он тогда около 100$ (в эту же стоимость входил и iOS кит в подарок)
Уверен, у вас есть вопросы, а зачем покупать, если есть бесплатный Material Kit в открытом доступе. В голову приходит два ответа:
- Я хочу, чтобы у меня был доступ к разным вариантам использования элементов. В бесплатном наборе такого нет. В в купленном же, я могу посмотреть, как элементы могут быть встроены в экран для разных задач!
- Ну и откровенно говоря, просто ради понта 🤌 Дорогой, богатый дизайнер.
Шрифты
По рекомендации заказчика и для ускорения процесса я старался не менять общую визуальную структуру Android приложений. Накидал иерархию шрифтов с преобладающими в Material дизайн шрифтами!
Цвета подстраиваются под корпоративный стиль клиента
Важно не забывать, что это приложение — конструктор для клиентов. Моя задача была сделать дизайн систему гибкой, чтобы при смене цветов приложение выглядело индивидуально для каждого клиента
Получилось 8 цветов, из которых 3 (white, primary, background) клиенты могут менять у себя в CMS для приложения и, он не посыпется. Дополнительно к этому я дописал рекомендации к формированию дизайна для клиентов Newsifier.
Главный экран
За день я подготовил вариант главного экрана + быстрая обратная связь от команды позволила мне работать дальше над макетами. Параллельно с этим мы отправили главный экран на ревью клиенту. Времени было так мало, что я даже не собрал референсы, да и зачем, они всегда есть у тебя в голове!
Детали
Я заменял иконки относительно устройства, на котором человек использует приложение, чтобы улучшить пользовательский опыт. Например, иконка кнопки share менялась относительно операционной системы телефона пользователя.
У Голландских проектов существует свой вайб определенного функционала. Это не первый мой проект из этой страны, но каждый раз клиент хочет видеть плавную подгрузку, будь это сайт/приложение. Такая мелочь — эффективный способ показать пользователю, что страница загружается. Я стал чаще использовать такой функционал в своей работе!
Для этого проекта я использовал скелетную загрузку, такой вид анимации можно встретить в больших продуктах, которыми вы пользуетесь ежедневно!
Презентация для проекта
Итак, к ночи у меня уже была готова презентация. Это был конец шестого рабочего дня. Я скинул презентацию и на след. день получил обратную связь от заказчика. В целом всё понравилось, нужно было лишь добить детали.
Добавление темного режима
После правок, мы добили новый функционал. У пользователя появилась возможность использовать dark mode, всё это также подстраивалось под дизайн систему.
Проект сдан в срок!
За остальные 2 дня мы добили мелочи с разработчиком, я подготовил анимации для разработки и.... Дизайн был сдан за 8 дней!
Я понимаю, что дизайн получился не идеальный, как по UI так и по UX. Однако, этой статьей я хотел показать, что не всегда будут идеальные кейсы. Я бы хотел доработать иконки проекта, логику еще лучше, но... иногда, приходится жертвовать эстетикой ради скорости выполнения проекта.
Это не история успеха, это лишь опыт, который я бы хотел разделить с вами. Если у вас остались вопросы: блог-дневник в Telegram, Instagram, ВКонтакте, Facebook.