Сравнительный анализ дизайна сайтов

1. ДИЗАЙН-МОДЕЛЬ

Рассматриваемый сайт: https://mel.fm/ («Мел»)
  • интернет-издание об образовании и воспитании детей; существует с 2015 года)
mel.fm – медиа, которое сфокусировано в первую очередь на темах воспитания детей, дошкольном и школьном образовании, но также публикует материалы о вузах и дополнительном образовании.
  • Дизайн-модель «Мела» можно охарактеризовать как смешанную с доминированием Flat-дизайна и элементами Material (Design). В основе лежит минималистичный подход с умеренным использованием теней, градиентов и динамических эффектов для создания глубины и интерактивности сайта. Это, в свою очередь, является признаком адаптации принципов Material.

Рассматриваемый сайт: https://daily.afisha.ru/ («Афиша Daily»)
  • российское интернет-издание, а в прошлом – журнал о городских событиях и сфере развлечений; выросло из журнала «Афиша» 
Afisha Daily – медиа, которое ориентировано на культуру, развлечения, городскую жизнь и события.
  • Дизайн-модель «Афиши Daily» – это яркий пример смешанного подхода, где доминирует «Editorial Design» (редакционный дизайн) с использованием дизайн-модели Brutalist, построенной на технической базе Flat-дизайна. Думаю, такой выбор обусловлен тем, чтобы создать модный, дерзкий, «не как у всех» визуал.
                                                                                          2. элементы
«Мел»
1) Плоская навигация и кнопки: например, кнопки «Все новости, «Больше статей» – это простые прямоугольные (либо полуовальные) формы без рельефа, скосов или явных 3D-эффектов (классический Flat)строгая модульная сетка, обилие «воздуха».

2) Яркие сплошные цвета: Использование #00b88a и других цветов в виде сплошных заливок без градиентов

3) Четкая, лаконичная типографика: Геометрические шрифты без засечек (Open Sans, Roboto), которые отлично читаются на экране.

4) Минимализм и сетка: четкая модульная сетка, обилие белого пространства, акцент на контент. Нет визуального шума, текст и изображения – главные элементы.
   


5) Элементы Material: карточки статей в каждой из рубрик имеют единообразные закругленные углы и небольшую мягкую тень при наведении курсора. Это принцип «цифровой бумаги» из Material.


«Афиша Daily»
  • Моноширинный шрифт (похожий на Courier New) для заголовков статей, дат, тегов. Он выглядит будто намеренно «грубым», имеет цифровой вид.
  • Использование «сырых» HTML-элементов: простые подчеркивания ссылок.
  • Эксперименты с типографикой: крупные, почти плакатные заголовки, некая игра с кеглем и начертанием.

  • Смелые цветовые акценты (зеленый – ближе к салатовому, голубой – ближе к фиолетовому) на нейтральном (в основном белом) фоне.

  • Flat-основа: Несмотря на сложность, кнопки и карточки в основе плоские, без рельефа, скосов или явных 3D-эффектов.

                                                                                   3. ИЗБЫТОЧНОСТЬ
«Мел»
На сайте «Мела» я не увидела избыточных элементов, или неудачно используемых компонентов других дизайн-моделей.
  • На нем отсутствую сложные фоновые градиенты, декоративные графические элементы (например, волнистые линии, неровные пятна и т.д.), не несущие функциональной нагрузки. Также не нарушена сетка сайта.
«Афиша Daily»

На мой взгляд, на сайте слишком плотная, «забитая» верстка (особенно на главной странице). Из-за желания уместить максимум контента в сложную сетку возникает «визуальная каша»Здесь же можно отметить отсутствие четкого визуального разделения карточек новостей, что создает тот же визуальный шум. Также некоторые цветовые сочетания в некоторых статьях или баннерах кажутся не уместны (даже больше не сочетающимися друг с другом).

                                                      4. ПРЕИМУЩЕСТВА, НЕДОСТАТКИ, КОРРЕКТИВЫ
«Мел»

Главное преимущество – безупречная читаемость и предсказуемость.

Дизайн не отвлекает от контента, что идеально для образовательного медиа. Навигация интуитивна. Сайт выполняет свою главную задачу – доносить сложный текстовый контент простым языком. Пользователь не тратит время на понимание интерфейса и все находит интуитивно.

Главный недостаток – некоторый шаблонный вид.

Дизайн настолько следует трендам доминирующего дизайна Flat, что становится шаблонным. Дизайн настолько универсален и соответствует трендам, что теряет яркую индивидуальность, некий «характер». Цветовая палитра также ограничена.

Коррективы

Думаю, «Мелу» можно было бы поработать над микро-анимацией и интерактивом. В рамках Material можно добавить больше анимации: например, плавное раскрытие меню, более выразительная обратная связь при клике, анимированные переходы между разделами и т.д. Это добавит некой современности сайту.

«Афиша Daily»

Главное преимущество – сильная запоминаемость и брендинг.

Сайт мгновенно идентифицируется как «Афиша Daily». Можно сказать, что он отражает дух издания – гибрид новостей, культуры и стиля жизни.

Главный недостаток – чрезмерное юзабилити.

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

Коррективы

Основным коррективом, думаю, должно стать уменьшение визуального шума.  Обязательно ввести больше «воздуха» между разнородными блоками на главной странице. То есть создать более четкие визуальные разделители или фон для групп контента.
                                                                                        5. Вывод

С точки зрения удобства пользователя безусловно лучше дизайн-модель у «Мела». Она современна, предсказуема, соответствует ожиданиям большинства читателей и идеально выполняет свою функцию – доносить контент.

Однако с точки зрения выразительности, брендинга и эмоционального воздействия более интересной и смелой является дизайн-модель «Афиши Daily». Она создает особую (уникальную для своего издания) атмосферу и выделяет его среди сотен других.

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

  • Если нужна эффективность и удобство, побеждает «Мел». Если уникальность – «Афиши Daily» (несмотря на некоторые спорные моменты в визуале). 




Комментарии

Популярные сообщения из этого блога

АУДИТОРИЯ СМИ