Sergei Vasilev
2fadc15923
- Server backup: PHP source files, theme assets, fonts, images, wp-config.php (masked), .htaccess, sitemaps, manifest - Design audit: comparison with Open Design systems (Corporate, Clean, Modern, Bold), critical issues, SEO problems, 3-phase change plan, new_redesign analysis - All files downloaded from production server via Code Snippets Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
269 lines
14 KiB
Markdown
269 lines
14 KiB
Markdown
---
|
||
name: iqon-design-audit
|
||
description: "Аудит дизайна iqon.com с референсами из Open Design дизайн-систем и план изменений"
|
||
metadata:
|
||
node_type: memory
|
||
type: project
|
||
---
|
||
|
||
# Аудит дизайна iqon.com
|
||
|
||
*Created: 18 May 2026*
|
||
|
||
## Контекст
|
||
|
||
Анализ текущего дизайна iqon.com с использованием дизайн-систем из Open Design (nexu-io/open-design). Сайт работает на WordPress 4.9.13 с кастомной темой iqon (2012 год). Содержимое не обновлялось с 2013 года. На том же аккаунте reg.ru (u0012812) что и dsu-project.ru.
|
||
|
||
---
|
||
|
||
## 1. Критические проблемы
|
||
|
||
### 1.1 Нет viewport meta tag
|
||
|
||
**Проблема:** Отсутствует `<meta name="viewport">` — сайт не адаптивный, на мобильных отображается в масштабе десктопа (960px).
|
||
|
||
**Референс (Corporate):** `<meta name="viewport" content="width=device-width, initial-scale=1.0">` — стандарт.
|
||
|
||
**Исправление:** Добавить viewport meta через Code Snippets на dsu-project.ru (output buffering).
|
||
|
||
### 1.2 WordPress 4.9.13 — критически устаревшая
|
||
|
||
**Проблема:** WP 4.9.13 (декабрь 2017), минимум 50+ известных уязвимостей. Readme.html доступен, раскрывает WP.
|
||
|
||
**Риск:** RCE, XSS, SQL injection.
|
||
|
||
**Исправление:** Обновить WordPress до 6.x (рискованно с кастомной темой) или заблокировать readme.html, скрыть WP-версию.
|
||
|
||
### 1.3 REST API полностью открыт (180 маршрутов)
|
||
|
||
**Проблема:** `/wp-json/` раскрывает 180 маршрутов, 5 namespaces, имена пользователей (admin, iqnadm01).
|
||
|
||
**Исправление:** Ограничить REST API аналогично dsu-project.ru (Code Snippet #10).
|
||
|
||
### 1.4 Отсутствуют все security-заголовки
|
||
|
||
| Заголовок | Статус |
|
||
|-----------|--------|
|
||
| Content-Security-Policy | MISSING |
|
||
| X-Frame-Options | MISSING |
|
||
| X-Content-Type-Options | MISSING |
|
||
| Referrer-Policy | MISSING |
|
||
| Permissions-Policy | MISSING |
|
||
| X-XSS-Protection | MISSING |
|
||
|
||
**Присутствуют:** HSTS (max-age=31536000), Server: nginx.
|
||
|
||
**Исправление:** Добавить через Code Snippets (аналогично dsu-project.ru).
|
||
|
||
### 1.5 HTTP mixed content
|
||
|
||
**Проблема:** 3 ссылки с `http://www.iqon.com/` на HTTPS-сайте:
|
||
- `http://www.iqon.com/hows-business/` (header image link)
|
||
- `http://www.iqon.com/wp-content/uploads/2012/05/homepage.png` (hero image)
|
||
- `http://www.iqon.com/wp-content/uploads/2012/05/imagine-text-home.png` (og:image)
|
||
|
||
**Исправление:** Заменить через output buffering или прямое исправление в БД.
|
||
|
||
---
|
||
|
||
## 2. SEO проблемы
|
||
|
||
### 2.1 Критические SEO ошибки
|
||
|
||
| Проблема | Детали |
|
||
|----------|--------|
|
||
| **Нет viewport meta** | Сайт не адаптивный для Google Mobile-First |
|
||
| **og:image использует HTTP** | `http://www.iqon.com/wp-content/uploads/2012/05/imagine-text-home.png` |
|
||
| **og:site_name = "- IQON"** | Дефис перед названием — ошибка |
|
||
| **Кириллические URL-encoded страницы** | 29 страниц типа `/%d1%83%d1%81%d0%bb%d1%83%d0%b3%d0%b8-.../` |
|
||
| **Дубли страниц в sitemap** | `/contact/` ×2, `/homepage/` ×3, `/industry-specific-services/` ×2 |
|
||
| **Контент не обновлялся с 2013** | `article:modified_time` = 2013-07-25 |
|
||
| **H1 = статья, не заголовок страницы** | H1 содержит ссылку на case study вместо заголовка сайта |
|
||
|
||
### 2.2 Отсутствующие мета-данные
|
||
|
||
- Нет `<title>` отличного от "How's business?" (слишком общий, без бренда)
|
||
- Нет `<link rel="icon">` (favicon)
|
||
- Нет Twitter Card тегов
|
||
- Нет canonical на внутренних страницах (не проверено, но Yoast должен добавить)
|
||
|
||
### 2.3 Изображения без alt
|
||
|
||
| Изображение | alt |
|
||
|-------------|-----|
|
||
| `homepage.png` (hero) | ОТСУТСТВУЕТ |
|
||
| `Poza_website_CaseStudy-208x142.jpg` | ОТСУТВУЕТ |
|
||
| `logo.png` | "– IQON" (декодируется как `– IQON`, с дефисом) |
|
||
| `logo-footer.png` | "– IQON" (тот же дефис) |
|
||
|
||
---
|
||
|
||
## 3. Дизайн-аудит vs Open Design
|
||
|
||
### 3.1 Текущий дизайн iqon.com
|
||
|
||
| Параметр | Значение |
|
||
|----------|----------|
|
||
| **Ширина** | 960px фиксированная |
|
||
| **Шрифты** | HelveticaNeueLTPro (2 веса: 35 Thin, 45 Light) + Arial |
|
||
| **Формат шрифтов** | EOT + WOFF + TTF (2012, нет WOFF2) |
|
||
| **Акцентный цвет** | `#fbc100` (жёлтый) — меню, линии, кнопки |
|
||
| **Текстовый цвет** | `#4c4c4c` (серый) |
|
||
| **Заголовки** | `#000000` (чёрный) |
|
||
| **Фон** | Белый, нет CSS-переменных |
|
||
| **Дизайн-система** | Нет — произвольные размеры (12/15/16/18/20/23/32px) |
|
||
| **Сетка** | Нет — position: absolute, float |
|
||
| **Адаптивность** | Нет — 0 media queries |
|
||
| **Семантика** | Нет — div-based layout, нет nav/main/section/footer |
|
||
|
||
### 3.2 Сравнение с Corporate (Open Design)
|
||
|
||
| Аспект | iqon.com | Corporate |
|
||
|--------|----------|-----------|
|
||
| **Primary color** | `#fbc100` (одиночный акцент) | `#3B82F6` (primary) + `#8B5CF6` (secondary) |
|
||
| **Typography scale** | Произвольная (12/15/16/18/20/23/32) | Модульная (12/14/16/20/24/32) |
|
||
| **Spacing** | Нет системы (3/5/10/15/20/27/30/35/40px) | 8pt grid |
|
||
| **Layout** | position:absolute + float | Grid + Flexbox |
|
||
| **Font weights** | 2 (thin + light) | 5 (400-800) |
|
||
| **Border radius** | 0 (прямые углы) | Consistent (8/12/20px) |
|
||
| **Responsive** | Нет | Mobile-first |
|
||
| **Semantic HTML** | Нет (div#header, div#menu) | HTML5 semantic |
|
||
|
||
### 3.3 Сравнение с Clean (Open Design)
|
||
|
||
| Аспект | iqon.com | Clean |
|
||
|--------|----------|-----------|
|
||
| **Visual style** | Corporate 2012 | Minimal, whitespace-driven |
|
||
| **Color palette** | 1 акцент + серый текст | Primary + neutral system |
|
||
| **Layout** | Fixed 960px | Fluid + responsive |
|
||
| **Animation** | Нет | CSS transitions 150-250ms |
|
||
| **Accessibility** | Нет focus ring, нет skip link | WCAG compliance built-in |
|
||
|
||
---
|
||
|
||
## 4. new_redesign — существующий прототип
|
||
|
||
В `~/development/iqon/new_redesign/` есть уже разработанный прототип редизайна:
|
||
|
||
### 4.1 Дизайн-система прототипа
|
||
|
||
| Параметр | Значение |
|
||
|----------|----------|
|
||
| **Фон** | `#09090b` (тёмный) |
|
||
| **Акцент** | `#ffd000` (жёлтый, как у оригинала) |
|
||
| **Surface** | `#18181b` |
|
||
| **Шрифты** | Space Grotesk (4 веса) + Sora (5 весов) |
|
||
| **Radius** | 8/12/20px |
|
||
| **Transitions** | cubic-bezier с spring-эффектами |
|
||
| **Viewport** | `<meta name="viewport">` — адаптивный |
|
||
| **Semantic HTML** | `<header>`, `<nav>`, `<main>` — да |
|
||
| **SVG логотип** | Да, с градиентом |
|
||
| **Backdrop filter** | `blur(20px)` на topbar |
|
||
| **Grid** | CSS Grid для навигации и layout |
|
||
|
||
**Проблема:** Прототип использует тёмную тему (`#09090b` фон), что кардинально отличается от оригинального белого дизайна iqon.com. Тёмная тема подходит для tech/startup, но может не соответствовать корпоративному IT-консалтингу.
|
||
|
||
### 4.2 Светлый вариант (styles.css в корне)
|
||
|
||
Есть альтернативный `styles.css` в корне `~/development/iqon/` с светлой палитрой:
|
||
- `--bg: #f1f1ef`
|
||
- `--surface: #ffffff`
|
||
- `--ink: #0a0a0a`
|
||
- `--accent: #ffd000` (жёлтый, сохранён)
|
||
|
||
---
|
||
|
||
## 5. Нерешённые технические проблемы (из предыдущей сессии)
|
||
|
||
| # | Проблема | Статус |
|
||
|---|----------|--------|
|
||
| C1 | `$binary{0}` PHP 8 fatal | Исправлен (→ `$binary[0]`) |
|
||
| C2 | `$_GET["page"]` undefined | Исправлен (→ `$_GET["page"] ?? 1`) |
|
||
| C3 | PHP warnings в category.php | Исправлен (error_reporting) |
|
||
| C4 | jQuery 1.7.2 + UI 1.8.18 XSS | Обновлено до 3.7.1 + 1.13.2 |
|
||
| C5 | Мёртвый GA-UA (UA-42729516) | Файл очищен |
|
||
| — | WordPress 4.9.13 устаревшая | Не исправлено |
|
||
| — | REST API 180 маршрутов открыт | Не исправлено |
|
||
| — | Нет security-заголовков | Не исправлено |
|
||
| — | Нет viewport meta | Не исправлено |
|
||
| — | HTTP mixed content | Не исправлено |
|
||
| — | CAPTCHA jquery.realperson.min.js может сломаться | Не проверено |
|
||
|
||
---
|
||
|
||
## 6. План изменений
|
||
|
||
### Фаза 1: Критические исправления (1-2 часа, через Code Snippets)
|
||
|
||
Через Code Snippets на dsu-project.ru (оба сайта на одном аккаунте u0012812).
|
||
|
||
| # | Исправление | Метод |
|
||
|---|-------------|-------|
|
||
| 1 | Viewport meta `<meta name="viewport" content="width=device-width, initial-scale=1.0">` | Output buffering |
|
||
| 2 | REST API ограничение (требовать авторизацию, кроме oembed/yoast) | `rest_authentication_errors` filter |
|
||
| 3 | Security-заголовки (CSP, X-Frame-Options, X-Content-Type-Options, Referrer-Policy, Permissions-Policy) | `send_headers` action |
|
||
| 4 | HTTP→HTTPS замена всех ссылок | Output buffering |
|
||
| 5 | Удалить WP generator meta + заблокировать readme.html | `the_generator` filter + redirect |
|
||
| 6 | Alt тексты для 4 изображений | Output buffering |
|
||
| 7 | Skip link после `<body>` | Output buffering |
|
||
| 8 | Focus-visible CSS | `wp_head` action |
|
||
| 9 | xmlrpc.php заблокировать | `xmlrpc_enabled` filter |
|
||
| 10 | Исправить og:site_name (убрать дефис) | Yoast filter |
|
||
| 11 | Исправить title (добавить "| IQON") | Yoast filter |
|
||
|
||
### Фаза 2: SEO исправления (2-3 часа)
|
||
|
||
| # | Исправление | Метод |
|
||
|---|-------------|-------|
|
||
| 12 | Убрать дубли страниц из sitemap (contact/ ×2, homepage/ ×3) | Yoast SEO settings |
|
||
| 13 | 29 кириллических URL-encoded страниц → noindex или 301 | Yoast SEO / update_post_meta |
|
||
| 14 | H1 на главной — заменить на заголовок сайта, не статью | Output buffering |
|
||
| 15 | Добавить og:image с HTTPS URL | Yoast filter |
|
||
| 16 | Favicon если отсутствует | wp_head |
|
||
|
||
### Фаза 3: Редизайн (выбор стратегии)
|
||
|
||
**Вариант А: Деплой new_redesign (1-2 дня)**
|
||
- Заменить тему iqon на статический HTML из `new_redesign/`
|
||
- Выбрать светлую палитру (styles.css в корне) или тёмную (new_redesign/)
|
||
- Сохранить структуру URL и SEO-мета через 301 редиректы
|
||
- WordPress → статический HTML + Cloudflare/CDN
|
||
|
||
**Вариант Б: WordPress тема на основе new_redesign (1-2 недели)**
|
||
- Конвертировать new_redesign в WordPress тему
|
||
- Сохранить текущий контент и URL-структуру
|
||
- CSS custom properties для теминга
|
||
- Миграция контента из 2012-го формата
|
||
|
||
**Вариант В: Косметический ремонт текущего сайта (3-5 часов)**
|
||
- Добавить viewport meta и media queries
|
||
- Унифицировать цвета через CSS custom properties
|
||
- Заменить @font-face на WOFF2 + system font stack
|
||
- Добавить семантические HTML5 теги (nav, main, footer)
|
||
|
||
### Рекомендация для iqon.com
|
||
|
||
IQON — международная IT-консалтинговая компания. Сайт не обновлялся 13 лет. Контент устарел (последнее обновление 2013). Наиболее целесообразный вариант:
|
||
|
||
**Вариант А (деплой new_redesign)** — если контент будет переписан.
|
||
**Вариант В (косметический ремонт)** — если нужно быстро «оживить» текущий сайт.
|
||
|
||
Вариант Б (WP тема) не рекомендуется — контент всё равно требует обновления, а WP 4.9.13 — критический риск безопасности.
|
||
|
||
---
|
||
|
||
## 7. Референс: дизайн-системы
|
||
|
||
Из Open Design для iqon.com (B2B IT-консалтинг):
|
||
|
||
| Система | Категория | Рекомендация |
|
||
|---------|-----------|--------------|
|
||
| **Corporate** | Professional | Оптимальна для iqon.com — enterprise, структурированный |
|
||
| **Clean** | Minimal | Второй вариант — чистый, минималистичный |
|
||
| **Bold** | Bold | Если нужен яркий бренд — primary `#0077BC` близок к IQON жёлтому по контрасту |
|
||
|
||
**Текущий акцентный цвет `#fbc100` (жёлтый)** — сохранён в new_redesign как `#ffd000`. Corporate и Clean используют `#3B82F6` (синий), что типичнее для IT-консалтинга. Но жёлтый — часть бренда IQON с 2012 года.
|
||
|
||
---
|
||
|
||
*Updated: 18 May 2026* |