Дизайн сайта журнала Time

Размещено на http://www.allbest.ru/

Смоленский государственный университет

Дизайн сайта журнала Time

М.А. Миронова

2022

Аннотация

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

Ключевые слова: Time, интернет-медиа, веб-дизайн, тенденции 2022 г., композиция, цветовое оформление, навигация.

Abstract

The article discusses the structure of the main page and the home page of the «Time» website, taking into account the main trends in web design in 2022. The features of the composition, color solution and compliance with the basic principles of usability are analyzed.

Keywords: «Time», online media, web design, trends in 2022, composition, color design, navigation.

Тенденции веб-дизайна 2021-2022 гг. неоднородны. С одной стороны, минимализм, который ставит на первое место контент, с другой -- завораживающая 3D-визуализация, притягательная анимированная графика и визуальный шум, отсутствие одного направления, яркость и интерактивность, функциональность, соседствующие с простотой и точностью композиции. Дизайн в сфере веб, как и в других областях, динамичен, но, несмотря на меняющиеся идеи, подходы, принципы, одно остается неизменным: улучшение пользовательского опыта и превосходная эстетика [1]. time сайт юзабилити журнал

Рассмотрим дизайн главной страницы сайта журнала Time. Следует отметить, что дизайн главной страницы здесь существенно отличается от дизайна главных страниц, например таких зарубежных изданий, как The Financial Times и The Wall Street Journal, которые чересчур перегружены информационными блоками. Дизайн Time строго выдержан в стиле минимализма: в нем много «воздуха», на свободном белом фоне четко расположены якорные точки в виде иллюстраций и заголовков, которые безошибочно направляют внимание читателя. Главная страница сайта Time точно отвечает требованиям хорошего веб-дизайна -- это наглядность, понятность и удобство пользования [2, 87]. Можно даже сказать, что в легкости и воздушности дизайна Time прослеживаются черты неоморфизма. Стиль неоморфизма стал трендом веб-дизайна именно 2022 г., то есть издание остается на пике современности.

Шапка главной страницы выдержана максимально лаконично: слева находится меню «гамбургер» и логотип журнала, справа -- кнопки «войти», «подписывайся» и иконка поиска. Кнопка «подписывайся» выделена красным цветом как яркий призыв к действию. Следует отметить, что профессиональные вебдизайнеры не всегда рекомендуют выделять кнопки призыва к действию красным цветом, потому что он слишком кричащий, но в данном случае такое решение оправдано, поскольку цвет кнопки соответствует цвету фирменного стиля журнала [3]. В центре шапки -- заголовок материала, в котором черным жирным шрифтом выделены первые слова «В центре внимания история...», и это неслучайно. Эти выделенные слова отсылают нас к формату сторителлинга, или тенденции «рассказывать истории», прочно укрепившиеся как новый жанр в современной журналистике и пришедшие в Россию из западной журналистики. Так что Time подчеркивает, что твердо стоит на этих позициях.

В центре первого экрана главной страницы -- крупная фотография с заголовком внизу. Фотография и заголовок выровнены по левому краю. Такой ассиметричный макет -- устоявшая традиция в хорошем веб-дизайне, которая помогает сделать сайт более современным [4]. Однако крупная фотография на первом экране нарушает привычное направление чтения. Как правило, пользователь воспринимает информацию слева направо, сверху вниз, что характерно для европейской традиции чтения. Здесь же фотография -- якорная точка -- первой привлекает внимание, и только потом взгляд читателя направляется вверх, к шапке и заголовку новости в центре. С другой стороны, это оправдано тем, что шапка сайта закреплена и при прокрутке вниз она все равно остается в поле внимания читателя. Над фотографией размещается рубрика «Бизнес», набранная крупным черным шрифтом, и под ней -- подрубрики, отделенные от фотографии еле заметной бледно-серой чертой. Следует отметить, что бледно-серые линии используются и на последующих экранах главной страницы для разделения ряда новостей. Как уже говорилось, они еле заметны, не утяжеляют макет и напоминают дизайн интерфейсов компании Apple.

На втором экране представлены три новости. Они тоже выровнены по левому краю, сверху выровнены по длине крупного фото. Новости представлены в таком порядке: фотография, заголовок, источник новости. Указание на источник новости выполнен тонким шрифтом без засечек. Именно шрифты без засечек чаще всего используются в веб-дизайне, так как их легче прочитать с экрана. Таким же шрифтом выполнены названия рубрик, что создает определенную «перекличку» в типографике и способствует более целостному восприятию макета. Заголовки выполнены шрифтом с засечками, который ближе всего к классическому Times New Roman. Поскольку шрифт с засечками -- примета, прежде всего, печатного текста, можно предположить, что его использование в заголовках -- отсылка к печатной версии журнала. Следует отметить, что в дизайне главной страницы Time используются только три шрифта и три цвета: красный (цвет фирменного стиля), черный и серый. Это вполне соответствует канонам хорошего веб-дизайна, который исключает многообразие шрифтов и цветов [5].

На третьем и четвертом экранах под рубрикой More in Business следует череда новостей. Они даются в такой очередности: слева -- фотография, рядом с фото -- заголовок, подзаголовок, источник новости и дата. Заголовки и подзаголовки, как уже было указано, выполнены шрифтом с засечками. Для написания источника новости и даты используется третий шрифт. Они набраны шрифтом без засечек меньшего кегля и жирного начертания, даты выделены красным. Использование третьего шрифта и вариации в начертании придают макету разнообразие, не делают его монотонным и предсказуемым, что очень важно при таком лаконичном дизайне [6]. Новости тоже выровнены по левому краю, но их горизонтальное расположение придает необходимый макету ритм, в котором верстка ближайших экранов не повторяется. Это очень важно для современного пользователя, который устает от однообразия.

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

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

Проанализируем рубрику Home сайта Time. Это так называемая домашняя страница, которая представляет собой дайджест основных новостей. При повторном анализе сайта она открывается сразу после нажатия ссылки сайта в поисковике, минуя главную страницу, так что не совсем понятно, как работает сайт Time: когда открывается главная страница, а когда домашняя.

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

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

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

Ниже следует рубрика «Выбор редактора». Она представлена четырьмя новостями, поданными следующим образом: фото и под ним заголовок. Информационный блок выровнен по центру, но он меньше, чем предыдущий информационный блок. Благодаря такой структуре соблюдается разнообразие ритма на сайте, что очень важно в профессиональном дизайне. Вверху справа расположен красный заголовок «подпишитесь на информационный бюллетень Inside Time». Важно отметить, что все призывы к действию на сайте выделены красным. Этот цвет выполняет двойную функцию: является ярким и контрастным для привлечения внимания и в то же время является цветом фирменного стиля, что служит удачным решением для дизайна сайта в целом. Вверху рубрики расположена тонкая черная разделительная линия. Здесь следует сказать, что она не светло-серая, как на главной странице, а черная, что делает дизайн домашней страницы более контрастным. Такое решение можно объяснить тем, что домашняя страница более информационно насыщенная, чем главная, поэтому усиление контраста является оправданным.

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

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

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

На шестом экране под рубрикой «Узнайте больше» расположены фото основных приложений Time: Time 100 Talks, Next Generation Leaders, Time Cover Store, Climate is everything, Time for kids. Ниже расположен рекламный баннер с подзаголовком «Получить информационный бюллетень The Brief». Этот рекламный баннер оформлен скромнее, чем реклама подписки: небольшая светло-серая плашка, ограниченная рамкой, с текстом рекламного объявления и яркокрасная кнопка с призывом подписаться на рассылку.

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

На восьмом экране представлены два информационных блока: новости двух рубрик -- «46-й президент» и Race in America. Вторая рубрика посвящена проблемам чернокожих в Америке. Каждая рубрика представлена четырьмя новостями. Они расположены горизонтально в виде небольшого фото и завершенных или незавершенных заголовков. Однако у этих информационных блоков есть одна особенность: они представляют собой псевдослайдер. Дело в том, что новости в рубриках сверстаны так, как верстаются новости в слайдере: четыре полноценных фото и пятое фото обрезано с обрезанным заголовком. Но при этом начка слайдера в рубрике нет, и при клике с правой стороны экрана новости не пролистываются. Такое дизайнерское решение вызывает вопросы: зачем путать пользователя и нарушать привычные паттерны восприятия информации на сайте, остается непонятным.

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

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

Литература

1. Тренды веб-дизайна 2021-2022.-- Режим доступа: https://alma-com.ru/articles/trendy-veb-dizayna-2021-2022/ (дата обращения: 15.08.22).

2. Норман Д. А. Дизайн привычных вещей / Д. А. Норман.-- М., 2018.

3. Горбунов А. Типографика и верстка / А. Горбунов.-- Режим доступа: https://bureau.ru/projects/book- typography/ (дата обращения: 15.08.22).

4. Бирман И. Пользовательский интерфейс / И. Бирман.-- Режим доступа: https://bureau.ru/projects/book-ui/ (дата обращения: 15.08.22).

5. Брингхерст Р. Основы стиля в типографике / Р. Бринхерст.-- М., 2013.

6. Шпикерманн Э. О шрифте / Э. Шпикерманн.-- М., 2017.

7. Уолтер А. Эмоциональный веб-дизайн / А. Уолтер.-- М., 2012.

Размещено на Allbest.ru