CC BY
53
УДК 004.92 АНАЛИЗ ТЕНДЕНЦИЙ WEB-ДИЗАЙНА В 2017-2018 ГОДЫ
Захарова О. А., Цынко Д. О.
Донской государственный технический
университет, Ростов-на-Дону, Российская
Федерация
oz64@mail.ru
masyanya.7777@yandex.ru
Представлены эстетические и прикладные направления развития веб-дизайна в 20172018 гг. Обозначены тенденции, которые сохранятся в ближайшие два года. Показано, каким образом рыночная и технологическая конъюнктура обусловливают творческий метод веб-дизайнеров и выбор профессиональных инструментов. С этой точки зрения рассмотрено использование теней, цветовых схем, пользовательских иллюстраций, типографики, асимметрии, симметрии, динамических градиентов, динамического фона, интегрированной анимации. Ключевые слова: веб-дизайн, мобильный интернет, интерфейс, тени, глубина изображения, цветовые схемы, пользовательские иллюстрации, типографика, асимметрия, симметрия, динамические градиенты, динамические элементы фона, интегрированная анимация.
UDC 004.92
ANALYSIS OF WEB-DESIGN TENDENCIES IN 2017-2018
Zakharova O. A., Tsynko D. O.
Don State Technical University, Rostov-on-Don, Russian Federation
oz64@mail.ru masyanya.7777@yandex.ru
The article presents aesthetic and applied directions of web design development in 2017-2018. It provides the trends that will be followed in the next two years. The paper shows how the market and technological conjuncture determines the creative method of web designers and the choice of professional tools. From this point of view, the use of shadows, color schemes, user illustrations, typography, asymmetry, symmetry, dynamic gradients, dynamic background, integrated animation is considered.
Keywords: web design, mobile Internet, interface, shadows, image depth, color schemes, user illustrations, typography, asymmetry, dynamic gradients, dynamic background elements, integrated animation.
Введение. Разработчики веб-интерфейсов и веб-дизайнеры одновременно решают задачи, связанные с функционалом проекта (сайта, приложения) и его эстетическими характеристиками. В первом случае речь идет об объективных параметрах, главные из которых — высокая скорость отклика при интерактивном взаимодействии пользователя с продуктом и возможность без потери качества и оперативности работать на различных устройствах, в том числе мобильных. Что касается визуализации, эстетики, то здесь, безусловно, в приоритете субъективное восприятие продукта. Оценка исполнения может различаться в зависимости от того, чья точка зрения будет решающей: дизайнера, заказчика, конечных пользователей.
Следует отметить, что в данной отрасли постоянно обновляется профессиональная информация: генерируются идеи, совершенствуются инструментарий, принципы и методы работы. В настоящей статье представлен обзор некоторых тенденций веб-дизайна, особенно актуальных в последние годы [1].
Основная часть. Веб-дизайн, являясь по сути одним из видов творческой деятельности, всегда преследует определенную прикладную цель. Как правило, речь идет о прямой рекламе или ином виде продвижения продукта или услуги. Современным специалистам доступны различные виды иллюстраций, однако чаще всего они пользуются фотографиями продукта и GIF-файлами. В первом случае в привлекательном свете представляются реально имеющиеся видимые качества объекта продвижения. Однако полноценная реализация замысла дизайнера в данном случае требует определен-
кчоо/л
ного ресурса веб-страницы. Качественная фотография имеет немалый размер, или вес (то есть зани-
мает часть оперативной памяти) и может затормозить активность пользователей на сайте. Во втором случае речь идет о файлах, специально предназначенных для работы в сети. Высокая степень компрессии значительно сокращает их вес. Поэтому такими файлами можно легко и быстро обмениваться. Важно, что скорость передачи и качество изображения в этом случае не зависят от аппаратного и программного обеспечения участников обмена. Безусловно, долгие годы GIF-файлы в известном смысле уступали фотографии, они не могли корректно передать все видимые характеристики изображаемого объекта, в том числе: градиенты цветов, уровни освещения и тени и пр. Дизайнеры, иллюстрирующие контент GIF-файлами, скорее, стремились указать на самые важные или наиболее характерные параметры объекта или же создавали подчеркнуто эмоциональные изображения. Кроме того, именно GIF-файлы используются для создания «легкой» короткометражной анимации, которая позволяет:
— продемонстрировать на веб-ресурсе видео, посвященное продвигаемому продукту;
— привлечь на ресурс дополнительную аудиторию (даже если забавный, интересный ролик не имеет прямого отношения к продвигаемому продукту).
Следует отметить, что к 2018 году разработчики довольно успешно модернизировали алгоритмы GIF: «нарастили» возможности сжатия при полном сохранении качества и совершенствовании изобразительных возможностей.
Если же мы говорим о конкретном дизайнере, предпочитающем работать с GIF, то коммерческий успех его работы будет зависеть (кроме, безусловно, профессионального мастерства) от уровня абстракции, которую он способен обеспечить в созданных им изображениях. По мнению ряда исследователей [2], с точки зрения рекламы, наиболее уязвимое качество фотографии — именно чрезмерная детализация изображения. Особенно это относится к случаям, когда иллюстрация фокусируется на фото конкретного человека. В идеале адресат рекламного послания должен соотносить себя с героем рекламы. Однако так бывает далеко не всегда. То есть не всегда герой рекламы симпатичен потребителю. Избежать этой значительной проблемы как раз помогает абстракция. Вот один из широко (в разных вариациях) цитируемых примеров. Допустим, необходимо прорекламировать мастерскую по индивидуальному пошиву одежды. На фото — женщина в новом платье. Не исключено, что потенциальной клиентке по каким-то причинам не понравится сама фотомодель и фасон платья. Схематичное изображение поможет избежать такой ситуации. Можно показать лишь силуэт или даже абрис женского тела (с пропорциями, привлекательными для данной культуры) и лишь обозначить платье, представляющее фигуру в наиболее привлекательном свете.
В этой связи, выбирая героя рекламного изображения (или кампании) следует осторожно относиться к акцентированию таких признаков, как: раса, пол, национальность и пр. Исключением, пожалуй, являются харизматичные, широко известные персоны, которые привлекут к продукту внимание поклонников их таланта. Однако, безусловно, и они оттолкнут тех, кто по каким-то причинам им не симпатизирует.
Ситуация последних нескольких лет отличается тем, что основные усилия веб-дизайнеров были сосредоточены на решении проблем изображений в мобильном интернете. Как ранее в компьютерных сетях, здесь требовалось обеспечить качество, привлекательность и многообразие иллюстраций при сохранении незначительного веса, чтобы пользователи могли ими легко обмениваться. Как следствие, уже в 2017 году число просмотров веб-страниц с мобильных устройств превысило аналогичный показатель для стационарных компьютеров и ноутбуков [3]. Учитывая распространение мобильного интернета, можно с определенной уверенностью утверждать, что в ближайшие годы (2018-2020) деятельность большинства специалистов по дизайну сфокусируется на работе в мобильном интернете. В частности, будут совершенствоваться визуальные решения для меню, подменю и
кчоо/л
субменю с учетом стандартных (компактных) размеров мониторов смартфонов. Очевидно, выше бу-
дет уровень универсализации служебных изображений. Они станут интуитивно понятны пользователям большинства ресурсов, в том числе мобильных. Кроме обозначенной общей тенденции (приоритет так называемого мобильного дизайна) следует указать еще восемь направлений развития веб-дизайна. Очевидно, что в 2018-2020 году специалисты будут совершенствовать работу с наиболее востребованными профессиональными инструментами. Пять из них характерны, скорее, для статичной графики:
— тени и глубина изображения;
— цветовые схемы;
— пользовательские иллюстрации;
— оригинальная типографика;
— нарочитая асимметрия.
Еще три представляют собой анимационные инструменты:
— динамические градиенты;
— фон, декорированный движущимися частицами;
— собственно интегрированная анимация.
Тени и глубина. Новые принципы работы с этими инструментами и новый уровень технического обеспечения позволяют современным веб-дизайнерам достичь эффектов, невозможных несколькими годами ранее. Все чаще тонкая настройка таких параметров изображения, как тени и глубина, в комплексе с грамотно разработанным макетом позволяют использовать феномен параллакса, что существенно усиливает впечатление от оформления ресурса [4].
Цветовые схемы. Насколько допустимо использование в маркетинговых целях неординарных, чрезмерно насыщенных, неестественных цветов? Привлекают они пользователей или, наоборот, раздражают? Эти вопросы многие годы провоцируют споры в профессиональной среде. Судя по некоторым данным, сейчас заказчики все чаще соглашаются с «экспериментаторами». Если, например, проанализировать заголовки к размещенным в сети текстам, можно обнаружить, что некоторые выделены непривычным цветом. Однако такие случаи пока встречаются сравнительно редко. Оформление ориентировано на удобство пользователя. В последние два года веб-дизайн сделал в этом направлении следующий шаг. В рунете появились ресурсы, меняющие цветовое решение в зависимости от времени суток: днем «включается» оформление, комфортное для глаз при дневном освещении; вечером цвет фона и элементов меняются таким образом, чтобы они легко воспринимались при искусственном освещении.
Пожалуй, самое неожиданное нововведение в данной сфере принадлежит Aple. Компания собрала достаточный объем данных о том, что пользователи устают от обилия цвета фирменных иконок. Кроме того, разнообразие цветов и оттенков иногда мешает сосредоточиться при выборе нужного приложения. Теперь пользователи могут избежать этих проблем. Разработчик предусмотрел режим «Оттенки серого»: если он включен, рабочий стол и иконки становятся черно-белыми, оставаясь при этом четкими, интуитивно ясными.
Пользовательские иллюстрации. Собственные иллюстрации посетителей ресурса, во-первых, разнообразят контент. Во-вторых, размещая свои фото на веб-странице, пользователи охотно делятся ссылками, приглашают друзей, родственников, знакомых посмотреть и оценить изображения. Таким образом, растет посещаемость ресурса — очень ценный показатель с точки зрения маркетинга. В данном случае роль веб-дизайнера сводится, скорее, к модерации изображений, предлагаемых пользователями. В последние несколько лет администрации сайтов строже следят за соблюдением главных требований: содержание пользовательских иллюстраций должно соответство-
кчоо/л
вать закону о СМИ; тематика — совпадать с идеей ресурса; качество — быть приемлемым; размер
(вес) — ограниченным.
Оригинальная типографика. С 20-х годов XX века типографика газет и плакатов становится самостоятельным инструментом. С ее помощью передается идеология обновления, преобразования всех сторон жизни, в том числе информационной и эстетической. С тех пор время от времени мода на модернистскую типографику возвращается и сходит на нет. В настоящее время анализ оформления русскоязычных сайтов позволяет однозначно утверждать, что веб-дизайнеры используют в основном «умеренную» или даже консервативную типографику, главная задача которой — максимально ясно представить текстовый контент, облегчить пользователю работу с материалами сайта. Функциональность, удобство восприятия информации превалируют над броским, нетипичным оформлением. Что касается откровенно экспериментаторских стилей, они встречаются крайне редко и как правило используются для оформления компактных текстовых фрагментов: заголовка, «фонаря», лида и пр.
Нарочитая асимметрия. Экстраординарное, подчеркнуто асимметричное расположение элементов и модулей встречается, в основном, на молодежных и узкопрофильных дизайнерских ресурсах. В первом случае, следуя подростковой и молодежной психологии, разработчики пытаются добиться так называемого «вау-эффекта», веб-дизайнеры и верстальщики демонстрируют свои неординарные идеи и уровень исполнительского мастерства.
Посетители (и заказчики) других сайтов предпочитают стандартное размещение текстов и иллюстраций. Эта традиционная эстетика ориентирована на привычную модульную сетку печатных СМИ: заголовки, иллюстрации, текст и его выносные элементы располагаются в соответствии с общепринятой логикой. Незначительная асимметрия верстки возникает из-за разницы используемых шрифтов и смещения элементов. Это выглядит естественно и закономерно.
Безусловно, новые идеи и технические возможности постоянно подталкивают специалистов к экспериментам в указанной сфере. Однако в 2017-2018 гг. оформленные таким образом сайты встречались довольно редко. Очевидно, что в ближайшее время ситуация существенно не изменится.
Динамические градиенты. Это довольно простой и рациональный способ освежить дизайн веб-страницы, сделать его интереснее и сложнее в хорошем смысле слова. В последние два года разработчики все чаще отказываются от однотонного, плоского, статичного фона в пользу динамических градиентов. Такое оформление делает страницу более привлекательной и запоминающейся. При этом нет необходимости существенно наращивать ресурсы, поддерживающие такое решение. Динамический градиент весит не много, не замедляет передачу данных и взаимодействие пользователей со страницей. Все это способствовало активному применению данного инструмента на различных корпоративных и личных веб-ресурсах. Вполне вероятно, что в ближайшие годы рассматриваемый принцип оформления будет развиваться: расширится палитра градиентов, появятся новые возможности динамики [5].
Фон, декорированный движущимися частицами. Как и динамический градиент, это решение позволяет сделать более привлекательным и индивидуальным общий вид страницы. Однако, следует отметить, что у данного варианта более узкий диапазон реализации. Так, адекватное решение движущегося градиента можно подобрать для любой тематики сайта: развлекательного, информационного. Дозированно (для некоторых элементов) можно использовать этот инструмент и на официальном портале. Что касается фона с движущимися частицами, то его логично использовать, скорее, на развлекательных, массовых ресурсах. Очевидно, что для научно-популярного контента он, в целом, подходит, для строго научного, скорее, нет. Тенденция последних лет (особенно 2017-2018 гг.) — отказ от такого оформления ресурсов, специализирующихся на онлайн-продажах. Логика заказчиков ясна: ничто не должно отвлекать потенциальных покупателей от товара и никакие, даже
L4QQ/J
легкие элементы (в данном случае javascript) не должны тормозить взаимодействие пользователя со
страницей [6, 7].
Интегрированная анимация. В 2017-2018 гг. некоторые веб-страницы предложили посетителям протестировать анимационное сопровождение часто выполняемых операций: загрузка, обновление страницы, переход по ссылке, указание на ошибку страницы и пр. Профессиональное сообщество практически единодушно считает, что такое оформление имеет смысл, если интегрировано в процессы, когда пользователь не видит материалы сайта. В противном случае оно отвлекает внимание от контента. Если анимированный элемент всплывает, например, во время прокрутки или при работе с навигацией, то из фокуса внимания пользователя пропадают профильные материалы, основное информационное наполнение веб-страницы, и таким образом эффективное взаимодействие прекращается.
Выводы. В 2017-2018 гг. общее направление развития веб-дизайна было нацелено, главным образом, на генерирование решений, максимально комфортных и дружелюбных для пользователя. Разработчики сфокусировались, в основном, на оформлении интерфейсов для мобильного интернета. Лидеры рынка, проанализировав обратную связь с пользователями, в новых моделях предусмотрели возможность отключения цвета специально для тех, кто устает от многообразия красок.
В 2017-2018 году веб-разработчики и дизайнеры особенно активно задействовали восемь инструментов. В статичной графике это тени и глубина изображения; цветовые схемы; пользовательские иллюстрации; рациональная типографика; асимметрия в виде немногочисленных акцентов. В анимационной графике активнее стали использоваться динамические градиенты; фон, декорированный движущимися частицами; интегрированная анимация.
Вполне ожидаемо, что в ближайшем будущем (в 2019 году) разработчики расширят предложение цифровых и сетевых продуктов, так или иначе использующих дополненную реальность, ставшую, пожалуй, самой резонансной новинкой в 2017-2018 гг.
Библиографический список
1. 19 web design trends for 2018 [Электронный ресурс] / Webflow, Inc. — Режим доступа: https://webflow.com/blog/19-web-design-trends-for-2018 (дата обращения: 22.02.18).
2. Агапов, И. Заметки о проектировании интерфейсов информационных систем [Электронный ресурс] / И. Агапов // ECM-Journal.ru. — Режим доступа: https://ecm-journal.ru/post/Zametki-o-proektirovanii-interfejjsov-informacionnykh-sistem.aspx (дата обращения: 22.02.18).
3. 10 трендов веб-дизайна на 2017 год [Электронный ресурс] / Searchengines.ru. — Режим доступа: https://www.searchengines.ru/10-trendov-veb-dizajna-na-2017-god.html (дата обращения: 08.03.18).
4. 10 главных трендов веб-дизайна в 2018 году [Электронный ресурс] / Cossa. — Режим доступа: http://www.cossa.ru/trends/186650/ (дата обращения: 08.03.18).
5. Тренды веб-дизайна 2018. — Режим доступа: https://blog.sibirix.ru/2018/01/22/web-design-trends2018/ (дата обращения: 08.03.18).
6. 9 cutting-edge web design trends for 2018 [Электронный ресурс] / 99designs. — Режим доступа: https://99designs.com/blog/trends/web-design-trends-2018/ (дата обращения: 22.02.18).
7. Интерфейс информационных систем. Создание интерфейса пользователя [Электронный ресурс] / НОУ «ИНТУИТ». — Режим доступа: https://www.intuit.ru/studies/courses/502/358/lecture/8532 (дата обращения: 22.02.18).
