Каждый год мы узнаем что-то новое о дизайне и 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.

———————————

С каждым годом растет число сайтов, удивляющих и восхищающих новыми фишками в оформлении. Два года назад мы разместили переводную о трендах в веб-дизайне 2015. Что изменилось с тех пор? По-прежнему делается акцент на качественной графике и минимализме, крупных шрифтах и интерактивных элементах (например, скрытое меню). Однако технологии не стоят на месте, и веб-дизайнеры экспериментируют с динамикой, анимацией, расположением объектов на экране при этом не в ущерб производительности сайта. Предлагаем вашему вниманию обзор трендов, которые, по традиции, задают наши западные коллеги.

1. Принцип «mobile-first»

Название принципа говорит само за себя: дизайн разрабатывается, прежде всего, с учетом удобства просмотра на экранах мобильных устройств. Этот принцип не нов, но так как более 60% пользователей выходят в интернет именно со смартфонов, он стал определяющим в этом году. Поскольку экраны мобильных устройств имеют малые размеры, дизайнеры предусматривают максимально информативное, но при этом эффектное отображение контента. То же самое касается текстов - воде и пустым фразам в концепции «mobile-first» нет места.

2. Иллюстрации «от руки»

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

Пример иллюстрации с сайта dropbox.com

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

3. Анимация

Дизайнеры постепенно отходят от использования только статичных изображений и ищут новые способы вовлечения аудитории, чтобы выделиться на фоне других. Брендам нужна персонализация, и анимация, во многом благодаря развитию HTML5, CSS и jQuery, играет здесь не последнюю роль.

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

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

4. Смелые цвета

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

Пример использования смелых цветов на spotify.com

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

5. Необычный скроллинг и параллакс

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

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

6. Асимметричные шаблоны

2016 год прошел под влиянием сетчатых шаблонов, а в 2017 году наметилась тенденция к использованию асимметричных и «рваных» шаблонов. Несмотря на то, что в подавляющем большинстве бренды предпочитают традиционные и понятные карточные UI-шаблоны (ведь они логичны и просты для ориентации), некоторые все же начинают экспериментировать для того, чтобы выделиться и отстроиться от конкурентов.

Пример асимметричного дизайна (isaidicanshout.com)

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

7. Тени

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

Глубокие тени при наведении курсора на изображения (abduzeedo.com)

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

8. Большие и жирные шрифты

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

Пример использования крупного шрифта (bigyouth.fr)

9. Ультраминимализм

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

Абсолютный минимализм (mathieuboulet.com)

В приведенном примере есть только указание «Scroll», ссылка на раздел «О Себе» и ссылки на профили в соцсетях. Далее при прокрутке уже идет портфолио дизайнера.

10. Микс горизонтального и вертикального текста

Изменение привычного горизонтального расположения текста «освежает» сайт и мотивирует прочитать, что же там написано.

Пример необычного направления текста (takewhatyoucancarry.com)

Обратите внимание, что микс сделан грамотно - здесь нет лишних сбивающих с толку элементов. Слово «take» написано вертикально - этого достаточно для фирменной подачи контента.

11. «Модуляция»

В этом случае текст должен контрастировать с фоновыми изображениями, чтобы они не сливались.

13. Двухцветность

В основе дизайна сайта лежит 2 базовых цвета. Смотрится это стильно и современно. Например, сайт Australian Design Radio выдержан именно в таком стиле:

14. «Геометрические» шрифты

В этом случае шрифты сочетаются с разнообразными геометрическими формами. Для этой цели подходят шрифты вроде Futura, ITC Avant Garde и Proxima Nova.

Пример использования «геометрических» шрифтов (hugeinc.com)

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

Подводим итоги

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

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

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

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

Вот шесть трендов веб-дизайна, которые, скорее всего, получат своё развитие в 2017 году.

Карточный дизайн уходит в прошлое

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

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

Скроллинговых сайтов станет меньше

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

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

Шрифты станут главным графическим элементом

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

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

Видео будет чаще использоваться для оформления сайтов

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

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

Развитие тренда: пользователи привыкли к фото и статике. Видео вызывает удивление и притягивает к себе внимание за счёт того, что визуально «оживляет» страницу. Однако несмотря на то, что это кажется новым сейчас, скорее всего, тренд долго не продержится. Потому что к видео тоже привыкнут, и через пару лет оно останется только в тех областях, где его использование является уместным.

Если вы хотите подсказать нам новость, отправьте намек на почту редактору (а вот пресс-релизы в этот раздел отправлять не нужно). Если вы стесняетесь, можете прислать новость анонимно.

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

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

Вот шесть трендов веб-дизайна, которые, скорее всего, получат своё развитие в 2017 году.

Карточный дизайн уходит в прошлое

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

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

Скроллинговых сайтов станет меньше

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

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

Шрифты станут главным графическим элементом

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

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

Видео будет чаще использоваться для оформления сайтов

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

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

Развитие тренда: пользователи привыкли к фото и статике. Видео вызывает удивление и притягивает к себе внимание за счёт того, что визуально «оживляет» страницу. Однако несмотря на то, что это кажется новым сейчас, скорее всего, тренд долго не продержится. Потому что к видео тоже привыкнут, и через пару лет оно останется только в тех областях, где его использование является уместным.

Если вы хотите подсказать нам новость, отправьте намек на почту редактору (а вот пресс-релизы в этот раздел отправлять не нужно). Если вы стесняетесь, можете прислать новость анонимно.

Что 2017-й год вносит нового в Веб? Каких главных направлений и трендов в веб-дизайне, стоит ожидать? Сейчас все выясним – в формате емкого обзора самых ярких тенденций, на примерах TRENDY сайтов.

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

Читайте также: 8 веб-трендов на 2019 год: современные лэйауты

В плане эстетической привлекательности, 3 года подряд плоский стиль господствовал в WEB-е. Затем, Google представил материальный дизайн, что немного вывело нас из визуальной абстракции. В 2017 году веб-дизайн сделает еще один шаг обратно – к реалистичности. Будь то формы, выбор цвета или функционала - 2017-й станет годом гибридов, в которых пересекутся реалии физического мира и технологии. Результатом следует ожидать лучшие возможности для просмотра веб-страниц.

Вот девять веб-дизайн трендов, способных сократить этот разрыв.

1. Pop-out навигация

Сегодня, когда мобильная аудитория уже с удовольствием просматривает интернет-страницы, значимость пространства экрана высока как никогда. Скрывая функционал и навигацию до момента «пока не понадобится», современные web-дизайнеры и маркетологи стремятся разгрузить пространство сайтов для продающего визуала.

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

Преимущества:

• Экономия пространства на экране
• Акцентируя внимание пользователей на меню, улучшает навигацию по сайту
• Скрытие элементов навигации, помогает лучше сконцентрироваться на других моментах (например, целях конверсии)
• Улучшенный внешний вид первого экрана
• Более гибкая структура дизайна

Читайте также: 20 лучших примеров дизайна главной страницы сайта

Лучшие практики:

Цветовое оформление в тон страниц сайта. Максимальный эффект при таком упрощения веб-страницы, достигается одноцветным фоном или однотонной структурой выскальзывающего меню.
Не отвлекайте пользовательское внимание на навигацию – лучше оставить фишки и украшательства для самих страниц. Конечно, красивому современному дизайну , стильное меню не повредит:

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

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

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

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

2. Вопреки парадигмам навигации – альтернативы

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

Преимущества нестандартной навигации:

• Уникальный дизайн
• Новации привлекают
• Расширяется опыт пользования (UX)
• Для дизайнеров – новые возможности оформления сайтов

Лучшие практики:

Читайте также: 11 креативных сайтов отечественных студий веб-дизайна

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

Уникальное меню Hillsiderancho.com сочетает верхнюю, левую, правую и скролл навигацию

Вообще без меню навигации. Современный пользователь сталкивается с массой контента и ему не надо объяснять, что делать дальше. Скроллить! На органичность такого поведения уже обратили внимание в предыдущих веб-трендах (горизонтальная, бесконечная прокрутка, управление с клавиатуры, жестами…). Некоторые дизайнеры отказываются от меню совсем, предлагая посетителю использовать / получать опыт «продвинутого» исследования сайтов. Адаптация сайтов под мобильные и планшеты, также меняет UX / сами интерфейсы и открывает перспективы для горизонтальной прокрутки.

Сайт не имеет навигационного меню – просят скроллить для обнаружения контента, можете листать курсором

Читайте также: Самые необычные и оригинальные сайты

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

Используется pop over навигация, когда наведение на одну из 6 секций меняет фон всего полноэкранного меню

3. Карточки – вдохновение носимой электроникой

Как мобильные пользователи изменили дизайн современных сайтов, так носимые устройства начинают влиять на их оформление. С десятками миллионов проданных с 2015-го года носимых гаджетов, их пользователи научились ценить рациональное совершенство и в других сферах. Экономя место на экране, носимая электроника приучит упрощать визуально и веб-дизайнеров, а маркетологов – еще больше конкретизировать и формализовать задачи сайтов. Главные правила веб-дизайна по принципу контейнеров: стильно, лаконично и без больших усилий – идеология «less is more» не ограничивает себя размерами экранов.

Преимущества:

• Оптимизированный UX дизайн
• Меньше неясностей и отвлекающих факторов
• Минимализм ускоряет загрузку сайта

Лучшие практики:

Плитки, принцип контейнеров и блоки в структуре веб-страниц. Тренд сохраняется уже не один год (2014 – 2016-й…) и вероятно 2017 год продолжит сложившуюся тенденцию. Популярные сейчас и новые модели гаджетов («умные» очки, часы, браслеты, прищепки, встроенные в одежду сенсоры…) выполнены в лаконичном стиле и столь же ненавязчиво информируют пользователя. Ожидаемо, носимые технологии вдохнут новую жизнь в легко считываемые плиточные интерфейсы. Контейнерная модель карточного UI подразумевает упорядочение с самодостаточностью и успешно масштабируется для больших экранов.

Крупные SVG иконки. Иконке нужна масштабируемость, простота – чтобы смотрелась на HD устройствах и замечалась беглым взглядом.

Строгая цветовая палитра. Модные цветовые схемы возвращаются сейчас к базовым основам. Двухцветный дизайн сайта (дуотон) или черно-белое оформление с добавлением одного цвета становятся все популярнее.

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

4. Material Design Lite (MDL)

Читайте также: Лучшие дизайны интернет-магазинов в стиле Flat и Material

Облегченная реализация материального дизайна от Google (MDL) предоставляет библиотеку шаблонов, наборы элементов (карточки, формы, иконки, кнопки …) и является интерпретацией каталога готовых Polymer-компонентов.

С руководствами, по уже существующим шаблонам и open-source компонентам, MDL делает материальный дизайн открытым для внедрения на любом сайте или приложении. Псевдо-3D-слои, тени, анимации – интерфейсные элементы классического веб-дизайна, приближающие юзабилити к имитации реального мира.

Преимущества:

• MDL отличается в лучшую сторону от оформления традиционных сайтов, сохраняя изначальные выгоды классического веб-дизайна
• Легко вникать благодаря наглядности реалистичного интерфейса
• Кроссплатформенная доступность для всех устройств (без привязки к JS)

Лучшие практики:

Механика материального мира. Рассматривайте стилистические элементы MDL, как как реальные физические объекты, а именно:

• Тени должны выглядеть, как отбрасываемые естественным источником света
• Размер и толщину элементов выбирайте, как для реальных объектов – в соответствии с физическими законами
• Движение – реакция на пользовательское взаимодействие

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

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

Читайте также: Цвета в Web дизайне: колор-тенденции (яркие тона)

5. Винтажные цвета

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

Обувной интернет-магазин использует приглушенные цвета вроде сепии. Цветовой дизайн, имитируя винтаж со старинными фотографиями, подчеркивает высококачественность товара (в лучших традициях фамильного бренда)