Дизайн сайта напрямую влияет на его продвижение и успех. Как правило, именно первое впечатление от оформления сайта определяет отношение пользователей к нему. Именно дизайн может заставить пользователя остаться на сайте или продолжить серфить интернет в поисках другого ресурса.

Красивый и аккуратный сайт свидетельствует о том, что его владелец думает о посетителях и хочет произвести на них положительное впечатление. Однако даже у самого качественного дизайна может быть одна большая проблема – устарелость. Тренды меняются, и тот, кто не следит за ними, рискует потерять часть аудитории, ведь кто захочет посещать сайт с дизайном 90-х или начала 2000-х?


proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Fdefault%2F0001%2F01%2Febf84fa575da14ac794a408e610569f819d51c6f.png&hash=a44ada700d816263333078ce943a92a0

Сайт компании Apple в 1997 году




Поэтому важно быть в курсе всего, что происходит в мире сетевого дизайна. Начать можно с этой статьи – в ней вы найдете основные тренды дизайна начала 2020-х. Но перед этим вспомним пару интересных трендов 2017-2018 года.

Неугасающие тренды веб-дизайна​



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

proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Fdefault%2F0001%2F01%2F870a11e9ed8fc5b6b76e02328cf5967fc3719caf.gif&hash=73fa69c89f5271af53e5331f0b401ee7



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

proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Fdefault%2F0001%2F01%2F38cc6b5907decc029a4f1963555427bab68aae59.jpeg&hash=f916a1381bb4cbf6f5fde28115b988c0

Новые тренды веб-дизайна​


Минимализм продолжает оставаться актуальным трендом, а вот плоский дизайн 2.0 (flat 2.0) только набирает обороты. Изначально возник обычный плоский дизайн, который был двухмерным и ориентировался на минимализм. Однако на современных сайтах все чаще встречается плоский дизайн 2.0, где добавлены тени, градиент и другие элементы, которые делают дизайн почти двухмерным.

proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Fdefault%2F0001%2F01%2Fb6300aa390fe015b903f066398dd2d1eeb51b1ef.jpeg&hash=831d024bfdd432fe96c1dda82f262c53

Flat и flat 2.0
Интерактивность (изменение элементов сайта в зависимости от положения курсора) и анимация – два наиболее эффективных способа привлечь внимание пользователя. Люди любят смотреть истории и не очень любят читать (и в этом секрет популярности Instagram). Поэтому если вы хотите заинтересовать посетителя, используйте любые анимированные элементы– гифки, синемаграммы, видео. Делать это можно не только на сайте, но и в письмах, социальных сетях, рекламных баннерах.


Продолжает увеличиваться число сайтов, использующих изображения в формате svg – они мало весят (сайт быстро грузится), с ними легко работать (можно сжимать, растягивать), они хорошо выглядят на экране любого устройства.

proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Fdefault%2F0001%2F01%2F2ace47cfab9579ebb7a189b663fb7df5787b350a.png&hash=7e82baf24bf8ebaf505a789cb3ff83d8

Векторная графика также позволяет создавать SVG-маски, которые, в свою очередь, позволяют принимать на сайте различные формы. Выглядит это стильно и оригинально, особенно если сочетается с видео, как на этом сайте: Rich Brown | Freelance Digital UX/UI Designer | London, UK

Пример другого креативного использования SVG: https://codepen.io/shshaw/pen/PPEMYX

proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Fdefault%2F0001%2F01%2Fe7e493fb1bb7a25d70efe3281e40e998049079bd.png&hash=d4e194228da9f50fc462b53b8a937a99


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

proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Fdefault%2F0001%2F01%2Fec3460df15a5e6a566d131171a009ab6639c64d1.jpeg&hash=b5456de28e9f97e25b1f872934f144f7


Элемент canvas позволяет создавать на сайте интересные эффекты, которые, в отличие от SVG масок, могут быть синхронизированы с курсором. Примеры таких эффектов:

proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Fdefault%2F0001%2F01%2Ff6bc557d5dacf01490c51cd18b012295602280c3.png&hash=13af19539ecd73e8f875701aaca90679


https://codepen.io/acauamontiel/pen/mJdnw


https://codepen.io/tholman/pen/Apvxe

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

proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Fdefault%2F0001%2F01%2F27a354e5b592e709d926a88dbac55112e72e6e62.jpeg&hash=af3d600001e53a9a185b3cc55fba43fc


Что касается градиента, то это тренд не новый – градиенты активно используются в дизайне сайтов уже несколько лет. И до сих пор остаются актуальными. Градиент можно использовать в кнопках, надписях, фоне… в общем, практически в любом элементе. Сейчас трендом является именно сочетание яркой палитры и градиента.

proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Fdefault%2F0001%2F01%2F3d334dbde22eb1c0f5d092c5125a8387cffeaaa9.jpeg&hash=baa55cc3bc04b0066be3dc083dde3837


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

proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Fdefault%2F0001%2F01%2F9971fb1c76ceb4878c86952f78a1b409d4bd5e37.jpeg&hash=159436785bda9115a40d18965623e2d9


Легкая асимметрия в дизайне позволяет оживить внешний вид сайта, сделать его более интересным. Асимметричный дизайн, как правило, положительно влияет на настроение пользователей, так как создает ощущение динамичности:

proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Fdefault%2F0001%2F01%2F059a2fbc168ccc78e8686a439a50c17a3c3e3261.png&hash=f3d755bb73562d4c165c6fec39bcdc63


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

proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Fdefault%2F0001%2F01%2F62a1a012b5c8605dbfddeec52baf9b40e2a2025c.png&hash=7e0da480540005d6c66fd512ac6646ad



В итоге​

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