05.11.2017
Статьи Обзоры Короткие

Азбука современного веб-дизайна

Что такое материальный дизайн, скроллы, синемаграфы и лендинги

Азбука современного веб-дизайна
Время чтения: 4 минуты

Во что эволюционировали компоненты сайтов прошлых лет, и какие детали и эффекты используют веб-дизайнеры сегодня?

Материальный дизайн

Компания Google создала «material design» в 2014 году, он встречается и на совсем свежих сайтах. Особенность материального дизайна заключается в  элементах, визуально близких к материальным предметам, которые нас окружают. От плоского дизайна материальный отличается:

  • небольшим затенением элементов, благодаря которому фигуры приобретают глубину и объём,
  • скруглёнными углами у форм,
  • плавным, почти незаметным переходом от одного элемента к другому.
Цветовые особенности

Градиент стал популярным еще в 2016 году, когда многие компании начали использовать его для разработки иконок с необычными цветами. Наглядный пример — иконка приложения Instagram.

Более того, cочетание контрастных цветов и минималистичного дизайна — одно из самых распространённых дизайнерских решений. Его пустила в ход и компания Google, когда работала над  главной поисковой страницей браузера Google Chrome.

Актуальный дизайн логотипа Instagram
Актуальный дизайн логотипа Instagram
Активный бэкграунд

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

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

Иллюстрации и графические элементы

Графика и иллюстрации  разрабатываются индивидуально для каждого проекта. Они привносят в проект цвет, визуализируют информацию, дополняют текст и играют роль развлекательного контента.

Узоры, геометрические фигуры и абстракция

Узоры, геометрические фигуры и абстрактные элементы подчёркивают минимализм дизайна и работают на привлекательность сайта. 

Анимации, гифки и скроллы

Чем больше визуальной информации и меньше текста — тем меньше вероятность угасания интереса у читателя. 

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

Синемаграфы

Синемаграфы — новый формат визуального контента. Это статичные фотографии или картинки с одним или несколькими подвижными элементами. Они оживляют сайт и привлекают анимированностью.

Лендинги

Лендинг — одностраничный сайт, направленный на точное и быстрое донесение информации. В основном он играет роль медиа-кита или страницы для привлечения внимания аудитории. 

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

 

3D (3 dimensions или 3 измерения)

Словосочетания «виртуальная реальность», «дополненная реальность» и «3D» стали частью нашего лексикона. Подобные эффекты способ создания ощущения присутствия и реалистичности. Их использование в конструировании сайтов доказывает развитие технологий веб-дизайна.

Типографика

Типографика – искусство оформления текста.  К ней можно отнести такие параметры как гарнитура, межстрочный интервал,  расположение на странице, тип шрифта, цвет, его кегль (размер), расстояние между буквами.

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

Нестандартная сетка

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

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

Views All Time
Views All Time
133
Views Today
Views Today
1
Опубликовано Рубрики СтатьиМетки

Добавить комментарий