Линии, цвета, светотени, пространство и формы - элементы, из которых состоит картина. Каждой эпохе были присущи свои тенденции в представлении мира. Веб-дизайнеры - это те же художники, только творят они в цифровом формате. И если направления в искусстве менялись не так часто, то веб-дизайн - трансформируется из года в год. Мы попробуем составить путеводитель по трендам графического оформления и предугадать, как видоизменятся сайты в 2017-ом. О трендах web-design 2018 года вы можете прочесть .

Итак, 14 поворотов на пути к модному интерфейсу:

1. Акцент на контент

Что важнее: содержание или оформление страницы. Ответ прост - дизайн должен выгодно представлять контент. Дизайнеры сервиса WebFlow (конструктора сайтов) предлагают закончить борьбу за главенство в 2017-ом, отдав предпочтение содержанию. Пользователь заходит на сайт в поисках ответа на запрос, неважно это товар, услуга или полезная статья. Задача веб-дизайнера подать контент максимально удобно для человека.

2. Уход от «гамбургеров»

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

3. «Сard-based design»

Карточный веб-дизайн завоевал просторы интернета быстро. Плюсы этого способа оформления:

• удобное расположение блоков на сайте;
• визуально выгодная подача контента;
• адаптивность для мобильных девайсов.

На вопрос: быть или не быть карточному дизайну в 2017-ом, единогласного ответа нет. Его будут использовать, так как он уже доказал свою эффективность.

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

4. Ломаная сетка

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

Оригинальность всегда в моде. Нестандартные макеты и новые подходы в графическом дизайне уже опробовали западные дизайнеры. Самые смелые решения можно осуществить с помощью модулей Flexbox и CSS Grid.

5. Броские необычные шрифты - уклон на типографику

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

Отличным дополнением в оформлении сайта будет шрифтовая графика (если это уместно).

6. Адаптивный дизайн

Универсальность веб-сайтов для устройств с большими и маленькими экранами - уже не новая тенденция. Подход «mobile first» актуален и в 2017-ом. Кроме возможности подстроиться под мобильные гаджеты, в ближайшем будущем сайты должны адаптироваться под конкретного пользователя в зависимости от:

• возраста;
• навыков (компетенций).

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

7. Цвета

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

Он напоминает свежую весеннюю зелень и поможет расставить цветовые акценты на сайте. Специалисты Pantone Color Institute назвали его цветом 2017-го.

8. Инфографика

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

9. Анимации

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

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

10. Фоновые фото и видео

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

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

11. Стоп «сток»!

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

12. Скроллинг +

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

13. Параллакс-скроллинг

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

14. 3D-панорамы

360° панорамы - ещё один способ эффектно продемонстрировать пользователю товар или «подарить» посетителю возможность виртуально присутствовать в каком-то месте, например в офисе компании, отеле.

Это основные тренды веб-дизайна на 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 году - наконец-то великолепные винтажные оттенки возвращаются.

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

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

Какие тренды графического дизайна наиболее заметны в 2017 году?

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

Присмотритесь к вещам, журналам, книгам и рекламе 80-х, это станет нескончаемым потоком вдохновения для современных работ.

2. Индивидуализм
2017 стал годом индивидуализма. Плоский дизайн был главным трендом предыдущего года, Google даже разработал гид с шаблонами для упрощения работы дизайнеров и программистов. В результате, его стали применять повсеместно, а уникальность была потеряна.

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

3. Геометрические коллажи
Если в детстве вам нравилось вырезать из журналов отдельные предметы или фото людей, а затем создавать коллажи, то 2017 вас порадует. Да, да, да! Одна из модных тенденций в графическом дизайне этого года – коллажи, которые включают фотографии, иллюстрации, рисунки и текст. Все элементы размещаются в определенной геометрической форме. Коллажи отлично подходят для передачи идей на плакатах, в рекламе и презентационных материалах.
4. Уютный винтаж
Это винтаж, но не такой, каким мы его знаем. Невозможно создать современный дизайн, в точности копируя работы прошлых лет. Необходима доработка и привнесение современных элементов. Людей все больше привлекает ретро стиль, они стремятся создать дома уют, используя элементы прошлого. Упаковки товаров и продуктов повседневного спроса должны вписываться в интерьеры, а это задача дизайнеров.

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

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

Любите дизайн и хотите стать профессионалом в данной области? Начните с образования. Пройдите обучение в школе дизайна Марангони за рубежом (в Милане) на одной из специализированных программ:

Подробнее об обучении дизайну за границей на программах Istituto Marangoni можно узнать бесплатно у специалистов STUDIES&CAREERS.

Часто в резюме дизайнеров можно встретить фразу: «Слежу за украинскими и зарубежными трендами, применяю их в работе». Фраза ни о чем не говорит, кроме того, что вы фолловите на Behance, Dribble некий список дизайнеров и пытаетесь их наследовать.

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

Знание трендов - одна из дверей, которая приведет к пониманию, как этого достичь и перейти на качественно новый уровень, заняв уверенную позицию в авангарде, и стать визионером.

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

Базовые понятия

Википедия нам говорит:

«Тренд - основная тенденция изменений временного ряда».

Коротко и не очень понятно, согласитесь.

Чтобы его расшифровать, давайте поиграем в Тьюринга, он любил всякие головоломки. Для начала зацепимся за два понятия «тенденция» и «временной ряд» .

Тенденция - направление развития, склонность, стремление. Делится на микротенденции и макротенденции. Первые в дизайне живут 1–2 года, вторые - 5–7 лет.

Тенденция - направление развития, склонность, стремление. Делится на микротенденции и макротенденции.

Что такое временной ряд? Это последовательно измеренные через равные промежутки времени данные.

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

Для анализа трендов используется два метода.

1. Изучение природы данных. Откуда они взялись, почему образовались, что на них повлияло.
2. Метод прогнозирования. Прогнозирование - построение модели для предсказания будущих событий, основываясь на известных событиях прошлого.

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

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

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

Основные составляющие жизненного цикла тренда

• Анализ прошлого;
• Анализ настоящего;
• Прогноз будущего;
• Внедрение тренда;
• Принятие тренда.

Основные составляющие жизненного цикла тренда.

Профессии

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

Тренд-хантер

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

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

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

Трендсеттер

Понятие появилось в 1913 году. Окончательно понятие вошло в обиход в 40-х годах, после американского исследования, в котором изучали, как распространяются инновации у фермеров.

Трендсеттер - человек, пытающийся стать основателем или основавший некое материальное или нематериальное новшество.

В 60-х Эверетт Роджерс популяризировал диффузную модель.

Согласно теории Роджерса общество делится на 5 групп:

1. Новаторы - 2,5%.
2. Ранние последователи - 13,5%.
3. Раннее большинство - 34%.
4. Позднее большинство - 34%.
5. Отстающие - 16%.

2,5% людей - генераторы инноваций. Мы их знаем - Норман Кокс, Билл Гейтс, Стив Джобс, Илон Маск…

2,5% людей - генераторы инноваций.

Трендсеттеры - ранние последователи. Именно от них зависит, будет тренд трендом и будет ли он развиваться. Диффузная теория говорит, что не нужно влиять на все общество, предлагать товары всем - достаточно этих 13,5%.
Трендсеттеры делятся на две группы:

1. Определяющие - следят абсолютно за всем новым. Это блоггеры, знаменитости, публичные люди, лидеры мнений.
2. Категориальные - специализируются на определенной категории инноваций. Бьют точечно, но сильно. Они не просто лидеры мнений, а эксперты в своих категориях.

Тренд-вотчер

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

Тренды в дизайне 2017-го года

Цвета

Pantone объявил цвета, что будут в моде весной 2017-го. Это хорошо для печатников, для фешн-индустрии. У диджитал, веб-дизайнеров, дизайнеров интерфейсов, цифровая палитра шире. И нам важно запомнить: всё, наигрались в яркие контрастные чистые цвета. Теперь хотят спокойствия, выраженного в пастельных, нюдовых оттенках.

Спокойствие, выраженное в пастельных, нюдовых оттенках.

Графический дизайн

Кардинально нового нет.

Действительно живые логотипы

Не такой уж новый тренд - у любого телеканала анимированный логотип. Но в лого компании Seagate встроена информация о живых данных.

Лайн-арт

Тренд был популярен в прошлом году, будет популярен и в этом.

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

Что-то инновационное? Нет.

Эмоциональная типографика

GIF, синемаграф, глитч

Модерн и минимализм

Уникальная иллюстрация

Возрождение 3D

3D возвращается.

Моушн-дизайн

Хороший пример - Nike. По ним всегда можно ориентироваться. Цвета пастельные, 3D, негативное пространство.

UI-дизайн

И снова 3D

Иллюстрация вместо фотографии

Мы привыкли к иллюстрации книг, но как насчет иллюстрации приложений и веб-сайтов?

Становится модным иллюстрировать. Мы привыкли к иллюстрации книг, но как насчет иллюстрации приложений и веб-сайтов?

Уход от шаблонности к оригинальным решениям

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

Возрастной отзывчивый дизайн

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

Микро-мини взаимодействия

В 2017-м их станет больше.

Лайк в фейсбуке - мини-взаимодействие. А когда вы определяете характер лайка: «вау!», «супер», «фу» - это уже микро-мини взаимодействие. Их станет больше.

Тактильная обратная связь

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

Персонализация, Touch ID

Внедрение Touch ID в девайсы позволит использовать эту технологию в банковской сфере.

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

Внедрение Touch ID в девайсы позволит использовать эту технологию в той же банковской сфере. Логин/регистрация через Touch ID.

Разговорные интерфейсы

Проект, который здесь изображен называется «Лука» . Это чат-бот в интерфейсе - сайт-бот. Мой эксперимент. Хочу Лукой заменить классический сайт студии. По сути, роль студии - рассказать о себе и привести человека к тому, что он оставит онлайн-заявку. Я решил это сделать в виде сайт-бота, который общается с пользователем через разговорный интерфейс.

UX-дизайн

Де-линейность

Людям надоела простота. Два года подряд мы кричали во все горло, что надо упрощать, делать взаимодействие пользователя туннельным или рельсовым. Но метрики и опросы говорят об обратном. Пользователю нужно больше выбора.

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

Диалоговое взаимодействие

Появляются диалоговые интерфейсы. И сейчас они, в основном, строятся не на нейронной сети, а на алгоритме, который пишет и редактирует человек.

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

У юиксеров появится новый вид деятельности - написание сценариев для чат-ботов в социальных сетях или же для сайт-ботов.

Поведение, жесты, новые метафоры

Всем надоели кнопки. Появятся новые метафоры (контроллеры).

Специализация

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

Узкие специалисты будут существовать всегда, но многие из нас будут универсалами.

Качества, которыми должен обладать универсал:

Сварщик - дизайнер процессов.

Автоматизация дизайна/алгоритмический дизайн

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

Ответственность

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

Микро-тренды закончились. Подведем итоги.

Я считаю, что 2017-й будет годом креатива, возврата к реализму и годом сотрудничества с искусственным интеллектом.

Тренды на ближайшие 5-10 лет

Невозможно говорить о трендах и рассказать только микро-тенденции. Гораздо интереснее заглянуть в будущее.

В ближайшее время VR не войдет в массу. Сейчас дорогие контроллеры, да и мы не готовы. К дополненной реальности придем быстрее, чем к виртуальной.

Что касается параллельной/альтернативной системы - должна появиться концепция, которая будет противоположна концепции нынешней системы. Это и о стремлении интерфейсов раствориться в нашей реальности. Хороший дизайн - это незаметный дизайн.

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

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

Будут существовать операционные системы и приложения в том виде, в котором они есть сейчас. Но будет и альтернатива.

В ближайшее 10 лет мы выйдем за пределы устройств и существенно дополним нашу реальность.

Как внедряются тренды в работу?

Нет никакого рецепта, но есть два главных правила:

1. Говорить нет, если хотите внедрить инновацию ради инновации.
2. Четко понимать задачи. Понимая задачи, просто понять, какие тренды подходят, а какие - нет.

Самый главный тренд всех времен и народов - правильное дизайн-мышление.

Веб-дизайн 2017-2018 | Тренды современного дизайна и разработки

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

ТРЕНДЫ ВЕБ-ДИЗАЙНА

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

Графический дизайн

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

Векторные изображения

Увеличивается использование вектора на сайтах, он имеет малый вес, а значит загрузка идет быстрее. Так как вектор можно растягивать и сжимать как угодно, ваша графика будет всегда выглядеть отлично на экране любых устройств с любым разрешением. Для векторных изображений используйте SVG (Scalable Vector Graphics) формат. Большинство векторных редакторов позволяют сохранять в этот формат и нет необходимости для специфического софта.

Бесцветные - призрачные кнопки

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

Нажмите на изображение для его увеличения

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

Нажмите на изображение для его увеличения

Анимация, видео и интерактивные объекты

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

Сложные сетки

Еще в конце 2016 появилось направление сайтов с использованием динамических, сложных сеток с ультрасовременным дизайном.

Геометрия в разных формах

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

Нажмите на изображение для его увеличения

Модные цвета

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

Безусловная адаптация

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

Споры не утихают как лучше, ставить иконку или надпись. Результаты тестирования на 240 000 пользователях мобильных устройств.

Альтернативы мобильных меню

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

Гибкое динамичное меню

Решение заключается в меню, которое подстраивается под ширину экрана, показывая столько вкладок, сколько можно, а что не входит – прячет под «Больше».

ТРЕНДЫ ВЕБ-РАЗРАБОТКИ

Продуманный дизайн

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

Текста меньше – да лучше!

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