Разработка конструктора путешествий, часть 6: всё, что меня касается…

Сегодня — о дизайне страниц профиля пользователя, регистрации и прочих «профильных» активностях.

Это продолжение дневника, предыдущие части читайте здесь.

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

Весь интерфейс опроса будущего путешествия выполнен на жёлтом фоне.

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

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

Дополнительные фильтры расположены «под столом», на чуть более тёмном фоне.

Чтобы выделить что-то важное на жёлтом фоне, можно вернуться к белому:

Или вот так:

Остальное можно решить градациями серого — от тёмного для инвертированных областей (может пригодиться для оформления небольших всплывающих окон, футера) до совсем светло-серого для зонирования основной части страниц (белые и светло-серые области очень похоже оформляются, но могут помогать в логическом разделении контента). Белый будет использоваться как основной фон на подавляющем большинстве страниц.

Итак, если жёлтый цвет занят активным взаимодействием, белый — основной фоновый, то серым можно оформить «кабинет» — всё, что касается пользователя — его профильную страницу, список маршрутов, настройки и подобное. Боковое меню пользователя выполнено на сером фоне, отсылая своим оформлением к виду всего кабинета.

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

Кабинет пока не очень заставлен всяческим «добром», но это только после новоселья.

Пока мы не создали ни одного плана, нам предлагают его создать или посмотреть, что хорошего есть в каталоге от блоггеров-путешественников:

Планы появились, кабинет потихонечку обустраивается:

Люди обычно путешествуют семьями, так почему бы это не сохранить для всех будущих поездок?

И вход в этот кабинет тоже можно оформить похоже — логин, регистрацию и всевозможные «забыли-пароли»:

И страничку ошибки я тоже решил сделать в таком же ключе:

Live long and prosper!

С ростом количества макетов растёт и UI-kit проекта:

UI kit проекта

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

Andrey Belikov, арт-директор IQPlanner.com

--

--

--

Cамый большой коллективный блог про дизайн на русском языке

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
IQPlanner team

IQPlanner team

IQPlanner makes finding your perfect holiday easy. Browse through unique holidays shared by other travellers or build your own. www.iqplanner.com

More from Medium

Axure Tutorial: Axure File Uploading and Subsequent interaction Settings with JavaScript

Visual Design

Better Security through solid UX

Unity: Customize Your Layout for Productivity

Desk with laptop, mouse, and monitor neatly displayed