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

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

  • Рост популярности мобильных устройств, таких как смартфоны, планшеты, модели-трансформеры (с сенсорными экранами и возможностью использования как в качестве планшета, так и ноутбука). Их приходится упоминать отдельно, поскольку они технически немного отличаются от обычных устройств, но и до настольного РС не дотягивают.
  • Поддержка браузерами технологии 3D с помощью WebGL, что позволяет создавать «объемные» сайты, виртуальную реальность, превосходную по визуализации анимацию.
  • Переход на  HTML5, CSS3.
  • И, без этого ну никак, увеличение пропускной способности интернета, как мобильного, так и домашнего.

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

С эстетической точки зрения три года назад господствовал flat design. Затем Google представили Material design, который привел нас к небольшой абстракции. В 2017 году был сделан шаг назад к реалистичности, которая выражалась в использовании цветов, их сочетании, функциональности, формах. Но, так или иначе, 2017 год являлся годом гибридов, где реальность и технологии сталкивались для создания целостного опыта просмотра и использования контента и сайта.

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

Меню, неподдающееся парадигмам

В темные века веб-дизайна (около 20 лет назад) существовало только два типа стандартного меню: верхняя полоска и боковой список. С появлением адаптивного дизайна  появилось меню-гамбургер. Это меню – прекрасное решение для мобильных устройств, хотя его обвинили в препятствии участия пользователей, в малой понятности для большинства, малой эффективности для конверсии, и даже в том, что оно не имеет «изюминки». Но оно имеет место быть и его используют, поскольку, если сайт создается в одном варианте для всех устройств, то его использование оправдано. И именно «гамбургер» мы ожидаем видеть на протяжении 2018 года, поскольку рост числа и популяризация смартфонов будет расти.

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

Меню на весь кадр

Проекты Hillsiderancho, maxchocolatier используют уникальный подход к кадрированию меню и располагают его по всем сторонам кадра. Оно есть сверху, справа, слева. Это удобно и не менее функционально. Аналогично выглядит проект WE3, в котором меню, может, и не такое насыщенное, но располагается точно также.

Без меню

Интересная идея, когда пользователям не нужно больше говорить и указывать, что делать на веб-сайтах. Действие прокрутки они понимают интуитивно, поэтому могут пролистывать контент, пока не найдут нужную информацию. Некоторые дизайнеры предпочитают отключать меню почти полностью и дают пользователям свободу в изучении и исследовании. С мобильными устройствами такая тенденция становится весьма популярной, и к тому же открываются новые возможности для горизонтальной прокрутки. Примером такого «без меню» могут стать проекты Anonymous Hamburger, bachoy

 

Всплывающее верхнее меню

В течение долгого времени мы были настолько ослеплены «раскрывающейся» парадигмой, что не смогли изучить простую альтернативу: навигация, которая появляется самостоятельно, выскакивает, всплывает! На странице сайта существует много мест, где можно разместить такое меню, сделав видимым и доступным, но при этом анимация не обязательно должна бать сверху вниз. Посмотрите, на circlesconference. При нажатии на значок меню-гамбургера в верхнем правом углу, в центре экрана появляется отдельное полотно с меню навигации.

Расположение над страницей

Разновидностью всплывающей навигации является  всплывающая панель Поповер (popover) или «булочка», которая охватывает всю страницу навигации. Это смело для дизайнера, но чувствуется пользователями невероятно естественно. Это даже бросает вызов оформлению оглавления в печатных изданиях. Проект Pinqponq использует обычное меню-гамбургер, при нажатии на которое появляется всплывающий поповер, закрывающий собой всю страницу. Сайт edelson использует ту же концепцию, но popover состоит из шести элементов в сетке. Каждый такой элемент (пункт навигации) способен изменять фоновое изображение (при наведении курсора мышки) и показывает какую-то часть общей фотографии. Выглядит… просто красиво. Представляет интерес и проект wibicom

Самостоятельная прокрутка

Сейчас мы наблюдаем четкую тенденцию веб-сайтов отказываться от браузерной прокруки. Вместо этого разработчики создают пользовательскую, самостоятельную прокрутку на странице, позволяя тем самым изучать контент в удобном для посетителя режиме. Некоторые сайты используют «виртуальную прокрутку», которая выполняет все те же функции, но совершенно неподконтрольна браузерам. И здесь для дизайнеров открываются вариации свободы творчества, как например в buildinamsterdam. Проект получил известность благодаря горизонтальной прокрутке, но при этом можно управлять колесиком мышки. На главной странице прокрутка горизонтальная, а внутри сайта – вертикальная. Таким образом, на мобильном устройстве перенимается опыт работы на рабочем столе РС. Отдельно стоит обратить внимание и на всплывающее боковое меню, что появляется при нажатии на иконку гамбургера. В целом сайт невероятно интересен с технологической и визуальной точки зрения.  Аналогично используется и прокрутка проекта Dess, interword.

Некоторые же проекты предлагают пользователям прокрутку по щелчку или движению мышки. Речь идет о Fantastic Beasts Magical Maps и Grim London. Оба этих сайта предлагают пользователям карту и возможность физически двигать изображения, чтобы найти то, что их интересует. Иными словами – аналогия панорам улиц, музеев, парков и пр. от Google/Яндекс. Вместо того, чтобы полагаться на традиционный вид навигации, пользователям позволили самим выбирать то, что им интересно и путешествовать по карте в поиске нужного. Мы отдельно посвящали материал этой технологии.

Почти все такие сайты используют технологию WebGL. Но Grim London является особо уникальным проектом, поскольку использование карты было создано на движке PixiJS (это javascript  на движке 2D WebGL).

Осязаемость и виртуальность

Три года назад flat design уступил место material design, который добавляет тени и градиенты в по-прежнему плоские элементы, создавая иллюзию трехмерного пространства на плоском экране. В 2017 году был предпринят шаг назад к реализму, и в 2018 году эта тенденция продолжится, отчасти. Она не умрет на корню, наоборот, получит свое дальнейшее развитие. Но и не превратится в скевоморфизм.

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

Таким образом, интеграция физических объектов в цифровое пространство размывает границы между тем, что находится на вашем экране и в вашем реальном мире. Между виртуальностью и реальностью. Это, в свою очередь, создают сильную эмоциональную связь с образами ваших устройств. Вы их узнаете в виртуальном мире и поражаетесь: «вау, и тут есть то же самое, что есть у меня!». Посмотрите также на: prettyflyfpv, adriaansen, 1stchoice

 

 Утонченная анимация и микровзаимодействия

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

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

Реализуется такое через Javascript или CSS. Разумеется, что такая анимация не служит микровзаимодействиям в целях UX, но сайт, зато, приобретает свою личность, характер и образность.

Так проект projectsunday интересен «от и до». Здесь и анимационное выползающее слева меню, и кнопочки с цветовой анимацией, несколько вариантов прокрутки, портфолио с изменяющимися фотографиями и подсказками, анимация размера текста и не только. Показать сложно, изучите его самостоятельно.

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

Интересны также kamata1010, frame-optik, maxchocolatier, folkstrategies

 

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

Ради искусства забыть о пропорциях

Что-то широкое и короткое (по длине) будет отлично смотреться на широкоформатных экранах с развёрткой 16:9 или экранах Retina. Но на мобильных вертикальных экранах такое попросту «не влезет». Но целостность композиции является одним из основных элементов дизайна, верно? Как же найти выход из ситуации, если используется отзывчивый дизайн, а содержимое везде отображается по-разному, каким быть идеальным пропорциям? Приходится банально обрезать изображение. Хм, но как сделать это таким образом, чтобы сохранить целость сцены?

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

Теперь подумайте, что такое история, которую вы пытаетесь рассказать через фотографию? Подчеркните её, выделите и позвольте пользователям объять её взором на экране. Достигнуть это на программном уровне можно с помощью smartcrop.js.

Впрочем, некоторые сайты решили полностью игнорировать соотношение сторон и тоже предложили зрителям композиционные изображения. На примерах mikebravo и Google Arts & Culture можно увидеть одни и те же изображения на экранах РС и мобильных устройств, но они не растягиваются до краев вашего экрана, они сами по себе большие, и в случае необходимости просто центрируются и обрезаются по краям автоматически. При этом вся композиционная составляющая заключена в центре фотографии.

Заключение

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

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

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