Модные тенденции в веб дизайне. Больше внимания анимации. Уникальные иллюстрации и графика
- Перевод
Мир веб-дизайна ярок и многообразен. Большие изменения происходят здесь не каждый год. Подтверждает это и стремительный рост технологий, который за последние несколько лет показал, что важные тенденции в веб-дизайне недалекого будущего будут сосредоточены на улучшении имеющихся разработок.
Плоский дизайн станет более текстурированным, “кинематографические опыты” будут более распространенными, а использование библиотек JavaScript позволит больше экспериментировать. Мы уверены, что растущая популярность WebGL и виртуальной реальности позволит изменить вебсайты, которые мы знаем, в нечто новое с интересными интерактивными возможностями.
В этой статье мы рассмотрим 11 крупнейших ожидаемых тенденций веб-дизайна этого года. Так что устраивайтесь поудобней и начинайте читать!
1. WebGL (Web Graphics Library)
Среди новейших достижений есть приметная технология WebGL (Web Graphics Library). Её использует множество удивительных сайтов, появившихся недавно.По-простому, WebGL - это способ визуализации интерактивной 3D и 2D графики в браузерах с аппаратным ускорением, без каких-либо плагинов.
1.1 Интерактивное 3D приложение WebGL
Experience Curiosity (разр. NASA)
WebGL был одной из центральных тем конференции SIGGRAPH 2015 . Презентацию по трехмерной графики и WebGL вы можете посмотреть на этом канале YouTube.
Из полуторачасового видео, вы узнаете о веб-приложении NASA “Experience Curiosity ”, созданием которого отметилась третья годовщина посадки марсохода “Curiosity” на Марс. Приложение позволяет пользователям “покатать” трехмерный марсоход NASA на поверхности Марса и “управлять” рукой-манипулятором.
Для создания этого ресурса использовался Blend4Web (фреймворк для создания браузерных 3D-приложений) и Blender (пакет для трехмерного моделирования и анимации).
Веб-сайт Beloola использует three.js (библиотека JavaScript)
Проект “The Boat” от SBS TV (Австралия)
Австралийское телевидение SSB TV переработала историю писательницы Nam Le “The Boat” о побеге из Вьетнама и превратило её в интерактивный видео-рассказ с помощью WebGL. Приложение состоит из нескольких частей с отлично выполненной анимацией и вручную раскрашенными иллюстрациями. Здесь также используется three.js , как и в предыдущем примере.
BecauseRecollection
С технической точки зрения - это непрерывная двухмерная анимация, которая выполняется в псевдо 3D пространстве. Выглядит очень эффектно!
2. VR (Виртуальная реальность)
Виртуальная реальность (VR) - это родственная технология, которая способна встряхнуть мир гаджетов в 2016 году. Возможно, совсем скоро всё станет гораздо интереснее.
Вебсайт timeshift165
Теги:
- webgl
- веб-дизайн
- javascript
Каждый год мы узнаем что-то новое о дизайне и 2016 год не исключение. Статья, которую мы написали в прошлом году имела такой успех, что мы решили сделать некоторые прогнозы на 2017 год, так что давайте начнем!
Вышла новая статья → ← Читай и вдохновляйся!Тренды дизайна находятся под влиянием СМИ, технологий, индустрии моды и, в последнее время юзабилити. Тренд проявляется медленно, постепенно, проникая во все направления дизайна, а затем исчезает точно таким же образом. В основном дизайн тренды существуют не более чем один или два года. Дизайн в 2017 году продолжит тренды, которые появились в 2016 с добавлением некоторых новых изменений, это чувство хорошо известно и знакомо, и вы, возможно, заметили его в последние пару лет. Основное влияние остается за Google’s Material Design, с небольшими изменениями.
Какие тренды в веб-дизайне нас ждут в 2017 году
01. Полу плоский дизайн (Semi Flat Design)
Последние несколько лет плоский flat дизайн был самым популярным на рынке веб-дизайна, но теперь, под влиянием Material Design, он становится все более одномерным. Этот переход начинается с некоторых легких теней, что делает его полу плоским дизайном. Эволюция flat дизайна из стиля минимализм переходит в новые развивающиеся технологии. Плоский дизайн еще есть, но он претерпел некоторые улучшения.
Плавное затенение добавляет глубину и сложность, не разрушая ощущения плоского дизайна. Это новая функция добавлена во flat тренд и продолжит развиваться в 2017 году.
Проект: Resourсe | UI/UX Tool for Web Services
Авторы: Ruslan Latypov; LS Graphics; Anton Mishin; Valery Gurkov
Проект: Listener’s Playlist
02. Движущиеся фотографии (Cinemagraphs)
Синемаграфия это не те GIF анимации, которые мы видим в интернете по всюду. Синемаграфия — это все еще изображения с незначительными элементами движения. Эта техника делает простое фото более реалистичным.
03. Больше 3D (More 3D)
3D определенно движется в нашу сторону, и мы будем видеть это влияние во всех областях дизайна. С технологиями VR/AR быстро наращивается темп, эта область развивается довольно быстро.
Проект: LUV.IT
Проект: Open Annual Awards
Проект: Air Max ’17
Проект: NIKE F.C. | 3D Golden balls in the real world
Проект: Better You Brand
04. Анимации (Animations)
Анимация все больше и больше присутствует в web-дизайне, формат может быть любым — WebGL CSS, GIFs, SVG или видео. Анимация была одной из самых важных трендов веб-дизайна прошлого года, не стесняйтесь ее использовать.
Проект: Nickelodeon Kids Pick The President
Проект: AR Virtual Fitness Coach App
Проект: ZH OURO- Rio 2016
05. Одностраничные сайты/лендинги (Landing pages)
В 2017 году мы увидим рост одностраничных сайтов из-за их потенциала для целей маркетинга и их способности лучше таргетировать посетителей.
Если вам понадобится лендинг, то можете заказать его у меня →
06. Геометрические фигуры, узоры, линии и круги (Geometric Shapes, Patterns, Lines and Circles)
Этот тренд начался в 2016 году и безусловно продолжится в 2017. Вы можете персонализировать свой сайт, просто добавив некоторые современные фигуры, или плоские, или с мягкой тенью.
Проект:
Проект: DRAP.agency Branding
Проект: Pfizer — Active and 50+ for The New York Times
07. Смелые, яркие цвета (Courageous Colors)
Используйте яркие цвета чтобы выделиться. Material и flat дизайн хорошо сочетаются с яркими цветами. Вы можете использовать цветовую палитру, представленную Google, чтобы выбрать и сочетать цвета, которые вы хотите.
Проект: Edris — Logo Designed by MiLo
Проект: Rendered - Responsive Demo Website for Adobe
Проект: b2mach
08. Инновационный скроллинг и параллакс (Innovative Scrolling and Parallax)
Это отличная визуальная идея, которая добавит уникальности любому сайту. От параллакса из нескольких слоев к видео параллаксу, все возможно с плагином D.ex Multilayer Parallax (многослойный параллакс). Этот продукт разработан полностью студией Milothemes под руководством Loredana Papp и Mihai Baldean. Он доступен для покупки на Envato Market / codecanyon.net
Это WordPress плагин, который позволяет делать прекрасные Parallax блоки с более чем одним слоем. Будьте креативными и объединяйте слои в любом стиле, котором захотите. Мы сделали 12 различных примеров в гайде плагина, чтобы упростить ваше первое знакомство с прекрасным миром параллакса. Поиграйте со слоями!
09. Цветовые переходы/градиенты (Color Transitions)
Градиенты — один из главных трендов прямо сейчас. Транд начал набирать популярность с 2016 и продолжает быстро расти, после того как большие бренды, например Инстаграм решили изменить свое лого и картинки из одного цвета в многоцветный переход (градиент). От логотипов до кнопок или наложений на изображения (picture overlays), этот тренд по всюду.
10. Просмотры с мобильных устройств, адаптивный дизайн (Mobile Browsing (Responsive Design))
2015 и 2016 года привели к значительному увеличению просмотров с мобильных устройств. Планшеты и смартфоны теперь более приоритетны для просмотра веб-сайтов, они превосходят настольные компьютеры и ноутбуки — и этот тренд продолжается. Любой веб-сайт, который не имеет адаптивного веб-дизайна необходимо обновить как можно скорее!
Проект: Responsive Website Animation
11. Графика и иллюстрации сделанные на заказ (Custom Graphics and Illustrations)
Стоковые фотографии все еще довольно популярны, но наметился новый тренд в 2016 и будет продолжать расти в 2017 году: использование выполненной на заказ графики и иллюстраций. Если вы хотите уникальный красивый сайт, что любой посетитель вас запомнил, сотрудничайте с digital дизайнерами. Таким образом, меньше стоковых фото и больше оригинальных, уникальных изображений.
12. Креативно используйте нейтральное пространство и сетку (Creative Use of Neutral Space and Grid)
Последние года веб-дизайн был более расположен к упорядоченным, организованным столбцам и сеткам, но в 2016 году мы могли наблюдать значительный сдвиг в сторону нерегулярных слоев и ультра-современный дизайн.
13. Рассказывайте истории (Storytelling)
Веб-сайты в настоящее время начинают рассказывать истории, чтобы расположить к себе клиента. Людям, как правило, больше запоминаются истории, нежели чтение простой (сухой) информации.
Подробнее видео про сторителлинг от Бизнес молодости:
14. Постепенная загрузка контента (Lazy Loading)
Lazy Loading задерживает загрузку изображений на длинных веб-страницах, это позволяет информации появляться в определенной точке во время прокрутки вниз, что уменьшает время загрузки страницы.
15. Разделенный контент (Split Content)
Сплит контент сейчас популярен в адаптивном вебдизайне, это разделение экрана на 2 или более части. Такой сплит-экран сайта покажет зрителю несколько одинаково важных сообщений в одном блоке сайта. Этот тренд появился в 2015, но в 2017 году она будет расти и дальше и, скорее всего, его вы увидите на многих сайтах.
16. Формы на всю ширину (Full-Screen Forms)
Нет необходимости переходить на другую страницу для заполнения формы, поскольку новые сайты используют формы, растянутые на всю ширину, которые подстраиваются под адаптивный дизайн.
17. Видео по всюду (Videos Everywhere)
Видео контента стало больше за последний год, и люди стали более требовательны к высокому качеству видео. Видеоролик на сайте может быть коротким и поставлен на автоповтор, показывая продукт или масштабный кинематографический проект, который будет держать зрителя, вовлеченным в историю.
Проект: Hillsong
18. СЕО — важно! (SEO is Important)
СЕО является очень важным для сайта, так что красивый сайт без хорошего SEO останется в аутсайдерах.
19. Скрытая навигация (Hidden Navigation)
Гамбургер-меню создает много споров за и против, о том, как трудно для пользователей найти меню, но одно можно сказать точно — эта тренд останется, и люди в конечном итоге привыкнут к такому меню.
20. Маленькие детали дизайна (Tiny Design Details)
Фокус на деталях очень важен в этом году. Мелкие детали такие как навигационные точки и т.д. Фокус на мелких деталях сделает работу законченной.
Проект: Barometa — Next-generation Job Platform
21. Тренды в дизайне логотипов (Logo Design Trends)
21.1. Минимализм (Minimalist)
Все крупные бренды переходят к более простому, минимальному дизайну, и эта тенденция останется.
21.2. Нарисованные от руки (Hand drawn)
Этот тренд в центре внимания в течение последних лет, такой стиль отлично подходит для «хипстерского» бизнеса. Его используют для парикмахерских (barbers), кафе, ресторанов, искусства и крафтовых вещей.
21.3. Negative space
Это старый тренд, но в последние несколько лет мы видим, как он набирает обороты, и будет расти в 2017 году, так что определенно стоит к нему присмотреться.
21.4. Cropping
Более минималистично, чем этот тренд не бывает. Показывает только то, чего достаточно указать в логотипе, чтобы узнать компанию, и больше ничего.
21.5. Геометрия (Geometric)
Этот тренд из разряда Old school, но это один из тех стилей, который точно никогда не умрет.
21.6. Художественные линии (Line art)
Этот тренд популярен среди бизнеса нового поколения
Авторы: Sam Healy
; Andrea Schlaffer ; Jacek Janiczak
21.7. Паттерны, узоры (Pattern)
Паттерны — новый тренд, и это повторение является необычным способом, чтобы сделать бизнес запоминающимся и выделить его среди конкурентов. Это оригинальное направление может также использоваться в презентации логотипов.
Авторы: Nick Edlin; Stanislav Aleynikov; Lucas Gil-Turner
21.8. Анимированные логотипы (Animated logos)
Motion дизайн сегодня востребованный тренд, и мы можем его наблюдать во всех областях дизайна.
Авторы: Javier Miranda Nieto; The Woork Co
21.9. Винтаж (Vintage)
Винтажный стиль все еще в игре. Даже если этот тренд популярен в течении продолжительного времени, ему все еще есть что сказать.
21.10. Цветовые переходы (Color Transitions)
Градиенты везде в этом году — и логотипы не исключение.
21.11. Иллюстрации в логотипах (Illustrations in logos)
Иллюстрации — хороший способ сделать уникальный и индивидуальный логотип для бизнеса. Они становятся все более популярными в этом году.
Авторы: Bodea Daniel; Jacek Janiczak
21.12. Фотография в логотипах (Photography in logos)
Сочетание картинки с типографикой сейчас очень популярно. Они очень хорошо работают вместе, и это создает контраст между ними.
22. Тренды в типографике (Typography Trends)
22.1. Большая, яркая и красивая типографика (Big, bold & beautiful typography)
Типографика, может быть, наиболее важный элемент в создании потрясающего дизайна. В этом году типографика будет смелой (жирным начертанием) и большой с выраженными заголовками.
Авторы: Alexander Laguta
Авторы: Quim Marin
Проект: Baugasm Series — Pack 4
22.2. Градиенты/цветовые переходы в типографике (Color transitions in typography)
Градиенты, без сомнений, это тренд сегодня, и вы найдете его также в типографике.
22.3. Визуальная иерархия (Visual hierarchy)
Иерархия в типографике важна в любом направлении дизайна. С помощью размера и ширины шрифта может легко обозначить, какие слова или заголовки являются приоритетными, так что используйте этот фактор при создании своих текстов. Вы также должны помнить, что вы можете достичь понятной визуальной иерархии с помощью расположения и цвета текста.
22.4. Tiny Typography (Мелкая типографика)
Очень маленький текст обычно окружен противоположным по цвету пространством, но вы можете создать визуальную разницу между цветом или картинкой, чтобы выделить текст. Вы можете также использовать анимацию, чтобы помочь тексту выделиться.
Авторы: Slava Oleinik; Bahaa Samir; Witty Digital
Проект: Baugasm Series — Pack 4
22.5. Анимация в типографике (Animated Typography)
Анимация сейчас используется везде, и типографика не исключение. Если вы используете моушн программы, то не прогадаете в этом году.
Проект: Gotham Pro Animated Typeface Free
22.6. Типографика с фотографией (Typography meets photography)
Сочетание между текстом и фотографией может дать отличный результат. Посмотрите на эти прекрасные примеры.
22.7. Геометрические формы и типографика (Geometric shapes and typography)
Геометрические формы могут хорошо сочетаться с типографикой, чтобы получить красивый вариант.
22.8. Шрифтовые сочетания (Font pairing)
Используйте два или более шрифта вместе. Это еще в тренде в 2017.
———————————
Веб-дизайн как цифровая среда гораздо более подвержен изменениям в технологиях, чем его традиционные печатные предшественники. Что удивительно, так это то, как дизайнеры продолжают справляться с увеличивающимся числом технически сложных задач и по-прежнему создают удобные для пользователя, понятные и инновационные, совместимые с корпоративным стилем, адаптируемые к каждому мыслимому и немыслимому устройству и просто красивые сайты.
2017 год ознаменовался большим количеством достижений, включая более широкое использование мобильных устройств, наконец обогнавших стационарные компьютеры по объему загрузки и просмотра контента. Это означает, что в 2018-м мы будем эксплуатировать мобильный функционал как никогда ранее, а десктопным устройствам придется эволюционировать, чтобы оставаться актуальными. Имея все это в виду, взглянем на заметные тенденции в области веб-дизайна, которые обещают стать повсеместными.
Использование теней не ново, почему же мы его упомянули? Несмотря на то что данный прием уже давно является традиционным в дизайне, сегодня, благодаря прогрессу браузеров, мы видим ранее не существовавшие интересные вариации. Сетки (Grids) и параллакс-раскладки (Parallax Layouts) позволяют «играть» с тенями в еще более широком спектре, создавая иллюзию мира, существующего за экраном. Это непосредственная реакция на (Flat Design) — тренд, популярный последние несколько лет.
Тени создают на удивление универсальный эффект, не только поднимающий эстетику страницы на более высокий уровень, но также содействующий плавности пользовательского опыта (User Experience, UX) — благодаря расставленным акцентам. Например, использование мягких, деликатных теней в выделенном состоянии (Hover State) для обозначения ссылки — это не новая идея, но их сочетание с яркими цветовыми градиентами (подробнее об этом ниже), как в вышеприведенных примерах, усиливает трехмерный эффект теней.
2018-й — это, безусловно, год суперярких цветов. В то время как в прошлом многие бренды и дизайнеры придерживались «веб-безопасных» цветов, сегодня многие из них становятся смелее в своем подходе и окрашивают заголовки в сверхнасыщенные яркие оттенки, а также сочетают с оформлением надписей в виде косых линий и углов (вместо простых горизонтальных форм). Частично это связано с технологически более продвинутыми мониторами и экранами устройств, способными воспроизводить более насыщенные краски. Яркие и даже конфликтующие цвета могут быть полезны для новых брендов, надеющихся мгновенно привлечь внимание посетителей, но также идеально подходят для компаний, желающих отделить себя от всего «веб-безопасного» и традиционного.
Иллюстрации — это чудесный универсальный метод создания игривых, веселых и дружелюбных картинок, добавляющих сайту элемент забавности. Опытные художники придумывают иллюстрации, полные личностного подтекста и учитывающие специфику посыла бренда, а это именно то, к чему стремятся все на современных высококонкурентных рынках.
Данный тренд идеален для бизнеса, ассоциирующегося с весельем и энергичностью, но он также помогает «серьезным» компаниям стать ближе к клиентам.
Если вы хотите попробовать создать лендинг в таком стиле, но у вас пока нет сильного дизайнера, вы можете воспользоваться готовыми шаблонами или секциями в :
Также вы всегда можете заказать индивидуальный лендинг у наших дизайнеров. Посмотреть примеры готовых работ .
Фоны с движущимися частями (Particle Backgrounds) служат прекрасным решением для сайтов, столкнувшихся с проблемой медленной загрузки из-за инкорпорированного видео. Анимация же, о которой идет речь, представляет собой легкий, быстро загружающийся javascript, создающий естественное движение на бэкграунде.
Говорят, изображение красноречивее тысячи слов, и, без сомнения, это так и есть. К тому же фоны с движущимися частями притягивают взгляд, позволяя брендам за считанные секунды оставлять о себе запоминающееся впечатление. Двигающаяся графика становится все более популярной в социальных сетях, поскольку она приводит заинтересовавшиеся лиды на целевые страницы.
5. Mobile first
Как уже упоминалось, мобильный мир начинает доминировать над десктопным. Почти каждый из нас заходит в магазины и делает заказы на своем смартфоне. Когда-то это был громоздкий процесс, который пользователи не спешили так быстро принять. Дизайнеры были озабочены вопросом: как обеспечить наличие нормального меню, подменю и подподменю на маленьком экране?
Но теперь мобильный дизайн стал более зрелым. Появился разворачивающийся , и стало возможным сделать меню маленьким. Возможно, вам пришлось отказаться от больших красивых фотографий в мобильной версии, но зато иконки стали намного более экономичны с точки зрения пространства, плюс они сейчас настолько распространены, что пользователи понимают значение почти каждой из них. UX-проблемы стало легче выявлять и исправлять с помощью микровзаимодействий, и вы получаете немедленную обратную связь относительно поведения ваших пользователей.
6. Крупные жирные шрифты
Мы добавили все шрифты из коллекции Google Fonts в наглядную галерею, и все, что нужно сделать — это выбрать подходящий шрифт, нажать на кнопку подключения и использовать его для новых или уже размещенных на лендинге текстов.
Одним из самых заметных нововведений 2017 года стало появление асимметричных и нетрадиционных «фрагментарных» раскладок (Layouts), и данный тренд останется актуальным и в 2018. Привлекательность асимметричных лейаутов состоит в их уникальности, специфичности и в чем-то экспериментальности.
Несмотря на то что корпорации, производящие большое количество контента, по-прежнему склоняются к традиционным структурам в виде сетки, можно ожидать, что необычные раскладки будут теперь использоваться чаще, поскольку компании все больше стремятся к обеспечению уникального опыта, выделяющего их в остальной среде. Традиционные компании в целом не будут интересоваться данной эстетикой, но крупные бренды, готовые пойти на риск, будут ожидать от своих дизайнеров нестандартного мышления.
8. Интегрированная анимация
По мере развития браузерных технологий все большее количество сайтов уходит от статических изображений и находит новые пути вовлечения пользователей, такие как анимация. В отличие от анимации отдельных частей фона, упомянутой ранее, меньшие по размеру анимационные фрагменты вовлекают зрителей посредством всего опыта страницы. Например, можно анимировать графику, доступную во время загрузки страницы, или интересно оформить выделенное состояние ссылки. Анимированные элементы также можно внедрить в скроллинг, навигацию или даже сделать их фокусной точкой всего сайта.
Анимация представляет собой замечательный инструмент включения пользователя в историю сайта, позволяющий им увидеть самих себя (и свое потенциальное будущее в качестве клиентов) в изображенных персонажах. Даже если анимация интересует вас исключительно в качестве абстрактного развлекательного визуального средства, она способна будет сделать из этого значимое для ваших посетителей взаимодействие.
Теперь градиенты становятся большими, навязчивыми и яркими. Наиболее популярной из последних реинкарнаций стал градиентный фильтр для фотографий — прекрасный способ сделать скучное изображение более интригующим. Простой градиентный фон также может стать идеальным решением в духе тренда, если у вас отсутствуют другие картинки.
Тренды-2018
Яркие цвета, смелые градиенты и анимация… Следующий год обещает стать одним из самых любопытных и запоминающихся в истории веб-дизайна. Не терпится посмотреть, как дизайнеры будут все это претворять в жизнь и как они раздвинут границы. Ведь оставаться открытым трендам — то необходимое, что вы должны делать, если хотите обеспечить своих пользователей превосходным UX.
Каждый дизайнер заинтересован в том, чтобы оставаться в курсе последних разработок в этой области, также необходимо знать о текущих направлениях или тенденциях на рынке. Фактически, веб-дизайн настолько динамичен, то что считалось свежим и современным сегодня, может показаться полностью устаревшим завтра.
И именно поэтому очень важно быть в тренде и всегда следить за всеми изменениями. Каждый дизайн должен понимать что это беспрерывный процесс познания и обучения. Давайте разберемся какая тенденции и тренд будут востребованы для веб дизайна в 2018 году а некоторые даже в 2019 году .
Узоры, линии и круги, геометрические формы
Именно эта тенденция появилась в 2016 году, набрала популярность в 2017 и продолжит развиваться в 2018 году. Используя смешанные формы и узоры на странице можно добиться замечательных результатов. В первую очередь в дизайне ценится композиция, целостная картинка макета. Flat дизайн и material дизайн очень хорошо сочетается с декоративными элементами и простыми формами. 2D дизайн продолжает жить, однако в нём произошли некоторые изменения.
Яркие цвета
Добавляем яркие цвета и мы смело заявляем о себе! Material дизайн и flat дизайн отлично сочетаются с сочными красками. Цветовые переходы - один из трендов современного дизайна. Компания Instagram первая решила изменить фирменные изображения и логотипы. Они поменяли flat цвета на разноцветные градиенты и переходы. Логотипы, кнопки, все элементы получили новый стиль. Это тренд 2017 года и мы видим что он сохранится в 2018. Здесь главное правильно сочетать цвета и не выглядеть кричащим. 
Уникальные иллюстрации и графика
Графическому дизайну становится тесно в рамках привычного веб дизайна. Он имеет большой потенциал и в целом еще не полностью раскрыт. Думаю в тренде 2018 года мы увидим рост популярности графической иллюстрации . Предлагаю ознакомится с некоторыми направлениями которые пользуются повышенным интересом среди дизайнеров.
Sketch art.
Крафтовая тематика захватила бизнес, а иллюстрации «от руки» завоевали полиграфию. Этот тренд продолжает развиваться в веб-дизайне. 
Фотоконтент
Останется актуальным в 2018 подход к фотоконтенту на сайтах e-commerce, уход от одинаковых изображений в магазинах в сторону уникальных авторских фотографий. Что любопытно, все предпосылки налицо: больше 60% пользователей считают, решающим фактором покупки выступают фотографии, поэтому магазины уделяют им максимум внимания. 
Анимация
Анимированные объекты сейчас повсюду: логотипы, иконки на сайтах и в приложениях, переходы между состояниями объектов в material design. Иногда даже в почтовых рассылках может пробраться интерактив: обрастают фоновым видео, встроенным процессом оформления заказа, и полноценными меню. Видео и GIF превосходного качества, работающие на непрерывном цикле, предлагающие гладкое визуальное удовольствие для наших глаз, рассматриваются как популярный способ добавления драмы и движения к страницам. Он успешно сохраняет внимание посетителя надолго. 
Расширения
Старые и всем известные PNG, JPG, и даже GIF форматы это вещи из прошлого. Их крайне давно изобрели, и в современном мире им нет места. Сейчас больше внимания уделяется качеству изображений и их доступности. SVG станет форматом #1 по популярности. Он легко масштабируемый и к тому, же без потери качества. В добавок, размер исходных изображйний SVG формата очень приемлемый. Это будет наилучшим форматом для мелких графических элементов. Касательно программного обеспечения, Sketch потеснит Photoshop.
Он уже сейчас делает разработку проще и быстрее. Его функциональность в разы превосходит Photoshop, и мы верим что в 2018 году разница станет очень существенной. Как результат, компания Adobe потеряет часть своих преданных пользователей в лице веб и UI дизайнеров. Попробуйте наш калькулятор стоимости чтобы узнать сколько стоит разработать уникальный и продающий дизайн.
Профессиональные Социальные Сети
Хорошо, мы теперь знаем в каком направлении будут развиваться тренды веб дизайна, но что же касательно социальных сетей? Должны ли мы осмыслить их и уделять больше внимания? Если кратко - определенно да. Наиболее популярные среди дизайнеров Behance и Dribbble станет еще авторитетнее.
Ваши работы существенно увеличат узнаваемость бренды на просторах этих дизайнерских социальных сетей. В 2018 году дизайн продолжит следовать современных трендах 2017, но все же он обогатиться новыми цветами, и идеями. Стоит отметить, что дизайн является одной из самых важных фаз веб разработки, которая занимает до 30% всего времени.
Посвященная трендам веб-дизайна и диджитала в 2018 году. Ольга является членом жюри Awwwards и каждый день просматривает сотни новых сайтов, разработанных агентствами и дизайнерами со всего мира. Это позволяет ей отслеживать новинки и тенденции веб-разработки и дизайна.
В статье описаны главные месседжи лекции, а с полной версией вы можете ознакомиться по ссылке .
Интерактивный скролл
Курсор у нас обозначается стрелкой. Она либо превращается в палец для кликания, могут появляться ховеры. Сейчас курсором может быть элемент. Под ним высвечивается переход на страницу. Под ним могут меняться элементы или вступать во взаимодействие с курсором.
Cайт Volcan - любимый пример. Ромб-курсор становится подсказкой, что тебя ожидает при нажатии. Присутствует элемент интерактива. В итоге ховер не нужен, его роль выполняет курсор.
Пример интерактивного скролла на сайте Volcano
Новая тема для баттлов UI/UX дизайнеров - насколько это удобно? Но если все грамотно продумать, может хорошо получится.
SVG маски
С их помощью можно сделать космические переходы. В разработке несложные, зато развязывают руки дизайнерами. На сайте Rich Brown используется крест в качестве перехода. Но это может быть любая форма.
Кто пользуется фотошопом, то там это можно сделать, просто вырезав маской дырку в слое. Либо наложением 6 квадратов. Мы для нашего клиента с помощью этой штуки сделали переход с экрана на экран. Открытие картинки из формы – тоже SVG маска. Но если посмотреть на макет, то он выглядит, как статическая картинка.
Canvas
Это уже сложно. Обязательно нужен человек с пониманием математических аспектов процесса. Некоторые вещи можно взять в библиотеках. Но В SVG нет синхронизации с курсором. А здесь есть.
Сайт Climachill от Adidas, к примеру.
Морфинг с буквой – это Canvas. Перелив градиентов - это Canvas. И это популярно уже несколько лет, но устареет не скоро. Потому что мало весит, и это 2D графика, которую сложно повторить. Подойдет тем, кто хочет много «вау» у себя на сайте.
3D+WEBGL
Направление будет развиваться. Когда вы делаете даже маленький, но качественный видеоролик на 1 минуту - это минимум 10 человек в команде. Когда в 3D - это 1 дизайнер. А webgl – это +1 разработчик. 3D может быть классическим, как на сайте Globekit. Выглядит фантастически, уникально. Хотя состоит из 6 слайдов всего.
Но снова же: надо быть аккуратным с применением. Одного такого эффекта вполне хватит, чтобы сделать сайт ярким, но не кричащим.
VR
В марте 2017 появился первый сайт в VR. Их становится больше. Недавно сделали первую VR трассу на футбольном стадионе. Человек надевает маску, и ему кажется, что он на гоночной трассе.
Приспособление для виртуальных гонок от Audi.
Мы спорили еще недавно, приживется ли VR. Да, у него есть будущее, потому что его стало проще делать. Мы будем делать в VR портфолио, чтобы можно было перелистывать его поворотом головы, а при фиксации взгляда переходить на работу.
AR
Круто, что сейчас можно обойтись без приложения. Вы заходите в браузере по ссылке, и у вас должен быть маркер, который будет считывать некоторые вещи. Вы показываете этот маркер и он дорисовывает то, что вы захотите. То есть сначала в 3D делаете дизайн, показываете ему и он дорисовывает уже дополненную реальность. Можно кастомизировать под себя.
PWA – это функционал браузера, который похож на приложение. Он добавляется, как иконка, и выглядит, как приложение. На самом деле он открывается в браузере и позволяет отправлять пользователю нотификейшны, записывать его через форму, получать контент оффлайн.
A frame
Это готовая библиотека, где можно найти все штуки для AR и VR. Можно посмотреть, как они работают, понаблюдать за ними в действии.
Поэтому я советую всем веб-дизайнерам идти доучиваться на 3D. Это сделает ваш сайт намного живее.
Следите за ними. Они не стоят на месте. Есть такая штука, как Google experiments . Освободите пару часов времени, чтобы изучить всю красоту. Google проводит много экспериментов, к которым подключает разработчиков, агентства. Из последнего – использование big data.
А недавно Awwwards стали сотрудничать с Google. Это значит, что сейчас пойдет акцент на мобильные сайты. Начнется оптимизация технологий, чтобы сделать их легче. Google начинает все больше проявлять интерес к мобильному вебу.
WebVj
Очень новая заморочка. Построение страницы происходит на основе данных. Есть один японец, Масатацу Накамура , который особо серьезно этим занимается. Его графика сделана полностью программистом, а не дизайнерами. Он многое делает для Google Experiments.
Пример графики Масатацу Накамура, сделанной при помощи WebVJ
Трендосики
Самый задаваемый вопрос - “Какой цвет/шрифт/паттерн будет трендовым в следующем году?”. Я это называю “трендосиками”.
Сейчас невозможно определить один трендовый набор шрифтов или цветовую гамму. Вроде как пастельные цвета начинают набирать тренд. Но потом смотришь на эти яркие взрывные сайты, и понимаешь, что нет.
Я бы советовала обыгрывать подачу компонента с помощью паттернов в любом случае. Так контент будет выглядеть дороже и интересней. Обычный полупрозрачный и легкий паттерн уже придаст статус вашему сайту. Косые линии, ломанные элементы - это не так сложно и не требует подключения разработчика.