Разработка конструктора путешествий, часть 6: всё, что меня касается…
Сегодня — о дизайне страниц профиля пользователя, регистрации и прочих «профильных» активностях.
Это продолжение дневника, предыдущие части читайте здесь.
Практически в начале проекта я уже понял, что вся масса интерфейсов, с которыми встречается пользователь на IQPlanner, будет разбита на три больших части — жёлтую, белую и серую. Жёлтая отвечает за взаимодействие типа опросов, диалогов, форм. Когда вы захотите составить свой план путешествия, вас встретит жёлтая страница:
Фирменный стиль проекта я представляю себе довольно аскетичным, практически монохромным, но с добавлением одного яркого, как я люблю называть — сигнального цвета. Этот цвет должен быть активным на странице — привлекать внимание к кнопкам, диалогам, важным элементам взаимодействия с сервисом.
Оттенками жёлтого можно выделять блоки с набором сложных параметров. На примере внизу я ещё и вдавил этот блок в плоскость страницы, чтобы дать понять, что это более сложный, «технический» слой, который нужен для точной настройки:
Чтобы выделить что-то важное на жёлтом фоне, можно вернуться к белому:
Или вот так:
Остальное можно решить градациями серого — от тёмного для инвертированных областей (может пригодиться для оформления небольших всплывающих окон, футера) до совсем светло-серого для зонирования основной части страниц (белые и светло-серые области очень похоже оформляются, но могут помогать в логическом разделении контента). Белый будет использоваться как основной фон на подавляющем большинстве страниц.
Итак, если жёлтый цвет занят активным взаимодействием, белый — основной фоновый, то серым можно оформить «кабинет» — всё, что касается пользователя — его профильную страницу, список маршрутов, настройки и подобное. Боковое меню пользователя выполнено на сером фоне, отсылая своим оформлением к виду всего кабинета.
Я подумал, что показать форму подписки в кабинете вот в такой крупной форме — небольшим этажом перед футером — не очень навязчиво, как вы считаете?
Пока мы не создали ни одного плана, нам предлагают его создать или посмотреть, что хорошего есть в каталоге от блоггеров-путешественников:
Планы появились, кабинет потихонечку обустраивается:
Люди обычно путешествуют семьями, так почему бы это не сохранить для всех будущих поездок?
И вход в этот кабинет тоже можно оформить похоже — логин, регистрацию и всевозможные «забыли-пароли»:
И страничку ошибки я тоже решил сделать в таком же ключе:
С ростом количества макетов растёт и UI-kit проекта:
Спасибо, что читаете внимательно и пишете отзывы! Скоро расскажу, как выглядит рассчитанный маршрут.
Andrey Belikov, арт-директор IQPlanner.com
