Главная » Веб-дизайн » Популярные стили WEB-дизайна. Какой выбрать?

Популярные стили WEB-дизайна. Какой выбрать?

Популярные стили WEB-дизайна. Какой выбрать?

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

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

Минимализм

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

Как правило, минимализм это:

  • Простые геометрические формы
  • Простые цвета (черный, белый, серый) – не более трех на проект
  • Однотонный фон.
  • Минимум шрифтов – простая типографика.
  • Отсутствие теней, градиентов или их незначительное присутствие.
  • Понятный, функциональный UI.

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

сайт в стиле минимализмСайт натуральной косметики в минималистичном стиле

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

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


«Программы становятся медленнее куда шустрее, чем компьютеры становятся быстрее» Закон Вирта, демонстрирующий проблему медленного роста быстродействия сайтов и программ по сравнению с аппаратным обеспечением.


дизайн сайта в стиле минимализмBlog and form by Bogdan Nikitin

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

ЧИТАЙТЕ ТАКЖЕ
Figma – первое знакомствоFigma – первое знакомство Узнайте о самом популярном бесплатном сервисе проектирования интерфейсов, в котором можно создавать дизайн сайтов в стиле минимализм и не только! 

Рисованный (эскизный) стиль

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

Графика может быть выполнена в виде рисунка от руки, переведенного потом в цифровой вид

дизайн сайта в рисованном (эскизном) стиле

Сайт фитнес клуба в рисованном стиле

векторных или 3d иллюстраций, что делает данный стиль очень похожим на Flat дизайн.

дизайн сайта в рисованном (эскизном) стилеWebsite design / 3D & 2D Edition by Mike

Flat дизайн

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

  • Двумерная графика.
  • Интуитивно-понятный интерфейс
  • Акцент на типографике
  • Сочные, сочетающиеся цвета.

Впервые данный стиль был представлен Apple в 2012 году для операционной системы Ios и стал фаворитом среди дизайнеров, уставших от реализма. С тех пор он претерпел много изменений, но остается популярным и по сей день.

дизайн сайта в стиле flatBusiness Manegment by Stien

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

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

  1. Быстрота загрузки такого приложения или сайта (векторная графика весит меньше, чем качественный растр)
  2. Экономия на разработке, так как не нужно сохранять изображения под расширения разных устройств. Достаточно сохранить их в формате SVG.

«Keep it simple, stupid» — принцип проектирования KISS, утверждает, что большинство систем работают лучше всего, если они остаются простыми, а не усложняются. Был впервые сформулирован специалистами ВМС США, но получил свое распространение в анимационных фильмах и дизайне.


ЧИТАЙТЕ ТАКЖЕ
Особенности FLAT - дизайнаОсобенности FLAT — дизайна Узнайте еще больше информации о flat дизайне. Цветовая палитра, примеры рисования иконок, еще больше примеров сайтов и визуальных образов.

Гранж

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

  • Природные цвета – черный, коричневый, песчаный.
  • Фон в виде потертых текстур, кирпичной кладки, каменной стены, бумаги
  • Искусственная состаренность
  • Шрифты причудливые, гротескные (не переусердствуйте в их выборе! Лучше остановиться на замысловатых вариантах для заголовков, а для остального текста выбрать читаемые рубленные шрифты)

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

дизайн сайта в стиле гранжМокап сайта пиццерии в стиле гранж by Too Gallus

Organic & Natural

Данный стиль предполагает использование природной тематики в дизайне:

  • Природные текстуры – трава, дерево, земля
  • Природные фоны и цвета – зеленый, голубой, коричневый и другие.
  • Изображения флоры и фауны.
  • Шрифты природной направленности.

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

дизайн сайта в стиле organic&naturalNatural Creation by Higher Studio

дизайн сайта в стиле organic&naturalNature Landing Page Concept by Grapp

Реализм (скевоморфизм)

Главная задача данного стиля — реалистичное изображение объектов с помощью света и тени. Он зародился в начале двухтысячных годов и стал понятным для большинства пользователей, относившихся с опаской ко всем интернет-проектам.

Мы все еще помним изобилие бликов, текстур и теней в дизайне сайтов того времени. Это было господство Photoshop. Умение работать с параметрами наложения слоев гарантировало 50% успеха в профессии веб-дизайнера.

скевоморфизмЗначки в стиле скевоморфизм by Seunghyun

Интерес к данному стилю угас по нескольким причинам:

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

Скевоморфизм потерял лидирующие позиции со времен появления плоского дизайна, но не исчез совсем. Он трансформировался.

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

дизайн сайта в стиле неоморфизмNeumorphic UI Kit

Material Design объединил в себе плоский дизайн и элементы реализма. Блоки информации представлены в виде листов бумаги, отбрасывающих тени.

дизайн приложения в стиле material design

Gallery UI by Pierluigi Giglio

дизайн сайта в стиле material designCards UI by Pierluigi Giglio

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

ЧИТАЙТЕ ТАКЖЕ
как выбрать шрифт для Material DesignКак выбрать шрифт в Material Design Узнайте основы типографики для сайта в стиле Material Design

Красивая типографика

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

красивая типографика как стиль в веб-дизайнеReform by Isaac Powel

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

Сочетание стилей

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

Например, гранж вряд ли будет хорошо смотреться с элементами реализма. А рисованный стиль с Organic&Natiral.

Гармоничного визуального эффекта можно добиться в таких сочетаниях как:

  • Рисованный стиль и плоский дизайн;
  • Красивая типографика и минимализм;
  • Гранж и красивая типографика.

Вот несколько примеров таких сайтов.

красивая типографика + минимализмWemakefab.school by Alexander Laguta – Красивая типографика + Минимализм

Рисованный стиль + РеализмZendesk Support Ticketing System UI/UX Design for Web App by  Extej Design Agency– Рисованный стиль + Реализм

Подписывайтесь на обновления блога «Дизайн в жизни»

по e-mail или социальных сетях  

и мы обязательно опубликуем для вас еще больше полезных статей из мира дизайна и веб-дизайна

(Visited 24 times, 1 visits today)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *