Web-дизайн 2018: новинки, тренды и хиты | Агенство I-PR

Web-дизайн 2018: новинки, тренды и хиты

30.08.2018 Блог I-PR admin

2018 год стал особенным для мира интерактивной моды. Именно сейчас рождается компромисс между "тяжелыми" fashion-технологиями (сюда же можно включить VR c 3D) и требованиями "легкости" со стороны как компьютерных устройств, так и поисковых машин и даже браузеров. Ведь сайты должны быть интересными для изучения, то есть насыщенными/колоритными, и в то же время web-ресурсы должны быстро разворачиваться и загружаться на пользовательских устройствах.

 

Большое и понятное меню

Ярким трендом этого года стало использование разворачивающегося меню. Но это еще не все. Если буквально год-два назад меню в большинстве случаев разворачивалось в достаточно тонкую полоску, то в 2018 году популярность набирает большое меню.

 

Логика большого разворачивающегося меню до боли проста. Если после клика на кнопку показывается небольшая строка с меню, какой смысл его вообще прятать? Тонкая полоска не загромождает основное информационное поле. Совсем другим делом является разворачивание большого меню.

 

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

 

Интерактивный скроллинг

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

 

Воплощение функционала интерактивного скроллинга в жизнь является прерогативой UI/UX-дизайнеров. Подкиньте им эту идею, пусть оценят ее.

 

SVG-маски

Далеко не новая, но набирающая популярность в последние годы задумка. Ее суть проста. Фоновое изображение является анимированным. Фон вначале показывает частичку главной картинки, а затем разворачивая в полноценное изображение. Пример удачной реализации SVG-маски можно посмотреть на сайте www.richbrown.info.

 

Технология WEBGL

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

 

Удачным примером реализации WEBGL является сайт www.globekit.com

 

 

Синемаграфы

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

 

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

 

Примеры интересных работ:

 

 

 

 

 

 

Параллакс

Достаточно привлекающий внимание VR-эффект. Изображение параллакс можно сделать фоновым, наполовину прозрачным, а можно разместить и на переднем плане.

 

Параллакс - это многослойная картинка, в которой слои перемещаются друг относительно друга.

 

Вот живой пример параллакса:

 

 

Шрифты, тона, текстуры

Касательно этих элементов дизайна, то как таковых трендов у них нет. Можно отметить лишь то, интерактивный дизайн требует все больше и больше экспрессии. То есть дизайн сайта должен выражать суть проекта. Посетители должны легко ухватывать задумку по одному только виду общего цветового оформления.

 

Пределов для дизайнерского творчества здесь быть не может.