Тренды дизайна сайтов 2018, представленные здесь, задают общий контекст, в котором вам предстоит работать в ближайшей перспективе. Как минимум, если вам хочется соригинальничать и сказать новое слово, нужно знать, что является мейнстримом. И что такое сегодняшние тренды в дизайне сайтов, как не вчерашние инновации?
Легко впасть в снобизм, рассуждая о трендах веб-дизайна 2018: мол, что такого креативного в том, чтобы следовать за модой? Конечно, креатив — это непрерывный поиск, поэтому стоит относиться к понятию «тренды web-дизайна» как к подсказке, путеводной нити. Можно принимать или отвергать их, но о них стоит знать, учитывать их при решении, как придумать дизайн сайта.
Предыдущие годы были богаты достижениями, в том числе наступлением мобильного интернета.
С учетом всего вышесказанного, предлагаем вашему вниманию семь современных трендов веб-дизайна.
Анимация и микровзаимодействия
Анимация прочно укрепилась в числе современных трендов веб-дизайна.
Интернет — это не статичная среда, он позволяет гораздо больше, чем размещение текста на веб-страничке. Интернет способен передавать информацию с помощью анимации и интерактива. Веб-сайт может не просто сообщать некие данные, но и заставлять их двигаться и, что еще важнее, позволять нам взаимодействовать с ними, влиять на них. По мере того, как вы скитаетесь по интернету, информация не просто выносится на ваше суждение, но проникает, пробирается в сознание различными способами.
Естественно, тут не стоит перегибать палку, дажи милая анимация легко может стать раздражающей, особенно для людей с повышенной чувствительностью к миганию. Но при правильном подходе даже скромная анимация может привлечь внимание посетителя к нужному контенту в нужное время, чтобы обеспечить конверсию.
В последнее время появилось множество инструментов для легкого создания сложных анимаций или интерактивных элементов. Особенно популярно сегодня анимирование прокрутки страницы и переходов между разделами. Не теряют актуальности анимированные экраны загрузки (loading animations). Они нужны, чтобы удержать пользовательское внимание, пока сайт грузится или совершает поиск.
Можно также анимировать навигацию и меню, сделать анимированную галерею или слайд-шоу.
Помните, что анимационные элементы на сайте — это больше не приятные сюрпризики: пользователь видел многое и ожидает чего-то нового. Поэтому они должны сочетать эстетическое удовольствие с практическим эффектом.
3D-графика
Не секрет, что визуальное воздействие является ключевым фактором в веб-дизайне (наряду с удобством).
3D фигурирует в кейсах веб-дизайна с 2011 года, когда был запущен WebGL — java-скрипта для создания 3D-графики без дополнительных программ прямо внутри совместимого браузера. В последующие годы дизайнеры с воодушевлением работали с возможностями, которые им давало 3D.
Пару лет назад первоначальная волна шумихи спала. Но сегодня новый подъем интереса к 3D подогревается более обдуманными и интересными способами его использования. Раньше 3D вставляли ради него самого — чтобы удивить пользователя: «Смотри, это же 3D!» Теперь 3D из цели превратилось в средство, способ создать интересное впечатление от сайта в целом. Сайты, умело применяющие 3D, обычно получают призы дизайнерских конкурсов.
Фишки и новинки 3D могут быть маленькими и аккуратными, а могут раздуваться до эпических размеров. Кто-то использует красивые анимированные заголовки в стиле стрит-арта; кто-то генерирует целые фантастические города; кто-то превращает меню из обычного списка во вращающийся многогранник. Посмотрите на такие завязанные на дизайне платформы, как Behance, Dribbble or Pinterest.
Интересным ходом может быть совмещение 3D с фотографией и, конечно, с текстом. Для сохранения визуального баланса стоит грамотно сочетать трехмерные и двухмерные элементы страницы, уделять внимание деталям, сохраняя общую композицию, не резать глаз слишком яркими цветами, но умело играть оттенками, учитывать популярные цвета в веб-дизайне.
Полуплоский дизайн и иллюстрации
К числу современных трендов стоит отнести полуплоский дизайн и иллюстрации (Semi-flat design). Этот тренд пришел на смену скевоморфизму, чтобы удовлетворить меняющиеся вкусы потребителей и воспользоваться новым витком технологий.
Полуплоский дизайн (его еще называеют Flat 2.0) — это возвращение к относительной объемности изображения и красочному интерфейсу. С помощью кода в него добавляются большие цыетные тени. Во многом тут чувствуется влияние шведской школы художественного минимализма и гугловского Material design. Semi-flat привнес в дизайн объем и реалистичность, добавил контраста.
Перечислим плюсы этого стиля:
- Хорошая совместимость с адаптивным дизайном;
- он визуально понятен, и пользователи в нем легко ориентируются;
- структурированная компоновка и четкие визуальные эффекты создают ощущение целостности и визуальноы зрелости;
- простота не требует долгой загрузки;
- использование простых шрифтов способствует читабельности текста.
Однако стоит учитывать, что подчеркнутая простота может кому-то показаться скучной, а чрезмерная популярность этого стиля лишает его оригинальности. Лучше всего полуплоский дизайн работает в случае, если вы не хотите отказываться от плоского дизайна, но желаете придать ему глубину и объем. Он также помогает работать с яркими цветами и с большим количеством текста.
Элементы полуплоского дизайна проникают и в другие направления и стили, возникают гибридные виды дизайна, которые становятся так же привычны, как и «чистые». Вы можете смело воспользоваться отдельными фишками semi-flat, если не хотите усваивать этот стиль полностью. В конечном счете, пусть из отдельных элементов сложится ваш собственный уникальный стиль,
Широкие шрифты
Вебдизайн основа на коммуникации. Главная его задача — установить четкую связь между вебсайтом и пользователем и помочь пользователям получть от сайта то, что им нужно. Когда мы говорим о коммуникации в контексте веб-дизайна, то чаще всего имеем в виду текст. Поэтому типографика (искусство оформления при помощи наборного текста) играет здесь ключевую роль. Свыше 95% информации в сети передается с помощью текста. И качественная типографика призвана сделать процесс чтения приятным.
Всякий шрифт обладает собственным характером. Сегодня в веб-дтзайне популярны широкие шрифты (Extended Fonts). Дизайнеры шутят: «Много текста, мало места — используй сжатый; мало текста, много места — бери широкий». Но дело не совсем в этом.
Некоторые консервативно настроенные шрифтовики жалуются, что широкие версии классических шрифтов были придуманы для того, чтобы заработать дополнительные деньги, но другие разумно возражают, что дизайнеры не стали бы создавать широкие шрифты, если бы люди их не покупали, и их бы не покупали, если бы они не были нужны.
В противовес сжатым шрифтам (Condensed Fonts) широкие шрифты создают ощущение пространства и расслабления. А это именно то, чего нам всем сегодня не хватает. Они как бы дают пользователю вздохнуть, дают ему свободу движения, в то время как сжатые шрифты, напротив, вызывают ощущение скованности, скученности, несвободы.
Как правильно пользоваться широкими шрифтами, в каких случаях их следует применять?
Если у вас появилось желание разрядить, растянуть надпись, то проще воспользоваться широкой версией того же шрифта. Широкий шрифт стоит применять наряду с другими видаими шрифтов (сжатыми, вытянутыми и др.) для того, чтобы выделять определенные элементы текста, например, заголовки, подписи к фотографиям, вставки, сноски. Этому можно поучиться у качественных глянцевых журналов.
SaaS-приложения
Трендом последних лет стал расцвет SaaS-приложений для дизайнеров. SaaS расшифровывается как «Software as a Service» (ПО как услуга). Речь идет об онлайн-инструментах, доступ к которым осуществляется по платной подписке. В последнее время появилось много действительно полезных сервисов, таких как Invision, Figma, Avocode.
Раньше программы продавались разово, а за обновления или дополнения к ним уже приходилось платить. Потом возникла идея SaaS, и в последнее время она принесла свои плоды и веб-дизайну. Действительно, зачем за кучу денег приобретать лицензию на программу, если, скажем, вам требуется воспользоваться ей всего несколько раз?
Теперь дизайнеры могут платить ровно за тот объем использования ПО, который им нужен. Это добавляет дизайнеру гибкости, он уже не привязан к одному-двум инструментам, и может воспользоваться новым приложением (или набором приложений) для каждого нового проекта. С тех пор, как SaaS утвердились на рынке, стало гораздо проще работать в сфере digital вообще и в веб-дизайне в частности.
Например, приложение InVision показало высокую эффективность в сфере онлайн-прототипирования сайтов. Собственно, инструмент существует уже пару лет, но именно сегодня наступил расцвет его популярности и заслуженное признание в качестве лучшего способа командного прототипирования. InVision лучше всего подходит именно для коллективной работы и обмена файлами в процессе. Он также прекрасно помогает избавиться от Photoshop-зависимости.
Figma — также сервис для дизейна, прототипирования и обмена идеями в процессе работы, позволяющий быстро перерабатывать идеи в проекты. Он предоставляет онлайн-среду для работы и общения с клиентами и коллегами и удобно оптимизирован для мобильного использования.
Ломанные сетки
Сетка является основой дизайна почти любого сайта. Невидимые линии позволяют создать ритмическое пространство, чтобы каждый проект вызывал ощущение соразмерности и упорядоченности. Но вовсе не обязательно придерживаться правил сетки на все 100%. Вы можете иногда ломать границы сетки и при этом не вызывать эффект беспорядка на экране.
Отсюда и возникла концепция ломаной сетки (broken grids) в дизайне. Вне зависимости от того, каким ПО вы пользуетесь, сетка является базовой частью веб-дизайна. Она определяет, куда поместить те или иные элементы, и как они должны располагаться на экранах различного формата. Собственно, сетки применялись еще в газетах и книгах.
Так зачем же эту структуру нужно ломать?
Это может дать дополнительный акцент на определенный элемент. Аккуратное нарушение правил сетки может придать неожиданную изюминку проекту.
- Ломать сетку можно с помощью слоев. Слои помогают отойти от сетки, сохраняя единство дизайна. Пользователи невольно обращают внимание на элементы, которые пересекают границы панелей, находятся как бы поверх них. Если таких элементов несколько, то пользователь мысленно связывает их между собой. Но нужно оставить пользователю возможность скрыть подобные элементы.
- Намеренные пустоты. Дизайнеры нередко отходят от сетки, чтобы создать больше пустого пространства и сфокусировать внимание на конкретных элементах — тексте или логотипе. Например, можно оставить больше свободного пространства вокруг плашки с призывом к действию (call to action).
- Поместите элементы в контейнер, обведите их общей рамкой. Это позволяет объединять элементы, когда сетка сломана. Нарисуйте нужные границы на фоне, чтобы пользователь догадался, какие элементы связаны между собой.
Ломать сетку — непростое занятие. При неверном подходе вы получите беспорядок на экране. Поэтому этим приемом следует пользоваться аккуратно — применять только на одной странице или толко к небольшому набору элементов, чтобы не сбить посетителей с толку.
Шум в дизайне
Последним трендом, о котором мы сегодня поговорим, является шум в дизайне (noise in design) — еще один оригинальный способ добавить изображениям объема и пространственности. Как и полуплоский дизайн — это реакция на минимализм предыдущего периода, стремление вернуть картинке детали, наполнить ее элементами.
Если еще пару лет назад все стремились максимально разгружать стиль, считая, что визуальный шум вызывает чувство стресса и усталости, то восходящее поколение хипстеров вернуло моду на «ламповость» звука и зернистость в стиле винтажных фотографий.
Современные скорости интернета и возможности браузеров позволяют работать с большим количеством элементов без задержек в прогрузке. Причем элементы визуального шума могут реагировать на движение курсора и вступать с ним во взаимодействие. Это позволяет погрузить пользователя в атмосферу портала, углубить восприятие.
Такие тренды мы наблюдаем сегодня. Ну, а если по каким-то причинам они вам не подходят, подождите полгодика — в моде окажется что-то другое.