Редизайн и UX/UI-оптимизация сайта svg4.ru: современный каталог SVG-иконок с поиском, фильтрами и быстрым скачиванием

## Введение Проект предполагает редизайн публичного сайта svg4.ru, ориентированного на каталог, просмотр, поиск, копирование и скачивание SVG-иконок/векторных элементов. Основная задача — обновить визуальный стиль, повысить удобство навигации, улучшить скорость работы и сохранить существующие SEO-позиции, ссылочную структуру и ценность контента. Целевая аудитория: веб-разработчики, UI/UX-дизайнеры, фрилансеры, продуктовые команды и пользователи, которым нужны готовые SVG-графики для встраивания в интерфейсы, лендинги, документацию и презентации. Так как исходное описание проекта ограничено, в ТЗ заложены типовые требования для сайта-каталога SVG-иконок. На этапе аудита фактическая структура, стек и объем контента уточняются. ## Общие требования - Сохранить актуальную структуру URL, если она уже используется в поисковых системах, либо подготовить 301-редиректы при изменении адресов. - Не ухудшить индексацию: страницы каталога, карточки иконок, категории и теги должны оставаться доступными для поисковых систем. - Использовать современный, чистый и технически ориентированный визуальный стиль: минимализм, высокая читаемость, понятные состояния элементов, поддержка светлой и темной темы, если это предусмотрено дизайном. - Интерфейс должен быть адаптивным для desktop, tablet и mobile. - Дизайн должен быть реализован как система компонентов: шапка, поиск, фильтры, карточки иконок, страница иконки, подвал, модальные окна, состояния empty/loading/error. - Все ключевые действия пользователя должны быть понятны без дополнительного обучения: поиск, просмотр SVG, копирование кода, скачивание файла. - Не допускать перегруженности страницы визуальными эффектами; приоритет — скорость, читаемость и удобство выбора. - При наличии существующего сайта выполнить аудит текущих страниц, UX-проблем, SEO-ошибок, скорости загрузки и совместимости. ## Основной функционал 1. Главная страница - Краткое позиционирование ресурса и преимущества библиотеки. - Поисковая строка с подсказками. - Блоки популярных, новых или рекомендованных иконок. - Быстрый переход к категориям, тегам и примерам использования. - SEO-блоки с описанием ресурса. 2. Каталог иконок - Список иконок с визуальным предварительным просмотром. - Пагинация или бесконечная прокрутка. - Сортировка: по популярности, дате добавления, названию, алфавиту. - Фильтры по категориям, тегам, стилю, лицензии и другим существующим метаданным. - Адаптивная сетка карточек. 3. Поиск и фильтрация - Поиск по названию, тегам, категории и описанию. - Подсказки и обработка запросов без результатов. - Быстрое применение фильтров без полной перезагрузки страницы, если текущая архитектура это позволяет. - Корректная работа с кириллицей и латиницей. 4. Страница иконки - Большой предварительный просмотр SVG. - Название, теги, категория, пример использования. - Кнопки копирования SVG-кода и скачивания файла. - Информация о размере файла, формате и параметрах. - Состояния успешного копирования, ошибки копирования и недоступности файла. 5. Страницы категорий и тегов - Описания разделов для SEO. - Сетка связанных иконок. - Фильтры и сортировка внутри раздела. 6. Навигация и пользовательский опыт - Единая шапка и подвал. - Хлебные крошки. - Умный поиск по сайту. - Понятные микровзаимодействия без потери производительности. 7. SEO и аналитика - Семантическая валидная разметка. - Title, description, canonical, Open Graph, sitemap.xml и robots.txt. - Структурированные данные, если применимо. - Интеграция аналитики или подготовка мест под нее. ## Технические требования - Фронтенд: HTML5, CSS3, JavaScript; фреймворк используется только если он уже применяется на сайте или выбран в рамках реализации. - Адаптивная вёрстка с поддержкой современных браузеров: Chrome, Edge, Firefox, Safari последних двух версий. - Оптимизация SVG: минимизация кода, корректные viewBox, отсутствие лишних атрибутов, возможность использования SVG sprite или отдельных файлов в зависимости от архитектуры. - Производительность: целевой Lighthouse Performance не ниже 90 для основных страниц при тестировании на мобильном профиле, lazy loading для изображений и иконок, кеширование, минификация CSS/JS, подключение CDN при необходимости. - Доступность: соответствие минимум WCAG 2.1 AA для основных сценариев, keyboard navigation, aria-метки для интерактивных элементов, контрастность, фокусные состояния. - SEO: чистая URL-структура, индексация важных страниц, отсутствие дублей, корректные редиректы, meta-теги для карточек и разделов. - Безопасность: защита от XSS при отображении пользовательского или импортируемого SVG-кода, sanitization, безопасная обработка скачиваний и копирования через Clipboard API с fallback. - CMS/администрирование: если на сайте используется CMS, редизайн должен быть адаптирован под ее шаблоны и не требовать миграции данных без отдельного согласования. - Версионность: все работы ведутся в Git, перед сдачей передается структура файлов, инструкция по установке/деплою и перечень изменений. - Тестирование: проверка на разных разрешениях, в основных браузерах, на скорость загрузки, корректность поиска, фильтров, копирования, скачивания и SEO-метаданных. ## Критерии приемки - Утвержденный дизайн главной, каталога, страницы иконки и адаптивных состояний. - Реализованные основные сценарии: поиск, фильтрация, просмотр, копирование SVG, скачивание. - Сохранена или улучшена скорость загрузки относительно текущего сайта. - Нет критических визуальных или функциональных ошибок в основных браузерах. - Переданы исходники дизайна, исходники реализации при включении в объем работ, инструкция и рекомендации по дальнейшему сопровождению.