Задача:
Результат:
Основываясь на принципах Material Design и фирменном стиле ПАО «Промсвязьбанка», мы создали адаптивный дизайн для трех разрешений (смартфон, планшет, компьютер).
![Главная страница](https://userhouse.ru/i/project/result/images/psb_forex_main_2012_1_hr.png)
Главная страница
![Главная страница — разрешение для планшета](https://userhouse.ru/i/project/result/images/psb_forex_main_2012_2_hr.png)
Главная страница — разрешение для планшета
![Главная страница — разрешение для смартфона и планшета в портретной ориентации](https://userhouse.ru/i/project/result/images/psb_forex_main_2012_3_hr.png)
Главная страница — разрешение для смартфона и планшета в портретной ориентации
![Каталог заявок](https://userhouse.ru/i/project/result/images/psb_forex_request_catalogue1_hr.png)
Каталог заявок
![Каталог заявок — разрешение для планшета](https://userhouse.ru/i/project/result/images/psb_forex_request_catalogue2_hr.png)
Каталог заявок — разрешение для планшета
![Каталог заявок — разрешение для смартфона и планшета в портретной ориентации](https://userhouse.ru/i/project/result/images/psb_forex_request_catalogue3.1_hr.png)
Каталог заявок — разрешение для смартфона и планшета в портретной ориентации
Процесс:
Мы стремились найти оптимальную и простую схему навигации для личного кабинета. В первых версиях меню располагалось горизонтально, вдоль верхнего навигационного бара. Это упрощало компоновку страниц, но такое решение было трудно масштабируемым, и усложняло добавление второго уровня навигации. В итоге мы выбрали более универсальное решение, перенеся меню из верхнего навигационного бара в левую колонку:
![](/i/project/pictures/PSB-Forex/psb-forex-gif-2012-1-hr.gif)
Для большей простоты и универсальности мы остановились на общей схеме отображения верхнего навигационного бара на планшетах и смартфонах. Хотя в первоначальных версиях меню выглядели по-разному:
![](/i/project/pictures/PSB-Forex/psb-forex-gif-2012-2-hr.gif)
Так как сайт может быть открыт на любых устройствах, мы тщательно проработали правила адаптивности на всех разрешениях:
![](/i/project/pictures/PSB-Forex/psb-forex-gif-3.gif)
В интерфейсе много дополнительных форм, которые необходимо заполнять. Мы искали баланс между функциональностью и простотой, но также думали, как оптимизировать взаимодействие пользователей с формами. Первоначально предполагалось открывать формы на отдельных страницах. В дальнейшем отказались от этой идеи в пользу форм в модальном окне. Это решение лучше тем, что пользователь после закрытия окна не теряет контекст и остается в каталоге, из которого была открыта форма:
![](/i/project/pictures/PSB-Forex/psb-forex-gif-2012-3-hr.gif)
Изначально мы хотели, чтобы формы минимально отличались по оформлению на всех разрешениях. Но в итоговом варианте мы максимально упростили форму, например используя вместо кнопок пиктограммы действий в верхнем навигационном баре. В итоге формы стали немного отличаться, но это позволило существенно упростить их для маленьких экранов:
![](/i/project/pictures/PSB-Forex/psb-forex-gif-2012-4-hr.gif)
Для разработчиков мы составили стайлгайд с описанием всех особенностей оформления интерфейса:
![](/i/project/pictures/PSB-Forex/psb_forex_style_guide_1_2012x760_hr.png)
Поделиться в соцсетях
Другие проекты по дизайну интерфейса
![Маркет Красок](https://userhouse.ru/i/client/logos/_Market_Krasok_2_hr.png)
![Mail.ru Group](https://userhouse.ru/i/client/logos/_Mail_2_hr.png)
![Ultima](https://userhouse.ru/i/client/logos/_Ultima_2_hr.png)
![Happy Bottle](https://userhouse.ru/i/client/logos/_hb_2.png)
![Yota](https://userhouse.ru/i/client/logos/_Yota_2_hr.png)
![VVP Group](https://userhouse.ru/i/client/logos/_VVP_2_1_hr.png)
![ТрансКонтейнер](https://userhouse.ru/i/client/logos/_TK_2_hr.png)
![АТОЛ](https://userhouse.ru/i/client/logos/logo_ATOL_360160_hr.png)
![Ростелеком](https://userhouse.ru/i/client/logos/logo_Rostelecom_360160_hr.png)