Разработать дизайн интерфейсов на основе прототипов.
Данный интерфейс предназначен для получения быстрого доступа к функциям сайта, которые могут быть использованы параллельно с основными. Располагаются на всех страницах сайта и являются "плавающими".
Задействованные модули:
1. Онлайн чат.
2. Поиск.
3. Онлайн-уведомления.
4. Реклама.
Страница, которая использовалась в качестве фона для прототипов:
Графическая составляющая должна:
1. Соответствовать дизайну сайта.
2. Не мешать чтению страниц.
3. Вызывать ассоциации с игрой World of Warcraft.
Желательно чтобы:
1. Графическая оболочка была легковесной.
2. Графическая оболочка выглядела дорого.
Описание прототипов:
1. empty.jpg
Все элементы показаны в свернутом состоянии. При клике на элемент он разворачивается или выполняет свою функцию. При повторном клике – сворачивается или повторно выполняет свою функцию.
Высота всех иконок должна быть равна 90 пикселей. Это необходимо для интеграции баннера 728х90, который является самым популярным на сайте. Вы можете придумать другое решение, где баннер будет размещаться красиво и без этого требования. Баннеры показаны в 7, 8, 9, 10, 11.
Ширина должна быть такой, чтобы не налазила на текст страницы и не отвлекала пользователя, когда свернута.
Описание элементов (сверху вниз):
1. Перейти вверх.
Прокручивает страницу вверх.
2. Поиск.
Выполняет поиск по сайту.
3. Количество новых сообщений в чате с момента обновления страницы.
Если количество сообщений равно нулю, необходимо показать иконку чата. Показано на 2.1.-chat.-no-message.jpg.
Если количество сообщений более 100, то показываем 99.
4. Он-лайн уведомления.
В случае возникновения какого-то события, уведомление разворачивается и показывает последнее уведомление.
- – -
2. chat.jpg
Показывает чат в развернутом виде.
Блок имеет динамическую ширину.
Описание элементов (сверху вниз):
1. Уголок изменения размера. Размер блока чата можно изменять. В связи с этим, данный блок имеет динамическую ширину.
2. "Людей в чате". Количество людей, которые в данный момент находятся в чате. При клике на "Людей в чате" открывается список пользователей. Показан на 2.2.-chat.userlist.jpg. Логическая структура аналогична 2. chat.jpg.
3. Сообщения в формате:
часы:минуты НИК сообщение
Сообщение может переноситься на новые строки, содержать смайлики и ссылки. Это все нужно показать в макете.
Ники имеют разные цвета:
.redName {color:#e41100}
.epicName {color:#6500e3}
.mepicName {color:#00818a}
.greenName {color:#377b00}
.blueName {color:#0070dd}
4. Панель действий с пользователем. Возникает при клике на ник пользователя. Позволяет выполнить 3 действия:
4.1. Профиль. Открыть профиль пользователя в новой вкладке.
4.2. Сообщение. Открыть страницу для создания личного сообщения пользователю в новой вкладке.
4.3. Обратиться. Выполняет обращение в общем чате. Видно всем.
5. Поле ввода сообщения для отправки.
6. Кнопка для отправки сообщения.
7. Кнопка свернуть. Убирает чат. Возможно лучше использовать иконку закрытия.
8. Прокрутка сообщений.
В случае, если чат открывает неавторизированный пользователь, он видит 2.3.-chat.-guest.jpg.
- – -
3. message.jpg
Он-лайн уведомления. В случае возникновения какого-то события, уведомление разворачивается и показывает последнее уведомление.
Блок имеет динамическую ширину.
Описание элементов (сверху вниз):
1. Изображение.
2. Текст.
3. Кнопка для открытия следующей записи. Сообщения зациклены. Если пользователь дошел до последнего сообщения, он начинает с 1го.
Будет хорошо, если вы придумаете решение, которое будет иметь двунаправленное переключение сообщений. Назад и вперед.
- – -
4. message_chat.jpg
Параллельно с чатом могут быть открыты другие окна. Пример одновременного открытия чата и уведомления.
- – -
6. search.jpg
Поиск по сайту. Описание элементов (сверху вниз):
1. Полоса ввода текста для поиска.
2. Кнопка поиска.
3. Выбор системы поиска. Можно выбрать только одну. Выбранная система должна быть графически выделена от остальных.
- – -
7.-banner_100%_90.jpg
Реклама в формате 100%х90px. Описание элементов (сверху вниз):
1. Кнопка закрытия показа баннера.
2. Баннер.
- – -
8. banner_728x90.jpg
Реклама в формате 728х90. Описание элементов (сверху вниз):
1. Кнопка закрытия показа баннера.
2. Баннер.
- – -
9. banner_200x200.jpg
Реклама в формате 200x200. Описание элементов (сверху вниз):
1. Кнопка закрытия показа баннера.
2. Баннер.
- – -
10. banner_250x250.jpg
Реклама в формате 250x250. Описание элементов (сверху вниз):
1. Кнопка закрытия показа баннера.
2. Баннер.
- – -
11. banner_336x280.jpg
Реклама в формате 336x280. Описание элементов (сверху вниз):
1. Кнопка закрытия показа баннера.
2. Баннер.
Вам будет выдан макет прототипов.
На выходе должно быть представлено:
1. Макет, который соответствен прототипу, требованиям и содержит ваши графические и дизайнерские решения.
2. Требования к верстальщику и программисту для реализации ваших идей и дизайна.