Вебдизайн 20192018 тренды современного дизайна и разработки – 65 Трендов Веб-дизайна в 2019 году. Топовые советы от профи

Содержание

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

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

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

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

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

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

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

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

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

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

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

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

Стильная 3D графика

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

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

Типографика в веб-дизайне

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

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

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

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

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

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

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

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

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

Модные цвета

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рейтинг CMS

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

Создание качественных сайтов

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

webgroupco.com

Десять тенденций проектирования веб-дизайна в 2018 году — Дизайн на vc.ru

Команда студии «Вебпинк» — о методах и инструментах для проектирования сайтов и цифровых продуктов в 2018 году.

1. Эволюция плоского дизайна

Последние несколько лет плоский дизайн был главным трендом на рынке, но теперь под влиянием Material Design от Google он начинает приобретать объём. Это эволюция плоского дизайна из минималистского стиля в полуплоский дизайн с добавлением теней, анимации и функциональности.

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

2. Больше 3D

Использование 3D в дизайне определённо набирает обороты, и мы увидим его влияние во всех областях. Благодаря быстрому росту технологий виртуальной и дополнительной реальностей 3D-дизайн будет развиваться ещё быстрее.

3. Анимация

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

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

4. Смелые насыщенные цвета и градиенты

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

5. Творческое использование пространства и сетки

В предыдущие годы веб-дизайн был адаптирован к организованным колонкам и сеткам, но в 2017 году мы увидели значительный сдвиг в сторону нерегулярных слоёв, асимметрии и отхода от 12-колоночной сетки. Особенно это заметно в лучших работах на Behance, сайтах дня на Awwwards и FWA.

6. Персональные фото и иллюстрации

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

7. Дизайн без кода

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

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

8. Дизайн-системы

Дизайн-система — это библиотека или набор правил фирменного стиля и брендинга в едином стиле на всех проектах компании: от сайтов до дизайна рекламной кампании.

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

9. Выразительная типографика

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

10. Логотипы

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

Итог

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

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

#дизайн

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать

vc.ru

Тренды в дизайне UI и UX 2019 / Хабр


Иллюстрация от J.HUA

Год назад мы составили прогноз трендов в дизайне мобильных UI. В этом году мы решили выйти за рамки мобильных интерфейсов, потому что тренд №1 в современном дизайне — это контекст. Больше никаких обобщений — теперь всё завязано на контексте.

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

Ни один тренд не обойдётся без ложки дёгтя: помните, что всё хорошо в меру.

Мощные браузеры


Браузер — это не просто транспорт для передвижения по интернету, это средство воздействия на пользователя. Браузеры становятся ещё быстрее, мощнее и привлекательнее.
  • Бенчмарки и тесты производительности показывают существенный прирост производительности большинства популярных браузеров.
  • Увеличение скорости оказывает огромное влияние на дизайн благодаря потоковой компиляции. По данным Mozilla, новый компилятор работает в 10- 15 раз быстрее своего предшественника.
  • Все современные браузеры поддерживают технологию WebGL 2, которая позволяет вывести 3D-текстуры, рендеринг объектов, глубину фрагментов и массивы вершин на новый уровень.

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

Ужасно жаль, что evolutionoftheweb.com остановился на 2012 году. Эта схема просто великолепна


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

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

Из-за отвратительного дизайна многих сайтов браузеры выглядят как плохой софт.

Анимации со смыслом


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

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

Место между экранами раньше было бесхозным. Теперь оно принадлежит вам.

Дизайн блога от Zhenya Rynzhuk

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

Но интересы интерактивного дизайна простираются намного дальше. Сегодня он стал неотъемлемой частью брендинга. Логотипы — те же тотемы, которые формируются в нашем воображении под влиянием опыта. Почему бы не дать волю этому воображению, направив его в нужное русло?


Анимация от Eduard Mykhailov

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


Логотип компании Lakko от Zlatko Kelemenić


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

Не создавайте анимации импульсивно.

Интерфейсы с 3D и плоскость с эффектом глубины


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


Рендер для компании Baker Hughes от Sanu Sagar

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

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


3D-переход карточек от Gleb Kuznetsov


3D-поворот меню от Minh Pham

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

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

Плоскость с эффектом глубины — это переосмысление плоскости в дизайне.
Пользователям понравилась комбинация Real 3D и компьютерной графики, позволившая взаимодействовать с реалистичными объектами. На это способен и плоский дизайн, но он делает это по-своему, с помощью так называемой псевдотрёхмерности или псевдо-3D. По сути это наслоение плоскостей, создающее ощущение трёхмерности. Эффект объёма в плоском дизайне создают тень, освещение и отражения.


Логотип для галереи ARTA от Mike | Creative Mints

Сейчас набирает популярность эффект псевдо-3D, который можно создать с помощью Principle или After Effects.


«Astronaut» от Markus Magnusson

В 2019 мы можем увидеть даже триумфальное возвращение скевоморфизма. Если плоскость способна иметь эффект глубины, она с тем же успехом может быть изометрической. Сочетание реалистичности и символизма плоскости — тренд, который только предстоит исследовать.


Да, но рано или поздно нам уже нечего будет предложить пользователю. Уже сейчас 3D-интерфейсы не имеют чёткого направления развития. Они движутся одновременно к упрощению и к усложнению. Чтобы нас впечатлить, требуется всё больше технологических усилий, при этом нужна недюжинная храбрость, чтобы выдать безумную — и изящную в своей простоте — концепцию. В то же время, если в самом сложном интерфейсе нет осмысленности или хотя бы оригинальной идеи, он никому не будет нужен.

Мы можем создавать потрясающие изображения. Пора добавить им человечности и обратиться к более серьёзным проблемам. Как нам это сделать?

Сюрреалистичный дизайн


Все эти новые возможности 3D и интерактивного дизайна не стоят и копейки, если они не способны вызвать эмоциональный отклик. Ирония в том, что пользователя не впечатляет сложность продукта. Зато людям свойственна тяга к нонконформизму из-за его естественной привлекательности.
Нам всегда нужно что-то в противовес мейнстриму, этакий бес, сидящий на плече. А иногда нам просто охота подурачиться.
Дизайны и иллюстрации некоторых сервисов, решившихся на редизайн, вышли настолько смелыми, насколько это вообще возможно:


«Shop Small» от Joe Montefusco для Mailchimp

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


Да, но не все компании могут позволить себе такую смелость. Чем больше аудитория, тем нейтральнее должен быть дизайн. Даже если устоявшимся брендам повезёт, то маленьким компаниям придётся действовать осторожно и придерживаться конвенций.

Сначала постройте базу фанатов, затем удивите их вашим новым видением продукта.

Gradient 2.0, яркие цвета и тёмный фон


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

Grabient 2.0 от Eddie Lobanovskiy

Gradient 2.0 устроен очень просто. Он использует сочетающиеся цвета, имеет конкретный источник света и создаёт эффект глубины в сочетании с фигурами.

Сочные цвета также на месте. Этот тренд принесёт больше сочетаний цветов и разных слоёв. Более того, даже монохромная палитра может стать более эстетичной, если добавить к ней эффект объёма.


«Valley» от J.HUA для Tunan

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


Приложение для криптовалют от uixNinja

Ещё эффектнее яркие цвета и градиенты выглядят на тёмном фоне. Тёмные темы — это всёрьез и налолго, и они станут ещё красивее. Здесь мы писали о тёмных темах оформления и секрете их успеха с точки зрения антропологии.

Итак, в 2019 особенно успешны будут те, кому удастся найти баланс между доступностью и эстетической привлекательностью тёмного UI.

Плоскость с эффектом глубины, яркие цвета и 3D, — всё на тёмном фоне.

Информационная панель от uixNinja


Да, но доступность — не единственная проблема градиентов, цветовых палитр и тёмных тем. Яркие цвета традиционно являются акцентными. Если все элементы цветные, как выделить что-то одно? Не всем пользователям доступны OLED-экраны, и часть градиентов может затеряться, а слишком большой контраст может мешать фокусу зрения. А ещё тёмные темы не подходят для солнечной погоды. Хотя, может, это и плюс…

Вариативные шрифты


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

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

Вариативные шрифты могут заполнить любое текстовое пространство.

Шрифт Marvin Visions

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


«VOTE» от Josh Rinard

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

И это только начало. Художественное применение вариативных шрифтов ещё предстоит изучить в 2019.

Typography.Guru


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

Figma


Настало время задать извечный вопрос: «Дизайнерам тоже нужно программировать?» А также: «Должны ли разработчики разбираться в UX?» Тут всё просто: нам важно избежать разногласий во время реализации дизайна. Так что, если вы нацелены на результат, нужно думать о том, как его достичь.

Научиться программировать было бы логичнее всего. При реализации собственного дизайна вы можете избежать многих проблем. Однако, чтобы быть хорошим дизайнером и одновременно способным разработчиком, необходим огромный объём знаний. Вы можете это потянуть? Рады за вас. А для тех, кому это не по силам, должны быть другие варианты.

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


«Полностью перешёл на Figma» от Alexey Kolpikov

Figma — это инструмент, созданный дизайнерами для дизайнеров. Встреченная волной скептицизма, она превзошла все ожидания.

Figma уничтожила Sketch.
Она может всё то, что делают Sketch и Adobe XD, только больше и лучше. Самое главное, Figma нацелена на создание проектов, которые легко реализовать. Каждый компонент Figma может быть преобразован в компонент React с помощью API, и реализован во фронт-энде. Сейчас Figma выигрывает по стоимости, производительности, лёгкости внедрения, удобству совместной работы и общего доступа, по поддержке и другим параметрам. Но и это ещё не предел, ведь Figma продолжит развиваться в 2019.


Да, но когда мы создаём отличный продукт и не прописываем этические принципы его использования, мы способствуем собственному краху. Посмотрите на Twitter, который никак не может восстановить своё доброе имя. 2018 вообще запомнился большим числом руководителей IT-компаний, дававших показания в суде. Выходит, недостаточно дать комьюнити инструменты, нужно следить за их использованием. Может ли Figma защитить пользователей от «тёмных паттернов» в UX, плохого дизайна и фейков?

Голосовой UI


Эффектный дизайн не обязательно должен быть броским или даже видимым. Путём проб и ошибок мы выяснили, что при создании нетактильных ощущений инструментарий не играет большой роли. Логика такого дизайна основана на психологии человека и распознавании естественной речи машиной.
Голосовой UI чувственен и изящен.
Он реализует концепт нулевого UI в лучшем виде. Это сугубо внутренний процесс, больше похожий на писательство, построение контекста и обобщение данных, чем собственно на дизайн. И всё же дизайнеры одержимы поиском путей репрезентации голосового UI. Обычно они вдохновляются интерфейсами и анимациями из фильма «Особое мнение» (Minority Report, 2002).


Дизайн органического искусственного интеллекта от Gleb Kuznetsov

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

В 2019 мы надеемся увидеть развитие голосового UI вместе с отказом от простой визуальной эстетики в пользу создания полноценного опыта взаимодействия с дизайном.


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

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

Копирайтинг и редактирование UX


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

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

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

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

Различие между UX-копирайтингом и редактурой состоит в объёме работы. Копирайтеры создают текст, который видит пользователь, в то время как редакторы анализируют и трансформируют текст, делая его простым и понятным человеку. Экспресс-курсов по редактуре UX попросту не существует. Чтобы овладеть этим ремеслом, нужны опыт, наблюдение и, конечно, любовь к людям.

В 2019 каждому крупному проекту редизайна понадобится UX-редактор.

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

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

Дизайн как профессия


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

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

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


Целевая страница инновационной повязки для глаз от Sasha Turischev


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

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

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

habr.com

Новые Тренды и Тенденции в Веб-Дизайне в 2019 году

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

Почему ресурс должен обладать актуальным видом?

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

Успех продаж через социальную сеть Instagram подтверждает данную тенденцию. Здесь просматривается уже некая связь и с E-commerce, которая проникает постепенно в каждую социальную сеть! Человеку может казаться, что он приобретает стильную рубашку, делая акцент именно на ней. Но на самом деле он платит деньги за тот образ, который стоит за данной вещью – визуально воспринимает парня, который в нее одет.

Например, под коллекции современной одежды запускаются лаконичные, но красноречивые сайты. Ярким примером таковых можно назвать Lacoste. Это отмечают аналитики, исследующие тему трендов веб-дизайна. Делается акцент на воздушности и легкости, что в полной мере передается визуально. Ассоциация легкости передает намек не только на стиль одежды, но и на стиль жизни. Такой дизайн привлекает и запоминается – он продает! web design trends lacoste

Нестандартность – грамотный ход!

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

Более того – даже при нестандартном размещении вам не приходится жертвовать фирменным стилем. Если Вы решили использовать такой ход, очень важно помнить, что вся первоочередная информация должна быть слева. Читатель знакомится с ней слева направо, поэтому нужно тщательно все продумать, чтобы не переборщить. Учитывайте этот фактор при заказе разработки веб-дизайна для своего сайта. web design top trends

Полноэкранное видео – удобный и информативный элемент

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

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

Геометрические формы – свежесть и оригинальность веб-дизайна

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

merehead.com

прогноз и реальность / FunCorp corporate blog / Habr

Примечание переводчика: эту замечательную статью не перевели для Хабра ни в начале года, ни позднее. При том что она действительно полезная и заслуживает внимания. Поэтому, несмотря на то, что почти ⅔ 18-го года уже прожиты, я всё-таки решилась на перевод. Заодно сравнила прогнозы с реальностью, о чём оставила комментарии по тексту.

Внимание: под катом много тяжёлых гифок и красоты!

Вот и закончился ещё один год. В мире дизайна появилось множество инноваций. Но что же ждёт нас в будущем? Команда онлайн-журнала Mindsparkle Mag внимательно следит за новостями в мире дизайна и ежедневно публикует в своём блоге всё самое интересное. Проанализировав информацию за 2017 год, специалисты Mindsparkle Mag постарались предугадать, как сфера дизайна будет развиваться в дальнейшем. Без долгих вступлений представляем результат их работы — 20 наиболее вероятных трендов в области дизайна в 2018 году.

1. 3D Still Lifes / 3D-натюрморты


За последние два года стало появляться всё больше проектов в области 3D-дизайна. Наблюдая за успехом ведущих 3D-художников, например, Петера Тарки (Peter Tarka) и ребят из студии MVSM, можно смело предположить, что в 2018 году 3D-натюрморты станут ещё популярнее. Этот тренд особенно проявится в коллаборациях разных компаний для создания логотипов и в продакт-плейсменте.

Project: Squarespace stillife Author: MVSM

Project: Shapes & Forms | Rubik Author: Peter Tarka

Проект: Audi Q-Riosity | Adobe Government Автор: Петер Тарка

Комментарий переводчика: интерес к высокореалистичным 3D-сценам продолжает набирать обороты — хорошим примером являются работы Ben Fearnley.

2. More Design in AR / Больше AR


Технологии дополненной реальности (Augmented Reality, AR) продолжат стремительно развиваться, причём не только в компьютерных играх, видео или приложениях. AR вполне может завоевать своё место и в сфере дизайна, особенно если речь идёт о мобильных устройствах. Первый шаг к этому был сделан, например, агентством DIA Studio, специалисты которого добавляют интерактивный 3D-текст к самым обычным объектам, которые мы встречаем в повседневной жизни.

Project: DIA Author: DIA

Комментарий переводчика: если мы сами ещё не видим AR повсюду, то только потому, что многие идеи в данный момент в разработке. Не зря FunCorp активно «топит за» XR (новый термин Extended Reality, объединяющий в себе Augmented Reality, Virtual Reality и Mixed Reality).

3. More 3D Typography / Больше 3D-типографики


В 2018 году 3D-типографика станет ещё популярнее. Чтобы добиться успеха, дизайнеры должны создавать впечатляющие работы, постоянно раздвигая границы возможного. Многие компании (например, Nike) уже отметили важность 3D-технологий, ведь они позволяют не только установить контакт с потенциальным клиентом, но и впечатлить его. Ожидается, что в 2018 году различная 3D-анимация будет использоваться ещё чаще.

Проект: 3D Type Collection Автор: ILOVEDUST

Project: 36 Days of Type • 2017 Author: Wes L Cockx | Project: 3D Type Collection Author: ILOVEDUST. | Project: Typography projects Author: Muokkaa Studio

Project: 3D Type Collection Author: ILOVEDUST.

Комментарий переводчика: 3D-типографика взяла мировой дизайн штурмом и, уверена, не сдаст позиции в ближайшие пару лет.

Mohamed Reda Numbers

4. Digitalized Handmade Art / Симбиоз цифрового и традиционного искусства


​​​​​​​Благодаря появлению новых приложений и инструментов (планшетов, стилусов и др.) становится всё проще совмещать рукописные работы с цифровыми. Дни старых добрых кистей из Photoshop официально сочтены. На первый план выходит «кисть-стилус» — гораздо более универсальный инструмент, раскрывающий все преимущества настоящей кисти и позволяющий создавать более современные и эстетичные изображения. Всё больше компаний, таких как Adobe или Nike, применяют эту технику для продвижения своих продуктов или брендов.

Проект: Paintblast Vol.1 Автор: Девид Милан (David Milan)

Проект: Adobe Creative Cloud 2018 Автор: Руслан Хасанов | Проект: Masked Автор: Рик Остенбрук (Rik Oostenbroek)

Проект: Paintwaves Автор: Ари Вейнкл (Ari Weinkle) | Проект: MI Автор: Рик Остенбрук

Комментарий переводчика: бесспорно, интерес к традиционному искусству каллиграфии возрос за счёт диджитализации процесса рисования, и это прекрасно!

5. Vivid & Bright Colours / Gradients / Яркие цвета, градиенты


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

Проект: Electric Objects Автор: Роуз Пилкингтон (Rose Pilkington) | Проект: Magic.co Автор: Людмила Шевченко

Проект: Daily Posters Автор: Магдиель Лопес (Magdiel Lopez)

Комментарий переводчика: сейчас яркие градиенты везде, но не устанем ли мы от этой пестроты к 2019? Не возьмусь прогнозировать, впрочем, даже если устанем, дизайнерам будет сложно отказаться от этого приёма, потому что игра с цветом сама по себе обогащает картинку и делает прочие украшательства необязательными.

6. More animated 3D merged with 2D / Больше 3D-анимаций в 2D-дизайне


Как и в случае с технологиями AR, ожидается, что многие дизайнеры начнут совмещать 3D-графику (а в особенности анимацию) с 2D-дизайном. Именно это сделал в серии постеров талантливый дизайнер под псевдонимом Baugasm.

Проект: Daily Posters Автор: Baugasm

Комментарий переводчика: анимировать всё, что может быть анимировано — фактически девиз этого года. Это касается как графического дизайна, так и всевозможных интерфейсов. Использование анимации в мобильных приложениях частично освещено в этой статье Ника Бабича. О том, как используется анимация в iFunny — тут.

7. Flexible 3D / Широкие возможности 3D


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

Проект: Nike Vapormax Автор: MVSM

Проект: Blobs with Medium Автор: Винсент Швенк (Vincent Schwenk)

Проект: Covestro DC Автор: Виталий Гроссман

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

8. More Artful Photography / Более креативные фотосъёмки


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

Проект: Monkifesto Автор: Snask

Проект: Aizone Автор: Sagmeister&Walsh

Проект: Nike AMD Revolution Автор: Happy Finish

Комментарий переводчика: говоря о креативных фотосессиях, нельзя не вспомнить Pokras Lampas. Вопрос только, являются ли его каллиграфические шедевры «оформлением» съёмочной площадки или сама фотосъёмка — всего лишь декорация к его потрясающим работам?

9. More (animated) Retro-Illustrations / Анимированные иллюстрации в стиле ретро


Одним из главных трендов 2018 года будут современные работы в ретростиле. Продуманная анимация (например, добавление едва уловимых движений или глубины плоскому рисунку) также будет применяться всё чаще — просто для красоты или чтобы сделать повествование более запоминающимся.

Проект: PSB Refinance Автор: Кирилл Павлов

Проект: Bare Witness Автор: Re Agency

Проект: Inside the Head Автор: Сара Свенссон (Sara Svensson)

Комментарий переводчика: не думаю, что интерес иллюстраторов к ретро-стилю когда-либо пройдёт. Потому что это такой стиль в квадрате («стиль на стиле»), выверенный годами. Да и смотреть на анимированные работы иллюстраторов, например, Маркуса Магнуссона (Markus Magnusson), не надоедает.

10. Color-Gel Photography (use of colourful light) / Цветокорректирующие гели


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

Проект: Nude Coca-Cola & Nude Pleasure Автор: Local Preacher

Проект: Unknown Автор: Патрис Брилла (Patrice Brilla) | Проект: Neon Hoodies Автор: Тим Таддер (Tim Tadder)

Комментарий переводчика: вот эти фотографии реально претендуют на звание произведений современного искусства. Пегги Гуггенхайм бы их купила.

11. Responsive Logos / Адаптивные логотипы


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

Проект: Responsive Logos Автор: Джо Харрисон (Joe Harrison)

Комментарий переводчика: очень приятная тенденция, которая, впрочем, сейчас уже воспринимается как must-have для любого серьёзного бренда.

12. Simpler semi-3D Logos / Упрощённые логотипы с элементами 3D

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

Проект: Formula 1 Автор: Wieden + Kennedy | Автор и проект: Firefox

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

13. Custom «Arty» Typefaces / Необычные гарнитуры шрифтов


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

Проект и автор: Жанна Батель (Jeanne Bataille)

Проект: Vi Novell Автор: Atipus

Проект и автор: Abschluss HSD

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

14. More (interactive) 3D in Web Design / Более интерактивный 3D-дизайн веб-сайтов


В области веб-дизайна в 2018 году также ожидается распространение 3D-элементов, позволяющих экспериментировать с глубиной, движением, текстурой и перспективой. Веб-сайт с такими элементами и средами становится по-настоящему уникальным, он наверняка больше понравится и запомнится пользователю. Специалисты модного ателье Atacac, например, создали интерактивный футуристичный шоу-рум, в котором пользователи могут изучить новую коллекцию одежды в виртуальном трёхмерном мире. Ещё один пример, на который стоит обратить внимание, — анимированные 3D-скульптуры от компании The Artery.

Проект и автор: Atacac 2017 Yearbook

Проект и автор: The Artery

Комментарий переводчика: эта тенденция, очевидно, обусловлена улучшением качества и повышением скорости интернета. Встреченный забавный пример интерактивного сайта-игры — www.foosballworldcup18.com

15. Interactive Mouse Pointer / Интерактивный курсор


Интерактивный курсор открывает новые возможности для взаимодействия пользователей с веб-сайтами. В зависимости от настроек конкретного веб-сайта пользователю доступны различные функции такого курсора при определённых взаимодействиях. Например, на странице дизайнера Бена Минго (Ben Mingo) интерактивный курсор начинает вести себя как магнит при приближении к элементам меню. А веб-сайт агентства Walking Men служит отличной иллюстрацией того, как интерактивный курсор может по-разному реагировать на различные действия. И это только начало. Впереди нас ждут всё новые варианты взаимодействий.

Проект: Folk Автор: Phoenix

Права и автор: Бен Минго (Ben Mingo)

Права и автор: Walking Men

Комментарий переводчика: на сайте www.foosballworldcup18.com, который я уже упоминала выше, курсор превращается в шар, идеально повторяющий динамику футбольного мяча в движении. Мелочь, но очень изящная.

16. Creative Website Loading / Креативное использование времени ожидания


Дни, когда на веб-сайтах использовались скучные полосы загрузки, остались в прошлом. Почему бы творчески не использовать время ожидания загрузки веб-страницы? Отличный пример — сайты студии Contemple и конференции Awwwards.

Права и автор: Contemple

Права: Awwwards Conference Дизайн и разработка: Adoratorio

Комментарий переводчика: всё больше сайтов используют креативные прелоадеры и экраны загрузки. Добавлю ещё примеров:
www.60fps.fr/en
ddt.jelvix.com
eeerik.com

17. Instagram Storytelling / Истории в Инстаграм


Это не столько дизайнерский тренд, сколько тренд среди дизайнеров. В 2017 году в Instagram появилось множество инноваций, в том числе Instagram Stories. С момента своего запуска эта функция завоевала любовь пользователей, и теперь всё больше дизайнеров и компаний используют её ежедневно. Отличный пример взаимодействия с подписчиками — профиль Алеса Несетрила (Ales Nesetril), автора успешной книги The Perfect Grid: A creative’s Guide to Instagram («Идеальная сеть: руководство по Instagram»), посвящённой этому вопросу. Умение правильно преподносить истории имеет решающее значение для создания аутентичного бренда, завоевания доверия клиентов и привлечения активных подписчиков. В 2018 году мы будем всё чаще видеть в Stories обучающие и «живые» видео, отчёты о текущей работе и т. д. Также ожидается, что дизайнеры будут чаще обмениваться страницами в соцсетях. Например, команда Mindsparkle уже пригласила коллег воспользоваться учётной записью @mindsparklemagazine в Instagram, чтобы пообщаться с подписчиками.

Комментарий переводчика: Stories в Instagram — не столько тренд среди дизайнеров, сколько тренд среди всех и вся.

18. 3D «Handmade» Artlook / 3D-хендмейд


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

Права: 3D Art Автор: Максим Шкрет

Комментарий переводчика: стремление к максимальному реализму в 3D- и 2D-дизайне мы наблюдаем уже довольно давно. Вспомним восхитительные Android Marshmallow’s Wallpapers, которые Google создали из бумаги.

19. Isometric Design & Photography / Изометрический дизайн и фотография


Чтобы представить трёхмерный мир в двух измерениях, используется изометрическая проекция. Раньше эту технику применяли в основном в технических чертежах, но затем её открыли для себя дизайнеры. Фотография, иллюстрации, 3D-дизайн, иконография — изометрический дизайн сейчас на пике популярности! В 2018 году можно ожидать появления ещё более интересных работ.

Права: Ultraviolet Break of Day Автор: Field.io

Проект: Abstractions Vol.1 Автор: Мохамед Самир (Mohamed Samir)

Проект: Isometric House Автор: Анджела Чан (Angela Chan)

Комментарий переводчика: интерес к изометрии настолько велик, что трудно даже выделить отдельные работы. Объясняется он, видимо, тем визуальным удовольствием, которое испытываешь, глядя на изометрические миры. Perfection!

Jing Zhang for PlayStation | Level Up

Проект: Increment Mag issue 4 Авторы: Cristian Malagón Garcia, Nuria Madrid

20. Adding Depth to Flat Design / Добавление глубины плоскому дизайну


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

Права: Nike Promotion Ads Автор: Ярдсон Альмейда (Jardson Almeida)

Права: Flyknit Lunar 1 & 3 Автор: Каллум Нотман (Callum Notman)

Комментарий переводчика: стремление к «реализму» интерфейсов и пользовательских взаимодействий с ними, заложенное ещё Google Material Design, продолжает набирать силу. И чем лучше ваш дизайн имитирует реальный мир, тем больше внимания он получит в этом году.

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

habr.com

20 актуальных графических приёмов — Дизайн на vc.ru

Перевод материала дизайнера Филипа Тринера.

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

3D-натюрморты

В течение 2016-2017 годов количество дизайн-проектов с использованием технологий 3D постоянно увеличивается. Следя за творчеством таких ведущих 3D-художников, как ManvsMachine и Питер Тарка (Peter Tarka), можно предположить, что в 2018 году 3D-натюрморты станут ещё более популярными. Особенно это касается сотрудничества с брендами, а также логотипов и продакт-плейсмента.

Больше дизайна в дополненной реальности

Быстрое развитие технологий дополненной реальности (AR, augmented reality), будет заметно не только в видеоиндустрии, индустрии игр и мобильных приложений. Мы уверены, что AR вполне может увлечь и дизайнеров. Прежде всего, с помощью мобильных устройств. Источником вдохновения могут стать работы дизайн-студии DIA Studio, которая использует технологии интерактивной 3D-типографики на обычных предметах.

Больше 3D-типографики

В 2018 году 3D-типографика станет ещё более популярной. Самое главное для дизайнера — быть впечатляющим и креативным. Поскольку технологии 3D — эффективное средство общения с аудиторией и действенный метод привлечения внимания к продукту, у корпораций (например, у Nike) возникла потребность использовать их. Кроме того, мы, конечно, увидим и больше анимации в 3D.

Оцифровывание ручной работы

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

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

Яркие и насыщенные цвета и градиенты

Градиент снова в моде, и, скорее всего, эта тенденция сохранится, однако претерпит некоторые видоизменения. Особенно благодаря использованию ярких и насыщенных цветов вместе с разнообразными текстурами. Градиенты нового поколения будут создаваться с эффектом двутонового изображения (Duotone).

Больше 3D-анимаций, объединённых с 2D-изображениями

Как и в случае с упомянутым выше трендом в AR, больше дизайнеров будут объединять 3D-изображения (в особенности анимации) с плоским 2D-дизайном. Примером может служить серия изображений, созданная талантливым дизайнером Baugasm.

Гибкий 3D

В 2016 и 2017 году 3D-дизайн сделал огромный шаг вперёд. В будущем граница между реальностью и фантазией станет ещё более размытой и менее заметной.

Можно предположить, что в 2018 году увеличится количество используемых в дизайне органических форм и движений: 3D-работы и анимации станут ещё более привлекательными. Например, дизайнеры начнут использовать жидкие формы и движения, которые нам давно знакомы из реальной жизни.

Больше креативных фотографий

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

Анимированные ретро-иллюстрации

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

Съёмка с использованием цветных (гелевых) фильтров

Цветные фильтры — ещё один тренд среди фотографов, который будет набирать популярность. Этот метод позволяет бесконечно экспериментировать, создавая варианты интересного цветного освещения. Используя два или более оттенков, можно создать интересные эффекты, которые невозможно повторить в Photoshop.

Адаптивные логотипы

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

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

Упрощённые полу-3D-логотипы

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

Претенциозные шрифты, созданные на заказ

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

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

Больше интерактивных 3D-элементов в веб-дизайне

Интерактивные 3D-элементы — один из основных трендов в веб-дизайне в 2018 году. Они играют с глубиной, движением, текстурой и перспективой. Благодаря 3D-элементам и моделям каждый сайт по-своему уникален, он становится эстетичнее и удобнее для пользователей.

Например, ателье Atacac разработало интерактивный футуристический выставочный зал, в котором пользователи могут в виртуальной реальности познакомиться с новой коллекцией. Ещё один интересный пример — анимация 3D-скульптуры, созданная креативной студией The Artery.

Интерактивный курсор

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

Например, сайт дизайнера Ben Mingo: вблизи меню курсор ведёт себя как магнит. Курсор также может по-разному реагировать на некоторые действия, что отлично иллюстрирует дизайн сайта Walking Men. Интересно, что ещё придумают дизайнеры.

Креативная загрузка сайта

Прошли времена скучных полос загрузки. Почему бы не использовать время, пока сайт загружается? Ниже представляем вам два замечательных примера — Contemple и Awwwards.

Сторителлинг в Instagram

Это не тренд в дизайне, но тренд, набравший популярность среди дизайнеров. 2017 год был годом большого количества нововведений в Instagram. Функция добавления «историй» с самого начала стала популярной среди дизайнеров и брендов, которые пользуются ей каждый день.

Например, Алес Несетрил (Ales Nesetril), автор книги «Идеальная сеть: креативное руководство по инстаграму», умело использует «истории» для взаимодействия с аудиторией. «Истории» играют важную роль в создании правильного имиджа бренда и помогают собрать преданных подписчиков.

В 2018 году креативное использование tutorial, прямых эфиров, Work-in-progress и других тенденций однозначно будет набирать популярность. Мы также считаем, что дизайнеры чаще будут обмениваться аудиторией: наша редакция Mindsparkle magazine готова приглашать больше дизайнеров на денёк воспользоваться аккаунтом журнала и пообщаться с аудиторией.

Стилизация 3D-работ под искусство ручной работы

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

Изометрический дизайн и фотография

Изометрическая проекция — это метод визуального представления трёхмерного объекта в двух измерениях. Прежде этот метод использовался преимущественно в черчении. Теперь о нём узнали и дизайнеры. В фотографии, иллюстрации, 3D-дизайне или иконографии — изометрический дизайн, безусловно, сейчас в моде, и в 2018 году он станет ещё более креативным.

Эффект глубины в плоском дизайне

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

#дизайн

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать

vc.ru

Топ 10 Трендов Графического Дизайна 2020

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

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

Цветная тема оформления

Первое, что я смог выделить: пользователям наскучили однотонные веб-страницы, мобильные приложения и постеры. Это поняли и мировые бренды, вроде Apple, Samsung, Hublot, а также топовые мессенджеры вроде Telegram.

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

Топ 10 Трендов Графического Дизайна 2020 цветная схема

Пример использования яркой цветовой схемы


Вот первое противоречие: темный также в моде. Однако речь идет больше о черных оттенках, нежели синих или темно-зеленых. Элегантный черный тон в сочетании с минимализмом привлекает очень большое количество пользователей.

Top 10 Graphic Design Trends 2020 users

Сайт сообщества дизайнеров Everest – яркий тому пример. В январе 2019 он получил звание «Лучший дизайн месяца» согласно рейтингу Awwwards. Telegram X, Messenger, Skype примеры мессенджеров, добавивших темную тему оформления.

Однако с трендом «Darkness», как его многие назвали, стоит быть осторожным. Во-первых, он придирчив к ярким оттенкам. Можно добавлять теплые цвета, вроде красного или желтого, но:

  • они должны быть матовыми;
  • цветные элементы должны быть маленькими и в ограниченном количестве.

Интерактивные разработки

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

Топ 10 Трендов Графического Дизайна 2020 пример

Хороший пример – Sterling, также попавший в рейтинги Awwwards. Можно долго описывать возможности этого сайта, однако лучше зайдите сами и попробуйте.

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

Визуальная деформация

Еще раз: хороший дизайн привлекает внимание и не позволяет спустить взгляд. Как этого добиться? Заставить аудиторию рассматривать все элементы, дабы понять суть картинки. Иными словами, можно поиграть с оптическим восприятием человека.

Дело в том, что наш мозг во многом построен на шаблонах. Один из них – симметричные, прямые картинки. Но если эти правила нарушены, мозг не будет проходить мимо, а захочет разобраться и понять посыл. Так, он посылает нам сигналы, через которые, в 90% случаев мы останавливаем взгляд на деформированных картинках.

Топ 10 Трендов Графического Дизайна 2020

Примеры визуальной деформации в графическом дизайне


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

merehead.com

Оставить комментарий

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

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