tz_na_dizayn_v2

Техническое задание на дизайн портала fitnessexpert.ru
v.2.0
Введение
Настоящий документ описывает требования к дизайну, разрабатываемому для новой
версии портала fitnessexpert.ru.
Описание портала
Портал позиционируется как Интернет-сообщество для профессионалов в сфере фитнеса:
менеджеров, консультантов, тренеров, производителей оборудования.
Помимо пользовательских профилей, на портале будут корпоративные профили, к
каждому из которых можно будет привязать несколько корпоративных пользователей.
Пользователь, имеющий такую привязку, сможет переключаться между своим личным
профилем и профилем компании (организации) без перелогинивания.
На портале будут реализованы следующие функциональные возможности:

Сообщество. Персональные, корпоративные и коллективные блоги. В том числе,
личная лента просмотра – каждый зарегистрированный пользователь имеет
возможность подписаться на обновления интересующих разделов.

Каталог товаров. Предполагается упрощенный аналог Яндекс.Маркета для
профессионального оборудования и сопутствующих товаров для фитнес-клубов.

Календарь событий. Сервис для хранения на портале событий индустрии
(конвенции, форумы, обучающие семинары). Пользователи могут отмечать, что
пойдут на те или иные события (если событие привязано к профилю компанииорганизатора, то организатору может высылаться уведомление об этом).

Биржа труда. Публикация вакансий различных компаний подача заявок на эти
вакансии, пометка «ищу работу» в профиле пользователя.

Адресная книга – каждый пользователь может добавить интересные ему профили в
свою адресную книгу.
На портале будет реализована интеграция с социальными сетями. Пользователи смогут
отмечать материалы портала (сообщения блогов и новостной ленты, описания компаний,
товаров, событий) как понравившиеся в различных социальных сетях и выполнять вход на
портал с помощью своих аккаунтов в этих сетях для оставления комментариев.
Пользователь, залогинившийся с помощью аккаунта стороннего сайта, сможет затем
создать свой профиль на портале для полноценного использования всех возможностей
портала.
Краткое описание выполняемых работ
Разработка дизайна для новой версии портала включает следующие работы:

Разработка логотипа.

Переработка иконки портала favicon.ico.

Разработка общего дизайна и бренд-бука.

Разработка макетов отдельных страниц. Каждый макет должен представлять собой
изображение полноценной страницы и обеспечивать возможность сверстать по
нему соответствующий раздел портала.
Общие требования
Дизайн
должен
максимально
использовать
полезное
пространство,
доступное
пользователю (то есть должен занимать всю ширину экрана). При создании дизайна
следует учитывать, что предполагается «резиновая верстка», оптимизированная для
разрешения экрана 1024х768.
При разработке дизайна следует руководствоваться принципами удобства использования
и минималистичности.
Требования к элементам дизайна
Работы должны включать разработку следующих элементов дизайна:

Главное меню

Поля ввода формы. Подписи текстовых полей формы должны быть внутри самих
полей для оптимизации пространства. Дизайн должен включать примеры отметки
об обязательности поля. Форма должна включать следующие элементы:
o Текстовое однострочное поле ввода простого текста, пароля;
o Многострочное поле вввода

Облако тэгов

Календарь

Форма добавления комментариев

Форма логина и регистрации

Виджет

Карма объекта

Ссылка на RSS трансляцию

Поле ввода форматируемого текста

Шапка («хедер»), подвал («футер»)

Список с фильтром. Данный элемент предназначен для просмотра и поиска таких
элементов как события и вакансии. Он состоит из двух частей:
o Форма фильтра, с набором различных полей, в зависимости от назначения
списка.
o Списка с результатами. Первая строка содержит заголовки, каждый из них
является ссылкой, при клике на которую происходит сортировка по
возрастанию по данному столбцу. При повторном клике меняется порядок
на «по убыванию». Соответственно, у одного из заголовков в таблице
должна быть индикация сотировки в виде треугольника (вершина вверх – по
возрастанию, вершина вниз – по убыванию).
Требования к макетам отдельных страниц
При разработке дизайна требуется разработать по макету для всех страниц, описанных в
данном разделе. Одной странице соответствует один подраздел.
На макетах должны быть реальные тексты, близкие по тематике к фитнесу, каждый макет
должен выглядеть как рабочая страница, без текстов-«заглушек» вроде «ссылка1» или
«Lorem ipsum».
Каждый макет может быть разбит на несколько разных экранов (например, с помощью
вкладок или сокрытия/раскрытия части интерфейса). В случае если элементы разбиваются
на несколько экранов, должно быть приведено достаточное количество макетов для
верстки всех экранов. При этом вспомогательные экраны могут содержать лишь часть
отображаемого интерфейса (например, при прорисовке каждой вкладки необязательно
повторять неизменные элементы сайта – логотип, навигацию и т.д., достаточно сделать
это для одной вкладки).
Страница 404
Страница, открывающаяся в случае отсутствия на сайте запрашиваемой пользователем
страницы. Специальных требований, помимо соответствия общей концепции дизайна
портала, не предъявляется.
Собственный профиль пользователя
Профиль пользователя должен содержать следующие элементы:

Шапка.

На месте формы для входа (логин/пароль) должен отображаться логин
пользователя.

Поиск по сайту

Аватар пользователя. Требуется также
разработать
изображение, которое
отображается по умолчанию в отсутствие загруженного аватара. Аватар по
умолчанию не должен зависеть от пола пользователя.

Ссылка «Перейти к профилю компании». Она будет отображаться не всем
пользователям, а только тем, кто имеет доступ к профилю компании. Но на макете
она должна присутствовать. Данная ссылка будет отображаться на всех страницах
для всех пользователей, которым она доступна.

Поля с информацией о себе: имя, адрес электронной почты, компания, должность,
пометка «ищу работу», профессиональные интересы (многострочное поле ввода,
перечисление через запятую). По умолчанию, представляют собой текст. Рядом
должна быть ссылка «редактировать», по нажатию на которую текст превращается
в набор полей для ввода и появляется соответствующая кнопка.

Адресная книга. Каждый из контактов – ссылка на профиль пользователя.

Список подписок на обновления разделов, где каждый пункт списка – ссылка на
соответствующий раздел (подраздел, блог, рубрику и т.д.). Галочка «скрывать от
других пользователей».

Форма для отправки инвайта – текстовое поля для электронного адреса и кнопка.

Текущая карма пользователя.

Уведомления о новых комментариях со ссылкой на их перечень.

Ссылка на избранное пользователя.

Ссылка на персональную ленту пользователя

Ссылка на все записи пользователя;

Ссылка на все комментарии пользователя;

Информация о новых входящих сообщениях со ссылкой на ящик личных
сообщений.

Ссылка на страницу отправки записи в блог или сообщество.

Перечень коллективных блогов, в которых состоит пользователь.
Чужой профиль пользователя
На странице должны быть следующие элементы:

Шапка

Ссылка «Добавить в адресную книгу» / «Удалить из адресной книги»

Ссылка «Отправить личное сообщение»

На месте формы для входа (логин/пароль) должен отображаться логин
пользователя.

Поиск по сайту

Аватар пользователя.

Информация о пользователе: имя, адрес электронной почты, компания, должность,
пометка о том, ищет ли пользователь работу, профессиональные интересы
(многострочное поле ввода, перечисление через запятую).

Перечень установленных взаимных контактов пользователя, через запятую.
Каждый из контактов – ссылка на профиль пользователя.

Текущая карма пользователя.

Перечень коллективных блогов, в которых состоит пользователь.
Личный почтовый ящик пользователя
Личный ящик пользователя должен включать следующие элементы:

Ссылка на форму отправки личного сообщения;

Перечень входящих сообщений, с указанием:
o даты,
o адресата,
o темы каждого сообщения с ее индикацией полужирным, если сообщение не
является прочитанным. Каждая тема должна являться ссылкой на само
сообщение;
o чекбокса для удаления сообщения;

Ссылка на перечень исходящих сообщений;

Кнопка для удаления сообщений, чекбоксы которых отмечены.
Страница отправки записи в блог или сообщество
На экране должны быть следующие элементы:

Выпадающий список с перечнем названий блогов, в которых состоит пользователь.
Указывает, в какой блог будет отправлена запись.

Поле заголовка;

Поле ввода форматируемого текста;

Поле для перечисления через запятую тэгов к записи;

Чекбокс «Опубликовать»;

Кнопка «Предпросмотр»;

Кнопка «Сохранить».
Собственный профиль компании
На странице профиля компании должны быть следующие элементы:

Шапка

Аватар
компании.
Требуется
также
разработать
изображение,
которое
отображается по умолчанию в отсутствие загруженного аватара компании,
отличное от аватара по умолчанию для пользователей.

Ссылка «Перейти к профилю пользователя».

Поля с информацией о компании: название, веб-сайт, e-mail, адрес, телефон. По
умолчанию,
представляют
собой
текст.
Рядом
должна
быть
ссылка
«редактировать», по нажатию на которую текст превращается в набор полей для
ввода и появляется соответствующая кнопка.

Перечень сотрудников компании (логины). Каждый из сотрудников – ссылка на
профиль пользователя.

Текущая карма компании.

Уведомления о новых комментариях со ссылкой на их перечень.

Ссылка на все записи корпоративного блога;

Ссылка на все комментарии, оставленные компанией;

Ссылка на страницу отправки записи в корпоративный блог.

Ссылка на перечень всех собственных записей в блогах, за исключением
корпоративных.

Ссылка «Управление счетом и услугами».

Ссылка на товары компании;

Ссылка на мероприятия компании;

Ссылка на вакансии компании;

Ссылка на управление доступом сотрудников к профилю компании;

Ссылка на страницу компании.
Страница (карточка) компании
Данная страница представляет собой визитную карточку компании на портале. Она
должна содержать следующие элементы:

Информация о компании: логотип, название, веб-сайт, e-mail, адрес, телефон.

Последние несколько записей корпоративного блога, ссылка на блог компании.

Несколько грядущих мероприятий компании, ссылка на все мероприятия
компании.

Несколько вакансий компании, ссылка на все ее вакансии.

Несколько товаров компании, ссылка на все товары компании.

Карма компании, элементы для голосования за карму компании (в положительную
или отрицательную сторону).

Сотрудники компании, через запятую, каждый сотрудник – ссылка на профиль
пользователя.
Блог. Все записи
На странице должны быть следующие элементы:

Шапка;

Главное меню;

Баннеры сверху и в боковых виджетах;

Виджет «Ближайшие события» (список событий на месяц в виде «календаря»);

Облако тэгов;

Несколько записей (постов), в каждой из которых:
o Заголовок;
o Текст записи;
o Ссылка «Читать дальше: заголовок»;
o Перечень тэгов;
o Карма поста, элементы голосования за запись;
o Количество комментариев (ссылка на комментарии);
o Кнопка-иконка для добавления в избранное;
o Кнопки социальных сетей: Like in Facebook, retweet, поделиться вКонтакте,
мейл.ру.
Блог. Отдельная запись с комментариями
На странице должны быть следующие элементы:

Шапка;

Баннер сверху;

Облако тэгов;

Заголовок записи;

Текст записи;

Перечень тэгов;

Элементы голосования за запись;

Количество комментариев (ссылка на комментарии);

Кнопка-иконка для добавления в избранное;

Кнопки социальных сетей: Like in Facebook, retweet, поделиться вКонтакте,
мейл.ру;

Комментарий:
o Аватар пользователя;
o Заголовок комментария;
o Дата добавления комментария;
o Текст комментария;
o Ссылка «Ответить»;
o Карма комментария, кнопки голосования за комментарий;

Кнопки «внешнего» логина: Facebook, Вконтакте, Twitter, Google, OpenID, мейл.ру.

Форма «внешнего» логина (открывается при нажатии на соответствующую
кнопку):
o Логин;
o Пароль;
o Кнопка логина.

Форма добавления комментария:
o Поле заголовка;
o Поле сообщения;
o Кнопка «Отправить».
Примеры дизайнов
В данном разделе приведены примеры сайтов, дизайн которых близок к желаемому
дизайну с точки зрения внешней привлекательности или расположения элементов. Для
каждого сайта приведены его основные достоинства, которые могли бы найти отражение
в разрабатываемом дизайне.

hh.ru – лаконичность и простота;

gazeta.ru – хорошая организация информационных блоков;

seopult.ru – со всех сторон отличный пример сайта как рабочего инструмента.
Ничего лишнего, функциональный и приятный глазу интерфейс, хорошо
продуманное расположение элементов. Приятная цветовая гамма;

linkedin.com – легкий, не перегруженый элементами вариант профессионально
социальной сети;

news.rambler.ru – сбалансированный дизайн и хорошая организация элементов;

lookatme.ru
–
сбалансированный,
хорошая
организация
информационно-
аналитических материалов, очень хороший календарь событий, расположение
виджета входа;

habrahabr.ru – лаконичность и простота;

alfabank.ru – организация элементов на странице, понятный интерфейс.