Пт, 5/04/19 – 9:26 | 2 комментария

Эта статья о том, что для успеха Landing Page важна не только визуальная привлекательность. От лендингов ждут высоких конверсий. Эффективность лендингового сайта особенно …

Читать статью »
Дизайн

Секреты веб-дизайна, примеры стильных сайтов

Тренды / ТОП

Топ лучших идей, новые тенденции и тренды WEB’а

Маркетинг

Статьи о маркетинге сайтов, примеры эффективности

Свой сайт

Как создать, оформить, сделать сайт лучше

Шаблоны сайтов

Обзоры шаблонов: лучшие темы для сайта

Главная » Дизайн, Тренды / ТОП

Стили и элементы современного веб-дизайна

13 февраля 2018 9 комментариев

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

Coastal Creative называет 2018-й годом контрастов и сочетаний разных стилей & направлений. Оформляя веб-сайт крупными изображениями, современный дизайнер волен добавить ретро-паттерны, цвета & типографику. Может использовать 2D окружение в трехмерном дизайне или статические иллюстрации с ненавязчивыми эффектами.

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

Текст, перекрывающий графический контент

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

Дизайны с наслаиванием и пересечением контента в общем пространстве:

Популярное направление в веб-дизайне: эффект перекрытия

Современный стиль веб-дизайна с эффектом перекрытия

elegantseagulls.com – сайт агентства с чистым дизайном и нестандартными подходами

thibaultpailloux.com – разработчик на собственном сайте разнообразил тренд, украсив переходы градиентами

Асимметричные макеты и «ломаная» сетка

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

Дизайны с асимметричной разметкой и наслаиванием элементов:

Индивидуальность и визуальные креативы в современном веб-дизайне - дизайн разметки сайта thinkingbox.comПример эффектного современного веб-дизайна с нестандартной сеткой : анимированные сдвиги и пересечения контентаМодный дизайн веб-сайта: приятное оформление и современный макет

Стильный современный веб-дизайн

Эффект перекрытия в веб-дизайне

welikesmall.com – ультрасовременный дизайн digital-агентства использует ломаную сетку с асимметричными пересечениями элементов. Крутые эффекты и микро-анимации интерфейса

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

originalterritory.com – приятный eCommerce сайт «Территория собак» с асимметричной разметкой. Дизайн мягкий, компактный и современный

imsproductions.com – красивое применение тренда на сайте американской продакшн компании

heeds.eu – яркий и нестандартный дизайн. Двуцветная коррекция изображений, градиенты, ломанная разметка

Duotone и оверлей поверх изображений

Двутон (Дуплекс), overlay (перекрытие) с наложением слоя цвета и применение эффекта двойной экспозиции фотографий уже применяются в дизайнерских сайтах  и ресурсах с медиа-контентом. Интерес масс к двутоновому окрашиванию пробудил запуск персонального плейлиста Spotify.

Современные и эстетичные веб-дизайны применяющие дуотон:  

Сайт итальянского продуктового бренда со стильным современным дизайномПопулярный тренд веб-дизайна: наложение цвета (overlay)

Пример оформления веб-сайта с эффектом наложения фильтра на фоновое изображение - тонирование первого экрана Модный дизайн веб-сайта с эффектным наложением цвета

muller.it – итальянский продуктовый бренд красиво оформил сайт дуотон-видеобекграундом с добавлением мягкого градиента

cliquestudios.com – на главной странице сайта дизайн-агентства кейсы разграничены цветовыми фильтрами (overlay)

socialplayground.com.au – дуотон фото усиливают социальные доказательства, украшают главную и страницу «О нас»

Современное ретро в иллюстрациях и элементах

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

Современные сайты с элементами ретро-стиля:

Пример ретро в веб-дизайне: приятное и стильное оформление современных сайтов

sugarfirepie.com – винтажная иллюстрация в главном экране создает первое впечатление о кондитерском бренде, улучшает UX-дизайн сайта

Кастомные иллюстрации

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

Читайте также:  Лучшие персональные сайты фрилансеров: 33 женских дизайна

Эстетичные сайты с уникальными иллюстрациями:

Модный веб-дизайн: эффект акварели

 

 

Современный веб-сайт с приятным дизайном элементов UI и flat-иллюстрациями

 

getonboardbrt.com – красивое применение акварельной иллюстрации в плоском дизайне

bostonbrt.org – инновационную систему транспорта, бостонский сайт иллюстрирует акварелью

Брутальный веб-дизайн

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

Стиль брутализм применяемый в веб-дизайнах:

Брутальный минимализм в современном веб-дизайне

balenciaga.com – этот вид Web брутализма критик назвал минимализмом на стероидах (к примеру, mahzedahrbakery.com уже выглядит простым минималистичным сайтом)

Стильные текстуры в фоне

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

Современные веб-дизайны творчески применяющие фоновые текстуры:

Современный стильный дизайн сайтов: красивый пример - simone-simon.frСтильный современный веб-дизайн

Персонажные иллюстрации в веб-дизайне: приятное оформление сайта стоматологии

simone-simon.fr – стильный французский сайт, эффектный дизайн создается наложением кусков текстур, полых фигур, больших букв

abcdentaltexas.com – необычное для сайта стоматологии мультяшное оформление с красивой текстурой фона

djeco.com/ru – клетчатый фоновый паттерн и другие текстуры в красивом мультяшном дизайне сайта компании

Градиенты 2.0            

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

Читайте также:  8 веб-трендов на 2019 год: современные лэйауты

Характерные признаки модного направления: колорит, оживленность, сайт с градиентами 2.0 выглядит свежим и современным.

Сайты с яркими оттенками и градиентами в дизайне:

Тренд современного веб-дизайна: градиенты возвращаются

Яркий лаймовый градиент - модные направление современного веб-дизайна

Красивый пример использования двухцветных градиентов в современном веб-дизайне

wpengine.com – wordpress-хостинг оформил градиентами выпадающее меню и формы подписки

chunkagency.com – сайт креативного агентства с двухцветным неоновым градиентом и эффектными переходами

fullstory.com – двухцветные градиенты применяются для кнопок и в фонах

Продуманные анимации и эффекты UI

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

Читайте также:  Анимация по правилам UX-дизайна: полное руководство

Примеры сайтов с хорошо продуманной анимацией:

Хорошие примеры сайтов с анимацией: промо-проект компании страховщиков - insuranceexperiments.org.uk

Стильный французский сайт медицинской тематики с красиво анимированным современным дизайномПримеры хорошего веб-дизайна: потрясающе красивая анимации лендинга

Пример красивой анимации в современном веб-дизайне

insuranceexperiments.org.uk – занимательный промо-сайт британской страховой компании в стиле FLAT, с плоским видео и мультяшными анимациями

aproposducancer.fr – свежий сайт лионского хосписа с фантастически иллюстрированным и анимированным дизайном. Красивые прелоадер, интерактив, скролл, UI

hellobloom.io – анимация с высокой детализацией, эффектное обучающее видео. Так, товарный Landing Page вовлекает и настраивает на позитив

district0x.io – современный полу-плоский дизайн анимирован по максимуму: креативные хедер / футер, облака в фоне карточек и сами карточки

Читайте также:  7 CSS-анимаций с использованием SVG + сайты применяющие эффект

Масштабируемая SVG-графика

Важные преимущества масштабируемой векторной графики (SVG) перед растровыми форматами: изображения масштабируются без потерь в качестве, легко редактируются при помощи CSS и весят мало. Технологии HTML5 позволяют интегрировать гибкие SVG-элементы в веб-страницу. С сервисами вроде svgator.com, можно создавать SVG-анимации без знаний кодинга.

Примеры эффектного применения SVG-графики:

Пример применения анимированной SVG графики в дизайне современного сайта blockcollider.org

Современный дизайн: красиво анимированный французский сайт на WordPress эффектно применяет разделенный экран

blockcollider.org – свежий современный сайт с SVG эффектами и анимацией

boite-a-oeufs.com  – креативное агентство сделало свой сайт на вордпрессе, используя SVG и анимировав на GSAP платформе

playground.it – страница-«заглушка» пока идет редизайн, анимированные SVG-иллюстрации делают ее просто залипательной. Сыграете в Jump UP?

Изометрия в дизайне

Вероятно, возвращение изометрического дизайна стало реакцией на FLAT-экспансию по всему миру.

Читайте также:  57 самых красивых плоских дизайнов сайтов

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

Примеры современных изометрических дизайнов:

Модный веб-дизайн с красивой графикой и микровзаимодействиями

Стильный современный сайт с 3D-графикой и зеленым дизайном

Современные веб-направления: плоский стиль и изометрия в дизайне - сайт Швейцарской софт-компании Mibex

pikmykid.com – приятный веб-дизайн в мягких тонах с плавными эффектами, изометрическими иллюстрациями, фиксированными полигональными фонами и красивыми кнопками (призрачные / с градиентным фоном)

brightscout.com – зеленый дизайн сайта компании красиво проиллюстрирован, использован полу-плоский стиль с тенями, градиентами и скорлл-эффектами

mibexsoftware.com – сайт софт-компании, современный плоский изометрический дизайн с фирменным персонажем

Разделенный экран

Мода на разделение веб-страниц пополам появилась в результате эволюции Hero-изображений.

Читайте также:  Веб-дизайн умирает? Скорее, эволюционирует в UX дизайн

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

Сайты эффектно использующие вертикальное разделение экрана:

Пример оформления веб-страницы разделением экрана на 2 части с объектом в центреСовременный web дизайн в плоском стиле - пример красивого применения модных трендов на сайте рекламного и маркетингового агентства

enginethemes.com – разделенный пополам объект (элемент фирменного стиля) в центре главного сплит-экрана представляет компанию WP-разработчиков (код внутри / дизайн визуально)

bigeyeagency.com – нестандартная навигация с разделением экрана для кейсов, фоновое видео с текстурой и фотоэффекты в бэкграундах (высветление, размытие, боке, двойная экспозиция)