ТЗ НА РАЗРАБОТКУ ДИЗАЙНА САЙТА ВЕБ СТУДИИ
Выдано в печать 2014-04-25
ЗАДАЧА Необходимо кардинально обновить дизайн сайта. Сделать более современный и, главное, технологичный сайт. Сделать нечто не просто технологичное, а мега-супер-стильное, чтобы оправдывать свое позиционирование. Castcom позиционирует себя как, команда, которая способна работать с высокими технологиями и может выполнить проект любой сложности. ЦЕЛЬ 1. Донести до конечного пользователя, что Castcom не веб-студия, это Digital Agency, которое предоставляет полный комплекс услуг интернет-маркетинга для клиента: от создания маркетинговой стратегии - до разработки программного обеспечения "под ключ" и рекламой. 2. Внушить доверие клиенту. 3. Продать услугу. Маркетинговые задачи - Увеличение конверсии - Читабельность информации. Более того - все тексты должно хотеться прочитать. Для этого: o Необходимо разработать модульную сетку сайта таким образом, чтобы заранее определить местоположение текста. А также просчитать какое максимальное количество знаков можно пользователю преподносить "за 1 раз", если не разбавлять это картинками. o Подобрать шрифт: размер, цвет. Внимательно разработать какой размер шрифта должен применяться для того или иного заголовка. - Грамотная и интересная подача портфолио. - Упростить добавление работ в портфолио. На старой версии сайта для выкладывания 1 проекта нам приходится не только верстать под него страницу, но и делать иллюстрацию, что чрезмерно перегружает дизайнера. Поэтому необходимо разработать типовой шаблон портфолио, куда контент-менеджеры будут загружать макеты проекта в jpeg. - Сделать сайт более динамичным, живым. - Сделать хороший адаптивный макет. Продумать «перестраивание экранов». ПОЗИЦИНИРОВАНИЕ НА ЭКРАНЕ Для первого экрана лучшим образом подходит описание вида деятельности компании (позиционирование). Необходимо убить сразу нескольких зайцев на первом экране: позиционирование и технологичность/крутость разработчиков. Услуги размещаем на втором месте. Но уделять большого внимания им нет необходимости - чем лаконичнее, тем лучше. В лучшем случае использовать сочетание инфографики и блоков с текстом, который будет скрыт/свернут. Большие текстовые блоки автоматически будут обрезаться, и чтобы открыть их полностью, нужно нажимать на кнопку. Ограниченные по высоте блоки особенно удобны для мобильных устройств. ВЫПОЛНЕННЫЕ РАБОТЫ/ПОРТФОЛИО Для отображения проектов реализовать сложную сетку, где изображения могут быть различных размеров, а сама сетка перестраивается, адаптируясь под различные экраны. Соответственно, у некоторых проектов есть два варианта картинок, которые могут быть загружены. Для подгрузки новых элементов портфолио используется технологии ajax. ОТЗЫВЫ КЛИЕНТОВ После проектов необходимо расположить отзывы клиентов. Высоту блока с отзывом зафиксировать и добавили кнопку «прочитать полностью», если отзыв длинный. Большие текстовые блоки автоматически обрезаются, и чтобы открыть их полностью, нужно нажимать на кнопку. Ограниченные по высоте блоки особенно удобны для мобильных устройств. Ниже расположить логотипы наших клиентов. ПРЕЗЕНТАЦИЯ Необходимо весьма органично показать презентацию, сделать это максимально аккуратно и не привлекать слишком много внимания. Возможно, сделать какую-то либо интуитивно-понятную картинку заглушку, при клике на которую открывается презентация во весь экран. Например, как тут создатели сделали заглушку для видео: redcollar.ru НОВОСТИ КОМАНДА Реализовать отдельный блок с фотографией или образом для каждого члена команды, у каждого члена команды должно быть Имя и описание должности. О КОМПАНИИ Вся текстовая информация расположена на фоне обработанного в стилистике сайта изображения. АНИМАЦИЯ И ЭФФЕКТЫ НА САЙТЕ - Все крупные картинки на сайте необходимо загружать скриптами в зависимости от ширины экрана. Это необходимо для экономии траффика на мобильных устройствах. - Все сложные эффекты и анимации отключать на мобильных устройствах, чтобы не нагружать слабый GPU. - Так же использовать скрипт от Financial Times, убирающий задержку в 300 мс при клике на элементы на iPhone-ах и старых устройствах на базе андроида. - Большинство эффектов нужно привязывать к прокрутке. Редиректы и правильная 404 страница Необходимо сохранить все урлы, которые есть на проекте. Либо запросить список урлов, которые потребуют 301 редиректов. И заранее встроить их в настройки сервера. Это позволит избежать множества ошибок при запуске сайта с новыми адресами страниц. ТРЕБОВАНИЯ К ДИЗАЙНУ 1. Адаптивный веб-дизайн 2. Плоский дизайн 3. Вертикальный скроллинг 4. Нескучная типографика для выделения заголовков. 5. Модульные конструкции 6. CSS3 эффекты 7. Фиксированная навигация верхнего меню 8. Широкоэкранный дизайн 9. Подгружающийся контент 10. Интерактивная инфографика 11. Боковое сворачивающееся меню (на внутренних страницах) 12. Простые цветовые схемы. Использовать в дизайне одного, двух или трех чистых простых монохромных цветов в сочетании с классическим черным или белым для остальных элементов дизайна. Своего рода цветная вариация минимализма. Требования к форме обратной связи: - Заголовок: Заказать звонок - Выравнивание формы по центру - При вызове формы происходит затемнение основного фона сайта. - Форма обладает следующими активными элементами: o Закрывающий крестик o Кнопка "Позвоните мне" - Поля для заполнения: o Имя o Телефон Индивидуальные требования к некоторым элементам сайта: - Прелоадр отрисовать по типу как тут: www.deleteagency.com/services. Т.е. при подгрузке страницы должен появляться прелоадер нарисованный на основании логотипа Castcom. - При выделении текста на сайте - придумать какую-то свою подсветку. Например как тут: www.nimax.ru - www.trionndesign.com sergiopedercini.com http://www.alln1hob.com/ Верхнее меню - выравнивание по правому краю. Меню сворачивающееся в пиктограмму. При наведении разворачиваются в полупрозрачную ленту. - Рассмотреть вариант размещения логотипа по центру. Например как тут: elfsight.ru - http://www.alienationdigital.co.uk/inside-alienation/Page-2.html - пагинатор прикольный . Там обратить внимание на то, что у каждой новости есть картинка, если картинки нет - то выводить заглушку. Отрисовать заглушку. Дизайны, которые нравятся: Сайт: Плюсы О НАС www.utlab.ru Подача информации: - Проектная команда - Основные факторы, влияющие на стоимость сео - Как мы делаем проекты funcfunc.ru Раздел "О нас" - как мы работаем. Порфолио - подача проекта. http://www.fish-art.ru/#/slide4 - Наличие фотографий членов команды с описанием должности. http://welovescience.ru/#scienceagency - Подача информации о компании. - Наличие фотографии команды http://www.aimbulance.com/ru/about/ - Разбивка текста на блоки. О компании, о нас, наши награды. http://serenity.su/about/ - Подача информации от первого лица - Наличие фотографий - Блок с наградами http://le-dantu.ru/#1 - Блок Наша команда. Интересная подача каждого члена команды. КОНТАКТЫ grape.ru/contacts Страница контакты http://1optima.ru/contacts/ - Страница контактов - Карта на всю страницу, как подложка. - Наличие формы обратной связи http://artw.ru/company/contacts/ - Как добраться описание. Наличие блока с описанием разных способов как добраться. ОБЩЕЕ ВОСПРИЯТИЕ САЙТОВ http://tochka-ru.ru/ http://www.akaru.fr/ - Весьма технологичный сайт, наличие геометрической анимации. Нестандартный дизайн. http://www.nimax.ru/ - Оригиальный двухцветный адаптивный дизайн http://redcollar.ru/ - Очень хорошая графика. - Яркий дизайн http://droids-digital.com/ - Общий стиль сайта - Форма обратного звонка с выбором темы письма. http://www.axiomadev.ru/ - Блог - Список статей - Раздел О компании http://www.mstagency.ru/ - Наличие инфографики и подачи портфолио по годам. - http://www.mstagency.ru/portfolio/stachka/ - к примеру в таком стиле оформлять новости http://www.deleteagency.com/ http://www.alienationdigital.co.uk/ - Список статей, оформление как газеты http://www.propcom.co.uk/ - Очень стильный сайт. - Рассмотреть вариант использования правого или левого подобного меню для внутренних страниц http://www.ironpaper.com/ - Верхнее меню и всплывающие подменю. - Общий стиль дизайн весьма близок к тому что хотим получить в итоге http://www.astramg.ru/ - Подача текста и информации - Пиктограммы. ПОРТФОЛИО http://www.akaru.fr/fr/references/ - Портфолио. На всю страницу, страницы живая. С движением мышки движется. При наведении на каждый блок подсказка появляется. http://suprematika.ru/portfolio/category/web - Подача портфолио. - Возможность просматривать портфолио используя навигационные стрелки: http://take.ms/zne8c - Общий список портфолио http://marty.com/puma - интересное портфолио с выполненными работа http://shibui.me/ - интересное левое меню - анимация на лендинге. - анимация просмотра портфолио - Горизонтальная прокрутка интересная - Форма обратной связи http://lipka.ru/portfolio/ - Наличие отрисованной оригинальной графики в портфолио http://atelier.ua/web/ - Наличие пиктограмм для каждой категории портфолио или пункта меню. http://www.laurab.net/ - анимация при наведении на элемент. Сайт с интересной подачей портфолио. Интересные пиктограммы просмотра списком, плиткой и пагинации. http://wistech.biz/#portfolio - анимация по портфолио РАБОЧИЙ ПРОЦЕСС И ОПИСАНИЕ УСЛУГ http://www.itech-group.ru/services/index - Описание списка услуг. Пиктограммы http://renart.ru/ - Описание процесса работа. Наличие этапов и анимации. http://www.jbidigital.co.uk/ - Смена курсора на сайте - Описание услуг, например тут: http://www.jbidigital.co.uk/we-design/ - Список новостей или статей: http://www.jbidigital.co.uk/our-two-cents/ http://www.pirogov.ru/services/sayty/ - Подача большого количества текста. Легкочитаемость. - Структурировать списка услуг. ВАКАНСИИ http://ony.ru/agency - Блок с вакансиями http://www.traffic-isobar.ru/careers - Страница со списком вакансий
