Техническое задание на разработку одностраничного сайта

1. Общие сведения

1.1. Назначение документа

Настоящее техническое задание определяет требования и порядок разработки одностраничного сайта по строительству каркасных ангаров.

1.2. Цели создания сайта

• Привлечение новых клиентов
• Презентация услуг компании
• Повышение узнаваемости бренда
• Сбор заявок на строительство ангаров

2. Структура сайта

2.1. Главный экран (первый экран)

• Логотип компании
• Контактный телефон
• Кнопка обратного звонка
• Заголовок с УТП (уникальным торговым предложением)
• Подзаголовок с основными преимуществами
• Кнопка призыва к действию (CTA)
• Фоновое изображение построенного ангара

2.2. Блок Преимущества

• 4-6 ключевых преимуществ компании
• Иконки для каждого преимущества
• Краткое описание каждого преимущества

2.3. Блок Виды ангаров

• Типы конструкций с фотографиями
• Краткое описание каждого типа
• Указание примерной стоимости
• Кнопка Заказать расчет для каждого типа

2.4. Блок -Этапы работы-

• Пошаговое описание процесса от заявки до сдачи объекта
• Иконки или иллюстрации для каждого этапа
• Сроки выполнения каждого этапа

2.5. Блок -Портфолио-

• Фотографии реализованных проектов
• Краткое описание каждого проекта
• Сроки реализации
• Размеры конструкций

2.6. Блок -Отзывы клиентов-

• Фотографии клиентов или логотипы компаний
• Текст отзыва
• Имя клиента и название компании
• Слайдер для просмотра отзывов

2.7. Блок -Контакты-

• Контактный телефон
• Email
• Адрес офиса
• Карта с меткой расположения офиса
• Форма обратной связи
• Ссылки на социальные сети (при наличии)

3. Технические требования

3.1. Адаптивность

• Корректное отображение на устройствах с разрешением экрана от 320px до 1920px
• Адаптивное меню для мобильных устройств

3.2. Формы на сайте

• Форма обратного звонка
• Форма расчета стоимости
• Форма обратной связи
  Все формы должны содержать:
  • Поле для имени
  • Поле для телефона
  • Поле для email (опционально)
  • Согласие на обработку персональных данных
  • Капчу для защиты от спама

3.3. Технологические требования

• HTML5, CSS3
• JavaScript для интерактивных элементов
• Оптимизация изображений
• Время загрузки страницы не более 3 секунд
• Корректное отображение в браузерах: Chrome, Firefox, Safari, Edge последних версий

3.4. Требования к SEO

• Семантическая верстка
• Оптимизированные мета-теги
• Alt-теги для изображений
• Оптимизированные заголовки H1-H6
• Быстрая загрузка страницы
• Адаптивная верстка

4. Требования к контенту

4.1. Изображения

• Профессиональные фотографии ангаров
• Размер изображений не более 200-300KB
• Формат: JPG, PNG
• Разрешение достаточное для retina-дисплеев

4.2. Тексты

• Уникальные продающие тексты
• Грамотность и структурированность
• Ключевые слова для SEO
• Призывы к действию (CTA)

5. Требования к безопасности

• SSL-сертификат
• Защита от XSS и SQL-инъекций
• Защита форм от спама
• Регулярное резервное копирование

6. Дополнительные требования

• Счетчики аналитики (Google Analytics, Яндекс.Метрика)
• Интеграция с CRM (опционально)
• Виджет онлайн-консультанта (опционально)
• Модуль для быстрой загрузки страницы

Техническое задание на разработку одностраничного сайта

[предыдущие разделы остаются без изменений...]

2. Структура сайта

2.1. Главный экран (первый экран)

2.1.1. Шапка сайта (header)

• Логотип компании

  • Размещение: левый верхний угол
  • Формат: векторный SVG
  • При клике - плавная прокрутка к началу страницы
  • Размер: высота 50-60px с сохранением пропорций

• Контактная информация

  • Телефон с иконкой (в формате +7 (XXX) XXX-XX-XX)
  • Кнопка -Заказать звонок- справа от номера телефона
  • При наведении на телефон - эффект подчеркивания
  • Время работы под номером телефона

• Главное меню

  • Прилипающее (sticky) при прокрутке
  • Пункты меню: Преимущества, Виды ангаров, Этапы работы, Портфолио, Контакты
  • Плавная прокрутка к соответствующим разделам
  • Подсветка активного пункта меню при прокрутке страницы

2.1.2. Основной контент первого экрана

• Заголовок H1 с УТП

  • Пример: ^Строительство каркасных ангаров под ключ в [регион] от [X] рублей за м²^
  • Шрифт: крупный, контрастный
  • Возможно разделение на две строки для лучшей читаемости
  • Анимация появления при загрузке страницы

• Подзаголовок

  • 3-4 ключевых преимущества через разделители
  • Пример: ^Срок строительства от 20 дней • Гарантия 5 лет • Работаем с 2010 года^
  • Расположение: под основным заголовком
  • Шрифт: меньше основного заголовка на 50-60%

• Блок с цифрами

  • 3-4 ключевых показателя в ряд
  • Каждый показатель включает:
  • Крупную цифру
  • Единицу измерения
  • Пояснительный текст
  • Анимация счетчика при прокрутке до блока

• Кнопки призыва к действию (CTA)

  • Основная кнопка: ^Рассчитать стоимость ангара^
  • Контрастный цвет
  • Увеличение и тень при наведении
  • Размер: высота 50-60px, ширина 220-250px
  • Дополнительная кнопка: ^Скачать каталог^ или ^Посмотреть проекты^
  • Второстепенный дизайн (контурная кнопка)
  • Размер идентичен основной кнопке

2.1.3. Фоновое оформление

• Фоновое изображение

  • Профессиональная фотография построенного ангара
  • Затемнение для лучшей читаемости текста (overlay)
  • Размер: минимум 1920x1080px
  • Оптимизация для быстрой загрузки
  • Версии для разных разрешений экрана

• Элементы оформления

  • Декоративные элементы (опционально)
  • Геометрические фигуры для визуального разделения
  • Паттерны или текстуры для создания глубины

2.1.4. Мобильная версия

• Адаптивное меню (бургер-меню)
• Перестроение блоков для вертикального отображения
• Уменьшенная версия фонового изображения
• Адаптированные размеры шрифтов и элементов
• Сохранение всей функциональности десктопной версии

2.1.5. Дополнительные элементы

• Всплывающая форма заказа звонка

  • Поля: имя, телефон, удобное время
  • Защита от спама
  • Маска ввода телефона
  • Валидация полей

• Индикатор скролла

  • Показывает необходимость прокрутки вниз
  • Анимированная стрелка или иконка
  • Исчезает при прокрутке

[остальные разделы остаются без изменений...]

Цветовая схема сайта по строительству каркасных ангаров

1. Основные цвета

1.1. Основной брендовый цвет

• Синий: #1E4B8D
  • Применение: основные кнопки, заголовки, элементы навигации
  • Ассоциации: надежность, профессионализм, стабильность
  • Варианты прозрачности: 100%, 80%, 60%, 40%, 20%

1.2. Дополнительный акцентный цвет

• Оранжевый: #FF6B00
  • Применение: CTA-кнопки, выделение важной информации, иконки
  • Ассоциации: энергия, действие, строительство
  • Варианты прозрачности: 100%, 80%, 60%

1.3. Нейтральные цвета

• Темно-серый: #333333
  • Применение: основной текст, заголовки
• Серый: #666666
  • Применение: подзаголовки, второстепенный текст
• Светло-серый: #F5F5F5
  • Применение: фон секций, разделители
• Белый: #FFFFFF
  • Применение: фон, текст на темном фоне

2. Применение цветов по элементам

2.1. Шапка сайта

• Фон: белый (#FFFFFF)
• Логотип: основной брендовый синий (#1E4B8D)
• Текст меню: темно-серый (#333333)
• Активный пункт меню: синий (#1E4B8D)
• Телефон: темно-серый (#333333)
• Кнопка заказа звонка: контур синий (#1E4B8D)

2.2. Первый экран

• Overlay фонового изображения: градиент от темно-синего (#1E4B8D) с прозрачностью 80% до 40%
• Заголовок H1: белый (#FFFFFF)
• Подзаголовок: белый (#FFFFFF) с прозрачностью 90%
• Основная CTA-кнопка: оранжевый (#FF6B00)
• Дополнительная кнопка: белый контур (#FFFFFF)

2.3. Блоки контента

• Фон четных секций: белый (#FFFFFF)
• Фон нечетных секций: светло-серый (#F5F5F5)
• Заголовки секций: синий (#1E4B8D)
• Текст: темно-серый (#333333)
• Иконки: оранжевый (#FF6B00) или синий (#1E4B8D)

2.4. Формы

• Фон формы: белый (#FFFFFF)
• Поля ввода: фон светло-серый (#F5F5F5)
• Бордюр активного поля: синий (#1E4B8D)
• Кнопка отправки: оранжевый (#FF6B00)
• Текст подсказок: серый (#666666)

3. Цветовые сочетания для интерактивных элементов

3.1. Кнопки

Основная CTA-кнопка

• Обычное состояние: оранжевый (#FF6B00)
• При наведении: темный оранжевый (#E66000)
• Текст: белый (#FFFFFF)

Вторичная кнопка

• Обычное состояние: синий (#1E4B8D)
• При наведении: темно-синий (#183C71)
• Текст: белый (#FFFFFF)

Контурная кнопка

• Обычное состояние: контур синий (#1E4B8D)
• При наведении: фон синий (#1E4B8D), текст белый
• Текст: синий (#1E4B8D)

3.2. Ссылки

• Обычное состояние: синий (#1E4B8D)
• При наведении: темно-синий (#183C71)
• Подчеркивание при наведении

4. Дополнительные цветовые акценты

4.1. Уведомления и сообщения

• Успех: зеленый (#28A745)
• Ошибка: красный (#DC3545)
• Предупреждение: желтый (#FFC107)
• Информация: голубой (#17A2B8)

4.2. Градиенты

• Основной градиент:
  • От синего (#1E4B8D) к темно-синему (#183C71)
  • Применение: фоны секций, декоративные элементы
• Акцентный градиент:
  • От оранжевого (#FF6B00) к темно-оранжевому (#E66000)
  • Применение: кнопки, выделение элементов

5. Рекомендации по использованию

1. Соблюдать контраст текста и фона не менее 4.5:1
2. Использовать не более 2-3 цветов в одной секции
3. Придерживаться правила 60-30-10 при распределении цветов
4. Обеспечить читаемость текста на всех фонах
5. Сохранять консистентность использования цветов для схожих элементов

Типографика для сайта по строительству каркасных ангаров

1. Основные шрифты

1.1. Заголовочный шрифт

Montserrat

• Применение: заголовки H1-H3, кнопки, важные элементы
• Начертания:
  • Montserrat Bold (700) - основные заголовки
  • Montserrat SemiBold (600) - подзаголовки
  • Montserrat Medium (500) - кнопки и акценты
• Обоснование выбора:
  • Геометрический шрифт с четкими линиями
  • Ассоциируется с надежностью и современностью
  • Хорошо сочетается с инженерной/строительной тематикой
• Подключение:

  @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap');

1.2. Основной текстовый шрифт

Open Sans

• Применение: основной текст, меню, формы
• Начертания:
  • Open Sans Regular (400) - основной текст
  • Open Sans SemiBold (600) - выделения в тексте
  • Open Sans Light (300) - второстепенная информация
• Обоснование выбора:
  • Отличная читаемость
  • Нейтральный деловой характер
  • Хорошо работает в мелких размерах
• Подключение:

  @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap');

2. Размеры шрифтов

2.1. Заголовки

• H1 (главный заголовок):

  • Десктоп: 48px/56px
  • Планшет: 40px/48px
  • Мобильный: 32px/40px
  • Начертание: Montserrat Bold
  • Применение: основной заголовок первого экрана

• H2 (заголовки секций):

  • Десктоп: 36px/44px
  • Планшет: 32px/40px
  • Мобильный: 28px/36px
  • Начертание: Montserrat Bold
  • Применение: заголовки разделов

• H3 (подзаголовки):

  • Десктоп: 24px/32px
  • Планшет: 22px/30px
  • Мобильный: 20px/28px
  • Начертание: Montserrat SemiBold
  • Применение: заголовки карточек, подзаголовки разделов

2.2. Основной текст

• Крупный текст:

  • Размер: 18px/28px
  • Шрифт: Open Sans Regular
  • Применение: лид-абзацы, важная информация

• Основной текст:

  • Размер: 16px/24px
  • Шрифт: Open Sans Regular
  • Применение: основной контент

• Мелкий текст:

  • Размер: 14px/20px
  • Шрифт: Open Sans Regular
  • Применение: дополнительная информация, подписи

2.3. Специальные элементы

• Кнопки:

  • Размер: 16px/24px
  • Шрифт: Montserrat Medium
  • Трансформация: uppercase

• Меню:

  • Размер: 16px/24px
  • Шрифт: Open Sans SemiBold
  • Трансформация: normal

• Цифры и показатели:

  • Размер: 48px/56px
  • Шрифт: Montserrat Bold
  • Применение: крупные цифры в блоках статистики

3. Правила использования

3.1. Иерархия текста

1. Всегда использовать четкую иерархию заголовков (H1 → H2 → H3)
2. Не пропускать уровни заголовков
3. Использовать только один H1 на странице
4. Поддерживать контраст между заголовками и основным текстом

3.2. Форматирование

• Максимальная длина строки: 720px или 80 символов
• Выравнивание:
  • Заголовки: по левому краю или по центру (в зависимости от дизайна секции)
  • Основной текст: по левому краю
  • Цифры и короткие надписи: по центру

3.3. Интервалы

• Межстрочный интервал указан в line-height
• Интервал между абзацами: 1.5em
• Интервал после заголовков: 1em
• Интервал между секциями: 80px (desktop), 60px (tablet), 40px (mobile)

4. CSS-реализация

:root {
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Open Sans', sans-serif;
}

h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 48px;
  line-height: 56px;
}

h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
}

h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

.button {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  text-transform: uppercase;
}

.statistics-number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 48px;
  line-height: 56px;
}

5. Рекомендации по доступности

1. Минимальный размер текста 14px
2. Достаточный контраст текста и фона
3. Возможность масштабирования текста без потери функциональности
4. Поддержка средств чтения с экрана через правильную HTML-структуру