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

flat design ui

Тренд флэт стильПроект: Listener’s Playlist
Автор: Anzi

02. Движущиеся фотографии (Cinemagraphs)

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

синемаграфиясинема окноанимация вино

03. Больше 3D (More 3D)

3D определенно движется в нашу сторону, и мы будем видеть это влияние во всех областях дизайна. С технологиями VR/AR быстро наращивается темп, эта область развивается довольно быстро.
3d графикаПроект: LUV.IT
Автор: AARON MARTINEZ

Шары 3дПроект: Open Annual Awards
Автор: TAVO

обувь макетПроект: Air Max ’17
Автор: Berd -; Lukas Vojir; mark haley; Oliver Harris; Jeff Thomson

3д мяч и кеды вебПроект: NIKE F.C. | 3D Golden balls in the real world
Автор: TAVO

композицияПроект: Better You Brand
Автор: Craig Minchington; Satellite Office; Brand Nu

04. Анимации (Animations)

Анимация все больше и больше присутствует в web-дизайне, формат может быть любым – WebGL CSS, GIFs, SVG или видео. Анимация была одной из самых важных трендов веб-дизайна прошлого года, не стесняйтесь ее использовать.

лого анимированное
Проект: Nickelodeon Kids Pick The President
Автор: JeanPierre Le Roux

приложение с анимациейПроект: AR Virtual Fitness Coach App
Автор: Daz_Qu

баскетболПроект: ZH OURO- Rio 2016
Автор: Leo Natsume; Guilherme Maron

05. Одностраничные сайты/лендинги (Landing pages)

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

Если вам понадобится лендинг, то можете заказать его у меня →

06. Геометрические фигуры, узоры, линии и круги (Geometric Shapes, Patterns, Lines and Circles)

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

ленд с формамиПроект: Pfizer – Active and 50+ for The New York Times
Автор: justyna stasik; Vladimir Marchukov

пример фигурПроект: DRAP.agency Branding
Автор: Mireldy Design; Filip Gjurin

фигуры элементыПроект: Pfizer – Active and 50+ for The New York Times
Автор: justyna stasik; Vladimir Marchukov

07. Смелые, яркие цвета (Courageous Colors)

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

палитра цветов google

logo eПроект: Edris – Logo Designed by MiLo
Автор: Loredana Papp-Dinea; Mihai Baldean; Milo Themes

набор элементов uiПроект: Rendered — Responsive Demo Website for Adobe
Автор: Serge Vasil

предметы материал дизайнПроект: b2mach
Автор: Natalia Żerko; Kuba Enzowski; Kommunikat Studio

08. Инновационный скроллинг и параллакс (Innovative Scrolling and Parallax)

Это отличная визуальная идея, которая добавит уникальности любому сайту. От параллакса из нескольких слоев к видео параллаксу, все возможно с плагином D.ex Multilayer Parallax (многослойный параллакс). Этот продукт разработан полностью студией Milothemes под руководством Loredana Papp и Mihai Baldean. Он доступен для покупки на Envato Market / codecanyon.net

parallax эффект
Это WordPress плагин, который позволяет делать прекрасные Parallax блоки с более чем одним слоем. Будьте креативными и объединяйте слои в любом стиле, котором захотите. Мы сделали 12 различных примеров в гайде плагина, чтобы упростить ваше первое знакомство с прекрасным миром параллакса. Поиграйте со слоями!

параллакс предметы

09. Цветовые переходы/градиенты (Color Transitions)

Градиенты – один из главных трендов прямо сейчас. Транд начал набирать популярность с 2016 и продолжает быстро расти, после того как большие бренды, например Инстаграм решили изменить свое лого и картинки из одного цвета в многоцветный переход (градиент). От логотипов до кнопок или наложений на изображения (picture overlays), этот тренд по всюду.

Пример градиента

10. Просмотры с мобильных устройств, адаптивный дизайн (Mobile Browsing (Responsive Design))

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

адаптивность на смартфонахПроект: Responsive Website Animation
Автор: Muharrem Senyil

11. Графика и иллюстрации сделанные на заказ (Custom Graphics and Illustrations)

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

изображения на заказАвтор: Margarita Mar

Картинки на заказ

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
Автор: Ruslan Siiz

18. СЕО – важно! (SEO is Important)

СЕО является очень важным для сайта, так что красивый сайт без хорошего SEO останется в аутсайдерах.

поисковая оптимизация

19. Скрытая навигация (Hidden Navigation)

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

гамбургер меню

20. Маленькие детали дизайна (Tiny Design Details)

Фокус на деталях очень важен в этом году. Мелкие детали такие как навигационные точки и т.д. Фокус на мелких деталях сделает работу законченной.

мелкие элементы uiПроект: Barometa – Next-generation Job Platform
Автор: Netguru Team; Łukasz Pachytel

tiny uiАвтор: Konstantin Zhenchur

21. Тренды в дизайне логотипов (Logo Design Trends)

21.1. Минимализм (Minimalist)

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

минимализм лого примерыАвтор: Mingo Ideas Up

21.2. Нарисованные от руки (Hand drawn)

Этот тренд в центре внимания в течение последних лет, такой стиль отлично подходит для «хипстерского» бизнеса. Его используют для парикмахерских (barbers), кафе, ресторанов, искусства и крафтовых вещей.

нарисованные логоАвтор: Sam Healy

21.3. Negative space

Это старый тренд, но в последние несколько лет мы видим, как он набирает обороты, и будет расти в 2017 году, так что определенно стоит к нему присмотреться.

негативное пространство

21.4. Cropping

Более минималистично, чем этот тренд не бывает. Показывает только то, чего достаточно указать в логотипе, чтобы узнать компанию, и больше ничего.

cropАвтор: Aleksandr Maksimov

21.5. Геометрия (Geometric)

Этот тренд из разряда Old school, но это один из тех стилей, который точно никогда не умрет.

геометрические лого примерыАвтор: Mingo Ideas Up

21.6. Художественные линии (Line art)

Этот тренд популярен среди бизнеса нового поколения

линии в логотипахАвторы: Sam HealyAndrea SchlafferJacek Janiczak

21.7. Паттерны, узоры (Pattern)

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

узоры в логоАвторы: [urlspan]Nick Edlin; Stanislav Aleynikov; Lucas Gil-Turner[/urlspan]

21.8. Анимированные логотипы (Animated logos)

Motion дизайн сегодня востребованный тренд, и мы можем его наблюдать во всех областях дизайна.

анимация лого пример

элементы uiАвторы: [urlspan]Javier Miranda Nieto; The Woork Co[/urlspan]

21.9. Винтаж (Vintage)

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

винтажные логоАвторы: [urlspan]Роман Додонов; Mingo Ideas Up; Will Try Further[/urlspan]

21.10. Цветовые переходы (Color Transitions)

Градиенты везде в этом году – и логотипы не исключение.

цветовые переходыАвтор: [urlspan]Mingo Ideas Up[/urlspan]

21.11. Иллюстрации в логотипах (Illustrations in logos)

Иллюстрации – хороший способ сделать уникальный и индивидуальный логотип для бизнеса. Они становятся все более популярными в этом году.

иллюстрацииАвторы: [urlspan]Bodea Daniel; Jacek Janiczak[/urlspan]

21.12. Фотография в логотипах (Photography in logos)

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

фото и текст

22. Тренды в типографике (Typography Trends)

22.1. Большая, яркая и красивая типографика (Big, bold & beautiful typography)

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

типографика шрифт

первый экран скринАвторы: [urlspan]Alexander Laguta[/urlspan]

шрифтАвторы: [urlspan]Quim Marin[/urlspan]

примеры шрифтаПроект: Baugasm Series – Pack 4
Автор: Vasjen Katro

22.2. Градиенты/цветовые переходы в типографике (Color transitions in typography)

Градиенты, без сомнений, это тренд сегодня, и вы найдете его также в типографике.

Градиент в текстеАвтор: The Woork Co

22.3. Визуальная иерархия (Visual hierarchy)

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

иерархия шрифтов

22.4. Tiny Typography (Мелкая типографика)

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

маленький текст

маленький шрифт

экран с текстомАвторы: Slava Oleinik; Bahaa Samir; Witty Digital

tiny textПроект: Baugasm Series – Pack 4
Автор: Vasjen Katro

22.5. Анимация в типографике (Animated Typography)

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

шрифт и анимацияПроект: Gotham Pro Animated Typeface Free

22.6. Типографика с фотографией (Typography meets photography)

Сочетание между текстом и фотографией может дать отличный результат. Посмотрите на эти прекрасные примеры.

Картинка в шрифте

фото текстАвтор: Quim Marin

22.7. Геометрические формы и типографика (Geometric shapes and typography)

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

геометрия в тексте

фигуры в шрифтеАвтор: Quim Marin

geometric typeАвтор: Studio—JQ

22.8. Шрифтовые сочетания (Font pairing)

Используйте два или более шрифта вместе. Это еще в тренде в 2017.

несколько шрифтов

——————————–

Авторы статьи: Loredana Papp-Dinea и Mihai Baldean
Перевод с сайта: https://www.behance.net

 

Скачайте чек-лист
по cозданию сайта
на WordPress

ЧТОБЫ ПОЛУЧИТЬ ЧЕК-ЛИСТ ВВЕДИТЕ
СВОЁ ИМЯ И ЕМЕЙЛ В ФОРМУ НИЖЕ
И ПОДТВЕРДИТЕ ПОДПИСКУ НА ПОЧТЕ

(3) комментария

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

  2. Хорошая статья, но пункт 18, я так смеялся

    18. СЕО – важно! (SEO is Important). СЕО является очень важным для сайта, так что красивый сайт без хорошего SEO останется в аутсайдерах.

    Как будто автор не понимает о чем речь, смотрится странно употребление сео вместе с seo.
    Как будто кривой перевод.

Добавить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Отправить