Дизайн сайта для проекта FUNQ

Разработке подлежит дизайн одностраничного сайта компании FUNQ (имя сайта funq.com.ua).

Исходные материалы Логотип в формате CDR, шрифты, примеры визиток, буклет, фотографии с вечеринки.

Компания специализируется на организации вечерних дискотек на реке Днепр в Киеве.

2 макета главной страницы для декстопной и мобильной версии сайта. Ширина контейнера десктопной версии 1170px, ширина контейнера мобильной версии сайта 750px.

Макеты 2х главных страниц во вложении

Логотип, шрифты, фото мероприятия, примеры полиграфических работ предоставляются.

Сайт создается с целью:

• информирование клиентов о проводящихся мероприятиях;
• продвижение бренда FUNQ как организатора интересных и неординарных вечеринок;
• популяризация положительного имиджа компании;
• привлечение новых гостей вечеринок;
• повышение узнаваемости бренда;
• выход на рынок event организаторов;
• продажа билетов на вечеринки;

КонкурентыIndigo ambitious project (http://indigo-project.com.ua/)

Bitlook (https://www.facebook.com/events/378893792309354/)

Bannana Boat Party (https://www.facebook.com/events/863820350379124)

АналогиMaddecent Boat Party (http://www.maddecentboatparty.com/)

Boat Party Prague (http://boatpartyprague.com/)

Ocean Beat Ibiza (http://www.oceanbeat-ibiza.com/)

Целевая аудиторияЦелевая аудитория от 25 до 35 лет.

Пожелания к визуальному образу:

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

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

http://boatpartyprague.com/ - Больше всего нравиться

http://www.oceanbeat-ibiza.com/

Стиль и тональность подачи информации на сайте Стиль подачи информации – позитивный, рациональный, логичный, направленный на достижение взаимовыгодных результатов.

Тональность подачи информации должна создавать впечатление доверия и надежности, добросовестности и прозрачности взаимоотношений с компанией "FUNQ".

Сайт должен вызывать ощущение стилевого единства и хорошего вкуса.

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

При создание дизайна сайта можно отклоняться от фирменной цветовой гаммы и шрифтов.

Требования и пожелания по внешнему виду навигации сайта Система навигации сайта должна представлять собой интуитивно понятный интерфейс.

Минимальное количество кликов должно давать клиенту максимум полезной информации.

Цветовая гамма веб-сайта Цветовая модель RGB

#868a4d

#8e915a

#da952f

#eaa439

#883362

#3e2f21

Допускается использование других цветов.

Требования и пожелания к присутствию анимации, в какой степени Анимации должно быть минимум.

Требования по присутствию на сайте рекламных объектов (баннеры, логотипы партнеров, реклама и т.п.)На сайте не будет рекламы

Структура сайта Сайт одностраничный с адаптивным дизайном. Макеты в Balsamiq прилагаются к ТЗ

Требованию к дизайн-макетам Макет должен быть представлен в форматах PSD, цветовое пространство RGB

Имя файла должно состоять только из латинских букв, цифр и _ (underscore)

Если макет дополняет/изменяет уже существующий, то в его имени должен быть суффикс, указывающий версию (например landing_v2.psd)

В рамках макета должна быть соблюдена сетка

Rulers должны быть выровнены точностью до одного пикселя. Пол пикселя не допустимо

В случае фиксированного шаблона должно быть четкое соответствие ширины макета утвержденной минимальной ширине сайта. Ширина макета всегда должна быть меньше подразумеваемой ширины устройства отображения на 20-24 пикселей

При разработке дизайна «под разрешение» обязательно отрисовывать в разрешение окна браузера, а не монитора (при 1024 пкс ширина браузера 1000 пкс)

Желательно в виде отдельных файлов прикладывать все паттерны, используемые в макете

Обязательно наличие отдельного макета, в котором представлено оформления стандартных элементов типографики веб-страницы (заголовки, параграфы, таблицы, списки, блоки цитаты)

Слои (layers) Каждый элемент должен находиться в одном слое, названным человечески-понятным именем, а не «slice 1,2».

Все слои одного логического элемента должны быть в одной папке (например, модуль авторизации)

Если применяется градиент к слою, использовать обычный режим наложения (blend Mode: normal) и его реальные цвета

Не должно быть никаких полупрозрачных градиентов и сложных режимов наложения типа «multiply, screen, overlay, и т.д.»

Нельзя использовать сложные режимы наложения (blend mode) на любых свойствах слоя (типа inner shadow, drop shadow и т.д.)

Нельзя использовать режим «Наложение цвета»

Нежелательно использовать «слой на слое» для создание различных эффектов (например градиента)

Нежелательно использовать градиентные границы (border, stroke)

Нежелательно сводить простые стили слоёв (например отбрасывание тени легко реализуется средствами CSS)

ТекстДля текстовых элементов обязательно указывать шрифт и его размер

Размеры (кегль) шрифтов должны быть целыми числами. Использование 14.22 в качестве размера шрифта недопустимо

Запрещено изменять высоту/ширину шрифта способом, отличным от обычного изменения размера кегля

Обязательно прикладывать к макету шрифты, которые были использованы в макете, в формате TTF, OTF

Шрифт должен быть бесплатным или должна быть приобретена лицензия на его использование

Недопустимо использовать прозрачность для элементов содержащих текст

Для каждого отдельного блока текста - отдельный text box

Отличный от дефолта (100%) межбуквенный/межсловный интервал должен быть отмечен комментарием

Из текстовых эффектов допустима лишь тень, и всё что с её возможностью можно эмулировать

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

Желательно все текстовые элементы делать без сглаживания

РыбаДля повторяющихся элементов (списки и т.д.), рыба должна быть разной

Интерактивные элементыКнопки, текстовые поля, ссылки и прочие интерактивные элементы должны иметь несколько представленных в макете состояний:

• Ссылка
  • Обычная (не посещённая, не активная)
  • При наведении (hover)
  • При нажатии (click)
  • Посещённая (visited)
• Кнопка
  • Обычная
  • При наведении (hover)
  • При нажатии (click)
  • Заблокированная (disabled)
• Поле ввода (input, select)
  • Обычное
  • Активное (active)
  • Заблокированное (disabled)
• Checkbox, radio button
  • Обычный
  • Активный (active)
  • При наведении (hover)
  • Заблокированный (disabled)