Во что эволюционировали компоненты сайтов прошлых лет, и какие детали и эффекты используют веб-дизайнеры сегодня?
Материальный дизайн
Компания Google создала «material design» в 2014 году, он встречается и на совсем свежих сайтах. Особенность материального дизайна заключается в элементах, визуально близких к материальным предметам, которые нас окружают. От плоского дизайна материальный отличается:
- небольшим затенением элементов, благодаря которому фигуры приобретают глубину и объём,
- скруглёнными углами у форм,
- плавным, почти незаметным переходом от одного элемента к другому.
Цветовые особенности
Градиент стал популярным еще в 2016 году, когда многие компании начали использовать его для разработки иконок с необычными цветами. Наглядный пример — иконка приложения Instagram.
Более того, cочетание контрастных цветов и минималистичного дизайна — одно из самых распространённых дизайнерских решений. Его пустила в ход и компания Google, когда работала над главной поисковой страницей браузера Google Chrome.
Активный бэкграунд
В качестве бэкграунда на главных страницах проектов веб-дизайнеры применяют короткие ролики и полноценные кинематографические произведения, которые привлекают внимание аудитории к сайту анимированностью или рассказом истории о продукте.
Чаще всего бэкграунд представляет собой полноэкранный элемент. К полноэкранным элементам можно отнести любой визуальный контент, занимающий большую часть страницы. Они приспособлены для адаптивного дизайна, то есть умеют «приспосабливаться» к размерам окна браузера на разных устройствах, и позволяют заполнять формы, не переходя на другие страницы.
Иллюстрации и графические элементы
Графика и иллюстрации разрабатываются индивидуально для каждого проекта. Они привносят в проект цвет, визуализируют информацию, дополняют текст и играют роль развлекательного контента.
Узоры, геометрические фигуры и абстракция
Узоры, геометрические фигуры и абстрактные элементы подчёркивают минимализм дизайна и работают на привлекательность сайта.
Анимации, гифки и скроллы
Чем больше визуальной информации и меньше текста — тем меньше вероятность угасания интереса у читателя.
Среди интерактивных анимированных элементов особое место занимают эффект скольжения по бэкграунду и эффект наплывания одних частей сайта на другие, ведь это привычные инструменты, которые присутствуют практически на всех веб-страницах.
Синемаграфы
Синемаграфы — новый формат визуального контента. Это статичные фотографии или картинки с одним или несколькими подвижными элементами. Они оживляют сайт и привлекают анимированностью.
Лендинги
Лендинг — одностраничный сайт, направленный на точное и быстрое донесение информации. В основном он играет роль медиа-кита или страницы для привлечения внимания аудитории.
Чаще всего лендинги создаются для того, чтобы заявить о запуске проекта или собрать информацию, иногда они играют роль визиток или отсылок к сайтам.
3D (3 dimensions или 3 измерения)
Словосочетания «виртуальная реальность», «дополненная реальность» и «3D» стали частью нашего лексикона. Подобные эффекты — способ создания ощущения присутствия и реалистичности. Их использование в конструировании сайтов доказывает развитие технологий веб-дизайна.
Типографика
Типографика – искусство оформления текста. К ней можно отнести такие параметры как гарнитура, межстрочный интервал, расположение на странице, тип шрифта, цвет, его кегль (размер), расстояние между буквами.
Последнее время веб-дизайнеры говорят «да» необычным сочетаниям шрифтов по толщине, типу, цвету и даже расположению на сайтах. Но самое главное правило — текст должен быть читабельным и понятным.
Нестандартная сетка
Сетка или модульная сетка – элемент в веб-дизайне, который позволяет организовывать пространство страницы с помощью модулей или, по-другому, прямоугольников с заданными параметрами. Это помогает дизайнерам и разработчикам создать нужную композицию.
Нестандартная сетка, то есть нетипичное расположение объектов на странице, привлекает читателя и делает сайт запоминающимся, отличным от других благодаря изобретательности и творческому мышлению дизайнеров.
Автор Анна Соколова