Жилина Анастасия ФЖЗ - 401Креативное письмо, дизайн и верстка печатных и сетевых СМИ. Экзаменационное задание №1. Сравнительный анализ дизайна сайтов

 Для работы были выбраны данные сайты: 

https://klops.ru/  и   https://gorodvo.ru/

1. Охарактеризуйте его дизайн-модель в целом. К чему она относится: flat, material, 3D или морфизм-дизайну? Если сайт использует смешанную модель, укажите из чего она состоит и что доминирует?

Проанализировав сайт https://klops.ru/, я пришла к выводу, что в целом его дизайн можно охарактеризовать как плоский (flat-дизайн), но он не является строгим и использует некоторые элементы других стилей для лучшей функциональности

Минимализм и простота: Элементы интерфейса (кнопки, меню, разделители) представлены простыми геометрическими фигурами без объёма, градиентов или сложных текстур.

Чёткие границы: Контент организован в прямоугольные блоки с чёткими краями, что создаёт структурированный и «сетчатый» вид.

Иконки и типографика: Акцент сделан на функциональную типографику (заголовки, текст) и простые, понятные иконки.

Несмотря на доминирование flat-подхода, сайт использует приёмы из других моделей для улучшения взаимодействия:

Отголоски Material Design: В некоторых интерактивных элементах можно заметить едва уловимые тени или изменение цвета при наведении, что добавляет лёгкую визуальную обратную связь пользователю. Это характерно для принципов Material Design, хотя и реализовано очень сдержанно.

Отсутствие 3D и скевоморфизма: На сайте нет объёмных, трёхмерных объектов, а также нет элементов, которые имитируют реальные текстуры (дерево, кожа, стекло), характерные для скевоморфизма.

Дизайн-модель https://gorodvo.ru/  — это строгий и радикальный плоский дизайн (Flat Design) с элементами минимализма и карточного стиля (Card-based).

Он относится к Flat-дизайну, Сайт сознательно избегает любых признаков Material Design (теней, анимаций, тактильности), 3D-эффектов и, тем более, скевоморфизма.

Это не смешанная модель, а целенаправленная реализация чистой flat-эстетики, где доминирует абсолютный приоритет текстового контента над любыми визуальными украшениями.

2.Докажите на примерах со скриншотами, что сайт относится к указанной вами модели. Какие элементы на это указывают?

https://klops.ru/, 

.Простые геометрические кнопки и блоки

Элементы интерфейса — это прямоугольники без теней, объемных границ или сложных форм.

На скриншоте видно:

·    Кнопки навигации (черные и белые прямоугольники).

·    Блоки с новостями (прямоугольники с изображениями и текстом).

·    Отсутствие объемных эффектов (теней, градиентов).

Четкая типографика и сетка

Основной акцент сделан на тексте. Контент организован в строгую сетку, что типично для новостных порталов в плоском стиле. 

На скриншоте видно:

·    Статьи выстроены в ровные колонки.

·     Заголовки выделены размером и насыщенностью, а не объемными эффектами.

·     Четкие разделители (линии) между блоками.

Иконки выполнены в линейном стиле (outline) или как простые символы без текстур и объемных деталей.

·     Иконки поиска, меню, социальных сетей — простые и понятные символы.

·     Отсутствие сложной графики, имитирующей реальные объекты

Элементы Material Design

      Микро-тени для визуальной иерархии

     Легкие тени используются для отделения интерактивных элементов (кнопок, карточек) от фона.

На скриншоте видно:

·    Блоки с датами или интерактивные элементы имеют едва заметную тень.

·    Это создает иллюзию «слоев» на странице, не добавляя лишней графики.

     Визуальная обратная связь при наведении

      При наведении курсора на кнопки или ссылки они меняют цвет, подтверждая свою интерактивность.

 

На скриншоте видно:

·        Кнопка «все материалы» меняет цвет при наведении.

·        Этот прием из Material Design улучшает юзабилити.

Что отсутствует (исключение других моделей)

·        Скевоморфизм: Нет элементов, имитирующих реальные объекты (дерево, кожу, стекло).

          Настоящий 3D: Отсутствуют объемные объекты, сложная графика с перспективой или реалистичные тени.

    https://gorodvo.ru/

Сайт демонстрирует характерные черты плоского дизайна через следующие элементы, которые я выявила, анализируя его структуру:

·        Полное отсутствие декоративных эффектов:

Нет теней, градиентов, свечений. Все элементы (кнопки меню, блоки новостей) лежат в одной плоскости.

·        Минималистичная и функциональная типографика:

o   Текст — главный и практически единственный инструмент дизайна. Заголовки, даты, рубрики формируют всю визуальную иерархию.

·        Простые геометрические формы и чёткая сетка (Grid):

o   Контент организован в вертикальную колонку (ленту) из прямоугольных блоков.

      

              Иконки в линейном (outline) стиле:

o   Иконки меню и социальных сетей выполнены как простые векторные контуры без заливки, детализации или имитации объема.

·        Ограниченная цветовая палитра:

o   Доминирует сочетание чёрного/тёмно-серого текста на белом фоне. Акцентный цвет (синий/голубой) используется минимально и только для интерактивных элементов (ссылки, активное меню).

      

3.Есть ли на сайте избыточные элементы или неудачно используемые компоненты других дизайн-моделей? Если да, то каких и в каких разделах?

https://klops.ru/, 

Да, на сайте присутствуют некоторые избыточные элементы и визуально неоднородные компоненты, которые нарушают строгость доминирующей flat-модели. Эти элементы выглядят как унаследованные от более старых версий дизайна или случайные вкрапления других стилей.

Вот основные проблемы, сгруппированные по типам:

1. Нарушения Flat-эстетики: «тяжёлые» визуальные элементы

Эти компоненты противоречат принципам минимализма и простоты плоского дизайна.

o   Использование ярких градиентов в нетипичных местах:

o   Проблема: Кнопки с резкими цветовыми градиентами выглядят визуально «тяжело» и датировано. В чистом flat-дизайне предпочтительны сплошные цвета.

·   Проблема: Вместо единообразных микро-теней Material Design, в шапке сайта (хедер) и некоторых баннерах используются резкие, «густые» тени. Это создаёт визуальный шум и диссонанс с лёгкой эстетикой остального сайта.

o   Раздел: Хедер, рекламные блоки.

2. Наследие устаревших моделей: элементы, напоминающие скевоморфизм

Хотя сайт не является скевоморфным, некоторые детали неосознанно имитируют физические объекты.

·        Слишком реалистичные иконки:

o   Проблема: Среди плоских иконок иногда встречаются более детализированные, с имитацией объема или текстуры (например, значок «печать» или «календарь» с рельефом). Это отсылает к эпохе скевоморфизма и нарушает стилистическое единство.

o   Раздел: Разделы услуг, редко используемые иконки в боковых меню.

3. Проблемы компоновки и избыточность

Эти недостатки не относятся к конкретной дизайн-модели, но ухудшают восприятие.

o   Избыточное меню вторичной навигации:

o   Проблема: Нижнее меню или боковая панель с дублирующимися или редко используемыми ссылками (например, «Карта сайта», «Архив»). В плоском дизайне, где ценится воздух и простота, это создаёт визуальный хаос.

·        Нагромождение разнородных стилей в одном блоке:

o   Проблема: В рамках одного виджета (например, «Популярное» или «Последние новости») могут соседствовать плоские кнопки, элементы с градиентом и компоненты с тенями. Это говорит об отсутствии единой системы дизайна (Design System).

o   Раздел: Боковые колонки, виджеты в середине страницы.

     https://gorodvo.ru/

Сайт настолько минималистичен, что в нём практически нет "избыточных" элементов в традиционном понимании. Однако его радикальный подход сам порождает недостатки, которые можно рассматривать как "неудачное" использование flat-модели:

·        Недостаточная визуальная сепарация контента (раздел "Лента новостей"):

o   Проблема: Из-за полного отказа от разделителей, фоновых блоков или даже минимальных отступов новостные блоки сливаются в сплошную текстовую стену. Это противоречит не только другим моделям, но и базовым принципам юзабилити внутри самого flat-дизайна, где "воздух" и четкие границы — ключевые инструменты.

o   Эффект: Усложняется сканирование и чтение, взгляду не за что зацепиться.

·        Слабая визуальная обратная связь для интерактивных элементов (меню, ссылки):

o   Проблема: Интерактивность многих элементов (например, пунктов меню) выражена только цветом. Часто отсутствуют даже изменение или изменение состояния при наведении Это делает интерфейс статичным и "некликабельным".

o   Эффект: Пользователь может не понять, что элемент интерактивен.

 

4.Что на ваш взгляд является главным преимуществом рассматриваемого вами сайта? А недостатком? Если бы вы вносили коррективы, то во что именно?

Главное преимущество и недостаток сайта https://klops.ru/, 

Главное преимущество: Функциональная эффективность и скорость восприятия

Основная сила в его высокой утилитарности. Сайт беспрекословно служит своей главной цели — быстро доставлять новости. Плоская сетка с чёткими блоками позволяет сканировать десятки заголовков за секунды, а минималистичный интерфейс не отвлекает от контента. Это идеальная «рабочая» модель для информационного портала, где ценность содержимого первична, а дизайн — это максимально нейтральный и быстрый проводник.

Главный недостаток: Отсутствие целостной дизайн-системы и визуальная усталость

Ключевая слабость — стилистическая неоднородность и наслоение разновременных элементов, как было показано ранее. Сайт выглядит не как цельный цифровой продукт, а как лоскутное полотно, собранное за годы обновлений. Это рождает два негативных эффекта:

Если бы я вносила коррективы, я бы сделала три ключевых изменения:

1.      Провела визуальную унификацию

o   Цвет: Заменила все градиенты на сплошные, насыщенные цвета из единой палитры. Использовала бы акцентный цвет только для действительно важных элементов (логотип, главные кнопки).

o   Тени: Ввела единую систему микро-теней

o   Иконки: Перерисовала все иконки в едином линейном или плоскостном стиле с одинаковой толщиной линий.

2.      Усилила типографическую иерархию и воздух:

o   Увеличила межстрочный интервал и отступы между новостными блоками. Это снизило бы плотность и облегчило чтение.

o   Чётче разделила заголовки разного порядка (главная новость, рубрика, обычная новость) не только размером, но, например, насыщенностью шрифта или цветом фона.

3.      Радикально сократила и упорядочила навигацию

o   Группировка ссылок по смысловым блокам (О нас, Реклама, Читателям) с понятными заголовками.

o   Удаление невостребованных технических ссылок или их перенос в отдельную страницу (например, «Карта сайта»)

.

       Главное преимущество, недостаток и коррективы https://gorodvo.ru/

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

·        Главный недостаток: Визуальная монотонность и высокий порог утомляемости. Дизайн не помогает в навигации, не создает иерархию, не направляет взгляд и не формирует эмоциональную связь или запоминающийся образ бренда.

·        Коррективы, которые я бы внесла (не нарушая flat-модели):

1.      Добавить тонкие разделители и увеличить отступы между новостными блоками. Это мгновенно улучшит читаемость.

2.      Усилила интерактивность

      Ввести правило для карточек категорий. Добавить для каждого блока новости слева небольшой цветной ярлык с названием рубрики, используя акцентный цвет. Это создаст структуру без сложной графики.

      5. Сделайте общий вывод - какой из сайтов лучше с точки зрения дизайн-модели и почему?

С точки зрения дизайн-модели лучшим является сайт https://klops.ru/, Хотя https://gorodvo.ru/ демонстрирует радикальную и догматичную версию плоского (flat) дизайна, его подход оказывается ущербным на практике. Чрезмерный минимализм привёл к созданию «текстовой стены», которая затрудняет навигацию, не обеспечивает визуальной иерархии и быстро утомляет пользователя. Эта модель служит примером того, как слепое следование принципу «контент — король» без учёта базовых принципов юзабилити и визуального комфорта приводит к созданию недружелюбного интерфейса.

Дизайн-модель https://klops.ru/, представляющая собой сбалансированный гибрид плоского дизайна и элементов Material Design, оказалась более продуманной и эффективной. Она сохраняет ключевые преимущества flat-подхода — скорость, простоту и чёткость сетки, но при этом обогащает его тактильными и навигационными подсказками. Лёгкие тени, интерактивные элементы и более сложная типографическая структура создают современную, удобную и понятную среду. Эта модель не просто доставляет информацию, но и управляет вниманием пользователя, делая процесс потребления контента более структурированным и менее утомительным.

Таким образом, https://klops.ru/  выигрывает  не технической чистотой модели, а её ориентацией на пользовательский опыт. В то время как https://gorodvo.ru/ остаётся аскетичным инструментом для узкой задачи быстрого чтения, https://klops.ru создаёт полноценную цифровую среду, которая выглядит современно, работает интуитивно и оставляет пространство для развития бренда. В дизайне конечная ценность определяется не строгостью следования канонам, а способностью модели решать реальные проблемы пользователя, и в этом https://klops.ru демонстрирует однозначное превосходство.