Главная » Веб-дизайн » Каким должен быть современный сайт

Каким должен быть современный сайт

каким должен быть современный сайт

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

Главные черты современного сайта

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

  • 40% опрошенных не будут пользоваться сайтом с неопрятным видом;
  • 95% пользователей не доверяют сайтам с плохим дизайном;
  • 60% пользователей закроют сайт, интерфейс которого не стал им понятен в течение первых 15 секунд после открытия.
  • 72% компаний в онлайн-пространстве собираются расширять штат веб-дизайнеров
ЧИТАЙТЕ ТАКЖЕ
онлайн профессияОнлайн-профессия. Почему она нужна именно сейчас! Узнайте почему профессия веб-дизайнера востребована именно сейчас и интерес к ней будет только расти

Из вышесказанного можно сделать вывод, что…


Современный сайт для пользователей — это сочетание интуитивно-понятного интерфейса и дизайна, соответствующего популярным трендам


Задачей по созданию понятного интерфейса, занимаются UX/UI дизайнеры. Мы рассматривали данную тему в статье «Принципы UI успешного сайта. Часть 1.» и будем далее раскрывать на страницах нашего блога.

Сейчас подробнее остановимся на современных трендах в веб-дизайне.

Тренды современного веб-дизайна

Первое впечатление о сайте производит его внешний вид. Уже потом, пользователь начинает разбираться в интерфейсе.

Сделать вывод о возможности дальнейшего изучения сайта, можно по следующим признакам:

  • Скорость загрузки страницы, которая зависит не только от работы сервера, но и перегруженности декоративными элементами;
  • Дружественная для пользователя цветовая гамма,
  • Удобная типографика,
  • Наличие мельтешащей анимации
  • и другие.

Популярность разных способов оформления сайтов зависит от страны, для которой изготавливается контент. Например, в Швеции может быть популярен скандинавский стиль, в Великобритании — элементы английской школы дизайна и так далее.

ЧИТАЙТЕ ТАКЖЕ
Популярные стили WEB-дизайна. Какой выбрать?Популярные стили WEB-дизайна. Какой выбрать? Узнайте, какие стили существуют в web дизайне и на что обращать внимание при выборе концепции для своего проекта

Но есть мировые тренды, которые так или иначе влияют на внешний вид сайтов всех стран. Их задают крупные IT компании и результаты исследований, построенные на пользовательском опыте.

О них и поговорим подробнее.

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


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


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

Каким должен быть современный сайтStarshiphsa

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


Выбранная цветовая схема должна упрощать восприятие информации


Предпочтение лучше отдать мягким, естественным цветовым палитрам, таким как:

  • природный зеленый
  • спокойные пастельные оттенки коричневого и голубого
  • нейтральные серые оттенки
  • бежевый и пудровые цвета

Каким должен быть современный сайт

Shopify landing page from dribbble

2. Типографика — как центральный элемент дизайна

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

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

Каким должен быть современный сайтСайт Стенли Кубрика

Или еще один интересный пример на dribble, в котором хорошо сочетается типографика и параллакс эффект.

Kanye West & Adidas Promo Website


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


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

Каким должен быть современный сайтПример использования крупной типографики в шапке сайта (Dribbble)

3. Креативный скроллинг


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


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

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

Каким должен быть современный сайтDipsea


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


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

Каким должен быть современный сайт Landing — Lakes wealth Loch by Outcrowd

Одним из трендов скроллинга на современном сайте является его трансформация. Когда элементы дизайна меняют свое положение или форму при движении мыши.

Vilius Vaicius by Dribbble


Визуальная обратная связь — вот на чем акцентируют внимание многие дизайнеры.


Еще один удачный пример такого взаимодействия графики с пользователем можно видеть ниже.

Tbilisi Gardens by Ana Miminoshvili

4. Смещенная сетка макета

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

Каким должен быть современный сайтcarbonbeauty.com

ЧИТАЙТЕ ТАКЖЕ
креативный дизайн страницы контакты

Креативный дизайн страницы «Контакты»

5. Полуплоский дизайн и неоморфизм

В тренд входит разбавление привычного для нас плоского дизайна (flat design) тенями, что создает дополнительный объем, но не нарушает концепции минимализма. Лично я очень рада этому. Можно сочетать плоские объекты (фон, графика) с реалистичными объемными (промо продукция), как это сделано в примере ниже.

Каким должен быть современный сайтNike Promotion Ads — Parallax Effect

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

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


Неморфизм — это слияние двух тенденций — flat-дизайна и 3d дизайна


Каким должен быть современный сайтBook Story Web Concept

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

6. Анимация


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


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

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

Каким должен быть современный сайтСайт портфолио. Остин Майер

Еще одним трендом в веб-дизайне, который относится к анимации является синемаграфия, о которой у меня так же есть статьи на сайте.

Каким должен быть современный сайт

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

Каким должен быть современный сайтИспользовать шаблон Canva

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

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

Spotify Layout&Motion by Jurica Koletic

7. Дуплексные цвета

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

Каким должен быть современный сайт Fashion by Giga Tamarashvili.

8. Яркие цвета и их сочетания

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

Каким должен быть современный сайтClothes Shop by Yana 

9. Иллюстрации

Они повсюду и просто атакуют интернет пространство. Этот тренд в веб дизайне пришел вместе в flat дизайном и завоевывает свое пространство все больше и больше. И теперь это не просто иконки, а персонажи, фоны и полное оформление страниц сайта.

Каким должен быть современный сайтOnline taxi page template by Fidann Memmedli 

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

10. Фотография и иллюстрация

Совмещение иллюстрации и фотографии — популярный тренд сегодня. Такая фотография не останется незамеченной, а значит оправдано ее использование в качестве демонстративного материала на современных сайтах. Подробнее читайте об этом в статье «Иллюстрация и фотография в Photoshop», которая так же не оставит вас равнодушным!

Каким должен быть современный сайт

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

Каким должен быть современный сайтИспользовать шаблон Canva


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


11. Креативная геометрия

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

Примеры современного дизайна, основой которого являются геометрические фигуры, можно видеть ниже.

Каким должен быть современный сайтPortfolio Concept Design by Matvey Dunuk

Каким должен быть современный сайтГеометричный дизайн сайта

12. Глассморфизм

Данная концепция предполагает использование полупрозрачных размытых фонов и объектов. Одним из главных ее последователей является Apple.

Создается ощущение полупрозрачного стекла, от сюда и название — «glass» — стекло. Такая техника очень удобна по нескольким причинам:

  • Смягчается контраст между светлыми и темными участками
  • Текст и объекты легко просматриваются на ярком фоне

Каким должен быть современный сайтДизайн сайта в стиле глассморфизм

Каким должен быть современный сайтДизайн сайта в стиле глассморфизм

Заключение

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

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

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

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

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

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

(Visited 2 052 times, 1 visits today)

2 комментарии на “Каким должен быть современный сайт

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

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