Тенденции веб-дизайна 2014

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

Начнем с тонких шрифтов, которые стали одной из визитных карточек многих сайтов 2014 года. Смотрится легко и элегантно.

Отступление. Если при этом использовать CAPSLOCK, то следует помнить о разрядке, т.к. без нее он читается хуже. Также CapsLock часто применяется в соцсетях и на форумах для выражения повышенного тона, что может также придать негативное восприятие на подсознательном уровне и на обычных сайтах, поэтому советуем не использовать его совсем, а если использовать, то максимально аккуратно.

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

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

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


Заливка фона сплошным цветом. Отличное решение для акцентирования на содержании контента, а т.к. сейчас большие технические возможности для создания качественной подачи материала: графика, фотографии, видео, 3d-панорамы – привлечь внимание посетителя сайта можно и не рюшками на фоне, а конкретным контентом без отвлечения на мишуру и детализированное оформление.

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

Мы использовали круги на интерактивной карте на сайте ЧЗМК. Благодаря модулю в нашей системе управления сайтом фотографии для объектов берутся автоматически, обрезаются в круг и всплывают средствами html5 и css3.

metcon.ru

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

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

Мы использовали параллакс-эффект на главной странице linetti.ru, для демонстрации залов на сайте Уральских сувениров uralsuvenir.ru/bluehall/ и uralsuvenir.ru/greenhall/ в отдельных элементах на metcon.ru, mielap.ru.

Анимация HTML5/CSS3 – это, прежде всего, интерактивные элементы и постепенная подача материала. Позволяет сделать интерфейс сложных элементов и форм более удобными и понятными, а также привнести просто приятные глазу плюшки.

Одним из наиболее подходящим примером является интерактивная карта готовых объектов на сайте metcon.ru.

Прилипающая шапка – удобный и функциональный вариант. 

Нами больше используется в варианте прилипания меню каталогов на сайтах магазинов. Можно посмотреть на betondetal.ru и mielap.ru.

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

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

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

Яркий пример можно увидеть в отдельных элементах на сайте metcon.ru и uralsuvenir.ru

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

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

Среди наших работ данная верстка встречается на странице светильников интернет-магазина Лефабрик.

 
Яндекс.Метрика