ФЖЗ-301. Экзаменационное задание №1. Модель верстки сайта E1.RU

 

ФЖЗ-301. Экзаменационное задание №1. Модель верстки сайта E1.RU

 

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

Сайт: E1.ru – это крупнейший городской портал Екатеринбурга, принадлежащий медиахолдингу Shkulev Media. Совмещает функции новостного СМИ, форума, афиши, сервиса объявлений и городского справочника.

Общая оценка: графический интерфейс E1.ru можно оценить как функциональный, но перегруженный. Это характерная черта региональных порталов-агрегаторов, которые стремятся разместить на одной странице максимум контента и сервисов.

          Достоинства:

– узнаваемая цветовая палитра – фирменный синий цвет в шапке сайта обеспечивает идентификацию бренда;

– чёткая навигационная панель: разделы «Недвижимость», «Промокоды», «Знакомства», «Погода», «Форумы» и прочие легко считываются;

– визуальная иерархия новостей присутствует: главная новость выделена крупным изображением и заголовком, остальные материалы выстроены в отдельной колонке.

Недостатки:

– высокая плотность информации на главной странице – множество блоков, рекламных баннеров и ссылок конкурируют за внимание пользователя;

– рекламные интеграции (нативные и баннерные) визуально сливаются с редакционным контентом, что может дезориентировать читателя;

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

 

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

Тип вёрстки E1.ru – рваная (асимметричная).

Аргументация:

– неравномерное распределение колонок. Главная страница делится на узкую левую и более широкую правую части. Пропорции колонок не равны, что сразу исключает симметричную вёрстку;

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

– варьирование высоты блоков. Блоки не выравнены по единой горизонтальной линии: один информационный модуль может быть значительно выше соседнего. Линия горизонта «скачет», создавая визуальную динамику;

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

Таким образом, вёрстка E1.ru – контролируемая асимметрия: дизайнеры намеренно используют разноразмерные блоки для расстановки акцентов, но при этом сохраняют общую структурную логику страницы.

 

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

Тип макета

При анализе исходного кода страницы (правая клавиша мыши → «Просмотреть код страницы», затем Ctrl+F) были выполнены следующие поиски:

Ключевое слово	Результат поиска
grid	Множественные совпадения. В CSS-классах и стилях обнаружены упоминания grid, grid-template, display: grid и подобных свойств
col-sm, col-xs, col-md, col-lg	Не обнаружены в значительном количестве (отсутствие характерных Bootstrap-классов)
columns medium	Не обнаружено (Foundation не используется)
@keyframes	Обнаружены – присутствуют определения анимаций в CSS

 

Вывод о макете: на сайте E1.ru используется CSS Grid Layout –современная модель построения сеточных макетов. Это подтверждается наличием в коде соответствующих CSS-свойств (display: grid, grid-template-columns и т. д.). Bootstrap и Foundation в качестве основных не применяются. Сайт, по всей видимости, использует собственную систему сеток, построенную на Grid Layout.

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

Экранная анимация

Анимация присутствует. Найденные @keyframes указывают на наличие CSS-анимаций. На практике они проявляются в:

– плавном появлении рекламных баннеров;

– анимации выпадающих меню и подменю навигации;

– эффектах при наведении на интерактивные элементы карточек новостей;

– возможных анимациях в рекламных интеграциях.

Анимация на сайте сдержанная: она не является доминирующим элементом дизайна, а скорее выполняет функцию привлечения внимания к рекламе.

 

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

Параметры типографики

Параметр	Характеристика
Тип шрифта	Гротески
Кегель основного текста	~14–16 px
Кегель заголовков	~18–28 px варьируется
Межстрочный интервал	Стандартный (~1.4–1.5)
Контрастность	Тёмный текст на светлом фоне – хорошая читаемость

Оценка удобства

Шрифт удобен для чтения: гротески традиционно хорошо работают на экране, особенно в небольших кегелях.

Однако есть нюансы:

– однообразие. Использование одного шрифтового семейства для всех уровней иерархии (заголовки, подзаголовки, основной текст, подписи) делает типографику несколько «плоской»;

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

 

5. Юзабилити сайта

Навигация

Положительные стороны:

– горизонтальное меню в шапке сайта содержит все основные разделы и работает интуитивно;

– присутствует строка поиска – важнейший элемент для портала с огромным архивом контента;

– мобильная версия адаптирована: сайт корректно отображается на смартфонах (используется адаптивная вёрстка).

Проблемная сторона:

– избыточность пунктов навигации, которая проявляется в том, что разделы «Форумы», «Недвижимость», «Гороскоп» и другие сервисы создают ощущение, будто сайт – портал-каталог, а не СМИ. Это может затруднять поиск именно новостного контента.

Информационная архитектура

Главная страница перегружена: одновременно конкурируют новостные блоки, рекламные баннеры, ссылки на форум, афишу, сервисы.

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

Скорость загрузки

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

Влияние вёрстки на восприятие информации

Вёрстка E1.ru влияет на моё восприятие информации следующим образом:

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

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

– рваная вёрстка создаёт динамику, но утомляет. При длительном просмотре возникает визуальная усталость.

Итоговая оценка

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