- PVSM.RU - https://www.pvsm.ru -

Самые яркие тенденции веб-дизайна в 2016

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

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

В этой статье мы рассмотрим 11 крупнейших ожидаемых тенденций веб-дизайна этого года. Так что устраивайтесь поудобней и начинайте читать!

1. WebGL (Web Graphics Library)

Среди новейших достижений есть приметная технология WebGL [1] (Web Graphics Library). Её использует множество удивительных сайтов, появившихся недавно.

По-простому, WebGL — это способ визуализации интерактивной 3D и 2D графики в браузерах с аппаратным ускорением, без каких-либо плагинов.

1.1 Интерактивное 3D приложение WebGL

Самые яркие тенденции веб-дизайна в 2016 - 1
Experience Curiosity (разр. NASA)

WebGL был одной из центральных тем конференции SIGGRAPH 2015 [2]. Презентацию по трехмерной графики и WebGL вы можете посмотреть на этом канале [3] YouTube.

Из полуторачасового видео, вы узнаете о веб-приложении NASA “Experience Curiosity [4]”, созданием которого отметилась третья годовщина посадки марсохода “Curiosity” на Марс. Приложение позволяет пользователям “покатать” трехмерный марсоход NASA на поверхности Марса и “управлять” рукой-манипулятором.

Для создания этого ресурса использовался Blend4Web [5] (фреймворк для создания браузерных 3D-приложений) и Blender [6] (пакет для трехмерного моделирования и анимации).

Самые яркие тенденции веб-дизайна в 2016 - 2
Веб-сайт Beloola использует three.js (библиотека JavaScript)

Beloola [7] — это первая социальная сеть, сконструированная в виде трехмерного мира. Она напоминает Linden Lab в Second Life, но не требует никакого специального программного обеспечения, кроме самого браузера.

1.2 3D “Видео” WEBGL

Самые яркие тенденции веб-дизайна в 2016 - 3
Angry Wife (разр. Madeo)

Другим типом 3D в WebGL может служить игровое промо “Angry Wife [8]”. На первый взгляд, оно выглядит как обычное видео, но это совсем не так. На самом деле, 3D сцена, интегрированная в веб-страницу, использует JavaScript библиотеку three.js [9].

Самые яркие тенденции веб-дизайна в 2016 - 4
Проект “The Boat” от SBS TV (Австралия)

Австралийское телевидение SSB TV переработала историю писательницы Nam Le “The Boat” о побеге из Вьетнама и превратило её в интерактивный видео-рассказ [10] с помощью WebGL. Приложение состоит из нескольких частей с отлично выполненной анимацией и вручную раскрашенными иллюстрациями. Здесь также используется three.js [9], как и в предыдущем примере.

Самые яркие тенденции веб-дизайна в 2016 - 5
BecauseRecollection

В приложении Because Recollection [11] воплотилась идея создания своеобразной машины времени, но только в отношении музыки. Большое количество звуковых эффектов тесно связанно с происходящем на экране и зависит от действий пользователя. Проект сделан с помощью PIXI [12] в виде скомпонованной серии клипов, которые активируются различными интерактивными элементами.

1.3 Визуализация данных с WebGL

Самые яркие тенденции веб-дизайна в 2016 - 6
Histography (Matan Stauber)

Histography [13] демонстрирует исторические события из Википедии на интерактивной шкале времени (прим. переводчика. Для запуска требуется браузер Chrome). Наверное, это кажется не очень интересным, но попробуйте сами и, возможно, вы удивитесь тому, как такая огромная масса данных может быть трансформирована в простой и отзывчивый инструмент.

Самые яркие тенденции веб-дизайна в 2016 - 7
“The Museum of The World” (разр. Британский музей и Google)

Похожая идея была реализована несколько иным способом для коллекции Британского музея. Проект “The Museum of The World [14]” — это результат партнерства между Британским музеем и Институтом культуры Google. Исторические объекты из коллекции музея показываются на “шкале времени” выполненной в 3D с помощью WebGL.

Вы можете перемещаться во времени вперед и назад по осям Z или Y, и по континентам, используя ось X. С помощью меню можно выбрать теги к объектам, которые сгруппированы по ключевым темам (торговля, конфликт и т.д.).

1.4 2D анимация на основе WebGL

Самые яркие тенденции веб-дизайна в 2016 - 8
Nouvelles-Ecritures от FranceTV

Проект “Nouvelles Ecritures [15](прим. переводчика. “Современные свитки”) французского телеканала FranceTV — это сайт с очень интересной реализацией 2D-анимации WebGL в браузере. Ощущение, что читаешь богато иллюстрированный свиток, который плавно прокручивается по вертикали. Проект выполнен с помощью JavaScript библиотеки Pixi.js [12].

С технической точки зрения — это непрерывная двухмерная анимация, которая выполняется в псевдо 3D пространстве. Выглядит очень эффектно!

2. VR (Виртуальная реальность)

Виртуальная реальность (VR) — это родственная технология, которая способна встряхнуть мир гаджетов в 2016 году. Возможно, совсем скоро всё станет гораздо интереснее.

Вы слышали о Google Cardboard [16]? С телефоном Android и куском картона вы можете получить ощущение виртуальной реальности в домашних условиях. Google добавил к самодельным очкам специальное приложение Android — Cardboard Camera [17], которое позволяет просматривать виртуальные фото. Это приложение стало одним из лучших по мнению The Guardian в январе 2016 года.

Однако, если вы желаете получить более качественную “виртуальную реальность”, то можете оставить предзаказ на набор Rift VR [18] от Oculus (приблизительно 600$). Есть нечто среднее между Google Cardboard и Oculus — это VR GEAR от Samsung (100$).

Имеет ли это какое-либо значение для веб-дизайна? Пока нет, но взгляните на WebVR [19] (JavaScript API, который обеспечивает доступ к устройствам VR) и на некоторые проекты, где используется эта технология. Рабочие примеры можно найти на сайте Mozilla VR [20]. Вот что говорят сами разработчики: “Мы хотим создать открытую, высокопроизводительную систему виртуальной реальности для сайтов”.

2.1 VR video

Самые яркие тенденции веб-дизайна в 2016 - 9
Catch the Dragon (“Поймай дракона”) от Peugeot

Промо Peugeot 208 [21] — это отличный пример взаимодействия устройств виртуальной реальности и видео. При запуске предлагается выбрать нужную опцию просмотра: VR (для Google Cardboard) или панорамное видео 360. Обе версии полностью интерактивные. Если вы используете устройство с гироскопом, то придется активно крутить головой, чтобы “поймать дракона”.

3. Системы частиц

Самые яркие тенденции веб-дизайна в 2016 - 10
Deutser

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

Интересный пример использования частиц — веб-страница “Deutser [22]”. Посмотрите, как разлетаются элементы и возвращаются обратно в виде фигур и символов, реагируя на движения мыши. Результат реально гипнотизирует.

4. Обзорные панорамы

Самые яркие тенденции веб-дизайна в 2016 - 11
Rainforest (Тропический лес) от Regnskogfondet

Rainforest [23] — это не просто панорамная картинка. С каждым шагом вы все дальше и дальше погружаетесь в джунгли с полноценным обзором на 360 градусов.

Здесь качественные трехмерные декорации, панорамы на весь экран. Однако, гораздо интереснее выглядит интеграция навигационных элементов в структуру “мира”.

5. Полноэкранное видео с интерактивными сценами и элементами

Самые яркие тенденции веб-дизайна в 2016 - 12
Christmas Express (Рождественский экспресс) от Milka использует набор видео-эпизодов разделенных интерактивными сценами.

Сайт Christmas Express [24] также эксплуатирует идею полноэкранного видео, но насколько я понимаю, здесь нет ничего общего с WebGL.

Вы пройдете сквозь этапы создания рождественского письма. 10 минут на написание послания и сутки на доставку. Всё выглядит очень реально, детали совершенны и даже анимация пера точно следует начертаниям букв. Рождественское настроение обеспечено!

6. Анимационные рассказы

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

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

Самые яркие тенденции веб-дизайна в 2016 - 13
Годовой отчет от Danish Crown (крупнейший в Европе производитель свинины)

Годовой отчет [25] за прошедший год от европейского производителя пищевых продуктов Danish Crown — это не скучные диаграммы и таблицы, к которым все привыкли. Страница отчета обращается к своим инвесторам на простом и смелом визуальном языке, где активно используется абстрактный юмор и смешные иллюстрации. Стилистика текста также выдержана в простых и ярких выражениях.

И вот, что говорят представители самой компании: «Это не выглядит заумным. Не выражает чей-то взгляд, не передает задачу, не усыпано терминами. Это не имеет отношения к среднестатистическим базовым ценностям – проявлению уважения и инициативы. По этой причине, мы это делаем. Проявляем уважение и инициативу».

Самые яркие тенденции веб-дизайна в 2016 - 14
World’s Easiest Decision

Такой вид повествования более распространен для веб-страниц организаций НПО. Так сайт Climate Reality Project “World’s Easiest Decision [26]” представляет собой интерактивный комикс об изменении климата. Посетитель отвечает на простые вопросы и, в зависимости от его ответов, показывается фильм или предлагается подписать петицию.

Этот пример отлично демонстрирует, насколько удачно плоский дизайн совмещен с текстурами.

7. Линейная навигация

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

Сейчас невозможно представить, что прокрутка на сайте считалась когда-то, как нечто неудачное (да это было). Хотя по прежнему можно услышать о мифической “above the fold” от некоторых разработчиков, клиентов или дизайнеров (прим. переводчика. “Above the fold” — часть страницы, которая видна пользователю без прокручивания).

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

Самые яркие тенденции веб-дизайна в 2016 - 15
Портфолио видео от Julien Belmonte

Сайт кинорежиссера Жюльена Бельмонте [27] (Julien Belmonte) содержит все его фильмы, а навигация по ним выполнена очень удачным способом. Фильмы перемещаются по горизонтали слева-направо и подсвечиваются один за другим. При этом используется подвижная красная линия, напоминающая временный маркер.

Здесь почти нет иной навигации. Разве что, в разделе “About”, где текст выглядит, как финальные титры любого фильма.

Самые яркие тенденции веб-дизайна в 2016 - 16
Francesco Bertelli online CSV

Франческо Бертелли [28] (Francesco Bertelli) придумала инновационный подход для своего онлайн CSV. Используемый интерактивный календарь выглядит эстетично и является эффектным инструментом для демонстрации собственного профессионального роста.

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

8. Постраничная навигация

Этот тип навигации используется уже давно. В предыдущей статье “Тренды 2013 года [29]” сайт Bagiga [30]был примером таких типов навигации: “screen-after-screen” или “previous/next [31]”.
Читая обычные книги, мы перелистываем страницу за страницу и этой привычкой стараются воспользоваться некоторые дизайнеры.

Самые яркие тенденции веб-дизайна в 2016 - 17
Manufacturer of Masterpieces

Производитель драгоценностей Imperiali Geneve [32] использует аналогичный подход, как и Франческо Бертелли, когда внимание пользователя сосредотачивается на каждом отдельном экране, где рассказывается своя история. Сайт линейный, но без свободной прокрутки. Вы перемещаетесь от экрана к экрану без каких-либо посредников.

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

Самые яркие тенденции веб-дизайна в 2016 - 18
Музей Ван Гога в Амстердаме

Похожий тип навигации используется на сайте музея Ван Гога [33] в Амстердаме. Номер страницы и их количество, стрелки в сочетании со слайдовыми переходами между экранами — полное ощущение, что вы читаете традиционную книгу.

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

9. Страница в рамке

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

Самые яркие тенденции веб-дизайна в 2016 - 19
Ginger Bread Branch (Пряничный филиал) от The PNC Financial Services Group, Inc.

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

Самые яркие тенденции веб-дизайна в 2016 - 20
wloks

Вебсайт Wloks [35]предлагает графические ассеты шикарным и уникальным способом. Вместо обычного электронного интерфейса стоковых фотографий, этот сайт использует интересный стиль печатных каталогов и росписей-обманок [36], с рамкой и меню элементов, размещенных в углах экрана.

Самые яркие тенденции веб-дизайна в 2016 - 21
Beer 34

Производители пива Beer 34 [37] нашли свое уникальное решение для контроля экрана в различных разрешениях, черпая вдохновение из инфографики и истории. В тоже время, сохраняется вид старой этикетки. Сделано все достаточно просто и это наиболее очаровательный пример в рассматриваемом наборе.

10. Знакомимся с преобразованием CSS

Самые яркие тенденции веб-дизайна в 2016 - 22
Stand4humanrights

Stand4HumanRights [38] предлагает вам присоединится к сообществу, добавив свое фото на социальную стену, которая выглядит как огромная изогнутая поверхность. Затем вы можете разместить пост в социальных сетях. “Социальной стена” может перетаскиваться и это выполнено на основе CSS transform. Смотрится интересно, однако, требует больших вычислительных мощностей и не столь чувствительно, как можно было бы ожидать.

Самые яркие тенденции веб-дизайна в 2016 - 23
Species In Pieces (Виды в кусочках)

Species In Pieces [39] использует анимацию CSS для своей интерактивной выставки, которая предлагает для изучения 30 исчезающих видов со всего мира. Модели животных составлены из отдельных кусочков, которые складываются при переходе от одного объекта к другому (прим. переводчика. Для работы требуется браузер Chrome).

11. SVG-анимация

Самые яркие тенденции веб-дизайна в 2016 - 24
holohalo

На самом деле кажется странным, что существует так мало страниц использующих классическую технологию Scalable Vector Graphics ( SVG ) для отображения чего-то более интересного, нежели масштабируемые иконки для разных разрешений. Holo Halo [40] — это исключение из правила и может служить источником вдохновения для дизайнеров, показывая, что можно сделать с SVG.

Итог

Без сомнений, ведущий тренд в веб-дизайне 2016 года — WebGL во всех его проявлениях: интерактивное видео, игры, анимация и визуализация данных. Виртуальная реальность, как ожидается, имеет большое будущее, но многое зависит от доступности устройств VR.

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

И если вам удалось осилить эту большую статью, то получите маленький бонус — прокатитесь на Delahaye 165 [41]:

Самые яркие тенденции веб-дизайна в 2016 - 25
Вебсайт timeshift165

Автор: Prand

Источник [42]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/111944

Ссылки в тексте:

[1] WebGL: https://ru.wikipedia.org/wiki/WebGL

[2] SIGGRAPH 2015: http://s2015.siggraph.org/

[3] на этом канале: https://www.youtube.com/watch?list=PLYO7XTAX41FOFvZ2beOg8y0tvuVLJLL0G&v=B1m75FUKumA

[4] Experience Curiosity: http://eyes.nasa.gov/curiosity/

[5] Blend4Web: https://www.blend4web.com/ru/about/

[6] Blender: http://blender.org/

[7] Beloola: http://www.beloola.com/

[8] Angry Wife: http://www.angrywifegame.com/

[9] three.js: http://threejs.org/

[10] видео-рассказ: http://www.sbs.com.au/theboat/

[11] Because Recollection: http://www.because-recollection.com/

[12] PIXI: http://www.pixijs.com/

[13] Histography: http://histography.io/

[14] The Museum of The World: https://britishmuseum.withgoogle.com/

[15] Nouvelles Ecritures: http://lederniergaulois.nouvelles-ecritures.francetv.fr/#!/episode1

[16] Google Cardboard: https://www.google.com/get/cardboard/

[17] Cardboard Camera: https://play.google.com/store/apps/details?id=com.google.vr.cyclops&hl=en

[18] Rift VR: https://www.oculus.com/en-us/

[19] WebVR: http://webvr.info/

[20] Mozilla VR: http://mozvr.com/#start

[21] Промо Peugeot 208: http://www.catchthedragon.nl/

[22] Deutser: http://www.deutser.com/

[23] Rainforest: http://rainforest.arkivert.no/#kart

[24] Christmas Express: https://www.christmas.express/en/

[25] Годовой отчет: http://annualreport2015.danishcrown.dk/

[26] World’s Easiest Decision: http://worldseasiestdecision.org/en-us/

[27] Жюльена Бельмонте: http://www.julienbelmonte.com/

[28] Франческо Бертелли: http://www.francescobertelli.com/

[29] Тренды 2013 года: https://99designs.com/designer-blog/2013/02/21/web-design-trends-for-2013/

[30] Bagiga : http://www.bagigia.com/

[31] previous/next: https://99designs.com/designer-blog/wp-content/uploads/2012/12/Navigation.jpg

[32] Imperiali Geneve: http://www.imperiali-geneve.com/

[33] музея Ван Гога: http://www.vangoghmuseum.nl/en/stories/vincent-edvard-two-extraordinary-lives#1

[34] Сайт: https://www.pncchristmaspriceindex.com/cpi/

[35] Wloks : http://www.wloks.com/

[36] росписей-обманок: https://en.wikipedia.org/wiki/Trompe-l%27%C5%93il

[37] Beer 34: http://34.ge/en

[38] Stand4HumanRights: https://www.stand4humanrights.com/

[39] Species In Pieces: http://species-in-pieces.com/

[40] Holo Halo: http://holohalo.net/

[41] Delahaye 165: http://www.timeshift165.com/

[42] Источник: https://geektimes.ru/post/270842/