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

 

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

Выбор сайта и общая оценка интерфейса

Рассматриваю сайт информационного агентства Lenta.ru (lenta.ru). Его графический интерфейс, на мой взгляд, удачен: плотный, но структурированный поток новостей, чёткая иерархия заголовков, сдержанная цветовая гамма и быстрая загрузка создают впечатление серьёзного и технологичного издания. Визуальный шум сведён к минимуму, акцент сделан на контент.

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

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

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

grid — обнаружено множество CSS-правил и классов, содержащих grid (например, grid, grid-column, grid-template-columns), что указывает на использование Grid Layout (CSS Grid).

col-sm / col-xs / col-md / col-lg — не найдены; Bootstrap не используется.

columns medium — не найдены; Foundation отсутствует.

@keyframes — присутствуют (анимация загрузки, появления «бегущей строки» горячих новостей, плавное раскрытие блоков). Экранная анимация на сайте есть.

Таким образом, основа верстки — CSS Grid Layout, фреймворки Bootstrap и Foundation не применяются. Дисплейная анимация реализована с помощью keyframes.

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

В качестве основного шрифта используется Graphik LC — геометрический гротеск, созданный специально для кириллицы (семейство Graphik от Commercial Type). Это шрифт без засечек, с открытыми формами букв, хорошей читаемостью и современным характером. Заголовки поданы полужирным начертанием, тексты — нормальным, что создаёт чёткий контраст. Мелкий кегль лидов и мета-информации остаётся разборчивым благодаря достаточному межстрочному интервалу. Шрифт очень удобен: он дружелюбен к долгому чтению с экрана и не перегружает восприятие.

4. Юзабилити и влияние верстки

Верстка Lenta.ru оценивается как весьма удачная:

жёсткая сетка помогает быстро сканировать заголовки;

адаптивность сохраняет структуру при изменении ширины окна;

контентные блоки логически сгруппированы (рубрики — слева, главный поток — в центре, топ-сюжеты — справа), что соответствует привычной модели чтения;

высокая плотность элементов не создаёт ощущения хаоса благодаря равномерным отступам и единообразным карточкам новостей.