HTML версия прототипа

Задача - построение прототипа интерфейса ресурса, представляющего специальную текстовую информацию для узкого круга специалистов: сотрудников пресс-служб, редакторов региональных СМИ и журналистов.

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





Все элементы управления скрыты за идентичными кнопками для всех типов контента и экранных форм, что позволило уменьшить количество визуальных элементов и добиться большей консистентности.





Навигация интерфейса предполагала 2 уровня вложенности. Учитывая тот факт, что большая часть контента текстовая и единственное, что ее рознило - параметры сортировки и фильтрации, соблюсти визуальную целостность и консистентность интерфейса между разными разделами не составило труда.

Список анонсов:





Карточка анонса:





Список релизов:





Карточка релиза:





Список экспертов:





Карточка эксперта:





Для добавления контента необходима авторизация в системе и оплата действия.

Формы добавления контента и формы авторизации/регистрации отображаются на отдельных страницах. Данное решение продиктовано размерами некоторых форм. Большие формы, размещенные в слое и не умещающиеся в размер окна браузера, не репрезентативны как для десктопов, так и для мобильных платформ.

Формы регистрации/авторизации:







Форма добавления анонса:





Большая часть контента добавляется на платной основе. Как следствие, в аккаунте пользователя присутствует информация о текущем балансе и функционал его пополнения.

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





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



HTML версия прототипа

Задача - построение прототипа интерфейса интернет-магазина.

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





Каталог товаров:





Карточка товара, помимо собственно представления товара, презентует дополнительные функциональные возможности ресурса: "тест-драйв товаров", систему подарков, подбора дополнительных аксессуаров и комментариев:





Информация о получении подарков и форма написания комментария открываются во всплывающих слоях поверх просматриваемого товара. В прототипе слои представлен обособленно:







Представление товаров в корзине соответствует представлению товаров в каталоге. Данный подход повышает визуальную целостность и консистентность интерфейса.





Форма оформления заказа открывается во всплывающем слое поверх корзины.

Важно отметить, что функционал регистрации пользователя на ресурсе не востребован целевой аудиторией и, как следствие, не реализован.





Страница магазинов (физических точек продаж)

HTML версия прототипа

Задача - построение двух упрощенных прототипов интерфейса для ресурсов поиска вакансий компаний «o'stin» и «спортмастер».

Примечательно, что работы выполнялась на тендерной основе и срок был максимально сжатым. Фактически, представленные прототипы были созданы за 4 часа.

Главная страница интерфейса «o'stin» выполнена в стилистике головного ресурса компании. Блок, содержащий «историю успеха» - жесткое требование заказчика.





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





Карточка вакансии содержит видео-ролик, содержащий интервью с сотрудником, уже занимающим аналогичную должность.





Главная страница интерфейса «спортмастер», как и в случае с «o'stin», выполнена в стилистике головного ресурса компании.





На странице списка вакансий, в отличие от аналогичной страницы «o'stin», описание вакансий не содержит сортировки по типам («новая», «срочно», «премиум». Причина - пожелание заказчика, связанное с тем, что функционал системы администрирования был прописан ранее и не включал возможность сортировки вакансий по указанным выше типам.





Карточка вакансии по своему содержанию полностью дублирует аналогичную страницу «o'stin»

HTML версия прототипа

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

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

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



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



Раздел «путешествия»:





Раздел «учеба за рубежом»:





Раздел «события»:




Механика работы фильтров. Скриншоты отображают раскрытие фильтра и его выбранное состояние:







Страницы карточек построены по модульному принципу. Это означает, что определенные элементы структуры могут как присутствовать, так и отсутствовать в зависимости от необходимости.

Самые большие по объему карточки - это карточки путешествий. Они содержат вкладки, разделяющие информацию внутри и очень подробное описание экспедиции, разбитое по дням. Карточки учебных программ куда менее нагружены, но содержание также разделено по вкладкам. И, наконец, карточки событий имеют минимум контента, а вкладки отсутствуют.

Карточка путешествия:





Карточка учебной программы:





Карточка события:





Поиск осуществляется по всем разделам ресурса. Как следствие, страница результатов поиска может отражать карточки из разных разделов. Для их быстрого разделения применяется тот же метод, что был использован на главной странице, а именно - нанесение на карточки названий разделов, к которым они относятся.

HTML версия прототипа

Задача - построение прототипа интерфейса ресурса, представляющего информацию об услугах банка.

Основным требованиям при работе над прототипом было создание строгого и функционального инструмента для деловых людей. Как следствие - максимальное упрощение экранных форм с усилением акцента на основных направлениях и исключение «попсового», по словам заказчика, функционала. Причина - консервативная деловая аудитория и малое количество спецпрограмм и условий, которые предоставляются банком. Под «попсовым» функционалом заказчик подразумевал присутствие дополнительных посадочных страниц, красочных баннеров со счастливыми лицами и второстепенной сопутствующей информации, не имеющей отношения к делу.

Главная страница:





Клик по ссылкам «Частным лицам», «Бизнесу» и «Финансовым организациям», являющимся названиями разделов, приводит к открытию слоя со ссылками на соответствующие подразделы:





Страницы подразделов имеют общую структуру. Каждый подраздел представлен описательным текстом и контентом, разбитым на вкладки. первая вкладка открывается по-умолчанию.

Подраздел «Кредиты»:





Подраздел «Банковские карты»:





Если страница подраздела содержит набор услуг, требующий подробного описания, в структуру вводится «текстовая» страница, содержащая дополнительные уточнения и описание. В прототипе данной страницей является описание банковской карты:





Одним из пожеланий клиента было отображение в прототипе раздела «отделения и банкоматы». В шапке страницы раздел представлен двумя обособленными ссылками - «отделения» и «банкоматы», ведущими на одноименные вкладки одной и той же страницы.

Страница «отделения и банкоматы»:





Клик по кнопке «списком» скрывает карту и отображает все найденные отделения в виде списка: