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

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

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

Плюсы: 

1. Сайт информативен и хорошо оптимизирован под мобильные устройства. Элементы интерфейса не накладываются друг на друга, а при открытии меню на смартфонах рубрики выстраиваются в одну колонку.
   1 рис. 2 рис.
   
   
2. Пользователь может выбрать подходящую тему (светлую или темную). В данном анализе я рассматриваю светлую версию. Внутри публикаций используется классический темный шрифт с оптимальным размером кегля и комфортным межстрочным интервалом.
   3 рис.4 рис.
   
   
   
   
3. Большую часть страницы занимает главный контент (ключевые статьи), а справа расположена узкая колонка с лентой новостей.
   
   5 рис.

Минусы:

1. Главная страница перегружена разнородными блоками. Из-за обилия мелких плашек внимание читателя рассеивается.
   
   6 рис. 
   
   
   
   7 рис. 
   
   
2. Многочисленные рекламные баннеры (особенно те, что встроены непосредственно в  статьи и разрывают текст) сильно портят визуальное впечатление и мешают восприятию информации.
   

8 рис. 

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

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

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

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

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

Сетка сайта построена на фреймворке Bootstrap в сочетании с Grid Layout. 

9 рис.
10 рис. 

Экранная анимация здесь минималистична и носит исключительно функциональный характер. 

1. При наведении курсора заголовки статей плавно меняют цвет с черного на красный.
2. При нажатии на иконку меню список рубрик плавно выдвигается и раскрывается.
3. Динамическая анимация используется в рекламных баннерах.
4. Кнопка «наверх» обеспечивает плавную прокрутку к началу страницы.

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

Предполагаю, что в качестве основного шрифта на сайте используются Roboto или Open Sans. Для заголовков применяется то же начертание, но в более жирном исполнении (Bold / Semi-Bold). 

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

В целом типографика удобна для восприятия.

11 рис.

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

Юзабилити сайта находится на среднем уровне. Удобные и логичные решения здесь соседствуют с недостатками.

Что сделано удобно:

1. Архитектура сайта построена по стандартным паттернам (шапка с логотипом и контактами → главное меню → контентная сетка → подвал). Это упрощает навигацию для пользователей всех возрастов.
   12 рис.
   
   
2. Строка поиска расположена на видном месте, что позволяет быстро находить материалы.
3. Мобильная версия полностью дублирует контент десктопной. При этом элементы меню достаточно крупные, по ним легко попадать пальцем на экране смартфона (см 2 рис.)
4. Список последних событий отображается почти на всех страницах, помогая читателю оперативно отслеживать свежие новости ( см 5 рис.)

Что сделано неудобно:

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