Новый сайт
футбольного клуба

«Зенит»

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

Концепция

Страница новостей

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

ШАПКА

НОВОСТИ

2 МЕНЮ

РЕКЛАМНЫЙ МОДУЛЬ

КАЛЕНДАРЬ

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

Главную страницу было решено поделить на зоны — витрины
ключевых разделов сайта, откуда пользователь может
получить всю ключевую и актуальную информацию с
возможностью перейти в раздел за детальной информацией.

ВИЖУАЛ

НОВОСТИ

СТАТИСТИКА

ВИДЕО

ФОТО ДНЯ

ТВИТТЕР

ГАЛЕРЕЯ ФОТО

ФОРУМ

КАЛЕНДАРЬ СОБЫТИЙ

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

Матч-центр

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

CЧЕТ

ТАЙМЛАЙН

СТАТИСТИКА

Проектирование

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

Дизайн

Для начала работ над макетами, мы определили 3 ключевые части любой дизайн копцепции

Цвет

Проведя анализ контента мы нашли процентное соотношение светлых и темных оттенков для зон страницы

42% Белый#ffffff

04% Черный#00000

14% Голубой#009ee1

26% Серый#393b44

06% Синий#0550a5

На сайте много информации для чтения, поэтому преобладает белый цвет

Темный фон использовался на зонах с видео и фотографией, визуально на темном они лучше воспринимаются

Шрифт.

Для заголовков нужен был заметный гротеск, мы использовалиFutura Demi,и подобрали к нему шрифт для текста —PT Sans

Я к вам пишу — чего же боле?
Что я могу еще сказать?
Теперь, я знаю, в вашей воле ...
Меня презреньем наказать.
Но Вы, к моей несчастной доле
Хоть каплю жалости храня ...
Вы не оставите меня.
Сначала я молчать хотела;
Поверьте: моего стыда
Вы не узнали б никогда ...
Когда б надежду я имела
Хоть редко, хоть в неделю раз
В деревне нашей видеть Вас ...

Твой PT Sans

Графика.

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

svg-picture

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

Вектор
Растр
Макеты
После кропотливой работы над дизайном и тесного взаимодействия
с Клиентом, были подготовлены макеты нового сайта. Перед передачей
страниц в разработку вы можете посмотреть их вместе с ключевыми
элементами интерфейса
Главная страница
Перед матчем слайдер меняется на матч-центр, чтобы можно было отслеживать оперативную информацию о матче.
Страница новостей
Матч-центр
Технологии
Мы всегда поддерживаем свои знания в актуальном состоянии и используем все новые
достижения в области разработки ПО и IT в целом. При разработке сайта мы использовали все
прогрессивные методы, подходы и технологии, которые в связке с осознанным анализом,
прототипированием и дизайном помогли создать современное решение, достигающее
поставленных перед ним целей
Инструмент
HTML5, CSS3, Javascript
Мы использовали современные технологии для обеспечения максимально высокого качества внешнего вида и производительности сайта
Средство
Адаптивный дизайн
Средствами CSS мы сделали адаптивную верстку, которая отлично работает на любом разрешении экрана
Preview
Pixel perfect
Для идеального отображения иконок мы использовали веб шрифт, чтобы максимальное количество браузеров с точностью отображали сайт
Сайт полностью оптимизирован для поисковых систем, учтены все требования самих поисковков и требования заказчика, которые формулировались им на протяжении всей работы старого сайта.
Использование jade файлов для повышения скорости верстки и внесения изменений
За счет лаконичного синтаксиса, jade файлы разрабатываются намного быстрее HTML. С помощью jade описывается структура документа, а HTML генерируется автоматически. Это позволяет не только повысить скорость работы, но и сократить количество ошибок при верстке такого высокого уровня сложности.
Клиент
И, конечно же, наш клиент. Только при плотном взаимодействии с Клубом мы смогли создать такой невероятный сайт. А сколькому мы научились у ребят — словами передать невозможно.

«Когда мы думали про новый клубный сайт, мы решали несколько задач.

Во-первых, нам нужно было лучше представить на сайте уже существующие сервисы и контент. Скажем, у нас самая точная и подробная статистика „Зенита“. Сейчас она спрятана где-то глубоко в глубине сайта. А мы бы хотели, чтобы все наши пользователи о ее существовании знали и могли бы легко с ее помощью узнавать интересные для себя факты.

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

Нам кажется, что Func. помогли нам воплотить в жизнь все задачи.»

Даниэль Лурье,
Главный редактор ФК «Зенит»

Расскажите о нас
Будьте так добры. Это сильно поможет нам найти замечаиельного коллегу, любимого клиента и распространит прекрасное вокруг нас с вами