Проектирование и дизайн мобильных и веб‑интерфейсов

Pocket balance

Проектирование и дизайн интерфейса приложения по учету личных финансов Pocket Balance.

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

pocketbalance_wireframes

Wireframes приложения Pocket Balance

Ничего не забыли, заказчик всем доволен. Единственная заминка – никак не определимся с визуальным представлением структуры расходов/доходов.

Я из-за своей нелюбви к pie chart’ам предлагаю другое представление информации – sausage (!) chart имени меня. Заказчик не уверен и предлагает решить этот вопрос уже на этапе дизайна. Какое представление выйдет краше, тому и быть.

Отлично. Приступаю к стилистике. На примере ключевых экранов прорабатываю цветовую схему, детали интерфейса и прочие мелочи.

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

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

Обыгрываю в элементах интерфейса «фирменную» форму в виде недоквадрата-перекруга. Отправляю стилистику на утверждение.

pocket balance ios app

Стилистика приложения на примере ключевых экранов

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

pocket_balance_charts

Заказчику нравятся оба варианта. Тайное голосование в офисе компании дало результаты 50/50, а уборщица, чей голос был бы решающим, в тот день отсутствовала. Еле-еле отговариваю не делать сразу два варианта (заказчик предлагает сделать переключатель между режимами представления). В итоге, перевешивает вариант с pie chart’ом, поскольку именно такая форма обыгрывается во многих элементах интерфейса приложения.

Доделываю все оставшиеся экраны в соответствии с разработанной стилистикой. Фуф, а вот и окончательный результат.

pocket_balance_all

Все экраны приложения Pocket Balance

Bonus track

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

pocket_balance_reviews

Pocket balance
Pocket balance
Pregnancy
Pregnancy
Kauri
Kauri
Badoo Affiliate Program
Badoo Affiliate Program
Flips
Flips
Mediaccount
Mediaccount
Happy Kids
Happy Kids