КРЕАТИВНОЕ ПИСЬМО, ВЕРСТКА И ВЕБ-ДИЗАЙН. ЭКЗАМЕНАЦИОННОЕ ЗАДАНИЕ №1. МОДЕЛЬ ВЕРСТКИ САЙТА

1. Общая оценка графического интерфейса:

Графический интерфейс сайта 74.ru удачный и современный. Он соответствует ожиданиям пользователя от новостного портала.

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

Минимализм: Нет ощущения «визуального шума». Используется много свободного пространства, блоки не налезают друг на друга, что соответствует современным принципам.

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

Интерфейс функционален, не перегружен и интуитивно понятен. Дизайн не отвлекает от контента, что идеально для СМИ.

2. Тип верстки

Рандомизированная верстка

Сайт не является строго симметричным (где левая и правая части зеркальны), но и не хаотично-рваным.

1.Симметричная структура: Основной каркас (хедер, основная колонка с новостями, сайдбар, футер) симметричен относительно центральной оси.

2.Рваные элементы внутри сетки: Внутри основного контент-блока элементы имеют разную высоту. Одна новость может быть с большим фото, другая — без фото, третья — с видео. Ширина карточек новостей строго фиксирована сеткой симметрия, но их наполнение и высота «рваные».

3. Колоночный макет и анимация:

Bootstrap

При анализе кода страницы были найдены классы «col-sm», «col-md», «col-lg».

Анализ: Сайт построен на 12-колоночной сетке Bootstrap.

Классы: «.container» и «.row» задают обертку и ряды.

Классы: «.col-md-8» и «.col-md-4» говорят о том, что на средних экранах контент занимает 8 колонок (66.6%), а сайдбар — 4 колонки (33.3%).

Классы: «visible-md-block»/ «hidden-xs» используются для контроля отображения блоков на мобильных устройствах.

Экранной анимации нет

Поиск по коду слова «@keyframes»не выявил ключевых кадров анимации на главной странице.

Сайт статичен с точки зрения анимации. Это осознанное дизайн-решение, так как фоновая анимация слоев или движущиеся элементы мешали бы чтению новостей. Сайт использует «display animation» только для микровзаимодействий, например, изменение цвета кнопки при наведении, что делается через «transition», а не «@keyframes»

4. Типографика

Тип шрифта: Гротеск (Рубленый шрифт без засечек).

Конкретный шрифт: Судя по стилям, используется «Roboto» или его системные аналоги (Inter, Arial, Helvetica).

Удобство:

Roboto имеет «открытый» рисунок, большие буквы и хорошую читаемость даже на маленьком кегле. Заголовки новостей (обычно «bold» или «black») четко отделены от основного текста описания («regular» или «light»).

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

5. Юзабилити (UX) и общее впечатление

Верстка сайта СМИ  удачная и напрямую влияет на восприятие информации положительно.

Анализ по принципам UX:

1.Принцип «Не заставляйте думать»: Выполняется идеально. Новости четко разделены, заголовки дают полное представление о сути. Пользователь не гадает, куда нажать.

3.Принцип 3 кликов: Любая статья находится максимум в 2 кликах (клик по разделу, далее клик по новости).

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

5.Кошелек Миллера: Лента новостей разбита на логические блоки, реклама отделена визуально от редакционного контента, что не перегружает кратковременную память.

Влияние на восприятие:

Доверие:Строгая, структурированная сетка ассоциируется с надежностью и серьезностью источника.

Скорость чтения:Правильный межстрочный интервал и ширина колонки текста не дают глазу уставать.

Адаптив: На телефоне сайт не превращается в «кашу», а превращается в удобную ленту.