Современные тренды веб дизайна. Тренды, которые изменят мир. Бесцветные - призрачные кнопки
Каждый год мы узнаем что-то новое о дизайне и 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)
Винтажный стиль все еще в игре. Даже если этот тренд популярен в течении продолжительного времени, ему все еще есть что сказать.
Авторы: Роман Додонов; Mingo Ideas Up; Will Try Further
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. Попробуем и мы. Опираться будем не только на вкус и то, что «арт-директор так сказал», но и на анализ.
1. Видео - функциональный элемент
Тексты - слишком сложно, концентрироваться нужно. Картинки - неинформативно. А видео - тип контента, который современный пользователь интернета готов потреблять и причмокивать. И когда вы рассказываете пользователю историю - например, как строится сложный процесс разработки сайта - используйте его. Снимите и покажите, как аналитик делает прототипы, а дизайнер рисует макеты. Погрузите пользователя в историю и отвечайте на вопросы, которые могут у него появиться.
И перестаньте пихать видео везде, где заказчик просит что-нибудь духозахватывающее в рамках бюджета. Видео для красоты - разбитая надежда пользователя. Он смотрит и надеется, что ему покажут что-то полезное, расскажут историю. Но нет. Поэтому как декоративный элемент веб-дизайна, не выполняющий полезной функции, видео остается в 2016.
Да: Видео, которое отвечает на вопросы пользователей и решает задачи сайта.
Нет: Видео на фоне, потому что красиво и вообще все так делают.
2. Синемаграммы вместо видео
Используйте синемаграммы. Они интереснее статических изображений, но не вселяют ложные надежды пользователям, как видео без сюжета и цели.
Осторожно! Синемаграммы страшно залипательны.
3. Шрифтовая графика
Еще одна альтернатива видео и изображениям - шрифтовая графика. Она одновременно украшает сайт и делает его информативнее. Тут главная забота - качественный контент. Но это уже совсем другая история .
4. Иконки - главный декоративный элемент
Зачем вам изображения, видео и шрифтовые извороты, если можно в иконки, которые и так будут на сайте, досыпать «вау»? Серьезно, добавьте нестандартную анимацию и заканчивайте на этом. Будете самыми трендовыми.
5. Залипательная инфографика
Проблема пользователей в том, что они становятся менее усидчивыми. И забывчивыми, как золотые рыбки - зашли на сайт, тут мигнул телефон (ой, ложная тревога - всего лишь солнечный блик), вернулись к монитору и не могут вспомнить, что здесь делали. И уходят.
С каждым годом проблема усугубляется. Поэтому задача дизайнера - зацепить пользователя и заставить его взаимодействовать с контентом, даже если это занудная статистика. Особенно (!) если это занудная статистика.
Анимируйте её, красьте в яркие цвета, заставляйте пользователя взаимодействовать с ней - делайте все, чтобы затянуть юзера и не отпускать до конца страницы.
6. Комбинированная навигация
Набирающий популярность приём - совмещение горизонтального и вертикального скрола - тоже разбавит серые будни пользователя, заинтересует и заставит вдумчиво взаимодействовать с сайтом.
7. Отказ от гамбургер-меню
В 99,9% прогнозов веб-дизайна на 2015 и 2016 авторы обещают, что в этом году дизайнеры ну уж точно откажутся от гамбургер-меню. Прям совсем. Что ж, поддержим традицию и тоже скажем: в 2017 гамбургер-меню будет не в тренде, не делайте так, фу!
Проблема иконки с тремя полосками в том, что она не понятна интуитивно. Её признают тёртые калачи, которые уже взаимодействовали с ней и знают, что скрывается за символом. Но в интернете появляется больше новичков: как совсем мелкие головастики, так и люди старшего поколения. И им иконка гамбургер-меню не знакома и не понятна. Выяснить, что она скрывает и где, блин, меню, они могут только пережив болезненный опыт.
Будем реалистами: совсем отказаться от гамбургер-меню вряд ли получится. Но перед тем, как воткнуть его, на каждом проекте ищите возможную альтернативу.
studio-spoon.co.jp
8. Рамка вокруг сайта
Популярное решение - не растягивать сайт на весь экран, а поместить в аккуратную рамку. Симпатично и появляется свободное пространство, которое можно заточить под навигацию (почему бы нет, раз уж гамбургер-меню отмирает).
teletype.online
9. Больше эмодзи
Чем меньше сил пользователь тратит, чтобы среагировать, тем охотнее он будет это делать. И реакции проще, чем эмодзи, не придумали. Пока на сайтах можно только лайкнуть контент, максимум - поставить Эмоцию Фэйсбука . Но пришло время переходить на эмодзи, товарищи дизайнеры.
10. Материал дизайн
Да, он все еще с нами.
11. Больше Mobile First
Пользователей, которые просматривают сайты с мобилок, становится больше - поэтому и подход Mobile First с каждым годом проще воспринимается клиентами. Его считают уже не странным экспериментом, а оправдывающим себя методом. Так что готовьтесь к лавине однотипных, но таких удобных на мобилках сайтов.
12. Больше микровзаимодействий
Сайты впитают в себя больше фишек из мобильных приложений. В 2017 появится шикарные, вставляющие до дрожи в пальцах микровзаимодействия. Как сердечко в Твитере - ну произведение искусства жеж! Хочется жать на него вечно. Такого и в Mobile First, и классических проектах прибавится.
13. CTA ещё навязчивее
Красоту ради красоты дизайнер мутит только в стол и в Dribbble. В остальных случаях (в тех, за которые деньги платят) ему в ухо тяжело дышат маркетологи, которым нужно вот здесь поярче и вон там кнопочку побольше. Похоже, в 2016 случился перелом и переосмысление этих требований - ждите в 2017 больших, сочных, бьющих по глазам CTA-блоков. Таких, чтобы маркетологам нечего было к ним добавить.
strv.com
14. Ностальгия по 80-м
В рафинированном интернете дизайнеры скучают по ламповым пикселям со спичечную головку, восьмибитному звуку приставок и помех как на ламповых телевизорах. И компенсируют свою тоску по 80-м и 90-м в дизайне сайтов. Будьте в тренде - добавляйте в проекты кислотные цвета, помехи и глитчи.
retrominder.tv
15. Отказ от стоковых фотографий
Стоковые изображения уже оскомину набили, серьезно. Хуже гамбургер-меню, а заменить их проще. Поэтому давайте снимать своё.
21 век на дворе, камон. Телефоны пошли такие, что делают качественные фото. Поэтому не проблема снять сотрудников или процесс работы прямо вот сейчас на ваш телефон. Главное, время и желание сделать хороший проект.
16. Зелень
Ребята из Pantone считают, что цвет 2017 года - вот этот зелененький Greenery. Прислушаемся и добавим к нам в список.
17. Новый подход к прототипированию
Какой бы чудесный дизайн вы ни нарисовали, главное - презентовать его так, чтобы клиент влюбился. Или хотя бы увидел его как видите вы.
Статичный макет с этой задачей еле справляется, поэтому в 2017 нужно прокачаться в искусстве презентации. Чтобы сразу, до верстки, заказчик увидел все придуманные пиу-пиу, а не воображал их в уме. А то ведь намечтает себе что-то не то, создаст ожидания, которые разработчики не смогут оправдать.
Теперь дизайнеру не комильфо просто нарисовать и показать картинку. Нужно уметь обращаться либо с одним из инструментов для прототипирования для создания интерактивного шаблона, либо прокачаться по части анимации.
Вот ваш арсенал на ближайший год, коллеги. Но не грызитесь с заказчиком, который хочет видеофон. Не пихайте пиксельные элементы и эмодзи туда, где нужен чистенький минималистичный e-commerce. И не бомбардируйте сопротивляющихся клиентов в скайпе ссылками на эту статью. Используйте тренды с умом - или не используйте вообще. Все равно через три года они полностью обновятся 🙂
Посвященная трендам веб-дизайна и диджитала в 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
Трендосики
Самый задаваемый вопрос - “Какой цвет/шрифт/паттерн будет трендовым в следующем году?”. Я это называю “трендосиками”.
Сейчас невозможно определить один трендовый набор шрифтов или цветовую гамму. Вроде как пастельные цвета начинают набирать тренд. Но потом смотришь на эти яркие взрывные сайты, и понимаешь, что нет.
Я бы советовала обыгрывать подачу компонента с помощью паттернов в любом случае. Так контент будет выглядеть дороже и интересней. Обычный полупрозрачный и легкий паттерн уже придаст статус вашему сайту. Косые линии, ломанные элементы - это не так сложно и не требует подключения разработчика.
В 2016 году многие компании провели редизайн своих сайтов, сократив количество опций навигации. В 2017 году этот тренд продлится.
Меню в хедере страницы, которые раньше включали 5-7 опций, теперь будут предлагать 3-4 варианта.
Меньшее количество вариантов облегчает пользователю поиск нужной информации и позволяет избежать ситуации «паралича выбора».
Хорошим примером нового подхода является Ikea. На скриншотах ниже вы можете сравнить старую и новую версии сайта компании.
Старая версия:
Новая версия, запущенная в 2016 году:
- Отказ от гамбургер-меню
Гамбургер-меню не даёт пользователю представления о глубине сайта или приложения. В итоге он остаётся дезориентированным.
Spotify уже отказался от гамбургер-меню в своём приложении. В 2017 году его примеру последует ещё больше компаний.
- Дуотоны
Использование дуотонов делает оформление сайта минималистичным и позволяет удержать внимание пользователя на основном сообщении или навигации.
В 2017 году ожидается более активное использование дуотонов вместо полноцветных фонов.
- Тактильный дизайн
Недостатком параллакс-прокрутки является замедление скорости загрузки страницы.
В 2016 году анимация рассматривалась как перспективный тренд. Однако в этом году в центре внимания разработчиков находится производительность. С этой точки зрения параллакс-скроллинг – не самое оптимальное решение.
- Осмысленное действие
Одним из основных принципов материального дизайна является «осмысленное действие». В Google считают, что «действие должно быть осмысленным и целесообразным, служить для привлечения внимания и поддержания непрерывности» .
Приложение Tumblr – хороший пример реализации этого принципа. В 2016 году оно выиграло премию Material Design за анимацию.
- Отказ от низкокачественных стоковых изображений
Сайты компаний должны приглашать пользователей к взаимодействию и отражать ценности бизнеса. На них больше нет места некачественным и скучным стоковым изображениям. Таким, как это:
- Меньше приложений, больше PWA
Технология PWA (Progressive Web Apps) позволяет сайту работать по принципу приложения. В том числе офлайн. Её уже используют такие крупные издания и компании, как The Washington Post, Airberlin и Flipkart. В этом году популярность технологии будет расти.
- Шрифты Google
Google создал библиотеку шрифтов с открытым исходным кодом в 2010 году. В 2016, продолжая работать над материальным дизайном, компания также улучшила свой сервис Google Fonts . В результате предпросмотр шрифтов стал более быстрым, а их настройка – проще. В разделе Featured собраны те шрифты, которые хорошо сочетаются с материальным дизайном.
В 2017 году ещё больше веб-дизайнеров будут работать со шрифтами Google.
- Минимализм
Этот тренд объединяет в себе многие другие тенденции, упомянутые выше. Минимализм означает акцент на производительности (скорость) и юзабилити. В рамках этого подхода важную роль играют типографика, контраст и пространство.
Изначально планировалось разместить перевод англоязычной статьи о трендах веб-дизайна в 2017 году, но после изучения разных источников, решили немного изменить концепцию данной заметки. Все дело в том, что за последний месяц в интернете было опубликовано достаточно много тематических материалов про современные , и мнения, как говорится, разошлись. С одной стороны, это логично, т.к. у разных авторов имеются свои какие-то предположения о том, что же будет актуально для сайтов в текущем году. С другой — эти прогнозы весьма субъективны.
В общем, мы собрали все варианты и составили что-то вроде дайджеста веб-дизайн трендов 2017. Начнем с наиболее популярных тенденций, которые отмечают многие специалисты, и постепенно перейдем к более «уникальным» идеям. Кстати, если у вас есть дополнения и мысли по теме, можете смело делиться ими в комментариях. Плюс рекомендуем почитать о — также полезный пост.
1. Нестандартный «абстрактный» дизайн
Сетка для сайтов считается неким устоявшимся базовым понятием, помогающим грамотно организовать пространство веб-страницы. Особо креативных дизайнеров она при этом загоняла в определенные рамки. Однако всегда находились смельчаки, создающие оригинальные решения, неподконтрольные каким-либо жестким границам. Подобные работы, как правило, встречаются в имиджевых и творческих тематиках, но в 2017 этот тренд дизайна сайтов распространится и на строгие корпоративные проекты.
Нестандартное расположение элементов дает больше интересных возможностей: позволяет использовать все пространство страницы, добавлять в макет наслоение объектов и ощущение глубины. Вы сможете реализовать дизайн, впечатляющий пользователей даже без красочного полноэкранного видео или анимации. Учитывая сотни тысяч классических макетов в сети, абстрактные уникальные решения практически всегда будут выделяться и привлекать внимание посетителей сайта (по типу WOW фактора). И этим нужно пользоваться!
2. Новые варианты навигации
Нестандартному проекту — продвинутое меню. Сегодня вам не обязательно размещать горизонтальную в шапке. За счет возрастающей популярности адаптивных макетов многие пользователи уже привыкли к иконке Hamburger меню (состоит из трех горизонтальных полосок), которая все чаще появляется и на обычных версиях сайтов. Грань между мобильным и десктопным дизайном постепенно стирается. В текущем году мы будем наблюдать множество экспериментов с размещением и формой меню — это может стать одной из главных тенденцией веб-дизайна 2017.
Подобные решения позволяют использовать пространство страницы по другому. Кроме интуитивной прокрутки вниз и в сторону, а также закрепленного вертикального блока навигации будут популярны разные скрытые выезжающие элементы. С их помощью вы сможете разместить все нужные пункты подменю на одном экране. В каком-то смысле это делает навигацию по сайту более детальной и полезной для пользователей. Важно только чтобы они сумели разобраться с вашим нестандартным решением. Обязательно потестируйте его эффективность на практике.
3. Карточки в дизайне
Карточки — далеко не новый тренд в дизайне сайтов, однако в 2017 он продолжит быть актуальным. Данное решение эффективно представляет информацию на разных платформах: начиная с мобильных приложений и заканчивая просмотром на больших ТВ экранах. Подобный формат организации данных позволят максимально удобно для пользователей сфокусировать всю информацию по объектам.
Этот подход используют многие популярные проекты в сети: Facebook, Pinterest, Netflix. Последний вариант — вообще отличный пример успешной реализации карточек в дизайне, который сочетает в себе минимализм, возможности навигации и эффективность.
4. Сплит макеты с разделением экрана на 2 части
В текущем году мы увидим больше макетов с раздвоенным отображением информации на экране. Особенно активно данная тенденция веб-дизайна в 2017 будет проявляться на домашних станицах и . Визуально реализация отлично смотрится в минималистичных дизайнах с контрастным фонами или изображениями.
Дизайнер сможет использовать различные визуальные техники оформления в соседних блоках в рамках одного веб-проекта. А результат при этом будет выглядеть естественно. Кстати, сплит макеты хорошо срабатывают для Call to Action в лендингах. Детальнее о методе .
5. Большая и оригинальная типографика
Помнится, в далеком 2009 году мы публиковали , где применение огромных шрифтов было одним из перспективных трендов дизайна сайта. В 2017 вероятно произойдет то же самое (по крайней мере большинство дизайнеров об этом упоминают). Основная причина — конечно, привлечение внимания: кому-то нужно выделить определенные объекты на странице, кто-то хочет пояснить как правильно пользоваться навигацией и т.п. Как бы там ни было, типографика становится толще и больше. При реализации вам могут пригодиться посты блога про и .
Вместе с тем многие сайты избавляются от стандартных системных шрифтов, что позволяет значительно разнообразить их внешний вид. С ростом количества сервисов бесплатных оригинальных веб-шрифтов (Google Fonts, Typekit), их популярность еще больше возрастет. Похоже, что в 2017 нас также ждут эксперименты в области типографии сайтов. Главное в этом деле не перестараться — помните, что текст должен быть хорошо читаем. Кстати, если вы работаете с вордпресс то вам может пригодиться статья Как подключить шрифт в WordPress (в том числе и Google Fonts).
6. Градиенты и яркие цвета
Еще одна тенденция веб-дизайна 2017 — использование ярких цветовых палитр для градиентов (и не только). Старт эры плоского дизайна привнес в онлайн интересные фишки, но работать в этом стиле нужно весьма аккуратно, т.к. он может способствовать обезличиванию сайта. Дабы решить проблему некоторые специалисты начали экспериментировать с яркими цветами и градиентными решениями. В текущем году тенденция продолжит развиваться, причем не только в Web`е (наверняка, все уже заметили недавнее обновление Instagram).
Данный тренд можно использовать не только для фона. Один из популярных приемов — создание перехода между двумя цветами и наложение их на картинку. Это позволяет сделать фото более интересным, да и вообще эффект выглядит необычно. Яркие цвета добавляют в дизайн глубину, динамизм и приятную энергетику. Они могут хорошо выделить страницу и элементы на ней.
7. Анимация и микро-взаимодействия
Сама по себе анимация на сайте не нова, однако дизайнеры с каждым годом учатся реализовывать ее все красивее и эффективнее. Незначительные визуальные эффекты для изображений / объектов / контента могут не только оживить ваш проект, но и добавят дополнительный инструмент обратной связи с пользователем. В современных UI/UX интерфейсах разные микро-взаимодействия превращают рутинные процессы в более веселые способы получения информации + позволяют юзеру видеть и понимать как работает тот или иной элемент страницы (меню, навигация, кнопки).
8. Параллакс эффект
Еще один знакомый нам ранее тренд веб-дизайна сайтов в 2017 должен открыться с новой стороны. Сам по себе Parallax реализуется за счет разной скорости движения фона и переднего плана при прокрутке, что создает впечатление глубины и динамичности картинки. В текущем году нас ожидают куда более сложные работы с использованием нескольких слоев, разных направлений движения и применением эффектов. Работайте с этим приемом аккуратно дабы не отвлекать пользователей от содержимого веб-страницы. Ниже найдете картинки с линками на сайты-источники.
9. Почти виртуальная реальность
VR — одна из наиболее актуальных нынче тем, не смотря на то, что реальная ситуация в данной сфере менее оптимистична многих прогнозов. Разумеется эта фишка не могла не повлиять на дизайнеров. В некоторых макетах можно встретить разные приемы, которые бы создавали для пользователя «эффект присутствия»: 360 градусные видео и панорамы, видеовставки «как в кино», игры и т.п.
10. Тактильный, естественный дизайн
Данный тренд объединяет сразу два направления — натуральная цветовая гамма и тактильный дизайн. Чрезмерная увлеченность плоскими Flat решениями превратила многие веб-проекты в однообразные безликие Bootstrap макеты. Сейчас некоторые дизайнеры пытаются отходить в сторону более естественных решений, например, они размещают фото и реалистичные 3D модели дабы у пользователя было ощущение возможности прикоснуться и потрогать объекты на сайте. Также они используют природные материалы в качестве текстур, иллюстраций и фонов + натуральные оттенки (зеленые, коричневые, серые, нейтральные металлические).
11. Остальные тенденции веб-дизайна 2017
В процессе изучения основных трендов дизайна сайтов 2017 года нам встречались разные мнения. С самыми значимыми вариантами вы уже ознакомились, а теперь кратко расскажем о парочке предположений, которые оказались менее популярны. Часть из них, кстати, активно использовалась и ранее, просто в текущем году тенденция сохранится.
Вы можете сделать фон еще более эффектным за счет добавления анимации или видео. Благодаря YouTube и подобным проектам видеоконтент сейчас весьма популярен, вы можете использовать эту фишку и на своем сайте. Если будете добавлять звук не включайте его по умолчанию, пользователь сам должен захотеть это сделать.
Геометрические формы
Если внимательно посмотреть на скриншоты веб-проектов выше, то во многих из них заметите использование разных геометрических форм. Зачастую это квадратные / прямоугольные фигуры, но также встречаются кривые, треугольники и круги. Подобные блоки могут содержать контент или применяться для выделения фона.
Уникальные иллюстрации
В подборке мы нашли не так много оригинальных работ, но данный тренд веб-дизайна в 2017 будет все еще актуален. Во-первых, иллюстрации добавляют вашему проекту персонализированный вид (что в эпоху Flat макетов большой плюс). Во-вторых, метод отлично сочетается с нестандартной типографикой, позволяя создать еще более уникальные макеты. Сюда же можно включить тенденцию использования реальных фото в дизайне/контенте вместо картинок из фотостоков — оригинальность всегда востребована.
Итого
Мы рассмотрели топ-10 тенденций в веб-дизайне за 2017, которые сейчас будут максимально активно использоваться дизайнерами в своей работе. На самом деле оригинальных приемов получилось не так уж и много, значительная часть трендов повторяется с прошлых лет: карточки, яркие фоны, параллакс, большая типографика и т.п. По шрифтами и навигации, вероятно, увидим оригинальные варианты в этом году. Если не считать пункт с виртуальной реальностью, можно сказать, что общая тенденция к упрощению внешнего вида онлайн проектов сохраняется, дизайнеры лишь продолжают искать максимально эффективные и интересные способы ее реализации.