Ветра унесли 2017 год в прошлое, а значит, наступило хорошее время, чтобы подумать о достижениях и что ждет всех нас и веб-дизайн в будущем. В прошлом материале мы уже начали рассматривать достижения и технологии ушедшего года, которые будут актуальны в году текущем. Но тогда за бортом остались более поздние конструкции, модернизации и даже самые простые дизайн-хитрости, что соответствуют самым разным стилям и направлениям. Хотя именно они в текущем году постепенно начнут обретать свою популярность. Более того, часть таких трендов станет широко использоваться даже в полиграфии, дизайне логотипов, а не только при создании веб-сайтов.
Асимметричность
Время идеальной симметрии почти прошло. Пока в 2017 году был в моде разделенный экран, тренд развивался, теперь разделение становится несколько хаотичным, асимметричным. Чтобы суметь сделать и продумать данную конструкцию, требуется найти четкий баланс элементов, чтобы одна сторона не доминировала над другой. Обычно тематика космоса в сочетании с текстом и добавлением множественных фотофильтров для привлечения внимания пользователей.
Удивительно, но даже такая асимметричность все равно держится на модульной сетке. И причина тому проста – организованность элементов. Посмотрите на примеры dada-data, veintidosgrados, beoplay, clubofthewaves и заметите, как ассиметрично расположенные элементы размещены таким образом, что смотрится все четко, ясно, сбалансированно и ново.
Яркость
Кажется, что яркий цвет именно та тенденция, которая хочет остаться в сердцах и сознании людей еще на очень длительное время. Да, это одна из важных частей flat design и не менее важная для Material Design, а ведь оба этих стиля по-прежнему являются частью многих проектов.
Даже без характерных признаков данных стилей, яркие и смелые цвета являются заманчивыми и помогают привлекать посетителей на сайт. Такие цвета обладают незаурядным свежим видом и привлекательностью для молодого поколения пользователей.
Ох, даже больше, скажем. Насыщенные и кричащие цветовые решения могут также создать неожиданную эстетику и вызывающую атмосферу для сайтов и компаний, которые до момента редизайна были малоизвестными или незаметными. Следующие примеры scaleapi, spotify, egwineco, funemployed, makeitdriveable показывают, насколько сильно меняется наше восприятие компаний и их деятельности, как сильно можно заблуждаться в своих ассоциативных мыслях.
Нижние всплывающие элементы
Все эти крошечные объявления в нижней части мобильных приложений и сайтов теперь приходят на настольные системы и планшетные конструкции. И это не только реклама внизу экрана, но и окна чата, всплывающие уведомления или навигационные элементы.
Низ экрана (не страницы) – наиболее ненавязчивое место, являющееся главной областью нашего с вами просмотра и использования. Так сложилось, но мобильные устройства обучили пользователей, что именно внизу экрана размещается реклама или дополнительная информация.
И, о чудо, это работает! Объявления в нижней части экрана, как, например, у Burlap and Blue или нашего с вами WAYUP, только кажется, что не играют роли. Но пользователь по-прежнему видит содержание, он может его отключить, по желанию.
Голосовое управление
Достаточно незаурядная тема, мы еще будем говорить о ней отдельно в будущем. Но, что интересно сейчас…
Будущее веб-дизайна это не 100% визуализация. Некоторые дизайны могут быть услышаны, они обладают голосом. И касается это проектирования таких интерфейсов, которые могут слышать и понимать голосовые команды для функций поиска и не только. Взаимодействие с ними имитирует обычный человеческий язык, объединяя голоса мира и языки программирования, необходимые для веб-дизайна. Например, всем известен голосовой помощник Алиса (Яндекс), Cortana (Microsoft), Siri (Apple), Google (не распространенно на территории России). Представьте теперь, что сайтом тоже можно управлять с помощью голоса. Это и есть будущее развитие, поскольку развитие мобильной индустрии, технологий «умного дома» этому как раз и способствуют. Они и сейчас есть, даже у МГТС, например для наглядности.
Да, такие тенденции не смогут обрести невероятную популярность в течение 2018 года, технологии «голоса» и распознавания человеческой речи будут развиваться и использоваться чаще. Но вот планировать такие проекты нужно начинать уже сейчас, чтобы затем в будущем было проще и быстрее подключить голос к уже существующим сайтам и интерфейсам.
Текучие формы
В то время, как в 2017 году в основе были четкие геометрические формы и правильные углы, в 2018 году к ним добавятся текучие формы или мягкие волнистые, soft, как их еще называют.
Плавные линии являются естественным продолжением тренда многоугольника. Не заменяет его полностью, поскольку правильные формы всегда в моде, они – классика. Но дополняют их, усовершенствуют. Ранее мы писали о том, что преимущество многоугольников в том, что каждый проект с ними способен отличаться и быть уникальным, несмотря на то, что фигуры бывают плоскими, объемными, анимированными.
Так вот, эти же характеристики полностью соответствуют и для текучих форм. Различие состоит только в том, что вместо острых углов в местах пересечения линий пользователи видят гладкую кривую форму, которая буквально течет по всему экрану.
Посмотрите, например, на bubblewits, elje, clearbit, algolia и сможете воочию убедиться в том, как совершенно иначе визуально воспринимаются оформление и формы.
Графический формат SVG
Scalable Vector Graphics все чаще и чаще используется веб-дизайнерами, как тип изображений по умолчанию для сайтов. Формат SVG представляет собой облегченный вариант векторного изображения, который применяется для иконок, логотипов, графиков. При этом все пиксели в данном формате идеальны и независимы от разрешения экрана или его размера. Проще говоря, при масштабировании качество картинки не ухудшается.
Поскольку же дисплеев с большим разрешением становится все больше в продаже, они доступнее становятся и для большинства жителей на планете, то и формат SVG получает все большую популярность.
Но мы, может, и не придали ему особого внимания, если бы не его возможность работы с мультимедийными изображениями. Касается это, в первую очередь 3D, синемаграфии, анимационных логотипов, панорамных фотографий или в 3600.
Примеров по факту здесь нет, только опыт и знания возможностей и использования формата.
Разделение экрана
Шаблоны проектирования разделенных экранов только растут, несмотря на вариации симметрии и асимметрии. И стилей разделения становится неимоверно много. Конструкции стали настолько популярными по весьма нетривиальной причине – они обеспечивают большой опыт и на настольных компьютерах и на мобильных устройствах одновременно, поскольку разделенный контент отображается рядом друг с другом, и сочетаются они одинаково хорошо. Впрочем, существуют вариации разделения, но зависят они уже от конкретного устройства и целей самого проекта.
Хитростью такого проектирования является использование не только самого разделения, как такового, но и добавления верхнего слоя с текстом или логотипом, что обеспечивает эффект глубины, объемности. Немного об этом мы говорили в прошлом материале и посмотрите дополнительно на galaxii game app, android, simonleegallery, getbaseui.
Анимация прокрутки
Параллакс или анимационная прокрутка страницы были настолько популярны (да и сейчас еще в моде), что вопреки этому веб-дизайнеры начинают прекращать его использование. Но это совершенно не означает, что анимационная прокрутка совсем заканчивает свое существование.
Кроме параллакса существует еще огромное количество способов для поощрения того, чтобы пользователь прокрутил страницу. И использование в данном случае небольшого количества параллакса вполне допустимо, даже больше – приветствуется. Главное – в нем не утонуть и не увязнуть.
Пример проекта doggoforhire – яркий вариант использования анимации во время прокрутки страницы. Пока вы крутите колесико мышки, на странице за песиком падают конфетти и разные геометрические фигуры. Чем быстрее вы крутите колесико – тем быстрее и конфетти сыплется. При этом даже мордашка песика меняется соответствующе. Если прокучивать страницу сайта быстро – создастся эффект видео, а если медленно – то в левой части экрана можно увидеть различный текстовой контент.
И вот еще некоторые проекты, что готовы предложить самые разные идеи анимационной прокрутки. Это smartusa (машинку сверху можно повернуть в 3600), loveinstantlove, imsproductions, sliders.
Свободное пространство, но не минимализм
Дизайнеры любят белое свободное пространство, а еще они любят минимализм, когда как наши с вами клиенты/заказчики его не жалуют. Большинство из вас согласится с мыслью, что нужен компромисс. Компромисс, который обеспечит много свободного пространства и наименее выраженный минимализм. Как?
Цветность вкупе с элементами дизайна и большим количеством свободного пространства. Элементы при этом будут визуально расположены далеко друг от друга, но в целом конструкция будет ощущаться более плотной.
Design Calendar проделали огромную работу, используя и пространство, и содержание, и наличие разных элементов. Но главное, прокрутите страницу, чтобы увидеть воочию в действии весь дизайн и интерфейс, а также множественные негабаритные элементы, которые здесь находятся на своем месте. Удивительные сочетания и решения, но которые смотрятся поразительно необычно.
Дизайнеры работают с белым пространством, фоном гораздо чаще и иными способами. Оглянитесь назад, посмотрите наши прошлые материалы и обратите внимание, сколько примеров с белым пространством было показано. Но подумайте также над тем, что 2018 год должен привнести что-то новое и изменить существующее.
Посмотрите дополнительно на culture, nurturedigital, aventura, kasradesign, programatorio
Вывод
Значит ли все это, что начало года вдохновит всех нас попробовать что-нибудь новенькое? Может быть, это станет вашей собственной революцией?
Мы рассмотрели не все возможные тенденции, что будут применяться и использоваться в текущем году, но вполне можем уделить этому еще один материал.
Так или иначе, но убедитесь в том, что использование любого тренда веб-дизайна требует осторожности. Иногда даже лучшие идеи могут расти быстро и угасать мгновенно. Но есть те тенденции, что находятся вне времени, их использование всегда оправдано и приветствуется. Однако заметим, что если речь заходит о голосовых помощниках и интерфейсах, то, вероятно, стоит немного повременить с такими разработками для «масс». Их мало еще, люди в большинстве своем к ним особо не привыкли и воспринимают еще не просто, как «ноу—хау», а из разряда: «это что-то сверхсложное навороченное и крутое. Мне бы что-нибудь попроще, поскромнее, подешевле».
Но поскольку развитие в себе дизайнерского искусства невозможно без практики – пробуйте, вносите изменения в уже существующее, получайте в целом удовольствие от всего, что создаете. Создавайте просто для себя, для друзей и близких. Играйте с текущими тенденциями, сочетайте, смешивайте, будто перед вами палитра красок. Может быть, именно вы найдете не новое, но оригинальное и необычное.