prosdo.ru
добавить свой файл
1
Кратко:


Нужно сделать фирменный стиль (логотип и мелкие добавления) и дизайн интернет-магазина мужской одежды «Мужской клуб» (Men's Club).

Сайт: http://themensclub.ru/

Сообщество: http://vkontakte.ru/themensclub

Подробно:
Техническое задание
на дизайн Мужского клуба
Вводная часть
Заказчик:

Мужской клуб – интернет-магазин стильной мужской одежды, а также соответствующее сообщество молодых парней, объединенных общими ценностями и интересами: стиль, мужская мода, хороший внешний вид…
Название бренда:

«Men's Club» и «Мужской клуб». Основным является английский вариант; русский вариант является вспомогательным, но обязательным: он, не привлекая к себе внимания, обязательно должен быть в оформлении бренд.
Целевая аудитория:

Молодые люди в возрасте от 14 до 35, стильные, успешные, прагматичные, которые следят за своим внешним видом, формой и здоровьем.
Интересы целевой аудитории:

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

Основные цвета: фиолетовый, белый, черный.

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

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

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

Основная идея – геральдика: логотип в виде герба, элементы декора – элементы из геральдики: шит, очертания замка, колонны, ключ, львы, мечи, лавровая ветвь и т.д. Возможный центральный элемент логотипа – монограмма из букв «M» и «C». Только настоящая монограмма – нарисованных знак, представляющих собой хитрое переплетение двух букв, а не просто две буквы, поставленные рядом в фотошопе.

Задание: (что конкретно надо сделать)
Логотип

Герб мужского клуба. Логотип должен быть представлен в двух вариантах: основной (красиво нарисованный, средних размеров логотип, который будет использоваться чаще всего) и минимизированный (упрощенный уменьшенный логотип, который будет использоваться при нанесении на мелкие предметы, например, ручки, значки; в окне браузера около URL как логотип сайта и т.д). Если придерживаться тематики геральдики, то минимизированный логотип может быть отдельный центральный элемент основного логотипа (например, монограмма).
Технические моменты: логотипы должны быть крупными, представленными или в фотошопе (если растр) или в кореле (если вектор), разбитый на слои (каждый элемент отдельно). Эти требования нужны для того, чтобы логотипы легко можно было уменьшить до нужного размера или изменить, обыграть, если этого будет необходимо.
Элементы декора

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

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

Способ, как сделать из любой фотографии «фирменную». Понравился прием, используемый в фирменном стиле «Новой Англии» (http://www.artlebedev.ru/everything/new-england/identity/). Думаю, можно использовать что-то похожее: размещать в разных местах фотографий случайным образом, например, минимизированный вариант логотипа и/или элементы декора.


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


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

Движок: Джумла (Joomla! 1.5.22 Stable) + ВиртуеМарт (VirtueMart 1.1.8 stable)
Основной шаблон

Макет:
макет сайта должен быть «резиновым», но до определенной степени, чтобы на широких мониторах он не расплывался чрезмерно сильно. Фон сайта сплошной, множащийся (или в оба направления или только по горизонтали). Смысловые блоки должны быть представлены отдельными графическими блоками на собственных фоновых плашках.

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

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

Доп.меню: тонкая полоска-меню, содержащее ссылки на основные рубрики (пиджаки, рубашки, поло, футболки…) и специальные пункты, например, «спецпредложения», «Лето 2011». Блок опциональный, может отключаться или включаться в зависимости от надобности.

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


Подвал: должен содержать меню (примерные пункты: о мужском клубе, процедура заказа, о доставке, об оплате, гарантии, отзывы покупателей). Меню должно быть обычным текстовым (т.е. не использовать графические кнопки), и «расширяемым» - со временем пункты меню могут убираться, изменяться, дополняться, этим действиям не должны мешать ограничения дизайна. Так же подвал должен содержать блок контактной информации (название, коперайт, адрес электронной почты, номер телефона), значки принимаемых платежных систем: виза и мастер-кард, веб мани, яндекс деньги и РБК Мани (www.rbkmoney.ru); блок со ссылками на всякие сторонние проекты (каждый пункт должен состоять из логотипа, названия и ссылки) – для начала так: наша группа в контакте, наша группа в фейсбуке, твиттер-аккаунт мужского клуба, википедия, канал на youtube.com
Главная страница

Кроме блоков основного шаблона, главная страница должна содержать:

(после шапки, доп.меню и баннера)

Блок «Главный блок»: блок на всю ширину макета, достаточно высокий, привлекающий основное внимание при переходе на главную страницу. В этом блоке случайным образом выводится одна из 8-10 картинок/фотографий (надо отрисовать все), на которых изображен один или несколько мужчин. Это могут быть обстановка деловой встречи, завтрак на веранде ранним утром, романтический вечерний ужин, повседневная сцена, занятие спортом и т.д. На фотографиях должны быть выделены элементы мужского гардероба: куртка, брюки, джинсы, пиджак, футболка, пальто и т.д. От этих элементов на свободное место идут выноски на плашках, подписи с названием разделов. Каждый элемент одежды и соответствующая подпись будут ссылками на соответствующие разделы каталога. В мужском клубе продаются разнообразные вещи, поэтому картинки должны быть разноплановые, разных времен года. Где-то в углу блока должна быть неприметная ссылка для смены картинки.

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

(далее подвал)
Страница категории товара
Левая колонка:

Меню магазина: состоит из названия категорий товара, выбранная категория выделяется. Могут быть вложенные категории. Последний пункт меню «список всех товаров».

Сразу далее, поиск товара: надпись «поиск товара», поле для ввода и кнопка «поиск», на следующей строчке ссылка «расширенный поиск»

Сразу далее, ссылка «Личный кабинет».
Блок «Недавно просмотренные» (имеется ввиду товары): таблица из фото недавно просмотренных моделей. Максимальное количество фото – 6.
Основная часть (правая широкая колонка):

Название категории
Сортировка – поле для выбора способа сортировки и картинка, щелкая на которую меняется прямой или обратной порядка сортировки.
Количество позиций на странице – поле для выбора количества позиций на одной странице.
Сетка моделей: в одной строке 4 модели. Каждая модель состоит из фотографии (размер фото может быть любой, НО! соотношение сторон 2 к 3 – это техническое ограничение), название модели, цены (для обозначения рублей в цене использовать знак рубля: буква «р» с чертой; цена может быть указана со скидкой, тогда пишутся две цены: мелко старая, красным и зачеркнуто, вторая новая крупно).

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

Навигация по страницам – кнопки вперед, назад, в начало, в конец и номера страниц (может они все и не нужны, может как-нибудь более локанично).

Блок контента: после сетки моделей должен идти блок с статьей, посвященный этой рубрике товара.
Страница конкретного товара
Левая колонка – аналогично предыдущей странице
Основная часть (правая широкая колонка):

Хлебные крошки
Название модели
Выбор цвета – основные фотографии этой же модели, но в другом цветовом исполнении (фотографии также любого размера, но соотношение сторон как 2 к 3).
Основное фото – техническое ограничение: соотношение сторон как 2 к 3;
Детализация – миниатюрные картинки фотографий, отображающие отдельные части модели. При щелчке на миниатюрную фотографию она увеличивается поверх окна (уже реализовано).
Краткое описание – блок текста
Размер – надпись «размер» поле для выбора размера и ссылка «посмотреть таблицу размеров».
Цена – как и на страничке категорий, может быть представлена двумя суммами: до скидки (мелко, для информации) и со скидкой (крупно, красиво).
Поле для ввода количества
Кнопка «Добавить в корзину»
Ссылка «Задайте вопрос по этому товару»
Блок «сопутствующие товары» или «похожие товары» - блок опциональный, будет включен в случаи необходимости. Будет отображать или модели, которые обычно берут вмести с выбранным товаром, или просто похожие модели. Блок должен быть похож на сетку категории товаров, т.е. товар будет состоять из фото, цены, названия, кнопки «добавить в корзину» и переключателя цветов.
Другие страницы сайта

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