ЗАДАНИЕ №1. СРАВНИТЕЛЬНЫЙ АНАЛИЗ ДИЗАЙНА САЙТОВ

 

1. BBC News (bbc.com/news)

Дизайн-модель в целом: Чистый Flat Design (минимализм без имитации объёма). Никаких сильных теней, градиентов или 3D-эффектов. Всё строится на типографике, отступах и цветовых акцентах. Это классический современный flat с элементами editorial design.

Доказательства на примерах (что видно на скриншоте главной страницы):

• Карточки статей — простые прямоугольные блоки без бордеров и теней. Разделение происходит только за счёт белого пространства и разного веса шрифта (bold заголовки + лёгкий текст).
• Кнопки и ссылки («Sign In», «Subscribe», категории) — полностью плоские, без hover-теней или подъёма.
• Навигация в топбаре — простая горизонтальная линия с красным акцентом BBC, без объёмных элементов.
• Общий фон — белый/светло-серый, много воздуха, акцент только красный (#BB1919).

Эти элементы идеально соответствуют принципам flat design: максимальная простота, фокус на контенте, отличная читаемость.

Избыточные элементы или неудачные компоненты других моделей: Практически отсутствуют. Дизайн очень цельный. Единственное небольшое «нарушение» — иконки SVG в меню (гамбургер), но они минимальны и не нарушают стиль.

Главное преимущество: Идеальная читаемость и фокус на тексте. Сайт не отвлекает от новостей — именно то, что нужно СМИ. Отлично работает на всех устройствах, особенно на мобильных.

Недостаток: Может казаться слишком «скучным» или старомодным для молодой аудитории. Мало визуальной вовлечённости (нет ярких карточек с сильными изображениями).

Что бы я исправил: Добавил бы лёгкие hover-эффекты на карточки (например, subtle scale 1.02 + лёгкая тень) и чуть больше крупноплановых фото в топ-секциях, чтобы повысить вовлечённость, не нарушая flat-философию.

2. CNN (cnn.com)

Дизайн-модель в целом: Смешанная, доминирует Flat Design + заметные элементы Material Design. База — плоская и минималистичная, но карточки статей получают лёгкое «возвышение» (elevation) через мягкие тени, что типично для Material.

Доказательства на примерах (что видно на скриншоте главной страницы):

• Карточки статей в секциях «Happening Now», «More top stories» — имеют лёгкие тени и закруглённые углы → прямой отсыл к Material Design (Google Cards).
• Hero-блок и крупные фото-статьи используют глубину за счёт наложения текста на изображение + subtle shadow.
• Кнопки «Show all», «Read more» — в основном плоские, но иногда с лёгким подъёмом при hover.
• Grid-структура и модульные секции — очень material-подход (контейнеры с разной высотой).

Доминирует всё-таки flat (белый фон, минимализм), но Material-элементы добавляют современности и визуальной иерархии.

Избыточные элементы или неудачные компоненты:

• В коммерческих блоках («CNN Underscored» — товары) тени и карточки становятся более выраженными — возникает лёгкий стилевой разнобой с основными новостными карточками.
• Иногда тени выглядят чуть устаревшими (не самые мягкие, как в актуальном Material You), что создаёт ощущение «смеси 2018–2022 годов».

Главное преимущество: Отличная визуальная иерархия. Большое изображение + заголовок сразу цепляет внимание. Сайт выглядит современно и динамично, лучше удерживает внимание.

Недостаток: Меньше «воздуха», чем у BBC, из-за теней и плотной сетки. На мобильных иногда кажется чуть перегруженным.

Что бы я исправил: Унифицировал бы глубину теней по всему сайту (сделал бы их либо совсем плоскими, либо последовательно material). Убрал бы или сильно облегчил тени в рекламных/коммерческих блоках, чтобы стиль был цельным.

Общий вывод

С точки зрения чистоты и последовательности дизайн-модели лучше BBC News. Они выбрали одну модель (чистый Flat) и довели её до совершенства. Это делает сайт timeless, максимально читаемым и профессиональным. Для новостного СМИ это критически важно — контент на первом месте, дизайн не мешает.

CNN выглядит современнее и динамичнее благодаря material-элементам, но проигрывает в цельности. Смешение flat + material делает его чуть менее «чистым» с академической точки зрения.