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

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

Проанализировав сайт РБК (https://www.rbc.ru) я могу сказать, что дизайн сайта относится к плоскому (flat-дизайн). Это классический пример оформления новостного СМИ. Сайт упрощенный и отсекает «лишнюю» информацию. Все разделы четко разделены на блоки (внутри которых есть еще вкладки, которые помогают пользователю быстро найти нужный раздел или информацию). В оформлении сайта также используются плоские блоки, линии и геометрические формы (кнопки, меню, разделители). Ключевым элементом становится сетка, построенная на основе логотипа. Она служит не объемным украшением, а скорее, фирменным брендом информагентства. 

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

 

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

 

Следует отметить, что на сайте отсутствуют 3D элементы (любые объемные элементы, сложные градиенты и глубокие тени, имитирующие многослойность объектов и т.д.). В целом дизайн сайта минималистичный, функциональный и основанный на типографике.

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

 

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

 

Также есть элементы Material Design. Он прослеживается в визуальном плане, в карточках, это уделяет внимание не рубрикам, а материалам на сайте.

 

Использование сетки для организации контента на главной странице и в разделах соответствует принципам построения макетов в Material Design, делая интерфейс структурированным.

 

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

 

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

 

В РБК упрощенная палитра и отказ от градиентов

 

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

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

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

 

Есть «воздух» то есть свободное пространство в ленте и белый фон, что улучшает восприятие контента.

 

Есть двумерность элементов и модульная сетка. Поэтому в РБК гибкая и простая система расположения элементов. Отсутствуют объемные элементы (тени, градиенты, текстуры). Сетка плоская, графическая, а не объемная. 

построенная на основе логотипа, стала фирменным паттерном и метафорой информационного "каркаса". Она структурирует контент, но остается плоским, графическим, а не объемным элементом.

 

Сайт Аргументы и факты демонстрирует характерные черты смешанного дизайна с элементами flat-дизайна через следующие элементы:

 

Статьи, интервью и репортажи на первом плане.

 

Текст становится главным инструментом навигации по сайту и иерархии.

 

Плоские элементы, в отличие от тяжелой 3D-графики, значительно ускоряют загрузку страниц, что относится к flat дизайну.

 

Есть отсылка к «плиточному дизайну», это может быть отсылка к Material Design, который стремиться организовать контент по четкой, простой структуре, что улучшает навигацию. Следовательно, это характерная черта плоского дизайна.

 

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

Крупные заголовки, структурированная подача материалов, обилие визуального контента -  все это напоминает верстку газеты или журнала.

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

 

На сайте РБК практически отсутствуют избыточные элементы или неудачно используемые компоненты других дизайн-моделей. Проблема сайта здесь заключается не в смешении дизайн-стилей, а в конфликте между плоским дизайном и рекламой. Плоский дизайн предполагает минимализм, чистоту, фокус на контенте и отсутствие отвлекающих факторов.  Следовательно, анимированная и обильная реклама создает ровно противоположный эффект: визуальный шум, перегруженность, что отвлекает от чтения.

 

На сайте Аргументы и факты больше навязчивых всплывающих окон с подпиской на новости или рекламой, которые появляются сразу при заходе на сайт или перекрывают контент во время чтения. Также избыток рекламных баннеров, виджетов и прочих элементов. 

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

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

 

Главное преимущество РБК - это целостность и последовательность его дизайн-стратегии, подчиненная одной цели: сделать дизайн «незаметным продолжением продукта». 

 

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

 

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

 

Главное преимуществом сайта Аргументы и факты я считаю больше содержательную часть и разнообразие контента, который охватывает все сферы жизни. Удобное мобильное приложение, которое также упрощает навигацию по контенту (настройку главной страницы, добавление в избранное, офлайн-доступ и мини-сюжеты).

 

Главный недостаток: проблемы с юзабилити и адаптацией дизайна под современные устройства, а также устаревший подход к визуальной иерархии.

 

Например, в приложении мелкий и тонкий шрифт на главной странице и в списке новостей, который невозможно настроить. Это делает чтение некомфортным даже для людей с хорошим зрением. Также отмечается неудачная структура главного экрана для смартфонов по сравнению с конкурентами РБК. Навигация и визуальная иерархия на сайте отличаются от общепринятых стандартов новостных сайтов, это вызывает когнитивную нагрузку и дискомфорт.

 

Также есть конфликт дизайн-моделей так как сайт использует смешанную модель. Однако элементы журнальной верстки, перенесенные в веб без должной адаптации, могут вступать в конфликт с принципами плоского дизайна и Material Design, создавая визуальный шум и нарушая иерархию акцентов.

Коррективы, которые я бы внесла:

 

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

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

 

С точки зрения дизайн модели лучшим является сайт РБК. Это продуманный сайт с последовательным и плоским дизайном. Например, РБК удалось создать единый визуальный язык для сайта, газеты, журнала и других коммуникаций. Все продукты теперь объединены в одном «смысловом поле». Каждый элемент имеет функциональное назначение. Универсальный шрифт обеспечивает отличную читаемость и более менее одинаковое восприятие любой аудиторией. Следовательно, форматы подачи информации разработаны так, чтобы экономить время пользователя, а не наоборот.

 

В этом соотношении сайт Аргументы и Факты «уступает», так как здесь нет  целостной и современной дизайн-стратегии. Его дизайн-модель можно охарактеризовать как смешанную и несколько устаревшую, где элементы журнальной верстки вступают в конфликт с современными стандартами юзабилити. Помимо этого, дизайн сайта заставляет пользователя задумываться о навигации, вместо того, чтобы интуитивно вести его к контенту. Элементы журнальной верстки, перенесенные в веб без должной адаптации, создают визуальный шум и нарушают иерархию акцентов. РБК выигрывает за счет того, что его дизайн помогает читать и воспринимать информацию, в то время как дизайн Аргументы и факты этому мешает.