Тренды 2019 дизайн – свежие, горячие и смелые / Тренды / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY

Содержание

не только цвет года Pantone

Законодатель цветовых трендов Pantone 6 декабря 2018 года объявил цвет года. Им стал «Живой Коралл 16-1546»:

Pantone написал о том, где можно с успехом использовать этот «жизнеутверждающий цвет»

Pantone написал о том, где можно с успехом использовать этот «жизнеутверждающий цвет»

В сети уже подхватили тренд и показали, какими будут все сайты в 2019 году:

В прошлом году цветом года был «Ультра-фиолет»: в 2019 году все изменится :-)

Но одним лишь цветом дизайнеры не обойдутся. Вместе с руководителем отдела дизайна TexTerra, Святославом Грошевым, мы рассмотрим, что нового в дизайне на 2019 год:

  1. Основные тренды.
  2. Тренды дизайна упаковки.
  3. Тренды в дизайне пользовательского интерфейса и опыта (UI/UX).
  4. Тренды в типографике.
  5. Тренды в моушн-дизайне.
  6. Тренды в брендинге и дизайне логотипов.

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

Основные тренды

Яркие цвета

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

Яркие сочные цвета – услада для глаз и тренд

Асимметричность

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

Ассиметричный паттерн

Анимированная графика

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

Использование анимации в дизайне: по-прежнему в тренде

Использование градиентов

Тренд начал оформляться в 2017-ом, укрепился в этом году и будет актуален в 2019. А еще он активно используется в брендинге.

Пример градиента в дизайне от Nectar.io Как создать макет в Figma

Изометрические иллюстрации

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

Изометрика в дизайне

Дополненная реальность (AR)

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

Пример дополненной реальности (AR)

Уникальные и аутентичные фотографии

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

Коллектив TexTerra с празднования 11-летней годовщины образования компании Как обработать фото онлайн: 90+ инструментов для работы с изображениями

Минималистский дизайн

Выделить что-то одно и сделать красиво: тренд решает такую задачу. Нет – «мусорному» дизайну. Да – смыслу!

Пример минимализма в дизайне

Максималистский дизайн

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

Пример максимализма в дизайне

Тренды дизайна упаковки

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

Пример дизайна упаковки

Тренды в дизайне пользовательского интерфейса и опыта (UI/UX)

Интерфейс мобильных приложений

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

Пример мобильного интерфейса

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

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

Пример негативного пространства в дизайне

Иллюстрации в веб-дизайне

Недавно TexTerra делала рассылку «9 примеров, когда без иллюстратора вышло бы не очень». Чуть позже появился десятый пример – комикс про Человека-редактора, целиком состоящий из иллюстраций. В 2019 году мы продолжим.

Картинка на анонс для комикса «Человек-редактор: начало. Выпуск № 1» Фото для блога: 40 источников бесплатных картинок для коммерческого использования

Иллюстративные значки

Такие иконки привлекают внимание, быстро помогают пользователю понять свое назначение.

Пример иллюстративных иконок в дизайне

Жидкие, геометрические и асимметричные фигуры

Liquid Forms были в тренде и в 2017, и в 2018. Комбинируя их с градиентами и яркими красками, дизайнеры по-прежнему задают тон в индустрии.

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

Видео на фоне

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

Пример фонового видео на сайте

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

Micro Interactions – анимированные элементы, которые используются в создании визуальных эффектов в мобильных платформах. Поскольку в пользовательских интерфейсах (UI) сегодня множество элементов, не так уж сложно обнаружить там такие взаимодействия.

Пример микровзаимодействий

Жирные шрифты как альтернатива изображениям

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

Когда шрифты вполне могут заменить собой иллюстрацию

«Разорванная» модульная сетка и перекрывающиеся элементы

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

Пример разбитой модульной сетки в дизайне

Трехмерные иллюстрации

3D-иллюстрации проникают во все сферы дизайна, потому что это эффективный способ создавать эмоции у людей. Не зря их используют крупные бренды – nVidia, Apple, Megogo.

Пример 3D иллюстрации

Тренды в типографике

Акцент на типографику

Шрифты из «подручного средства» все больше становятся самостоятельным элементом в дизайне.

Четкая акцентуация на типографике

Собственные шрифты

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

Образец брендированного шрифта

Большие и смелые шрифты

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

Пример больших шрифтов в типографике

Контурная типографика

С помощью контурных шрифтов можно расставлять нужные акценты и привлекать внимание к отдельным частям рекламных и информационных текстов.

Пример контурной типографики в дизайне

Использование шрифтов с засечками

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

Пример шрифтов с засечками в дизайне [Запись вебинара] Какой должна быть типографика на сайте?

Тренды моушн-дизайна

Зернистость

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

Пример использования эффекта зерна в анимированной графике

Плоская 2D-анимация

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

Видеоинфографика, сделанная в шуточном стиле для компании «Жалюзи.рф»

Трехмерная графика в анимации

Рекламное видео, выполненное в 3D-графике, показывает хорошую конверсию – это зрелищно и красиво. Бренды продолжат использовать тренд в 2019 году. И не только они (привет, «Диснею»!).

Пример трехмерной графики в анимации Делаем живые изображения из статичных. Подробнее

Тренды в брендинге и дизайне логотипов

Коллеги из Logaster собрали и прокомментировали лого-тренды 2019 года.

Упрощение

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

Примеры упрощения в логотипах

Потерянные фрагменты

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

Примеры потерянных фрагментов в логотипах

Текстовые лого

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

Примеры текстовых логотипов

Градиент

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

Примеры градиента в логотипах

Неон

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

Примеры неона в логотипах

Акцент на деталях

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

Примеры акцента на деталях в логотипах

Вертикальное размещение

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

Примеры вертикального размещения в логотипах

Углы и сгибы

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

Примеры углов и сгибов в логотипах

Округлость

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

Примеры округлостей в логотипах

Полоски

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

Примеры полосок в логотипах

Hand-drawn

Максимально естественные и чистые оттенки различных цветов и нетвердые линии – иконки на таких логотипах часто имитируют те или иные виды художественного рисунка (от угля до акварели). Hand-drawn стоит особняком от большинства других трендов, так как не соответствует общей тенденции к упрощению. И это прекрасно, ведь таким образом могут продемонстрировать свою индивидуальность творческие личности (дизайнеры, художники, стилисты) и компании, деятельность которых связана с бьюти-сферой, товарами для творчества, натуральной косметикой или любой другой тематикой, где приветствуется креативность.

Примеры hand-drawn в логотипах

Тонкие линии

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

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

Примеры тонких линий в логотипах

Гербы и эмблемы

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

Примеры гербов и эмблем в логотипах

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

Анти-тренды дизайна

Святослав критично прошелся по теряющим актуальность тенденциям. Учтите, что это не истина в последней инстанции, и все может поменяться (об этом вы прочитаете в «Трендах дизайна-2020»).

Трехмерные картинки с Shutterstock и других фотобанков

По стилю исполнения такие картинки напоминают стоковые

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

Глитч (эффект искажения)

Повсеместное использование глитча стало надоедать

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

Реалистичность в landing pages (объем, отражения)

Милая «мультяшность + реалистичность», но уже заезженная

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

Плоские иконки

Пиктограмма часов или звездочки в круге – пример значков, которые вставили, «чтобы были»

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

Сайты на конструкторе

Еще один сайт на «Тильде» – практично, но никакой уникальности

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

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

Это и раньше не нравилось, если честно…

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

ТРЕНДец: вместо заключения

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

Думайте, создавайте, экспериментируйте. Создавайте хороший дизайн, а иначе…

Звезда-круг-квадрат-треугольник

С наступающим Новым годом!

trendy-dizayna

Тренды графического дизайна 2019 года. Инфографика

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

Открытая композиция в дизайне

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

Полное 3D погружение

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

Антигравитация. Парящие объекты

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

Страна грез. Насыщенные цветовые решения

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

Эффект металлика

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

Эффект жидкости

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

Максимальный упор на типографику

Работа с текстом, как неотъемлемая часть графического дизайна, безусловно, следует определенным тенденциям. Некоторые не меняются годами, другие (вроде стеклянных букв из web 2.0) довольно быстро исчезают. Одно можно сказать наверняка – работа со шрифтом в трендах 2019 года определенно будет занимать главенствующее место. Особенно в веб дизайне. Упор на шрифтовые композиции, как и размер шрифтов будет максимальным.

Текст на плашке – эффект ретро

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

Альтернативное искусство

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

Реализм с 2D элементами

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

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

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

 

Цветовые решения для веб-сайтов в 2019 году

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

Мнение о предлагаем товаре или услуге у людей складывается в течение первых 1,5 минут, при этом их оценка на 90% зависит от того, какой цвет выбран в качестве основного. Правильно подобранная цветовая гамма, положительно влияет на восприятия контента на странице. Грамотное использование цветовой палитры положительно влияет на понимание содержания отраженного на ресурсе.

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

Яркие тона: баланс, сочетаемость и ретро-стиль 

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

пример градиентных тонов пример градиентных тонов

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

Пример розовых оттенковПример розовых оттенковКод RalКод Ral

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

Пример ярко красного Пример ярко красного

Красный код RalКрасный код Ral

Простота и мягкость: серые и зеленые оттенки, простой красный и мягкий желтый

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

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

Серые тона пример Серые тона пример

Код RalКод Ral

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

Мягкие оттенкиМягкие оттенки

Код RalКод Ral

Природные оттенки: прикасаясь к земле и сочетая синий с зеленым

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

Пример природного Пример природного

Код RalКод Ral

Минимум и максимум: очень черное и цвета будущего

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

Пример черного Пример черного

Код RAL черного Код RAL черного

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

Пример футуристичного Пример футуристичного

Код Ral Код Ral

Каков бы ни был ваш выбор, изменив свой старый дизайн, вы поддержите главный тренд 2019 года — поворот к чему-то новому и ранее не использованному. Поэтому дерзайте и пробуйте!

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

Или

закажите редизайн у нас

Получить предложение!

 

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

Остались вопросы?

Не нашли ответ на интересующий Вас вопрос? Или не нашли интересующую Вас статью?  Задавайте вопросы и темы статей которые Вас интересуют в комментариях.

Получайте бесплатные уроки и фишки по интернет-маркетингу

Тренды UI дизайна в 2019

Почему хороший сервис невозможен без хорошего UI?

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

Все тренды веб дизайна 2019, о которых сегодня пойдет речь, реально воплотить в жизнь благодаря большей производительности техники и самих браузером (например, новый компилятор Мозилла в 10-15 раз быстрее, чем предыдущий). Благодаря этому открываются новые возможности для веб-дизайна. И этими возможностями нужно пользоваться, чтобы не оказаться на обочине по сравнению с более быстрыми и современными конкурентами. Итак, какие они, web design trends 2019?

Тренд UI дизайна №1 Контекст

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

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

контекстный дизайн портала от Evergreen

Тренд дизайна интерфейсов №2 Шрифты и типографика

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

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

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

Тренд дизайна сайта №3 Кастомные иллюстрации

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

тренды дизайна 2019. Кастомные иллюстрации от Evergreen

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

Веб дизайн, тренд №4 Изометрический дизайн

Этот тип дизайна был в тренде и в прошлые года, но крепко держит позиции в 2019 как способ придания дополнительного объема без использования 3D.

Изометрический дизайн - тренды дизайна 2019

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

тренды веб дизайна, Изометрия

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

Тренд веб дизайна 2019 №5 Глубокие плоские изображения

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

тренды в веб дизайне 2019. Глубокие плоские изображения

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

Современный дизайн веб сайтов, тренд №6 — Градиент 2.0 и яркие цвета

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

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

Дизайн страницы 404 с ярким градиентом от Evergreen

Тренд в дизайне №7 Темный фон

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

тренды в дизайне сайтов. Темный фон

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

Дизайн с темным фоном пример

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

Еще один свежий тренд UI №8 Асимметрия

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

Design trends №9 Негативное пространство

Негативное пространство – пустое пространство, расстояние между элементами (к нему же относится принцип «выпадающего меню»). В 2019 году используется всё чаще, объединяет в себе анимацию, игровой формат и освобождают массу пространства для полезной информации.

Лучше всего негативное пространство работает в связке с типографикой и контентом. Мы можем описать идеальную формулу его использования как “толковый контент + клевая типографика + много пустого места = трендовый дизайн”.

Анимации и негативное пространство

Тренд дизайна №10 Естественные фотографии

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

Естественность в дизайне. Тренды 2019

 

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

 

Аппетитный дизайн в доминос

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

Современный дизайн, хайповый тренд №11 Анимации

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

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

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

 

Пример анимации в дизайне. дизайн тренды 2019

Огромное значение также уделяется логотипам, которые при помощи анимации становятся не просто современнее, но и несут массу информации с первых секунд пребывания пользователя на сайте. Logo design trends также имеет тенденцию к “оживлению”. Движение здесь играет большую роль, чем цвет, свет, текстура и расположение элементов. Анимация рассказывает историю, делая логотип органичной частью дизайна.

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

Новинки веб дизайна и тренд UI №12 3D-рендеринг

3D-рендеринг и CG-аугментация реальных отснятых материалов и изображений уже давно заняли своё место среди web design trends. До увеличения мощности браузеров  дизайнеры избегали использовать в интерфейсах сайтов сложную 3D-графику. Но более мощные браузеры позволяют сделать картинку сайта более живой и даже кинематографичной.

3d дизайн. web design trends

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

 

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

Инновационный тренд в UI №13 Дополненная реальность

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

Дизайн с использованием дополнительной реальностью

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

Экстраординарный тренд UI дизайна №14 Сюрреализм 

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

design trends. Сюрреализм в дизайне

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

И последний тренд в веб дизайне №15 Брутализм

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

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

На что делать ставку в UI/UX дизайне в 2019 году

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

Помимо перечисленных в статье ui design trends сейчас важно делать ставку на контент (наполнение сайтов). Задачей копирайтера будет вместе с дизайнером и маркетологом выделить ядро главных потребностей клиента и на основании их создать целостную UX/UI контентную структуру сайта. Подробнее читайте об этом в нашей статье “UX-копирайтинг vs контент”.

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


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

16.04.2019

Рейтинг: 5 / 5 (1)

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


Иллюстрация от 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 мы ещё увидим талантливых дизайнеров, которые пожертвуют всем ради карьеры нишевого специалиста. Время покажет.

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

Тренды в графическом и UI дизайне в 2019 году

Трёхмерная графика

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

1_8_wDgVE65cPxcWiewyvXrA

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

1_r0kSkMj1XUPQQYLMZzC_FA

Сложный примитивизм

1_E1xFAQSWzHdXRtHKdu8ijA

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

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

1_62jMNPY1ulMnQhUUxi-uzw

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

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

1_6nbNi-p6mLFb8b8BxHC4Jg

1_DdpcG4huvviJaiOAu4QNXA

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

1_WYgG8Sw7vLZvkt5jEPhgKA

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

Плоские геометричные узоры

1_5j0HXtWxEjQX9PVTsT0flg

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

1_idAvec7vJ33vfRaKKeWvlw

Как вы наверняка заметили, заглавной иллюстрацией к этой заметке также служит геометричный узор.

1_ZjuBGon3k6ej083uy6-Mww

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

1_0U8BNEzKxIUVQ1N1rqkrug

Анимация в интерфейсах и промо

1_uiURjky6CDACx4t1ki7g0g

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

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

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

1_CRqH6U_90KDyMKiPF9vHhA

1_Fhk1yNF7o1GUnM1LFP5I-A

Яркие полигоны

1_XgK7h8TlbAhhan_5wIrJIQ

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

1_n0MRmfUMrWGbQJLzqStEmA

Недавний ребрендинг RealtimeBoard со сменой названия на Miro — хорошее тому подтверждение

1_TOaKAqwaUw5MacHXdG2Yow

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

1_8-M4p05iXlFK_3B41rPsjA

Детализация иллюстраций

1_l96-bwPygWRQqfZuMeW6sw

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

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

1_3A3VRB__GiT4lA6LIlEP9A

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

1_8vFhygiL7m9qTeYlY1qDkw

1_LcelKUlDZtblnZz5TW04fA

1_BgpGao5sD2P6CF1Z_CaZ3Q

Источник: ДизайнКабак

Тренды дизайна 2019-2020. Да, это опять дуотоны, а еще — абстракция и тяжелые шрифты

Не так давно Sostav рассказал о запуске сервиса «Яндекс.Кью», а точнее — о дуотонах, которые легли в основу его дизайна. Тогда в сети вспыхнули обсуждения о том, что это вообще такое и зачем ОНО надо. А ведь это тренд уходящего года. О дуотонах, абстракции, плавности и о том, что было актуальным в 2019 и останется актуальным в 2020 в обзоре креативного директора агентства Otlichnosti Николая Артамонова.

Приглушенные цвета

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

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

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

Приглушенные цвета обрели смысловую коннотацию движения в будущее.

Например, яркие цвета, ранее используемые Apple в их рекламных материалах, и даже новые цвета iPhone, были заменены более спокойными тонами.

Неяркие цвета также вызывают ассоциации с естественностью.

Сложные градиенты и дуотоны

Этот тренд не сдает свои позиции последние несколько лет. Изначально градиенты использовались в качестве привлекательных фонов, как в этом примере из INC.

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

Grammarly использовал градиенты вместо плоских цветов в их графике социальных сетей, а Trello — для акцентирования внимания на заголовках блогов и инфографике.

Apple Card отлично иллюстрирует первый и второй тренды этой статьи — приглушенные градиенты.

Ну и Spotify.

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

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

Абстрактные иллюстрации

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

Иллюстрации от MailChimp обрели невероятную популярность за последний год.

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

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

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

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

Новаторы, вроде Slack, решают эту проблему простым добавлением своего лого в углу.

Тяжелая типографика

На протяжении последних нескольких лет минималистичные и рукописные шрифты теряют свою популярность. Особенно с крупными брендами.

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

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

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

SMLXL использует экстра-тяжелый шрифт только для отдельных коротких фраз.

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

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

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

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

Плавность линий

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

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

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

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

Естественные фото

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

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

С изображениями людей то же самое. Тренд на естественные цвета, позы, выражения лица. Никакой постановки.

Блестящие металлы

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

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