Connect with us

Дизайн и прототипирование

Почему градиенты вернулись в 2018?

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

AppTractor

Опубликовано

/

     
     

Градиент – это вспышка ярких цветов для привлечения внимания.

Это утверждение могло быть правдой в 1995 году, когда веб-дизайнеры использовали градиенты для расширения цветовой палитры, добавляя уникальные элементы на свои веб-сайты. Вспомните старые добрые 90-е годы, когда мы даже пользовались «Word-art», чтобы добавить немного профессионализма в наши школьные презентации – а теперь мы называем это плохой идеей! Уф !! Но знаете что? Может быть, мы двигались в правильном направлении.

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

Как все началось?

Мы должны вернуться в 2014 год, когда все помешались на плоском дизайне. Google представил свой Material-дизайн, а Windows – Metro. Это выглядело круто и свежо по сравнению с захламеленным скеоморфическим дизайном, который уже выглядел устаревшим в то время. Новые парадигмы отлично подходили для мобильных устройств с низким разрешением, где дизайн выглядел чистым, но, увы, нас ограничивали в использовании различных цветов и с появлением мобильных устройств с более высоким разрешением они уже не оказывают такого же эстетического воздействия.

Можете ли вы назвать более 20 “плоских” цветов?

Готов поспорить, что не можете. Выбор плоских цветов ограничен.

Тренды мобильного UI-дизайна в 2018

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

Итак, что за суета о возрождении градиентов в 2018 году?

Градиенты в 2018

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

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

Вот несколько примеров, которые подтверждают это убеждение:

Pantone Color Institute предсказывает глобальные тенденции в цветах и консультирует компании в вопросах создания брендов. Неудивительно, что в  этом году они выбрали загадочные фиолетовые оттенки цветом года.

Ультрафиолет стал цветом 2018 года: что он значит?

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

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

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

Советы по созданию превосходных градиентов

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

Не выбирайте цвета случайно

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

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

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

Представляем трехточечный градиент

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

Еще один совет – и обратите особое внимание на него, потому что не многие люди обращают на это внимание. Когда вы создаете градиент от сплошного цвета до прозрачного (эффект затухания цвета), убедитесь, что обе точки имеют одинаковый цвет, как показано на рисунке ниже. Разные цвета в середине создадут «цвет фазы перехода» с 50% непрозрачностью вместо визуально гладкого эффекта.

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

С чего начать?

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

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

Вот некоторые из иллюстраций, которые я сделал, вдохновляясь от природы:

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

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

Надеюсь, вам помогут эти ссылки.

Комментарии
Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru.
Advertisement
Click to comment

You must be logged in to post a comment Login

Leave a Reply

Дизайн и прототипирование

Будущее UX дизайна: за пределами экрана

Альберт Шум, вице-президент Microsoft по дизайну, рассказывает о будущем осмысленного дизайна в мире многих устройств – в переводе UX.PUB.

AppTractor

Опубликовано

/

Автор:

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

Нарушайте устоявшиеся шаблоны осмысленным дизайном

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

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

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

Создайте стол

Дизайн занял свое место за столом — теперь возьмите его дальше

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

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

Найдите свою модель работы

Статические системы не могут идти в ногу со временем — найдите свои дизайнерские модели

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

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

Выйдите на улицу

Идите и найдите новую точку зрения

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

Партнерство Microsoft на саммите «Дизайн для инклюзивности» этим летом стало вдохновляющим опытом. Там повсюду были любящие свое дело дизайнеры. Еще столько предстоит узнать о том, как индустрия дизайна думает о таких вещах, как разнообразие, инклюзивный подход и доступ к дизайнерскому образованию, и мы только начинаем привлекать больше перспектив и равенства в эту сферу.

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

Работа, которую надо выполнить

Зона дилеммы, в которой мы находимся. Желаемый уровень смысла — это то, куда мы стремимся

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

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

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

Будьте свободным радикалом

Refik Anadol, «Melting Memories» — результат совместного творчества машины и человека

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

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

Комментарии
Продолжить чтение

Дизайн и прототипирование

Победители Material Design Awards 2018

Google объявил победителей Material Design Awards 2018.

AppTractor

Опубликовано

/

Автор:

Google подвел итоги ежегодного конкурса  и выбрал лучшие приложения, выполненные по заветам Material Design.

В категории Выражение победило приложение с рецептами KptnCook:

В Инновациях – Lyft:

Лучшим дизайном в Опыте стало приложение Simple Habit Meditation для мобильной медитации:

Ну а лучшей адаптацией стали кроссплатформенные подкасты Anchor:

 

 

Комментарии
Продолжить чтение

Дизайн и прототипирование

Pandao: волшебная пилюля, от которой конверсия взлетает ракетой

Мы поговорили с людьми, которые формируют внешний вид и внутреннее содержание сервиса Pandao: Глебом Бодячевским, дизайнером продукта, и Владом Бреусом, руководителем направления аналитики. Они рассказали, как день за днем с помощью аналитики делают сервис удобнее для пользователей.

AppTractor

Опубликовано

/

Автор:

Pandao — один из крупнейших интернет-магазинов, которые продают товары из Китая с доставкой в Россию. По данным пресс-службы Mail.Ru Group, во втором квартале 2018 года ежемесячная активная аудитория Pandao составляла 6 млн. человек и продолжала расти. Общее количество скачиваний мобильного приложения превысило 20 млн.

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

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

Вот как этот процесс организован у нас в Pandao.

С чего начинали, что изменилось за год

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

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

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

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

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

Как исследуем аудиторию

Знание аудитории и сервис — решают. Когда проект только запускается, тебе нужно понять, какая аудитория у него будет. Чтобы развивать проект, нужно знать, как с этой аудиторией работать.

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

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

Наши метрики достаточно стандартные для e-commerce: конверсия сессии, средний чек, ретеншн пользователей на разные дни. Чтобы оценить долгосрочный эффект, используем именно ретеншн. Если грубо объяснять — это удержание, доля пользователей, которые возвращаются к нам по прошествии определённого периода времени. Часто бывает, что изменения не выстреливают в краткосрочном эффекте, но на долгой дистанции они выигрывают за счет пользовательского опыта. Такие штуки мы тоже стараемся оценивать.

Эволюция элементов интерфейса — карточка товара приложения год назад и сейчас

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

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

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

Pandao — покупай выгодно
Pandao — покупай выгодно
Разработчик:
Цена: Free

Как используем аналитику в дизайне

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

Эволюция корзины покупок

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

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

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

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

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

Где узнать об этом больше

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

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

Комментарии
Продолжить чтение

Дизайн и прототипирование

Дизайн уведомлений для приложений

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

AppTractor

Опубликовано

/

Автор:

TL;DR – в чем смысл:

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

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

Читать: https://medium.muz.li/designing-notifications-for-applications-3cad56fecf96

Комментарии
Продолжить чтение

Реклама

Наша рассылка

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

Вакансии

Популярное

X
X

Спасибо!

Теперь редакторы в курсе.