Дизайн главной страницы сайта Wall Street journal

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

Дизайн главной страницы сайта Wall Street journal

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

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

Аннотация

дизайн газета wall street journal

в статье определяется соответствие дизайна главной страницы сайта газеты WallStreetjournal ведущим тенденциям веб-дизайна 2019 г. Рассматривается структура издания, особенности композиции, цветового оформления и соответствие интересам аудитории.

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

Abstract

The article defines the compliance of the design of the main page of the “Wall Street journal" web site with the leading trends in web design in 2019. We considert he structure of the publication, especially the composition, color design and compliance with the interests of the audience.

Keywords: “Wall Street Journal", online media, web design, trends in 2019, composition, color design, navigation.

Дизайн интернет-изданий с богатой историей, как правило, консервативен. И читатели, привыкая к определенному оформлению, в основном негативно воспринимают нововведения при редизайне сайта [1, 75]. Просмотренные в 2019 г. сайты сочетали в себе две главные черты: технологичность и эстетичность. При этом отмечалась визуальная хаотичность, выражавшаяся в нестандартном размещении информационных блоков (при этом не нарушались основы композиционного размещения контента: вся важная информация располагалась слева по направлению чтения) [2, 51].

Некоторые обновления сайта газеты WallStreetJournal (WSJ) проводились в соответствии с названными тенденциями, но основная структура не подвергалась серьезным изменениям, и это вполне объяснимо: деловая среда довольно консервативна и требует от дизайна прежде всего функциональности, стандартизации, узнаваемости. Так, при верстке WSJ разные по величине текстовые блоки главной страницы сочетались как с довольно крупными фотографиями, так и с совсем мелкими снимками, но самая важная информация (главные новости разных рубрик и самые крупные фотографии) размещалась традиционно слева.

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

пользование негативного пространства. Отсутствие лишних элементов позволяет пользователю быстрее ориентироваться на сайте [3, 18].

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

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

Еще одной тенденцией является асимметричность композиции [4, 32], которая, например, в WSJ согласуется со строгой иерархичностью элементов, когда глаз пользователя сначала видит крупные элементы, а потом все остальные. Благодаря негативному пространству на главной странице сайта создаются четкие акценты на нужных элементах контента: заголовки, фото, текст.

Другая тенденция в медиадизайне -- постоянно растущий футер Футер -- это самый нижний блок, в котором обычно содержится информация о ресурсе, навигация и т.п. информация.. Раньше там размещался текст авторского права и группы значков социальных сетей. Но в последнее время веб-дизайнеры уделяют им все больше внимания. Раньше футеры занимали около одной восьмой размера экрана. Сегодня они занимают около половины экрана, что привлекает внимание посетителей к их содержанию [5, 227]. Футер WSJ также занимает половину экрана. На нем представлены виды и условия подписки на издание, возможность прослушать подкасты и подписаться на RSS-каналы и даже найти работу в издании (это помимо ссылок на аккаунты издания в социальных сетях).

Важную роль в дизайне сайта играет цветовое оформление. Согласно исследованию, проведенному Университетом Виннипега в Канаде, 80% людей узнают бренд именно благодаря цвету [6, 25]. Мягкие оттенки и простота -- признаки современного стиля. В цветовом оформлении сайта WallStreetJournal используется технология дуплекс -- сочетание двух основных цветов: белого и серого. Белый цвет обеспечивает хорошую контрастность и отличную читаемость текста. Белое пространство помогает привлечь внимание к заголовку и изображению (дизайнеры считают, что чем больше свободного пространства, тем проще воспринимается информация на странице). Такой дизайн хорошо работает, так как легко воспринимается взглядом. Серый цвет придает сайту современный стильный вид, является знаком высокого класса и качества. Светлые тона белого и серого в сочетании с фотографиями насыщенных цветов создают яркий контрастный эффект.

Долгое время в веб-дизайне использовались гарнитуры без засечек. Этой тенденции следовали многие современные дизайнеры. Теперь все чаще используются шрифты с засечками, прежде всего в заголовках. Они очень хорошо вписались в современный дизайн, потому что делают текст убедительнее, передают строгость [7, 112], тем более что в традиционном дизайне сайта WSJ набор шрифтов -- одна из констант фирменного стиля, связывающих его с печатной версией.

На сайте WSJ размещаются только выразительные репортажные фотографии. В сочетании с авторскими рисунками они производят впечатление, привнося оригинальность в оформление сайта. В качестве иллюстраций здесь применяется и видео: это видеоролики, размещенные в правой части страницы и отдельной рубрикой с крупным видео в центре. По данным SearchEngineWatch, видеоролики генерируют на 41% более высокую скорость кликов, чем обычный текст.

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

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

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

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

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

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

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

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

На шестом экране рубрика «Видео» занимает достаточно большую площадь по сравнению с некоторыми остальными рубриками. Очевидно, редакторы делают ставку на видеоконтент и хотят привлечь к нему максимальное внимание. В рубрике есть центральное видео, показанное крупным планом, и второстепенные, более мелкие по размеру видео (хронометраж -- 1-2 минуты).

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

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

В рубрике «Жизнь и искусство» содержатся новости в соответствии с тематикой рубрики и новый выпуск журнала TheColumnists. Интересно, что колумнистика в этой рубрике представлена серией видеосюжетов. В каждом из сюжетов разные люди высказываются на определенную, заданную тему. Формат видеоколумнистики -- это перспективный вид контента, который работает на привлечение аудитории, поскольку, как показывают многие исследования, сегодня аудитория предпочитает видеоконтент текстовому. Особенно это характерно для молодежи. Судя по всему, издание все же рассчитывает на привлечение самой активной, молодой аудитории.

Завершается первая страница издания ступенчатой версткой из девяти колонок, где представлены второстепенные новости на самые разные темы с небольшими фото и очень мелкими заголовками. Характерно, что в отличие от FinancialTimes, где на последнем экране даются крупные фото, в WallStreetJournal последние разделы оформлены крайне скупо, словно не рассчитаны на то, что их кто-то прочитает.

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

Литература

дизайн газета wall street journal

1. Браун Т. Дизайн-мышление в бизнесе: от разработки новых продуктов до проектирования бизнес-моделей / Т. Браун.-- М., 2018.

2. Иттен И. Искусство формы / И. Иттен.-- М., 2018.

3. Кедлек Т. Адаптивный дизайн. Делаем сайты для

любых устройств / Т. Кедлек.-- СПб., 2013.

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

5. Кирсанов Д. Веб-дизайн / Д. Кирсанов.-- М., 2006.

6. Иттен И. Искусство цвета / И. Иттен.-- М., 2018.

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

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