Сайт для ГрандТВ
Недавно в студийном твиттере нас спросили о том, почему Студия ничего не постит в ЖЖ, ведь интересно знать как идет работа в молодой компании. Исправляемся.
Тем более и повод есть — мы доделали очередной проект. Это сайт Светодиодного видеоэкрана «ГрандТВ» (да, и у телевизионных экранов тоже бывают сайты). О процессе его создания я и расскажу.
Концепция
Работать над этим проектом мы начали еще летом. Немного поштормили мозгами и решили делать в формате одностраничного «промо-сайта», но при этом с максимальной функциональностью. Кроме достаточно небольшого количества текстовой информации нам нужно было разместить:
- форму заказа услуг
- форму обратной связи
- контактную информацию
- калькулятор расчета стоимости услуг
- логотипы партнеров
- портфолио видеороликов
- фотографии видеоэкрана на фасаде здания
И все это на одной странице высотой с ноутбучный монитор. Вот такая вот задача.
И справились мы с ней очень просто: запроектировали в интерфейсе два вспомогательных экрана для информации слева и справа от основного. Переход (в нашем случае плавный переезд) на них осуществляется с помощью навигационных стрелок-подсказок. А все формы поубирали в выезжалки, чтобы они не занимали место.
Дизайн
Здание, на котором висит экран, расположено в самом центре Симферополя и визуально знакомо каждому. Поэтому на главной решили показать часть его фасада вместе с экраном.
Рисуем первую версию макета дизайна.
Дополнительная страница:
Приходим к пониманию того, что в этом варианте невозможно правильно отобразить запланированную концепцию. Забраковываем макет и начинаем все с нуля.
Второй вариант делаем максимально строгим, ярким и космическим:
Общая графическая схема всех трех экранов:
Рисуем телевизионные заставки в слайдер на экран:
Прорисовываем элементы форм в выпадашках:
Верстка
Верстка проекта была непростой (но мы и не ищем легких путей). Ездилка между экранами, выпадающие формы заказа, форма контактов, калькулятор, слайдер на главной, аккордеоны на дополнительных страницах, карусели видеороликов и фотографий, «плавающий» эффект для селектов и «живые» кнопки — это далеко не полный перечень интерактива, с которым пришлось повозиться. Но мы днями и ночами занимались этим, чтобы вам понравилось 🙂
Контент
Наполнение — это отдельная история, требующая от веб-студии выдержки и настойчивости (коллеги по цеху меня поймут). Должность выбивальщика контента должна стать обязательной, наравне с дизайнером и менеджером. Но и с этой задачей мы справились — контент выбили и забили. Получилось симпатично. А вам как?
На сайт можно посмотреть здесь — http://grand-tv.com.ua
PS Почему не выложили в портфолио? Да чо-то руки никак не доходят…