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

 

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

1) Укажите сайт СМИ, который вы рассматриваете. В целом оцените его графический интерфейс - кажется ли он вам удачным или нет?

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

В целом графический интерфейс сайта можно оценить как удачный для крупного новостного СМИ. Главная страница построена так, чтобы пользователь быстро увидел самые важные материалы: крупные заголовки, блоки последних новостей, тематические разделы и карточки публикаций. Интерфейс выглядит достаточно строгим и деловым, что соответствует направленности РБК.

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

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

2) Укажите тип верстки на этом сайте (симметричная, рваная или рандомизированная). Аргументируйте;

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

                                           

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

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

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

Поэтому верстку сайта РБК можно определить как рваную/асимметричную с элементами модульной сетки. Асимметрия помогает выделить главный контент и разделить разные типы информации, но при этом сайт сохраняет порядок и остаётся удобным для чтения.

3) Предположите какой колоночный макет использован на сайте - Grid Layout, Foundation или Bootstrap,а возможно такого макета нет вообще? Есть ли на выбранном вами сайте экранная анимация?

Для установления типа верстки - правая клавиша мыши на сайте, выберите в контекстном меню: "просмотреть код страницы". Вызов поиска по коду: Ctrl+F

По каким ключевым словам искать тип макета:

grid для Grid Layout

col-sm или col-xs или col-md или col-lg для Bootstrap

@keyframes для дисплейной анимации

columns medium для Foundation

Для определения колоночного макета я открыла код страницы сайта РБК через функцию «Просмотреть код страницы» и проверила ключевые слова через поиск.

Поиск по словам col-sm, col-xs, col-md, col-lg не показал явных признаков Bootstrap-сетки. Также я не нашла характерного для Foundation сочетания columns medium. Поэтому нельзя уверенно сказать, что сайт использует Bootstrap или Foundation в классическом виде.

Слово grid в коде страницы я также не нашла, поэтому нельзя уверенно утверждать, что сайт построен именно на Grid Layout. При этом визуально сайт всё равно имеет колоночную структуру: слева расположена лента новостей, в центральной части - основные материалы, справа - дополнительные информационные блоки. Это говорит о том, что на сайте используется сеточный принцип организации страницы, но, скорее всего, это не готовый Bootstrap или Foundation, а собственная система верстки РБК.

Однако в коде страницы встречаются слова row и container. Этот элемент связан с принципами Bootstrap-сетки: контейнер задаёт общую область страницы, а row используется как строка, внутри которой размещаются блоки. Поэтому можно предположить, что сайт РБК использует либо Bootstrap, либо собственную систему верстки, построенную по похожим принципам.

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

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

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

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

Вывод: сайт РБК, скорее всего, использует собственную сеточную систему, близкую к принципам Bootstrap, так как в коде встречаются row и container., а сама страница визуально разделена на колонки. Также в коде встречается flex, поэтому отдельные элементы могут быть выстроены с помощью Flexbox. Признаков Foundation и явного Grid Layout по ключевым словам не найдено. Экранная анимация на сайте присутствует, но она выражена сдержанно: это плавные переходы, реакции при наведении, раскрытие элементов и функциональная подгрузка материалов.

4) Охарактеризуйте типографику сайта - тип шрифта, если можете установить - то и сам шрифт. Насколько на ваш взгляд используемый шрифт удобен?

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

Предположительно, основной шрифт сайта - Graphik RBC LC или близкий к нему фирменный гротеск. Также в качестве запасных вариантов могут использоваться Arial и sans-serif. Это можно заметить по внешнему виду букв: они простые, ровные, без декоративных элементов и без засечек.

Типографика на сайте выстроена достаточно грамотно. Заголовки сделаны крупнее и жирнее, поэтому сразу выделяются среди остальных элементов. Основной текст и короткие новости набраны более спокойным начертанием. Благодаря этому создаётся понятная иерархия: сначала пользователь видит главные заголовки, затем подзаголовки, рубрики и основной текст.

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

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

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

5) Охарактеризуйте юзабилити сайта. Насколько верстка сайта СМИ удачна в целом? Влияет ли она на ваше восприятие информации, и если да, то как?

Юзабилити сайта РБК можно оценить как достаточно высокое. Сайт в целом удобен для пользователя, потому что он сразу выполняет главную задачу СМИ - быстро показывает актуальные новости и помогает выбрать нужный раздел.

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

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

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

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

Но есть и минусы. Главная страница выглядит немного перегруженной: много заголовков, ссылок, коротких новостей и дополнительных блоков. Из-за этого иногда возникает ощущение информационного шума. Также на широком экране основная область сайта визуально смещена влево, а справа остаётся большое пустое пространство. Из-за этого композиция кажется не совсем сбалансированной.

В целом верстка сайта РБК удачна, потому что она соответствует формату делового СМИ. Сайт рассчитан на пользователя, которому нужно быстро получить много информации: новости, аналитику, финансовые показатели и переходы к разделам. Несмотря на некоторую перегруженность, интерфейс остаётся понятным и функциональным.

Вывод: юзабилити сайта РБК можно считать хорошим. Верстка помогает воспринимать информацию, выделяет главное и разделяет материалы по смысловым блокам. Минусы есть, но прям сильно они не мешают пользоваться сайтом, а скорее связаны с тем, что новостному порталу приходится показывать большой объём информации сразу.