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

 

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

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

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

2) Тип верстки сайта «Златоустовский рабочий» можно определить как рандомизированный, то есть смешанный.

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

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

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

3) Для определения колонного макета я проверила исходный код сайта «Златоустовский рабочий» через поиск по ключевым словам.

Поисковый запрос по ключевому слову grid зафиксировал всего 8 совпадений на всю страницу. Наличие 8 совпадений по слову grid показывает, что в коде встречаются элементы сеточной верстки, однако этого недостаточно, чтобы уверенно считать Grid Layout основной технологией всего макета.

Поиск по специализированным селекторам адаптивной сетки Bootstrap (col-sm, col-xs, col-md, col-lg) показал 0 совпадений. Соответственно, разработка сайта велась без привлечения данного фреймворка.

Проверка кода на наличие структурных маркеров фреймворка Foundation (columns, medium) также не выявила совпадений. Данная библиотека в проекте не задействована.

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

4) Типографика сайта «Златоустовский рабочий» в целом соответствует формату новостного СМИ.

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

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

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

Отдельно можно отметить логотип ZRG74.ru. Он выполняет скорее акцидентную, то есть декоративную и фирменную функцию. Логотип крупный, контрастный, с использованием красного цвета, поэтому хорошо запоминается и сразу выделяет сайт среди других элементов страницы.

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

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

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

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