Уходящий 2015: обзор тенденций в Web design

30.12.2015

Авторы статьи: Валентина Филатова, Егор Шаповал.

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

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

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

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

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

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

В 2015 году можно выделить несколько основных тенденций в web-дизайне, которые закрепились на своем пьедестале: Material design; Adaptive & Responsive Web design, Parallax effect, SVG графика, Акцент на типографику, одноцветные схемы, гамбургер-меню, бесконечный скроллинг, карточный дизайн или блочная сетка, большие фоновые изображения и видео,богатая анимация.

Предлагаем вспомнить тренды, которые стали в основе развития направлений web-дизайна 2015 года:

  1. Flat designe;
  2. Material design;
  3. Adaptive & Responsive Web design.

 

Flat design — очаровательная простота

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

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

Трудно судить о том, для какого сектора бизнеса подходит flat design. Важно провести анализ и четко понимать свою задачу.

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

http://www.onthegrid.city/

Так произошло с южноафриканским банком First National Bank (после обновления дизайна ресурса ушло примерно 6 млн. клиентов). Изначально был обычный банковский вебсайт, а в понедельник они предоставили вниманию своим клиентам плоскую версию сайта. В результате в ближайшие недели служба техподдержки просто не справлялась со звонками недовольных клиентов.

Если решите спроектировать интернет-магазинн во flat design - Вашему вниманию несколько примеров достойных и интересных интернет-магазинов:

http://www.fitbit.com/

http://mcwhopper.com/

http://melanie-f.com/en/

http://shop.cienneny.com/

http://www.etq-amsterdam.com/

http://www.adidas.com/us/

http://www.formerlyyes.com/

http://www.tenslife.com/

http://dansmonsac.ca/

http://takeabite.ru/

 

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

Если вы решили реализовать свой сайт в стиле flat, то стоит учитывать основные особенности данного направления:

  •  во flat используются двухмерные, максимально простые объекты. Отказ от иллюзии трехмерного изображения. Нет переходов и градиентов. Поэтому применение объемных деталей и градиентов будет говорить о низком качестве реализации;

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

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

Пример нашумевшего обновления iOS 6 до iOS 7 в 2013 году:

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

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

  •  существует большое количество мануалов, библиотек элементов, шрифтов и палитр. Этому посвящено множество уроков в интернете;

  •  нет требований к специальным навыкам дизайнера, но предъявляют высокие требования к качеству верстки;

  •  сайты в стиле flat не требуют больших ресурсов, поэтому у них высокая кроссбраузерность. Ваш сайт с большей вероятностью будет корректно работать в любом браузере.

Для чего подходит:

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

Отличный пример современного стиля - сайт https://dimes.io/ - приложение для контроля средств на карте. Простота, лаконичность и презентабельность ресурса делают упор на качество реализации приложения.

 

 

Material design

https://youtu.be/Q8TXgCzxEnw

  •  впервые Material design был представлен Google в 2014 году, эволюционно он вырос из Flat Design. Многие ошибочно считают его, как просто style guide;

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

  •  поведение элементов и объектов предсказуемы;

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

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

Решив использовать для своего бизнеса Material design, важно знать несколько моментов:

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

  •  здесь используется множество интерактивных элементов, запросы без перезагрузки страницы (AJAX), что положительно влияет на восприятие вашего сайта;

  •  как и для многих современных тенденций, можно столкнуться с проблемой кроссбразерности. Если ваша ЦА пользуется Internet Explorer (старше 10й версии), то, вероятно, ваш сайт будет не корректно отображаться.

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

Для чего подходит:

Презентационные и информационные ресурсы, которые требуют более сложного и динамичного функционала;

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

https://www.bugaboo.com/US/en_US/strollers/bugaboo-cameleon3

http://special.bose.eu/en/

https://insideabbeyroad.withgoogle.com/en

 

Adaptive & Responsive Web-designe

Adaptive & Responsive Web-designe - инструмент, который обеспечивает корректное отображение сайта на экранах с разными размерами.

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

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

Причина возникновения:

  •  увеличение количества различных устройств для выхода в интернет;

  •  увеличение мобильного интернет-трафика;

  •  мобильный трафик не менее платежеспособный.

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

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

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

 

http://king8.by/

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

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

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

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

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

Примеры: https://www.underarmour.com/en-us/iwillwhatiwant

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

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

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

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

  •  горизонтальные скроллинг;

  •  сторителлинг, сайты-истории;​ 

           http://amphibiox.geox.com/amphibiox2014/en_gb/the-film

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

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

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

http://resn-experiments.tumblr.com/

http://acme-experience.com/

http://labs.convoy.me/camper/#!/landing

http://www.heartkids.co.nz/

http://sztafetapokolen.pl/sztafeta

http://vnstar.com.ua/

http://www.kikk.be/2015/

http://www.eginstill.com/project/enter-the-loft-amsterdam/

http://www.sylvainreucherand.fr/

http://compliments.dk/

http://www.kampenomtiden.no/

http://le-mugs.com/

http://www.revolution.pn/

https://www.christmas.express/en/

http://www.gitman.com/

 

Эту запись еще никто не прокомментировал. Будьте первым!
Добавить комментарий
2 + 8 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.
Rafik Google+ Rafik Google+