Веб-дизайн можно сравнить с модой. В одежде существует множество стилей: классический, спортивный, кэжуал и т. д. Конечно, сейчас в моде не так много правил, кто-то наденет берцы с классическим платьем — и это будет смотреться стильно. Однако если говорить про целостность образа, то к классическому платью лучше подойдут строгие туфли. И для удачных экспериментов со стилями нужна практика.
Так и в веб-дизайне. Хороший тон — выбрать единую стилистику и придерживаться её, чтобы все объекты на странице составляли целостность и дополняли друг друга, чтобы не оказаться белой вороной.
Поговорим о нескольких стилях в веб-дизайне, а также составим наш топ сайтов в определенном стиле.
ТОП сайты в стилистике «Минимализм»
Суть минимализма ясна и понятна. Оно происходит от латинского слова minimus — «наименьший». Главное на сайтах в стиле минимализм — простота и единство. Для минимализма обычно используют всего несколько цветов (не более 2-3), а иногда и вовсе один цвет (монохром). Сами цвета и отенки чаще всего пастельные и спокойные. Большие и крупные заголовки. Текстовые блоки, как правило, не содержат много текста, только информативный текст. Ничего лишнего, все по делу
При упоминании минимализма в веб-дизайне на ум, скорее всего, придёт сайт Apple: много пустого пространства, краткие тексты и большие фотографии техники.
Tinker - это бренд часов с простой концепцией. Покупатели могут выбрать циферблат, цвет ремешка и металл в любой комбинации. Нет ненужных функций – всё четко и по делу.
На сайте компании ETQ, которая занимается производством обуви, отсутствуют границы. Это освобождает много места, даёт больше пространства. Углы заняты основными функциями интерфейса, оставляя большую часть экрана для продукта.
Контраст - полезная визуальная тактика для поддержания минималистичного дизайна. Сайт немецкого UX-инженера Roland Lösslein We Ain't Plastic, заставляет смотреть нас на крупный рисунок и устанавливает резкий контраст в размерах между главным изображением, текстом и значками выше.
На сайте дизайнера Микии Кобаяши есть только его торговая марка и призыв к действию, в котором пользователь прокручивает страницы, обращая внимание на тонкости продуктов.
Модельное агентство Elite вдохновляет минималистичной навигацией: на главной странице всего 2 основных блока. Информация на страницах разбросана в шахматном порядке и не содержит ничего лишнего.
ТОП сайты в стилистике «Брутализм»
Брутализм — направление в архитектуре 1950-1970-х гг. Для него характерна геометричная простота и примитивность форм.Отличительная черта этого стиля — дерзкий, смелый, возможно даже непривлекательный и лишённый гармонии дизайн. Веб-брутализм любит к экспериментировать и проповедует ироничную небрежность.
Butt Studio — это художественная и анимационная студия с веб-сайтом, который знакомит вас с их проектами, как только вы начинаете прокручивать страницу. Сайт больше похож на портфолио, чем на сайт какой-то студии. Он богат визуальным контентом, сопровождаемым простыми на вид шрифтами.
PW-Magazine — яркий и дерзкий бруталистский журнал. Чарующие изображения предварительного просмотра доминируют на сайте, а интерфейс хорошо продуман для пользователей. Он основан на общих принципах веб-дизайна, что приводит к созданию удобного бруталистского веб-сайта.
Сайт студии Otto сочетает в себе брутализм и минимализм, достаточно частое явление. Экран разделен на две большие горизонтальные части. Анимированная прокрутка привлекает внимание. Когда вы наводите на них курсор, их предварительный просмотр отображается в верхней половине страницы.
ТОП сайты в стилистике «Флэт»
Flat-дизайн (от английского слова flat — «плоский») – стиль без трёхмерное пространство. Все изображения плоские. Важную роль играют цветные фоны, графические элементы без теней, текстур и других эффектов, придающих изображению глубину. Применение фотографий сведено к минимуму.
Это направление приобрело популярность в 2012-2014 гг. и остаётся актуальным по сей день. В плоском дизайне нет ни бликов, ни текстур.
Сайт мирового лидера анимации фильмов, сделан на Вордпрессе c применением CSS3. Плоский и интригующий дизайн заставляет нас запомнить компания. Красочные колонки полноэкранного меню, а также футер с UI-расцветкой, подстраивающейся под хедер.
Французская студия показывает пример креативного оформления сайта на Вордпрессе. Эффектный материальный дизайн с применением HTML5 / CSS3 / jQuery. Сайт начинается с анимации с реалистичным затуханием колебаний. Красота дизайна достигается красивым сочетанием цветов, оптимальными пропорциями макета, а также элементов страниц и переходами.
У маркетинговой компании из Лос-Анжелеса – сайт на котором можно зависнуть, уж очень он залипательный с интригующим визуалом. Интерактивная анимация на главной странице увлекает (осторожно монстры). Красочно анимировано полноэкранное меню. В портфолио применяются цвето-фильтры превью проектов, интересные ролики, зацикленные видео в фоне.
MADWELL
Плоский сайт Нью-Йоркского агентства — интерактив, анимация, индивидуальный стиль. Дублируя навигационное меню, активные hot-spot точки красиво дополняют эффекты на главной странице. Красочно анимированная предзагрузка увязана с первыми экранами, а нижняя панель упрощает просмотр контента.
Сайт Dishoom сделан «под старину». В нем используются интересные цветовые сочетания, популярные в 60-х годах, старые фотографии и картинки, имитирующее меню того времени.
Великолепное ретро радио в духе Теслы, будто страничка из «популярной механики». А главное оно работает, что еще нужно для сайта? Не откажите себе в удовольствии его включить.
Уютный сайт британского фестиваля радует разноцветностью. На переднем плане — изображения цирка, которые подчеркивают семейность мероприятия.
В заключении
Выбранный стиль позволяет направить пользователя на то, что необходимо дизайнеру и заказчику. Передать настроение и смысл. Однако разные настроения можно задать и внутри одного стиля.
Наш мир не стоит на месте, один стиль сменяется другим постоянно появляются новые технологии, а тенденции в оформлении сайтов быстро сменяют друг друга. Мода циклична, а значит что-то новое - хорошо забытое старое.
Digital Agency оказывает услуги по разработке и дизайну сайтов.