ТЗ для Сайта

Техническое задание создания сайта для АНО Центр клинической психологии Ковчег

  1. Разработка сайта на CMS Wordpress.
  2. Весь дизайн должен содержаться в шаблоне, чтобы иметь возможность быстро и безболезненно переносить сайт в рамках платформы CMS Wordpress
  3. Предусмотреть систему экспорта /импорта использованного на сайте контента и ПО ( Модулей и плагинов).

Впечатление, которое должен производить сайт:

Надёжность: Традиционность: Компетентность: Образованность: Профессионализм: Классический и основательный подход.
В одной фразе: Элитная Вип Клинника

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

У клиники на данный момент несколько сайтов, основной http://kovcheghelp.ru/ И что очень важно должно получиться лучше него)))

Логотип:

Его можно перекрасить под один из основных цветов!

Клиенты - целевая аудитория:

Женщины от 30 до 65 лет, Близкие родственники Матери и Жёны Зависимых!

Не обязательно использовать эти цвета!
В итоге нужно получить уникальный дизайн, при этом имея гибкость крутой клубной темы! - Что это значит:

Набор стандартных элементов

Набор стандартных элементов дизайна - (Заголовки, иконки, шрифты, цытаты, СТА, и т.д.) чтобы можно было собирать новые страницы, статьи из готовых блоков дизайна!

Студийные Темы откуда можно взять примеры готовых элементов:

  • THE GEM * Навести на пункт меню ELEMENTS * http://codex-themes.com/thegem/elements/accordions-toggles/#1453906386724-0379b380-21f4
  • MASSIVE DYNAMIC *Навести на пункт меню ELEMENTS * http://demo.massivedynamic.co/general/ Анимацию кнопок можно просто забрать
  • BETheme *Навести на ShortCodes* http://themes.muffingroup.com/be/splash/

Картинки брать со стоков, водяной знак - не страшен. Стоки: https://videohive.net/ (цены ниже) и https://www.shutterstock.com/home (Цены выше). Там же можно взять уникальные иконки под проект!

Что считаю хорошим дизайном - Когда картинка побуждает к действию. Когда не навалено всё на один экран. Один экран - одна задача, например несколько цепляющих новостей и форма подписки. Интерактивная карта Росссии, кликни и узнай сколько будет стоить доставка до центра. То есть сайт состоить из смысловых ячеек - экранов

Экран это screen? или размер монитора.

Экраны должны отличатся друг от друга, бекграундом, (цвет, картинка, видео), хорошо если с помощью каких либо элементов экраны переходят друг в друга, пример, http://themes.muffingroup.com/be/marketing/

У каждого экрана ест 2 основных составляющих, визуальная и текстовая, и обе должны быть заметными, то есть, заголовок как крючок, должен быть заметным и так же картинка, некая изюминка из за которой хочется листать сайт дальше, как весёлые картинки)

Первый экран главной страницы

  1. Меню привязано к верху стрницы
  2. Номера телефонов кликабельны в мобильной версии сайта из любой ОС (Андроид IOS и Виндовс)
  3. С левой стороны, активные кнопки вызова, рсчёта стоимости, обратного звонка, и предложения получить скидку (о них позже)
  4. Основной контент верхний заголовок - задача прояснить куда попал посетитель
  5. Ниже - Сильное предложение фотография или видео слева, текст дескрипшен справа, а также формы заполнения и кнопка отправки.

При нажатии на расчёт стоимости, появляется окно, в котором предлагается ввести различные данные, выбрать условия размещения. В нем несколько шагов, и на последнем шаге посетителя просят ввести данные: телефон и имя.

Нужно придумать и обсудить параметры для расчёта стоимости лечения

В общем прописать по таблице стоимость каждой опции! Таблица здесь https://vk.com/doc328940534_440210886?hash=fb29a6b91cd1b23431&dl=7223996dbfa52d4cb6

Или так:

Также придумать лёгкую возможность оставить отзыв, можно просто добавить в левой фиксированный СТА ещё одну вкладку!

Второй экран главной страницы

Позже создам видео шаблон анимации второго экрана

Анемированный слайдер с использованием видео

Третий экран главной страницы

У нас есть несколько привлекательных новостей, с узнаваемыми лицами и картинками.

Цель этого экрана конвертировать посетителя в емайл подписчика

Четвёртый экран главной страницы

Цель этого экрана, показать визуально с помощью видео и/или через текст о том "С чем сталкиваются заказчики при выборе Реабилитационного центра и вообще при выборе способа лечения"

Также в конце текста- кнопка перехода на полный текст статьи.

Пятый экран главной страницы

Слайдер видеоотзывов с олдскульным дизайном

по типу такого http://www.webdesign-flash.ro/w/r3dcov/

Должен быть зациклен

управление колёсиком мыши, стрелками на клаве, дополнительными стрелками на экране, пальцами на тачскрине

возможность добавлять и удалять видео в админке. Можно сделать на основе подходящего плагина, типа sl revolution.

Дизайн: Экран должен вызывать ощущение бесконечного количества положительных отзывов о компании

внизу экрана не придуманный ещё призыв к действию СТА

Шестой экран главной страницы

Экран, самых читаемых/обсуждаемых/рандомных/выбраных новостей блога, или категорий блога.

Сверху заголовок, снизу дескрипшен и кнопка перейти к блогу

Седьмой экран главной страницы

Ещё один призыв к действию, тема ещё не обсуждалась!

Восьмой экран главной страницы, или футер

В левой части, список читаемых/обсуждаемых/рандомных/выбраных тем блога

в центре контакты

справа фотографии и видео центра/ можно не заморачиваться и поместить туда самое лучьшее

под фотками иконки соцсетей

Первый экран страницы О Нас

из картинки понятно что необходимо

Второй экран страницы О Нас

Галерея документов центра

разместить и пометить тегами сканы документов центра,

сверху кнопки выбора типа документа

удобно делать на плагине WidgetKit, пример https://demo.yootheme.com/widgetkit/joomla/index.php/home/gallery

Третий экран страницы О Нас

Слева картинка или видео

В центре описание, возможно ссылка на развёрнутое описание

Справа фотографии и видео

Призыв к действию

Четвёртый экран страницы О Нас

Мы работаем со всем миром

Интерактивная карта по типу этой http://meisterpixel.com/interactive-map-builder/map-examples/regions/world/

технические требования к ней пока не придумали

снизу описание и видео / картинка

Пятый экран страницы О Нас

ССылка на материал https://vk.cc/6mW4SF

Дизайн на усмотрение

Шестой экран страницы О Нас

кликабельные фотографии сотрудников, с описанием и должностью

Всплывающее окно, с профилем сотрудника

Фотография, Имя. должность, описани, история, цитата, дипломы, возможно фотки и видео. Нужно иметь возможность редактировать в админке каждого сотрудника и все элементы // как вариант плагин виджеткит!

Снизу СТА , связаться с сотрудником!

Первый экран страницы Лечение

По шагам расписаны этапы, справа видео или картинка

Первым этапом добавить МОТИВАЦИЯ

Первый экран страницы Родителям

Страница Родителям задумывалась также как страница блога со статьями

На первом экране слева видео о созависимости, справа основные мысли из видео, только текстом, можно, полностью статью!

Второй экран страницы Родителям - Блог

Это блог:

Справа (но не обязательно) список категорий блога, Текст, фото/видео или призыв к действию!

сами категории в сетке, при наведении на ячейку разворачивается информация о категории, также снизу картинки статей категории и кнопка перейти

Страница Блог/Категория

Из картинки всё понятно

Страница Блог/Категория/Статья

Сверху картинка статьи на всю ширину и на её фоне заголовок

Текст статьи. комментарии, так же необходимо запихнуть куда ни будь меню блога

Снизу анимированная и стилизованная ссылка на следующую статью!

Или превью нескольких статей

Возможность комментирования необходима, но также нужно предусмотреть возможность модерации перед публикацией / по любому уже гдето реализованно!

Также должна быть страница контакты

Интерактивная карта мира, можно с анимацией и тп. телефон для РФ 8800 для мира +7 347

Прикладываю макет в псд https://yadi.sk/i/at6quzI43Fmoye

Credits:

Created with images by onlineCup - "software internet web design"

Report Abuse

If you feel that this video content violates the Adobe Terms of Use, you may report this content by filling out this quick form.

To report a Copyright Violation, please follow Section 17 in the Terms of Use.