Реклама в Telegram-каналах DzikPic и dev.by теперь дешевле. Узнать подробности 👨🏻‍💻
Support us

Главные тенденции в веб-дизайне в 2015-м

Оставить комментарий
Главные тенденции в веб-дизайне в 2015-м

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

Читать далее...

Итак, откуда же взялись прогнозы о грядущей революции в веб-дизайне и интернет-среде?

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

А во-вторых, в 2015 году фиксировались рекордно высокие показатели вовлечённости мировой аудитории в интернет-среду. По данным отчёта KPCB, если в 1995 году интернетом пользовалось 35 млн человек (0,06% населения Земли), то сейчас это число выросло до 3,2 млрд человек (45% мирового населения).

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

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

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

  • Flat design
  • Material design
  • Adaptive & responsive design

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

Flat design

flat designe

В 80-х flat design использовался как способ увеличить производительность ПК, поскольку цифровые технологии не позволяли использовать сложные графические элементы. Его популярность возродилась после появления интерфейса Microsoft Metro (после выхода Windows 8 в 2012 году получил название «Modern UI»).

В начале 2015 года flat design перестал быть радикальным течением, став одним из стандартов в ИT-дизайне. Его применение легло в основу нескольких других трендов. Основная цель направления — сделать каждый элемент максимально эффективным.

onthegrid.city

onthegrid.city

Особенности и принципы 

  • Во flat используются двухмерные, максимально простые объекты. Отказ от иллюзии трёхмерного изображения. Нет переходов и градиентов. Поэтому применение объёмных деталей и градиентов будет говорить о низком качестве реализации.
  • Используется лишь несколько основных, заранее выбранных цветов. Это золотое правило — не стоит раскрашивать свой сайт во все цвета радуги. Это утомит пользователя, и он уйдёт с сайта.
  • Часто для отображения элементов используются только их контуры. Если хотите позиционировать свой продукт как Apple, не бойтесь тонких линий. Мне запомнилось нашумевшее в 2013 году обновление iOS 6 до iOS 7.

Использование

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

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

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

Трудно судить о том, для какого сектора бизнеса подходит flat design. Важно провести анализ и чётко понимать свою бизнес-задачу. Стоит быть аккуратным с модой на flat, иначе можно потерять значительное количество пользователей. Так произошло с южноафриканским банком First National Bank — после обновления дизайна ушло примерно 6 млн клиентов. В понедельник перед глазами клиентов вместо обычного банковского ресурса предстала плоская версия сайта, и в ближайшие недели служба техподдержки попала под шквал звонков недовольных пользователей.

Примеры

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

Material design 

Впервые material design был представлен Google в 2014 году, эволюционно он вырос из flat design. Многие ошибочно считают его просто style guide.

Особенности и принципы

  • Вся суть material design — в предсказывании ожиданий пользователя и его реакции. У вас не просто сайт, это нечто большее. Ведь дизайн — это что-то материальное, тактильное, это можно потрогать.
  • Поведение элементов и объектов предсказуемо.
  • Отсутствие объёма, мелких деталей и детализации в целом, нет неестественных цветов.

Использование

Принимая решение использовать для своего бизнеса material design, важно знать несколько моментов.

  • Компания Google предоставляет мануалы, библиотеки элементов и шрифтов, палитры. Множество уроков и лекций уже есть в интернете, поэтому вам легко будет контролировать рабочий процесс.
  • Здесь используется множество интерактивных элементов, запросы без перезагрузки страницы (AJAX), что положительно влияет на восприятие вашего сайта.
  • Можно столкнуться с проблемой кроссбраузерности. Если ваша целевая аудитория пользуется Internet Explorer (старше 10-й версии), то есть вероятность, что сайт будет некорректно отображаться.

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

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

Примеры

bugaboo.com

Adaptive & Responsive design

Adaptive & Responsive web design — это инструмент, который обеспечивает корректное отображение сайта на экранах разных размеров. Если у вас обычный информационный сайт, возможно, будет достаточно сделать одну версию сайта. Но если вы планируете создать интернет-магазин, то адаптивная вёрстка — оптимальное решение. Изменения структуры страниц в зависимости от устройства позволяет пользователю быстро находить информацию, делать акценты на основных элементах.

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

Ниже представлены основные различия меджду Adaptive & Responsive web design. Ознакомившись с ними, вы с лёгкостью сможете определить, что вам больше подходит. 

Определение устройства

Оптимизация контента

Адаптация под устройство, особенности

Скорость загрузки

Разработка и запуск

Всё большее сайтов отказывается от респонсивных технологий в пользу адаптивных. Причина — большие трудозатраты при поддержке и развитии responsive-сайтов.

underarmour.com

Краткое резюме

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

● отказ от больших изображений в шапке сайта;

● персонализированный UX;

● горизонтальный скроллинг;

● стори-теллинг, сайты-истории вроде amphibiox.geox.com;

● меню как в приложениях (кнопка-гамбургер, всплывающая боковая панель), и др.

Хочу заменить, что слепо следовать тенденциям не стоит. Так, если ваша целевая аудитория заходит в интернет в основном с персональных компьютеров и не пользуется мобильными приложениями, то меню в виде «гамбургера» может сыграть с сайтом злую шутку. Пользователь будет ориентироваться с трудом и не сможет найти нужный ему раздел.

Главное правило дизайнера — делать удобный и понятный сайт для своей целевой аудитории.

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

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

resn-experiments.tumblr.com

 

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

Новый рекламный формат в наших телеграм-каналах.

Купить 500 символов за $150

Читайте также
Курсы по UX/UI-дизайну: сравниваем программы и платформы (май, 2023, много скидок!)
Курсы по UX/UI-дизайну: сравниваем программы и платформы (май, 2023, много скидок!)
Курсы по UX/UI-дизайну: сравниваем программы и платформы (май, 2023, много скидок!)
За последние пару лет на рынке появилось множество образовательных платформ, которые, на первый взгляд, предлагают похожие курсы. Ради эксперимента мы собрали и сравнили семь программ по UX/UI дизайну от разных платформ. Изучаем сходства и различия.
1 комментарий
Не Paint-ом единым. 13 курсов по UX/UI-дизайну для продвинутых и не только
Не Paint-ом единым. 13 курсов по UX/UI-дизайну для продвинутых и не только
Не Paint-ом единым. 13 курсов по UX/UI-дизайну для продвинутых и не только
Если вам нравится думать о том, как с минимальными затратами получить максимум эффективности, то проектирование пользовательских интерфейсов определенно вас заинтересует. DigitalDefynd сделал подборку курсов по UX/UI-дизайну как для новичков, так и для продвинутых специалистов. 
Мечтаете создать собственную игру? Собрали классные курсы по геймдеву всего за 9,99$!
Мечтаете создать собственную игру? Собрали классные курсы по геймдеву всего за 9,99$!
Мечтаете создать собственную игру? Собрали классные курсы по геймдеву всего за 9,99$!
Google обновила дизайн поисковика. Похоже, зря
Google обновила дизайн поисковика. Похоже, зря
Google обновила дизайн поисковика. Похоже, зря
2 комментария

Хотите сообщить важную новость? Пишите в Telegram-бот

Главные события и полезные ссылки в нашем Telegram-канале

Обсуждение
Комментируйте без ограничений

Релоцировались? Теперь вы можете комментировать без верификации аккаунта.

Комментариев пока нет.