14 актуальных трендов веб-дизайна

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

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

1. Минимализм

От упрощения логотипов и шрифтов (равняемся на тебя, Гугл) до полной очистки веб-страниц. Минимализм - главный тренд и он влияет на остальные. Веб-сайты фокусируются по большей части на актуальном контенте и убирают все лишнее вокруг него. Футеры, боковые панели и границы – исчезают и даже цветовые палитры становятся упрощенными, так как акцент делается на каком-то одном доминирующем цвете. Прекрасный пример этого тренда - смена логотипа StabHub.

2. Меню в стиле мобильных приложений

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

3. "Призрачные", прозрачные, ненавязчивые кнопки

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

4. Акцент на одном изображении или одной фразе (во всю ширину экрана). Большие фотобэкграунды.

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

В прошедшем году "hero image" изменилось в некоторых аспектах. Некоторые сайты сделали шаг вперед, опередив HD, и встроили HD-видео в свою целевую (лендинговую) страницу. Другие пошли в противоположном направлении, сделав размыву фото-баннера или полностью заменив его просто цветным фоном, чтобы привлечь внимание к тексту. Сайт Spotify показывает сочетание этих тенденций, демонстрируя изображение для одной половины листа, но оставляя много пустого пространства для заголовка и пастельную, прозрачную кнопку для загрузки.

5. Интересное шрифтовое оформление

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

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

6. Стоковые фотки, которые НЕ выглядят, как стоковые фотки.

Использование необычных фотографий высокого качества. Дни обычной стоковой фотографии кончились (слава богам фотографии!). Настало время потрясающих визуальных эффектов.

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

7. Одностраничные сайты с прокруткой, а не переходом по ссылкам.

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

8. Параллакс-прокрутка

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

9. Модульный/плиточный дизайн, позволяющий представить на странице больше информации

Вы можете называть это сеткой, плиткой или картами, каждая из этих конструкций создает один и тот же эффект: организации контента в эффективным, эстетически приятным способом. Оформление контента в один столбец является неэффективным и менее удобным. Модульная конструкция позволяет показать на странице контента больше и быстрее и таким образом, который более интуитивно понятен. В то же время такая компоновка более привлекательна. На своей домашней странице, The Next Web демонстрирует идеальный пример хорошего модульного дизайна.

10. Эволюция плоского дизайна

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

Большинство веб-дизайнеров c минималистским подходом вряд ли будет использовать material дизайн в ближайшее время. Страница http://materialdesignblog.com/является отличным примером того, как этот подход применяется для логотипов.

11. Линейные простые иконки

Наряду с material design, линейные иконки представляет другое движение завершающее время сквеморфизма. Вместо того, чтобы делать иконку точно такой же как и объект, который она представляет (стиль дизайна, который компания Apple популяризировал с его ОС IOS иконки), иконки создаются с помощью простых линий и форм, которые передают действие, объект или мысль, хорошо всем знакомые. Многие линейные иконки стали универсальными в веб-дизайне, например, такие как контур увеличительного стекла, обозначающего функцию поиска или гамбургер (три линии одна над другой) для значка меню. Ниже приведены примеры линейных иконок от Othericons.

12. Интеграция Google Maps

Google Maps является сервисом географических карт, которым пользуются все. И он только становится лучше. Благодаря настраиваемым параметрам, все больше брендов интегрируют этот сервис на своих веб-сайты – это то, что давно ожидалось. Компании могут добавлять карты на свой сайт и настраивать их цветовую схему. Например, Airbnb использует Google Maps и пользовательские маркеры, чтобы помочь пользователям понять, где можно найти доступные номера и сколько они стоят, чтобы они могли планировать отдых, который соответствует их бюджету и стилю жизни.

13. Масштабируемая векторная графика

Когда Apple выпустила дисплей Retina, дизайнеры ополчились на них. Они расстроились, что их графика и изображения вдруг стали отображаться пиксельно на Retina, имеющим более высокое разрешение, но дизайнеры были вынуждены смириться с нововведениями, которые позволили их иллюстрациям хорошо выглядеть и быть совместимым с любым устройством. К счастью, Scalable Vector Graphics (SVG) приняли вызов. SVG представляет графику в векторном виде, что позволяет масштабировать изображение с разным разрешением. Благодаря SVG, изображения сохраняют свою четкость и резкость на всех устройствах. Snap.svg, библиотека Javascript SVG, демонстрирует множество примеров, например, как представленный ниже.

14. Вертикальное разделение экрана

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