КРЕАТИВНОЕ ПИСЬМО, ВЕРСТКА И ВЕБ-ДИЗАЙН

 Модель верстки сайта

1. ГРАФИЧЕСКИЙ ИНТЕРФЕЙС

Рассматриваемый сайт: https://cheltoday.ru/ (сетевое издание «ЧЕЛЯБИНСКСЕГОДНЯ»)

cheltoday.ru – портал с новостями, репортажами и статьями на различные темы.

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

• Сайт использует приятные цвета, которые сочетаются между собой – это делает его визуально привлекательным (основные: черный, белый, акцентный: синий + его оттенки). Нет перегруза цветовой палитры. На сайте хорошо структурировано меню: основные разделы легко доступны. Это позволяет быстро находить статьи на интересующие темы.

• Используемые шрифты легко читаемы, что также важно для новостного сайта. Размеры шрифтов разные, что помогает выделять важные заголовки и подтемы. 
• Присутствует акцент на визуальные элементы: на сайте достаточно яркие и привлекающие внимание изображения.

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

2. МОДЕЛЬ ВЕРСТКИ

На сайте используется рандомизированная модель верстки, в которой сочетаются элементы как симметричной, так и рваной моделей.

Симметричность проявляется практически везде:

• повторяемость блоков – однотипные карточки статей (изображение + заголовок + краткий текст) выстроены в упорядоченные ряды;
• адаптивность – при сужении экрана колонки перестраиваются, но сохраняют симметрию (главный контент – по центру, второстепенный – сверху/снизу);
• меню сайта: блоки «НОВОСТИ», «ПОЛИТИКА» и т.д. выровнены по горизонтали, создается некий строгий верхний край + стандартно симметричен подвал сайта.

При этом, главная страница и ее центральный контент содержат элементы рваной верстки: колонки несимметричны (одни блоки шире, другие уже, одни короче, другие длиннее)

• Однако этой рваности не так много (если не брать в счет главную страницу, то можно отнести модель верстки сайта к симметричной). Поэтому все-таки я бы охарактеризовала верстку как симметричную сетку с элементами «рваной» композиции. Нет полного хаоса: блоки всё равно выстраиваются в условные "столбцы", Сохраняется логическая иерархия (главные новости – выше, второстепенные – ниже). Но, при этом, это не чистая симметрия, как, например, у «РИА Новости» (все карточки одинакового размера).

3. КОЛОНОЧНЫЙ МАКЕТ. ЭКРАННАЯ АНИМАЦИЯ

На сайте использован колоночный макет Grid Layout. Такой вывод можно сделать по характерным словам при анализе кода страницы:

Экранная анимация есть, но очень минимальная и сдержанная.

• Присутствует микроанимация при наведении на кнопки меню – блоки меняют цвет при наведении через transition:

• Ссылки в статьях или заголовки имеют подчёркивание при наведение на них через hover:

Можно сказать, что на сайте почти нулевая и примитивная анимация при скролле/загрузке контента, нет каких-либо сложных элементов.

4. ТИПОГРАФИКА САЙТА

Вероятно, на сайте используется шрифт Roboto Bold (без засечек, насыщенный).

1. Заголовки. Шрифт: Roboto Bold, цвет: темно-серый/черный (#333 или #000), размер: крупный (от 24px до 32px).
2. Основной текст новостей. Шрифт: Roboto Regulars, цвет: серый (#555), размер: средний (16px–18px).
3. Второстепенный текст (даты, подписи). Шрифт: тот же, что и в основном тексте, но светлее (#777), размер: меньше (14px).
4. Отдельные элементы (рядом с датами): цвет синий (#1E50A0)

• Шрифт достаточно удобен с точки зрения хорошей читаемости (без засечек), также он корректно отображается на мобильных устройствах. При этом, нет како-то уникального стиля, но для данного сайта, как мне кажется, это и не нужно. Использование именно этого шрифта типично для новостных ресурсов, где важна функциональность, а не дизайн.
  5. ЮЗАБИЛИТИ САЙТА

Верстка cheltoday.ru функциональна, но не идеальна. 

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

Из плюсов на сайте есть: 

• интуитивная навигация (четкое разделение на рубрики в меню сайта);
• логичная структура (главные новости – вверху, второстепенные – ниже);
• адаптивный дизайн (перестроение в одну колонку);
• нет критичных ошибок вёрстки (например, в виде наезжающих друг на друга блоков)
• хотелось бы также выделить минимализм и отсутствие агрессивной рекламы или анимаций, которые мешают чтению (есть всплывающее окно с рекламой справа, но его размеры не так критичны) / есть акцент на текстовом контенте, а не на «украшениях».

Минусы также наблюдаются.

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

2) Отсутствие интерактивности: ссылки и кнопки реагируют только на наведение (hover, о котором было сказано ранее), но не на нажатие (нет визуальной обратной связи при скролле или фильтрации контента.

• В целом сайт выглядит как типичный «шаблонный» региональный СМИ – без фирменного стиля или запоминающихся элементов. Однако, при всем этом, он не содержит визуального мусора, имеет строгую и приятную цветовую палитру. К тому же, тексты лаконичны, без «воды». Если бы нужно было оценить верстку данного сайта по 10-бальной шкале, то, по моему мнению, это была бы твердая 7.