Цветовые переходы. Градиенты. Геометрия в разных формах

11 октября прошла лекция арт-директора студии Vintage Web Production Ольги Шевченко , посвященная трендам веб-дизайна и диджитала в 2018 году. Ольга является членом жюри Awwwards и каждый день просматривает сотни новых сайтов, разработанных агентствами и дизайнерами со всего мира. Это позволяет ей отслеживать новинки и тенденции веб-разработки и дизайна. Мы записали главные месседжи лекции, а с полной версией вы можете ознакомиться по ссылке .

Итоги 2017

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

Большое меню

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

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

Большое меню. Сайт radioaktivefilm.com

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

Fashion-эффекты

Глитч, морфинг, геометрия, взрыв цвета, минимализм. Мы с Дашей Шаполовалой, идеологом Mercedez-Benz Fashion Week в Киеве, обсуждали тенденции в моде, а я рассказывала о новых веяниях в вебе. И мы нашли общие черты в совершенно разных сферах.

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

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

Итак, согласно данным аналитиков Pinterest наибольшим спросом пользовались фотографии, содержащие:

1. Декорирование стен: + 637% по сравнению с предыдущим годом;
2. Домашние растения с фактурными листьями (patterned plants): + 553% ;
3. Элементы декора из металла: + 423;
4. Пол и предметы интерьера из бетона и терраццо (бесшовный мозаичный пол). Что-то подобное было в моде на Западе и у нас в 70-х, только у нас из пол из бетона, пусть и с узором, выглядел в те времена совсем мрачно. +316%;
5. Декорирование потолков: + 310%;
6. Роскошные, напоминающие дорогие СПА-салоны, ванные комнаты. К счастью, обошлось без золотых унитазов, но, но: 269%;
7. Приглушенный зеленый и его оттенки (sage ) — новый популярный нейтральный цвет, вместо белого, черного, серого и бежевого: + 170%;
8. Инкрустация из слоновой кости (т.н. bone inlay): +207%;
9. Деревянный пол: + 137%;

А теперь подробнее модном интерьере 2018.

Декорирование стен

Гладкие и чистые стены остались в прошлом, в 2018-м модно вешать на эти самые стены огромные постеры, картины и фотографии. И чем больше, тем лучше, с точки зрения количества или/и размера.

Все фото — pinterest.com

Мой дом — моя крепость, факт

Wall Art 2018 — так этот тренд называется на английском

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

Фотообои на всю стену — тренд 2018-го

Остановиться было трудно, вот еще фото стены детской комнаты:

Семейные ценности в тренде в 2018-м, - как бы говорит нам эта фотография

Тропические домашние растения как элемент декора квартиры 2018

Зеленый цвет в интерьере очень популярен уже второй год подряд, что неудивительно, учитывая его .

Отдых в таком интерьере если не снимет стресс полностью, то значительно его уменьшит:

Металлические декоративные элементы в интерьере 2018

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

Декоративный элемент дизайна 2018 — умывальник и кран

Мы честно не знаем, насколько удобен такой кран (и умывальник) в использовании, но знаем наверняка, что смотрится он невероятно изысканно

Не очень практичная штука, наверное. Ну и что!)

Терраццо и бетон для пола

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

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

Декорирование потолков

В 2018-м никто не ищет пятый угол, все ищут пятую стену. И находят ее - на потолке.

Обратите внимание на самый модный цвет 2018 года — ульрафиолет. Несмотря на его популярность у дизайнеров одежды (которые отталкиваются от запросов потребителя, узнать которые им помогают специальные аналитики из big data компаний), его редко используют в интерьере — уж слишком он сложный для интерьера дама или квартиры.

Тренды дизайна интерьера: потолок — это акцент

Роскошные ванные комнаты в интерьере 2018

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

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

Кроме того, для того, чтобы ванная выглядела стильно_и_дорого_тм, совершенно необязательно, чтобы она была черной, см. фото:

Припыленный зеленый — новый серый

Зеленый цвет, причем его приглушенные оттенки, могут выполнять в 2018-м роль нейтрального.

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

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

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

2. Детализация и сложность

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

Complementary Reality — это несомненно тренд, который еще в прошлом году начал набирать обороты. Графика, изображающая реальные объекты и их философию , всегда привлекает внимание. Что же такое CR? Картинка, состоящая из двух объектов: где одно изображено в стиле , и другое — как цифровая метафора.

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

Это еще одна тенденция, которая начала развиваться с 2017 года, авторская графика и уникальная иллюстрация действительно «в цене» у аудитории. Эскизы, созданные вручную , часто используют для презентации практически любого продукта или услуги. Будь то обложка фильма, книги или . Лучше всего это работает в сочетании с фотографией. Рисованные иллюстрации все чаще будут встречаться в графических проектах 2018-го года. Не важно, созданы они в 3D или в стиле «плоского» дизайна.

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

Пересечение и слияние стилей в одном проекте — это вызов для вашей дизайн-команды! Яркие цвета с градиентами и скетчи. Иллюстрации от руки и фотографии. Объединяйте различные варианты и творите.

А теперь немного о том, какие из тенденций остаются в тренде в 2018 . Они переходят из года в год непрерывно.

Постоянные тенденции графического дизайна

1. Типографика

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

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

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

3. Градиент и цветовые переходы

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

4. Симметрия и асимметрия

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

• эстетику;
• склонность к перфекционизму.

А среди недостатков — ординарность.

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

5. Геометрические фигуры

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

Программы для дизайна 2018

И еще несколько слов о программах для графического дизайна, которые рекомендуют использовать сегодня. Почти все крупные компании предлагают отличные и многофункциональные программы. Например, Sketch for web and UI design, Corel Draw, Adobe Photoshop, Adobe Illustrator. Существуют и бесплатные программы с открытым кодом для Linux, например, GIMP, но говорить о нем в рамках этой статьи бессмысленно, так как там ограничен функционал.

Графический дизайн одно из наиболее креативных направлений цифрового дизайна. В нем дизайнер сможет себя полностью проявить, все свои качества, умения, мастерство, и, конечно же, креативность. Наличие чувства вкуса в графическом дизайне особенно важно. Эта статья поможет вам лучше понять тренды графического дизайна и к чему нужно быть готовым в 2018 году (спойлер - он обещает быть ну уж очень захватывающим.). Итак, приготовьтесь в последним трендам графического дизайна. Английская версия статьи graphic design trends in 2018 .

1. Яркие цвета

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

2. Сложность и Детализация

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

3. Дополняющий Реализм

Графика, изображающая истинное состояние вещей, их суть будет актуальной. Что такое дополняющий реализм? Проще всего это показать с помощью графики. Визуальные изображения используется в качестве языка. Экспозиция, составляющая их 2ух предметов, где один изображен в стиле скевоморфизме, а второй в стиле метафоры. Наиболее эффективное взаимодействие с человеком через визуальные канали взаимодействия. По статистике ThomasReuters , больше 80% человек отдают этому предпочтение. Графический дизайн, иллюстрации и визуальный контент этому поможет. Мы его увидим и в дизайне 2019 года .

4. Скетч и рукописные иллюстрации

Тот графический тренд, который перетекает с 2017 в 2018 год. Авторская. Одна в своем роде, графике и в правду притягивает внимание зрителей. Практически для любой презентации товара/услуги пригодится этот стиль. Будь-то обложка фильма, книги или товара. Лучше всего это сочетается с фотографией или формальным изображением. Иллюстрации, нарисованные от руки, станут в тренды графического дизайна. Не имеет значения, 3D или плоский стиль вы станете использовать.

5. Пересечение Стилей

Неожиданный пункт, не так ли? Ключевая особенность графического дизайна 2018 года это креатив, и уникальность. Вы ведь помните, как стремительно развивался каждый тренд? Обычно его сначала подхватывает смелая компания, ориентированная на массовый рынок с их продуктом. Как Nike или Adidas, и затем их же действия повторяют дизайнеры по всему миру. Так почему же нам самим не сделать что-то уникальное, и сотворить настоящий креатив? Один из вариантов этого это пересечение и объединения разных графических стилей. Яркие цвета, градиент и скетч. Либо рисованные от руки иллюстрации и фото-контент. Комбинируйте разные варианты, и создавайте свое!

Всегда актуальные тренды

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

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

3. Градиенты/Переходы Плавные переходы цвета в изображениях и градиенты , подобно своим сородичам в веб дизайне являются вечно актуальными трендами. Впервые мир потрясло это в 2014 году, когда лишь некоторые компании начали их внедрять. С тех пор, переходы и градиенты заняли свое стойкое место на арене трендов графического дизайна. По информации US of Labor , графический дизайнер без опыта в Америке может претендовать на часовую ставку $23. С ростом его навыков будет расти и зарплата, которую он хочет. Цифровые агентства в Восточной Европе и Merehead взымает $30 в час, за профессионала с опытом более 5 лет в индустрии дизайна.

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

1. Перфекционизм
2. Эстетическое удовлетворение

1. Обыденность

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

5. Геометрия и ее формы Классика графического дизайна, не думаете так? Преподнесение изображений с помощью геометрических форм лучше всего подходит для супер узкого направления. Осторожно использует этот стиль графического дизайна в 2018 году, ведь вы можете загубить свою работу в край!

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

Ситуация на рынке достаточно неоднозначная. Практически все - крупные игроки, которые предлагают крутой и многофункциональный софт. Sketch для веб и UI дизайна, Corel Draw, Adobe Photoshop & Adobe Illustrator. Есть и бесплатное, open-source софт для Linux - GIMP, но мы не будем о нем говорить в виду ограниченного функционала. Несмотря на то, что Photoshop был разработан для редактирования и работы с фотографией, многие дизайнеры его предпочитают и сейчас. Однако первенство достанется только Adobe Illustrator в графическом дизайне. И вот почему:

1. Богатый набор инструментов. Вы можете легко работать как с 2D, так и 3D формами.
2. Векторный формат изображений. В типографии и печати от Вас всегда потребуют векторных исходных файлов. Только так Вы можете быть уверены, что макет будет 100% соответствовать печатному образцу.
3. Широкий ассортимент плагинов и дополнений.

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

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

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

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

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

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

Пример интерактивного скролла на сайте Volcano

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

SVG маски

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

Кто пользуется фотошопом, то там это можно сделать, просто вырезав маской дырку в слое. Либо наложением 6 квадратов. Мы для нашего клиента с помощью этой штуки сделали переход с экрана на экран. Открытие картинки из формы – тоже SVG маска. Но если посмотреть на макет, то он выглядит, как статическая картинка.

Canvas

Это уже сложно. Обязательно нужен человек с пониманием математических аспектов процесса. Некоторые вещи можно взять в библиотеках. Но В SVG нет синхронизации с курсором. А здесь есть.

Сайт Climachill от Adidas, к примеру.

Морфинг с буквой – это Canvas. Перелив градиентов - это Canvas. И это популярно уже несколько лет, но устареет не скоро. Потому что мало весит, и это 2D графика, которую сложно повторить. Подойдет тем, кто хочет много «вау» у себя на сайте.

3D+WEBGL

Направление будет развиваться. Когда вы делаете даже маленький, но качественный видеоролик на 1 минуту - это минимум 10 человек в команде. Когда в 3D - это 1 дизайнер. А webgl – это +1 разработчик. 3D может быть классическим, как на сайте Globekit. Выглядит фантастически, уникально. Хотя состоит из 6 слайдов всего.

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

VR

В марте 2017 появился первый сайт в VR. Их становится больше. Недавно сделали первую VR трассу на футбольном стадионе. Человек надевает маску, и ему кажется, что он на гоночной трассе.

Приспособление для виртуальных гонок от Audi.

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

AR

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

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

A frame

Это готовая библиотека, где можно найти все штуки для AR и VR. Можно посмотреть, как они работают, понаблюдать за ними в действии.

Поэтому я советую всем веб-дизайнерам идти доучиваться на 3D. Это сделает ваш сайт намного живее.

Google

Следите за ними. Они не стоят на месте. Есть такая штука, как Google experiments . Освободите пару часов времени, чтобы изучить всю красоту. Google проводит много экспериментов, к которым подключает разработчиков, агентства. Из последнего – использование big data.

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

WebVj

Очень новая заморочка. Построение страницы происходит на основе данных. Есть один японец, Масатацу Накамура , который особо серьезно этим занимается. Его графика сделана полностью программистом, а не дизайнерами. Он многое делает для Google Experiments.

Пример графики Масатацу Накамура, сделанной при помощи WebVJ

Трендосики

Самый задаваемый вопрос - “Какой цвет/шрифт/паттерн будет трендовым в следующем году?”. Я это называю “трендосиками”.

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

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