Тренд 1: Минимализм в мыслях – минимализм в вебе
С начала развития дизайна веб-интерфейсов состоялось много экспериментов и изменений. Вспомним первые сайты, которые были созданы в 90-х или ранее, хотя сайтом это назвать трудно, скорее нагромождение текстовых материалов на странице.
Интересно 70% работников более довольны работой, работая удаленно
Такое понятие, как "дизайн-макет" или визуальное представление информации – полноценная типографика, цветные фотографии и графические элементы меню навигации – оставались пока делом пусть недалекого, но все же будущего. Остается лишь поблагодарить веб-дизайнеров, сумевших отойти от "античности" 90х годов к современному минималистичному виду веб-страницы.
Ранние вебсайты не отличались дизайнерскими особенностями / Скриншот
Почему собственно возник тренд минимализма?
Проводя колоссально много времени в веб-пространстве, у пользователей отпала потребность в слишком выраженном дизайне. Контент и функциональность – вот что является самым главным. Дизайн не должен отвлекать читателя от содержания, или быть надоедливым. Поэтому белый цвет и отсутствие массива дизайна – оптимальный вариант для веб-страниц в 2021 году.
Дизайнеры, создавая продукт, фокусируются на деталях: сетка интерфейса, типографика, иконки, цвета, анимация.
Ведущий эксперт в сфере веб-разработки, Егор Комаров, рассказал, что нужно учитывать делая минималистичный дизайн:
- На первом плане оставляйте только самые главные функции для пользователей.
- Интерфейс делайте "легким" – оставляйте много воздуха на странице.
- Не используйте много акцентных цветов, в центре должен оставаться контент.
- Стройте ваш дизайн на качественно подобранных шрифтах, желательно одной гарнитуры, правильно делайте акценты и качественную верстку.
- Размещайте все элементы на привычном месте для пользователя. Например, не надо иконку сообщения размещать в нижнем левом углу, оставьте ее там, где читатели привыкли ее видеть.
Рассмотрим этот тренд на примерах нескольких крупных компаний – YouTube и Behance.
Современные компании следят за трендами в дизайне / Скриншоты
Как мы видим, большинство сайтов, особенно самые известные, придерживаются этого тренда. Все они выглядят почти одинаково – отсутствие цветов в главном меню, минимум акцентов, белый цвет преобладает, много "воздуха", контент в центре внимания.
Тренд 2: Тени и градиенты
Думая, что тени и градиенты – это совсем неновый тренд, вы будете абсолютно правы. Это не новое, ранее невиданное, однако это – нечто древнее, но модернизированное. Единственное, что на сегодня изменилось – это большая "воздушность" (к этому слову будем еще не раз возвращаться), легкость и объем. По словам Егора Комарова, все это должно миксоваться с пастельными градиентами и популярными сейчас 3D изображениями и иконками. В общем, это тот самый минимализм, но более объемный.
Только на пастельных тонах и объемности градиенты не остановились, они продолжают эволюционировать. Разрабатывая современный дизайн, UI/UX специалисты прибегают к так называемым сложным градиентам и blur-эффектам.
На этих примерах мы можем увидеть микс сложных цветов и эффект "наложения" / Скриншоты
В дополнение интерфейсы все чаще начали применять эффект Color Blur, часто в роли background. Простыми словами это придает глубину и объемность веб-странице.
Не пропустите ЭДО, лидерство и стартапы: 5 онлайн-курсов для предпринимателей
Тренд 3: 3D иллюстрации и иконки
Этот тренд только заходит на сцену веб-разработки и его популяризацию связывают с большей доступностью различных учебных курсов по 3D и материалов по этой тематике. При наличии всех учебных ресурсов, дизайнеры активизировались и начали "сыпать" иконками и иллюстрациями, создавая целые библиотеки 3D элементов.
Такие простые элементы очень круто разнообразят визуальную составляющую любого веб-продукта / Скриншот
Подобные библиотеки будут развиваться, их количество и качество тоже. Более профессиональные будут платными, более любительские и простые – бесплатными. Сейчас существует проблема дефицита таких библиотек – их крайне мало, а желающих слишком много. Поэтому, большинство дизайнеров, в недалеком будущем, будут использовать доступные иконки и иллюстрации, в результате сайты будут похожи один на другой.
Этот тренд сейчас лишь зарождается и медленно набирает обороты. Со временем рынок сможет предложить большее количество профессиональных и качественных 3D библиотек, которые с уверенностью можно будет использовать в своих проектах. Пока этого еще не произошло, дизайнеры советуют пользоваться услугами графических дизайнеров и заказывать индивидуальную графику.
Тренд 4: Фото + Графика
Гибрид обычных фотографий и графических иллюстраций – супер свежий тренд конца 2020 и начала 2021 годов. Об этом говорит Нико Гибрадзе – ведущий дизайнер в impulse.guru. Такая коллаборация – дань уважения фанам поп-арта. Задача этого тренда не только создавать так сказать игривую атмосферу на сайте, но и придать определенной многослойности вашему веб-продукту. Также это добавляет необычности веб-дизайну и увеличивает интерес потенциального покупателя к вашему продукту.
К сожалению, отечественные заказчики с опаской относятся к этому тренду, предпочитая более простые, обычные 2D иллюстрации. Западные конкуренты, в свою очередь же, активно используют такие гибриды фото и графики, поощряя будущих клиентов.
И неважно, это сайт медиа или интернет-магазин. Кстати, использование такого тренда в последнем сегменте рынка, может говорить не только о том, что ваша компания идет в ногу со временем, но и вашей целевой аудитории и вашем товаре в общем.
DePlace Maison – сайт с оригинальным обувью, кроме тренда "фото+графика", использует еще одну "фишку" 2021 – плавающую анимацию. На сайте этого бренда вашим курсором является черная клякса, которая будет расплываться, повторяя ваши движения.
Сочетание фото, графики и необычных элементов помогут задержать клиента на сайте / Скриншот
Такая анимация привлекает ваше внимание, вам хочется как бы играть этой кляксой, тем самым время вашего пребывания на сайте увеличивается. А это уже залог того, что вы будете изучать сайт и его товары, сами того не понимая.
Тренд 5: Асимметричные макеты
Асимметричный дизайн привлекает внимание / Скриншот
Согласитесь, вам приспичило перейти на этот сайт и рассмотреть поближе?
Такие нестандартные решения – ключ к сердцу посетителей вашего сайта. Подобные макеты стопроцентно принесут благосклонность и популярность вашей компании.
Веб-дизайнеры привыкли в своих проєктах реализовывать обычные сетки размещения информации, однако с этим новым трендом на асимметричность, пришло время ломать границы и выходить за рамки.
И конечно, теперь привычные сетки размещения новостных сайтов или интернет-коммерции сходят на нет. Появление новых форм, непохожих друг на друга – новые реалии интернет пространства. Привычное размещение элементов меню, типа "О нас", "Услуги", "Контакты" и прочее могут иметь совершенно нешаблонный вид, по мнению Нико Гибрадзе.
Новости Техно Семь партнеров Apple обвинили в привлечении принудительного труда уйгуров
Асимметричный макет может вызвать бешеную заинтересованность посетителей сайта, а это значит, что время пребывания на сайте возрастет. Пользователи будут изучать ваш сайт, разбираться в нем, а впоследствии перейдут на ваш продукт. Такой макет в состоянии удержать клиента на вашей странице гораздо дольше, чем обычные квадратные сетки размещения.
Однако, используя асимметрию, не стоит забывать о композиции и балансе. Надо выдержать идеальное равновесие, так чтобы один веб-элемент не преобладал над другим. Например, иллюстрация не должна быть больше по размеру чем текстовый блок.
Материал подготовила София Лещименко