Меньше кода и дресс-кода, больше свободы: о трендах веб-дизайна 2018–2019

Многие хабражители настолько full-stack, что неплохо умеют в дизайн. Самые ожесточенные баталии в комментах часто вызывает не сравнение достоинств Angular и React, а внешний вид какого-нибудь сайта. Недавно критикам и всем «знающим, как правильно» выпал шанс продемонстрировать это самое «как правильно». Конструктор сайтов Ucraft провел конкурс, в котором любой желающий мог показать, насколько хорош в «сайтбилдинге».

И хотя большинство участников конкурса — непрофессионалы, по его итогам, в первую очередь, на основе шорт-листа, — топ-30 проектов, — удалось сформировать достаточно подробную и достоверную «карту ветров» дизайна.

Юзабилити — вдоль и поперек
Даже в проектах с арт-подноготной, не направленных на продажи и прямое информирование аудитории, пользовательские интерфейсы становятся всё более «предупредительными». UX-сценарии — во всём: в смене сетки и расположения модулей при скроллинге, в единообразии оформления активных элементов, в текстах интерфейсов.
Конкурсный проект https://duckstore.ucraft.net/
Юзабилити — неотъемлемая часть дизайна. Здорово, что даже в подвале сделанного в шутку сайта (продажа резиновых уточек для ванн — это миссия!) соблюдена иерархия UX.
Брутализм и глитч
«Слабоумие и отвага»? В исполнении неофита — пожалуй, да. В реализации профи — новый уровень выразительности. Зародившийся в послевоенной архитектуре XX века, брутализм однажды перекочевал и в веб-дизайн. В 2018 году он обрел второе дыхание и явно сохранит свои позиции в 2019-м. Сайты с нарочито грубой, угловатой версткой, с декларативным нарушением нормативной эстетики, если бы умели говорить, то выкрикивали бы: «Я не хочу быть красивым // Не хочу быть богатым // Я хочу быть автоматом, стреляющим в лица». Как нельзя удачнее брутализм «спелся» с глитч-артом — художественной манерой, в основе которой — искажения графики, возведенные в ранг приема (пикселизация, эффект телевизионных помех, другие артефакты изображений).
Конкурсный проект https://yvnx.ucraft.net/work/urbanchee
Брутализм и глитч сливаются в экстазе — в подобающем месте, надо заметить.
Эксперименты с сочетаниями ярких цветов и насыщенными градиентами
Когда от привычных гамм в вебе глаз замыливается, впору пробовать нечто менее банальное. В том числе — градиенты с неравномерным смешиванием. В том числе — комбинации ярких цветов, которые пурист назвал бы аляповатыми.
Добавим сюда мондрианизм (mondrianizm), комплекс оформительских решений, вдохновленных изысканиями нидерландского художника начала XX века Пита Мондриана, одного из зачинателей абстракционизма. В том числе — упор на использование желтого, синего и красного цветов, а также на строго выверенные пропорции горизонтальных и вертикальных линий, пересекающихся непременно под прямыми углами.
Конкурсный проект https://shanskiy.ucraft.net
Наивно Насыщенно. Супер. И — с намеком на тот самый мондрианизм.
Конкурсный проект https://boogieboogie.ucraft.net
Элегантное шрифтовое решение, много «воздуха», аккуратные hover-эффекты — и раз, смелые цвета с залихватской анимацией. Кстати, второе место в конкурсе.
Данила Шорох
арт-директор агентства CTZN, куратор программы «Медиа дизайн» Британской высшей школы дизайна
Если раньше все юзабилити зачастую сводилось к наличию меню-гамбургера и кнопки с call-to-action, то сегодня все элементы веб-дизайна должны быть увязаны в UX-сценарии. Важно также мягко вести пользователя через интерфейс, подсказывая ему дальнейшие шаги, предвосхищая его действия.

Из частностей — в 2018 году в веб-дизайне усилился тренд на «умный скроллинг», такой, который грамотно, без лишних отвлекающих маневров, тонко ведет потребителя к call-to-action. Эксперименты с hover-эффектами и другими украшательствами, с которыми до недавнего времени забавлялись очень много, уступили место вдумчивой работе с UX.
Дуплекс, или duotone
Попросту — вариация изображения, в которой используются два основных цвета с их полутонами. Не обязательно, чтобы для достижения большей выразительности использовалось больше цветов, да поярче. Так — тоже очень емко. Кстати, монохром тоже по-прежнему в ходу.
Конкурсный проект https://become-a-hero.ucraft.net
Duotone на первом экране — неплохой способ включить внимание посетителя. Хотя выглядит слегка тревожно. Ладно — неонуарно.
Сочетание плоского дизайна и 3D, фотографий и кастомных иллюстраций
Часто новые тренды рождаются из комбинации привычных элементов. Отрисованные вручную или «будто бы вручную» фоны принимают в себя фото объектов или героев, персонажи снимков словно взаимодействуют с трёхмерными шрифтами, а 3D-модели выпукло выделяются на фоне плоского дизайна. Все это позволяет по-новому аранжировать пространство и управлять фокусом внимания посетителя.
Конкурсный проект https://krpv.ucraft.net
Добротный образчик флэт-дизайна, плоский и с впечатляющим 3D.
Авторские, лайфстайл-фото и иллюстрации «под заказ»
Все кастомное, если не сказать «крафтовое», неприлизанное, специально-под-проект-сделанное — одна из силовых линий современного веб-дизайна. Теперь ждем, когда в мейнстрим на новом витке спирали моды вернутся стоковые фото!
Конкурсный проект http://www.plusheroid-papercut.ml
Уже на первом экране рисовка ненавязчиво подсказывает нам, о чем лендинг, и работает она в связке с контентом.
Конкурсный проект https://moonrabbit.ucraft.net
Лунные кролики в едином стиле, плавная анимация — атмосфера складывается, правда?
Свят Вишняков
графический дизайнер и преподаватель в Bang Bang Education (член жюри)
В вебе сегодня прослеживается не один подход к типографике. Широко распространен журнально-книжный, в соответствии с которым мы задействуем ту экспертизу, что была у нас в принтовом дизайне, и переносим ее в интернет. Так сказать, по следам Йозефа Мюллера-Брокманна (легендарного швейцарского графика, автора книги «Модульные системы в графическом дизайне») — с приоритетом типографики, с внятными направляющими и т. д. В такой манере, тяготея к аскетичности, любит работать, скажем, новозеландская студия Sons & Co.

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

Правда, именно с типографикой участники конкурса экспериментировали довольно робко, и я хочу пожелать им быть смелее.
Буйство типографики: шрифты геометрические, акцидентные, с анимацией
Действительно, такое чувство, будто веб-типографика в последнее время развивается под девизом «Пусть расцветают сто цветов». Что объединяет большую часть субтрендов здесь, так это повышенное внимание собственно к шрифту: из служебного элемента оформления страницы он превращается в самостоятельную фигуру, а то и становится не только носителем сообщения, и но и сообщением сам по себе.
Конкурсный проект https://271.ucraft.net
Образец «самодовлеющего» шрифтового решения.
Плавные и «природные» линии
Как часто бывает, разноречивые тренды идут параллельными курсами и нисколько друг другу не мешают, наоборот, иногда даже удачно сочетаются. Не только углы в веб-интерфейсах становятся плавными, но и, например, границы иллюстраций.
Конкурсный проект https://neopolis.ucraft.net
Заголовок-панчлайн, если вглядеться, визуально вторит окаймлению иллюстрации.
Генеративный дизайн и WebVJ
Использование изображений, сгенерированных с помощью компьютерных алгоритмов, получило новый импульс с бурным развитием machine learning. Такие проекты делаются как из любви к чистому искусству, так и из соображений сугубо прагматических — ради эффектного и эффективного отображения закономерностей в массивах больших данных. Среди главных новаторов на этой стезе — японец Масатацу Накамура, делающий впечатляющие data-инсталляции для Experiments with Google.
Кирилл Казачек
senior product designer в Icons8.com (член жюри)
Для меня самый заметный тренд 2018 года — заигрывание со швейцарским стилем. В первую очередь речь идет о строгости в типографике и минималистичных лэйаутах, основанных на сетках. Все это по сути перекочевало с плакатов в веб и, скорее всего, останется с нами надолго, потому что продолжает чуть менее осязаемый тренд последних лет: все крутится вокруг контента. Оформления становится меньше, контента — больше. Как следствие, вокруг стало много сайтов с крупной, удобной для «сканирования» типографикой и причудливыми иллюстрациями.
Здорово, что почти во всех работах, поданных на конкурс, заметен приоритет контента. Даже в проектах вокруг выдуманных продуктов повествование чаще всего связное. Как мне показалось, легкий консерватизм в основном проявлялся в анимации элементов, в остальном приятно удивило разнообразие решений.
Анимация, много анимации
А также синемаграфика, коубизация и все такое прочее. В панораму дизайна добавляется еще один организационный слой — «иерархия движений». Анимация (иногда с заметной перестройкой верстки) используется при скроллинге лендингов, зацикленные короткие видео служат фонами страниц, отдельные «живые» элементы дополняют статичные снимки.
Конкурсный проект https://devolist.ucraft.net
Сочетание выверенной строгой типографики с анимацией (и уж не отсылка ли к фильму «Клетка» тут?).
Конкурсный проект http://www.kwc.guide
Интерактивная анимация плюс интеграция шрифта в сам интерактивный объект. Право слово, чёрно-белый омский Blade Runner! (На самом деле китайский.)
Старый добрый минимализм
Наверное, это один из самых долгосрочных трендов, который не теряет актуальности. Много «воздуха», лаконичные графические решения, необходимое и достаточное количество цветов — дзен и искусство ухода за CSS.
Конкурсный проект, 3-е место https://debranding.ucraft.net
«Птичка залетела» аж на третье место Ucraft Awards
Сергей Нугаев
сооснователь образовательного проекта «Кружок» (член жюри)
Обычно я работаю на стыке между дизайном и разработкой, и зачастую фокус смещен на второе. Но из того, что в последнее время мне бросается в глаза в визуальном плане, отмечу чистоту и внимание к смыслу, из чего следует трепетное отношение к типографике, отсутствие боязни работать с цветом и шрифтом взамен большого количества медиаматериалов. Замечаю, что изображения и видео теперь скорее сами вписываются в какую-то форму, нежели эту форму создают.

С точки зрения функциональности все меньше хитрых задумок, виден уклон в сторону простых точных решений. Направления в общемировом и российском веб-дизайне несколько различаются. За вычетом нескольких ярких точек в среднем российский рынок скорее более консервативный и следует за международными тенденциями с отставанием в 1–3 года. То же самое наблюдалось во многих конкурсных работах: в основном это попытки создать классическое секционное поэкранное разделение с четкой привязкой к использованию броских, оригинальных картинок, а сам посыл нередко терялся и оставался на втором месте. Но были и исключения: ребята использовали запоминающиеся шрифты, правильно подобрали композицию — получилось просто, чисто, красиво.
Ну а о главном лауреате Ucraft Awards разговор отдельный. Кстати, какие тренды веб-дизайна видите (или не видите) здесь вы?
Победитель конкурса: https://soleprimo.ucraft.net
Комментарии 18
    +2
    Мои ощущения от этих дизайнов:
    Скрытый текст
    image


    Главный вопрос «Зачем?». Дизайн ради дизайна? Загрузка страниц по минуте для того, чтобы посмотреть на сотню байтов осмысленной информации?..
      +2

      Зачем? Подиумные работы.

      +5

      У меня все лендинги воспринимаются как один http://успешный-успех.рф/


      • КПДВ с названием продукта и/или успешным лыбящимся чуваком
        — паралакс/видос/картинка/какой-нить кул-эффект----
      • 3-6 скудных выжимок описания
        — паралакс/видос/картинка/какой-нить кул-эффект----
      • картинка на экран с подписью/без
        — паралакс/видос/картинка/какой-нить кул-эффект----
      • 3-4 абзаца — инструкция для блондинок,
        — паралакс/видос/картинка/какой-нить кул-эффект----
      • типа отзывы с какими-то чуваками которых я не знаю и накоторых мне насрать
        — паралакс/видос/картинка/какой-нить кул-эффект----
      • кнопка заказать звонок/купить/оставить заявку/
      • контакты или еще кака-нибудь фигня

      и это всё на туеву кучу метров, при смысле умещающемся в текст на пол экрана.

        +4
        (Сарказм он)
        Самое печальное, что люди программисты на это тратят свои лучше годы, вместо того, чтобы запускать в космос ракеты…
        +5
        сегодня все элементы веб-дизайна должны быть увязаны в UX-сценарии. Важно также мягко вести пользователя через интерфейс, подсказывая ему дальнейшие шаги, предвосхищая его действия
        Не надо меня никуда водить. Не надо мне никакого юзер-экспиренса, тем более заранее расписанного сценарием. За этой всей фигнёй, если вдруг душа попросит, пойду в театр или в кино. Или в цирк. На сайт я прихожу с конкретной целью. Например, за той инфой, которую мне пообещали. То, что я ищу, я надеюсь найти быстро. А потом уже, получив желаемое, я оглянусь вокруг, и даже, может быть, что-нибудь куплю или на что-нибудь подпишусь.

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

        Я, конечно, всё понимаю. Сэйлз-манагер хочет трахнуть мой мозг, дизайнер хочет создать шедевр, разраб хочет поюзать самый модный фреймворк, а продакт-овнера прёт от того, что на большом экране и на мобильнике сайт выглядит одинаково (OMG!). Но я-то тут причём? Это их праздник жизни, мне всё это кино не нужно и смотреть мне его влом. Мне нужно та конкретная вещь, за которой пришёл.

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

          Делали бы хоть настройки какие-то для отключения всего этого медиаговна. Людям нужна информация, а не картиночки/видео/анимации_на_жс.

            0
            А вот соглашусь. Иногда очень хочется иметь что-то подобное «do not track», только в смысле «уберите всю фигню и дайте мне инфу».
              +2
              Самое главное что информацию-то иногда положить и забывают.
              +1
              У меня ни одна ссылка на *.ucraft.me не открывается. «There is no website configured at this address.» Это тоже часть креатива или кто-то облажался?
                +1
                У меня то же самое. Пытался посмотреть на «главного лауреата», который по ссылке soleprimo.ucraft.me А он открывается, только по адресу https://soleprimo.ucraft.net

                Дизайн ударил в голову, не иначе.
                  0
                  мать, у меня чуть эпилепсия не началась…
                0
                пользователь хочет просто скачать прайс-лист в экселе, а юзабилити этот ваш ему только мешает.

                Теперь на сайте пиццерии теперь нужно потратить 10 минут чтоб просто найти телефон для заказа.

                Юзабилити это когда просто, быстро, удобно. А не вот это вот все.
                  0
                  Я всегда говорил, что, то что называют «трендами» — это лишь дизайн для показухи, да, он красивый, но практичности в нем ноль.

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

                    Жутко плюсую господам сверху. Чтобы найти какую-то инфу, сначала скрываешь 50 баннеров о подписке, пробираешься через уведомления об отключении ad-block, потом не дай Бог тебя куда-нибудь редиректнет и прочее и прочее. Проще, люди, делайте проще.
                      0
                      Ладно бы ещё сами дизайнеры друг перед другом выпендривались. Но нередко клиентов приходится отговаривать от их хотелок, навеянных такими вот «модными трендами» и объяснять, зачем сайт клиенту нужен (обычно для бизнеса, а не для понтов).
                        0
                        Яркая, броская упаковка продаёт. Это факт. Лого «Без ГМО» продаёт лучше указанного состава продукта без этого самого ГМО. Печально, но факт. Веб-дизайн вполне подчиняется этим правилам.
                        Я бы скорее поставил вопрос об уместности избыточного оформления. Сайт арт-фестиваля ещё можно снабдить скроллингом, обилием встроенного медиа-контента. А вот интернет-магазин, даже модной одежды, должен быть более утилитарным и менее отвлекающим от товара.
                          +1
                          Беда этого дизайна в том, что это не дизайн. Это тяжелые последствия Google-вского подхода к дизайну: mobile first, material design для приложений и так далее.

                          «Бабахнем большую черную фотку на весь экран и напишем поверх мелким белым шрифтом. Капсом! Нет, сделаем картинку красно-синей. О, сине-зеленой, а синий сделаем — вырвиглаз!»

                          На небольшом мобильнике это все как-то смотрелось бы, а на планшете или компе — никак. В приложениях вырвиглазные цвета могут смотреться, на сайте — рвут глаз.

                          Про кошмарный UX то же самое — то, что годится для приложений «мы главный экран сюда прокрутим, и тогда этот экран зумится сюда» не работает нормально для сайтов, а наоборот, бесит. Да и чего, собственно, ждать от стандартов, заданных корпорацией, которая сделала Gmail с его анти-UX?)))

                            0
                            Баския один из любимых художников.

                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.