Учиться нужно у лучших. Именно поэтому мы подготовили для вас подборку из 15 вдохновляющих примеров приложений и сайтов. Здесь собраны продукты лидеров рынка, каждый из которых обладает уникальными особенностями.
Мир наполнен деталями, которые складываются в единое целое и формируют прекрасный опыт. Будь то пение птиц дождливым утром или что-то столь обыденное, как звуки уведомлений, которые издает ваш телефон, когда вы ждете свой обед из любимого ресторана.
Зачастую понять, как улучшить опыт взаимодействия (ведь именно это наша главная цель), довольно трудно. Продуманные фильтры, плавная анимация или даже крутая кнопка призваны помочь пользователям и сделать их опыт более запоминающимся. Способность поймать вдохновение и воплотить его в наших продуктах позволяет расти и менять окружающий мир к лучшему.
Хороший дизайн — ключевая цель любого дизайнера, создающего физические или цифровые продукты. Мы разрабатываем их, соединяя опыт взаимодействия, визуальные материалы и другие важные атрибуты. Желаемый результат — продукт, которым люди захотят пользоваться и который будет эффективно справляться со своими задачами.
Хороший дизайнер цифровых продуктов всегда думает о том, как пользователи будут взаимодействовать с его творением от начала и до конца. Он старается сделать его максимально интуитивным и при этом эстетически привлекательным и отражающим индивидуальность бренда. Дизайн продукта — это сочетание эмоциональной, функциональной и эстетической составляющих.
- Ответьте на вопрос: “Какой эмоциональный отклик вызывает мой продукт у пользователя?”, чтобы понять эмоциональный аспект дизайна продукта.
- Функциональный аспект — это ответ на вопрос: какую основную функциональную потребность удовлетворяет этот продукт? Каково его основное назначение?
- Людей привлекает красота. Один из способов предоставить прекрасный пользовательский опыт — убедиться, что ваш продукт эстетически привлекателен для пользователя.
Поиск вдохновения — не что иное, как умение держать глаза и уши открытыми на протяжении всего вашего пути в роли дизайнера. Отличный способ начать — всегда быть в поиске. Пользуйтесь разными продуктами, пытайтесь понять, как они работают, и, возможно, вы откроете для себя много интересного. Хотите верьте, хотите нет, но вдохновение можно отыскать даже в самом незначительном действии или звуке.
Надеемся, вы найдете в нашем списке то, что вдохновит вас на новые свершения.
1. Spotify
Начнем с любимого всеми Spotify. Для тех, кто не в курсе, Spotify — стриминговый сервис для прослушивания музыки с более чем 61 миллионом пользователей. Это один из лучших примеров дизайна. Точка.
✨ Ключевая особенность
Сделано для вас. Персонализация — это то, в чем действительно преуспел Spotify. Команда придерживается подхода, противоположного распространенному “одно решение для всех”, а их основной принцип — всегда оставаться "релевантными". Они нашли эффективный способ показывать пользователю именно то, что ему нужно, когда ему это нужно.
Такое отношение заставляет пользователя чувствовать свою значимость и вызывает чувство сопричастности. Играя на этих эмоциональных струнах, Spotify вынуждает людей возвращаться снова и снова, не обращая внимания на конкурентов.
В следующий раз, когда вы будете создавать продукт, спросите себя, какую ценность он несет для аудитории, что может заставить людей вернуться, и как использовать это по максимуму?
📎 Spotify постоянно экспериментирует со своим стильным интерфейсом. Читайте больше о процессе проектирования и дизайн-решениях Spotify на сайте spotify.design.
P.S. Spotify, если вы тут, не могли бы вы сделать строку поиска в "Понравившихся песнях" липкой, чтобы она не перемещалась при прокрутке? Спасибо.
2. Uber
Дизайн-система Uber, Base, является одной из самых логичных, эффективных и легко настраиваемых. Она помогает компании создавать функциональные единообразные интерфейсы.
Благодаря функциональной согласованности пользователь может предсказать поведение определенных элементов, что дает больше свободы при взаимодействии с продуктом, а благодаря визуальному единообразию, ему проще классифицировать их. Применение этой системы в сочетании с безупречным языком дизайна делает Uber отличным источником UI и UX вдохновения.
✨ Ключевая особенность
🏃🏼 49% пользователей держат свои телефоны одной рукой, когда находятся в движении.
Использование одной рукой. Как дизайнеры, мы хотим сделать наш продукт максимально простым и удобным. Большинство пользователей Uber заказывают такси в спешке, добираясь из одного места в другое или опаздывая. Поэтому приложение спроектировано таким образом, чтобы им можно было пользоваться одной рукой.
Человек должен без усилий добраться до важных элементов, например, меню или основных CTA. Понимание мышления пользователя и стратегическое размещение нужных функций в правильных местах имеет важное значение для создания по-настоящему качественного продукта. Такие концепции, как прогрессивное раскрытие, выпадающие меню и жесты, помогают создать дизайн, который удобно использовать даже одной рукой.
3. Airbnb
Airbnb позволяет пользователям сдавать свои дома/отели людям, которые ищут жилье в определенных географических точках. Основные идеи Airbnb — построение доверительных отношений и дизайн для всех. Они тратят много времени и денег на исследование пользователей и привлечение специалистов, которые помогают им расшифровать полученные данные.
✨ Ключевая особенность
Расширенный поиск. Основа Airbnb — гибкий поиск. Эта тщательно отрегулированная функция способна по-настоящему удивить пользователей и показать им именно то, что они ищут. Она изменила представления людей о путешествиях. Залог успеха Airbnb — внедрение этих сложных функций в продукт при сохранении простого и понятного UI и пользовательских сценариев.
Помните: чем проще, тем лучше. Подумайте, зачем пользователь обратился к вашему продукту и каким будет алгоритм его действий. Если пользовательский сценарий получился довольно сложным, упростите UI. Большие отступы, разборчивые шрифты и понятная навигация — самый большой подарок, который вы можете сделать своим пользователям.
4. Nike Run Club
Продукты Nike — одни из самых продуманных и удобных. Начиная с обуви и заканчивая приложениями и веб-сайтами, все они транслируют ощущение грандиозности самым простым способом — за счет правильного применения негативного пространства. Одно из приложений, Nike Run Club, позволяет отслеживать время пробежки, скорость, расстояние и другие параметры, соревноваться с друзьями и сохранять мотивацию во время занятий фитнесом.
✨ Ключевая особенность
Вовлеченность пользователей. Приложение Nike Run Club позволяет пользователям добавлять свои цели и побуждает их достигать этих целей. Конечно, это не единственное приложение с подобным функционалом, однако команда Nike умело использует геймификацию, чтобы поддерживать мотивацию и желание пользователей возвращаться. Они отмечает прогресс с помощью персонализированных сообщений. Такое постоянное поощрение повышает уверенность пользователей, что, в свою очередь, увеличивает вовлеченность.
Мы постоянно находимся в поиске ответа на вопрос: “Как предоставить нашим пользователям не просто отличный опыт, а значительно улучшить их жизнь?” Nike Run Club — прекрасный пример того, как отличный дизайн продукта помогает людям стать лучшими версиями самих себя, а не просто довольными пользователями.
5. Medium
Medium — это открытая платформа для написания статей, где авторы могут публиковать свои истории для огромной аудитории и продвигать их. Чистый белый фон с минимальным количеством деталей позволяет сосредоточиться на чтении или создании материала. За прошедшие годы Medium претерпел множество изменений, но одно оставалось неизменным — стремление оптимизировать опыт пользователей.
✨ Ключевая особенность
“Вежливый” дизайн. Концепция вежливого дизайна предполагает создание продуктов, которые ведут себя как приятные знакомые. Основные моменты — бережно относиться к времени пользователя, входить в его положение и предвидеть его потребности.
Обычно во время чтения пользователи сосредоточены. Medium отлично справляется с задачей, изящно и тактично привлекая их внимание к нужным деталям с помощью деликатного UI и уведомлений, например, о продлении подписки.
По мере того, как взаимодействие пользователя с продуктом становится все более глубоким и многослойным, оно все больше напоминает общение между людьми. Мы должны вызвать доверие, позволяя пользователям контролировать ситуацию, уважая их выбор и решения. Спрашивайте: "Сейчас я собираюсь сделать вот это, вы согласны?" Это хороший способ начать. Как правило, пользователи реагируют позитивно, когда продукт относится к их мнению уважительно.
6. Stripe
Всякий раз, когда я захожу в тупик, разрабатывая новый продукт, я открываю Stripe и начинаю охоту. Этот сайт просто прекрасен, если учесть, какой сложной и скучной деятельностью занимается компания (предложение платежных API). Отличный текст, плавная анимация и элегантный интерфейс никого не оставят равнодушным.
Кроме того, если вы ищете вдохновляющие примеры дашбордов, Stripe — то, что вам нужно. Дашборды на этом сайте — простые, понятные и единообразные, хотя и занимают практически весь экран.
✨ Ключевая особенность
Удобная навигация. Несмотря на то, что на сайте более десятка страниц, вы всегда сможете найти дорогу благодаря хорошо продуманной навигации. Пункты меню распределены по категориям, отмеченным уникальными иконками и цветами. Это побуждает пользователей проводить больше времени на сайте и изучать его, а также помогает быстро и беспрепятственно находить нужную информацию.
Максимально упростить использование продукта — основная задача дизайнера. Один из самых эффективных и простых способов сделать это — предоставить людям возможность изучить доступные опции и найти именно то, что они ищут. Потратьте некоторое время на построение IA-диаграмм (информационной архитектуры) и составление пользовательских сценариев, чтобы дать аудитории то, что ей нужно.
7. Figma
Что объединяет все упомянутые здесь компании? Они используют один и тот же инструмент проектирования — Figma. Figma популярна не только у дизайнеров, но и у неспециалистов, она бросает вызов ограничениям своего целевого рынка. Графический редактор появился в 2016 году, и с тех пор быстрыми темпами завоевывал любовь все новых и новых пользователей, отбирая аудиторию у конкурентов.
✨ Ключевая особенность
Работа в браузере. Figma стала первым инструментом проектирования, который можно было использовать прямо в браузере, не забивая оперативную память своего устройства. Поскольку дизайн создавался в облаке, команды могли работать над проектами вместе, отслеживать историю изменений, обмениваться библиотеками элементов и собирать обратную связь заинтересованных сторон в одном месте. Это позволило сделать совместную работу намного эффективнее, чем раньше.
Figma провела исследование, чтобы сформулировать уникальное ценностное предложение, которое отличало бы ее от конкурентов. Каждый раз, когда вы проектируете продукт, ищите его уникальную ценность, которая даст вам преимущество перед конкурентами.
8. Notion
Универсальное рабочее пространство, позволяющее делать заметки, управлять проектами и хранить важную информацию. Notion помогает пользователям синхронизировать все аспекты их жизни и удовлетворяет потребность в том, чтобы чувствовать себя организованным. Это отличный источник вдохновения с точки зрения дизайна: от сложных параметров сортировки до информационной иерархии на любой странице.
✨ Ключевая особенность
Широкие возможности настройки. Notion ориентирован на разнообразную аудиторию: от людей, которые просто хотят делать в нем заметки до пользователей, которые составляют здесь подробные планы проектов. Возможность контролировать, насколько персонализированным будет опыт, привлекает пользователей и помогает им адаптироваться к продукту.
Каждый видит мир по-своему. Кастомизация позволяет пользователям выбирать, что они хотят видеть и как они хотят это видеть. Она улучшает опыт взаимодействия, поскольку дает им возможность сделать продукт “своим”. Их удовлетворенность продуктом повышается, а лояльность возрастает. Подумайте о том, какие элементы управления можно передать в руки ваших пользователей, чтобы они чувствовали себя более уверенно.
9. Google Pay
Когда Google Pay был запущен в Индии (сначала под названием Tez), это вызвало настоящий ажиотаж! Идея отправки денег через телефон менее чем за 5 минут была просто умопомрачительной. Чтобы охватить широкую аудиторию и оставаться на пике популярности, Google Pay должен был стать единственным в своем роде. Создатели приложения также добавили геймификацию, желая вознаградить пользователей и создать эффект сарафанного радио.
✨ Ключевая особенность
Продукт для всех. Google Pay — понятный продукт, в котором может разобраться каждый! Он прост в использовании, не требует технических знаний и рассчитан на все возрастные группы и социальные классы. В Индии Google Pay применяют все — от продавцов овощей до образовательных учреждений и даже банков! Это стало возможно благодаря красивому, элегантному дизайну, который отражает футуристические возможности продукта.
Создание дизайна для всех пользователей — главная обязанность любого дизайнера. Такие предназначенные для широкой аудитории продукты, как Google Pay, должны быть простыми и понятными всем без исключения. Позаботьтесь о том, чтобы пользователи справлялись со своими задачами легко, без трудностей и разочарований. Все просто.
10. Netflix
Нуждается ли этот продукт в представлении? Независимо от того, кто вы, откуда и чем занимаетесь, вы точно пользовались Netflix или слышали о нем. Дни, когда кино смотрели с кассет или дисков, прошли. Среди множества конкурентов это приложение, похоже, является явным победителем в создании всестороннего захватывающего опыта, который оставляет пользователя полностью удовлетворенным.
✨ Ключевая особенность
Поддержание заинтересованности. Netflix ежедневно обрабатывает огромные объемы данных, чтобы показать пользователям интересное видео в конце долгого, утомительного, скучного дня. Хотя эти данные преимущественно составляют одни и те же телешоу или фильмы, людей увлекает то, как именно отображается указанная информация.
Создатели приложения используют продуманные формулировки и четкое разделение контента на категории, чтобы привлечь разную аудиторию. Также они меняют изображения в зависимости от предпочтений пользователя и показывают то, что будет наиболее релевантным и убедительным именно для вас.
Людям быстро становится скучно. В мире, где цифровые продукты выпускаются миллионами, ключ к тому, чтобы выделиться из толпы, — поддерживать заинтересованность пользователей. В следующий раз, когда вы окажетесь в тупике, спросите себя: как мне заинтересовать людей? Как дать им наиболее удовлетворительный опыт?
11. Slack
Большинству пользователей довольно легко освоить Slack. Вы получаете сообщения и отвечаете на них, как и в любом другом мессенджере. Воплотите эту концепцию в цифровом рабочем пространстве, добавьте возможность реагировать с помощью эмодзи, выполнять расширенный поиск с помощью модификаторов и выбирать подходящую тему — и вы получите один из лучших цифровых продуктов нашего времени!
✨ Ключевая особенность
Продукт, который превосходит ожидания. Slack довел до идеала асинхронную коммуникацию. В нем есть функции, которые существенно упрощают общение. Но создатели приложения не останавливаются на достигнутом, они постоянно ищут способы сделать продукт еще лучше. С добавлением общих каналов в рабочих пространствах вы теперь можете общаться с сотрудниками других компаний и полностью забыть об электронной почте, группах WhatsApp и тому подобном. Как же тут можно жаловаться?
Никогда не переставайте размышлять, что вы как дизайнер можете сделать для своего пользователя. Улучшайте его опыт до такого уровня, чтобы ему не хотелось расставаться с вашим продуктом. Превосходите ожидания, и знайте, что продукт никогда не будет завершенным или идеальным. Будь то добавление новых параметров настройки или более удачного звука уведомления, вы всегда можете улучшить результат, и Slack — отличный пример такого подхода.
12. Duolingo
В Duolingo, приложении для изучения языков, которое сделало обучение веселым и увлекательным, можно узнать так много интересного! Выбирайте язык и приступайте! Вот так просто. Три основные цели Duolingo: помогать людям учиться, расти за счет расширения аудитории, и зарабатывать деньги для развития идеи бесплатного, доступного образования.
✨ Ключевая особеннос
Минимальная когнитивная нагрузка. Duolingo, продукту, который учит вас чему-то такому сложному, как язык, удалось сделать информацию простой для восприятия и усвоения. Курсы разделены на крошечные главы, на прохождение которых уходят считанные минуты, а двигаться дальше вы можете, только завершив текущую главу. Это помогает сосредоточиться на поставленной задаче и снижает когнитивную нагрузку.
Внимание пользователя — наш самый ценный ресурс. С течением времени человек начинает все больше и больше отвлекаться. Важно точно определить, что показать пользователю, в каком количестве и каким образом. Минимизируйте когнитивную нагрузку, сократив визуальный беспорядок и опираясь на то, что люди уже знают: например, навигация всегда располагается сверху, так что оставьте ее там!
13. Headspace
В современном мире “осознанность” стала модным словечком. Одним из продуктов, прекрасно воплотивших эту концепцию в жизнь, является Headspace. Headspace — это приложение для медитаций, цель которого — улучшение вашего психического здоровья.
Оно не только ценно для нас как потребителей, но и является отличным источником вдохновения с точки зрения дизайна продукта. Большинство продуктов используют текст или изображения, но основа Headspace — короткие озвученные ролики, которые требуют от пользователя безраздельного внимания.
✨ Ключевая особенность
Внимание к деталям. Язык дизайна — ключевой фактор, привлекающий пользователей и позволяющий им ощущать себя желанными гостями в этом приложении. Headspace создал визуальный язык, благодаря которому люди чувствуют себя здесь как дома. Милые персонажи разных форм, размеров и цветов создают теплое, безопасное пространство, открытое для каждого.
Headspace смог оставить только самое важное и найти свой голос. Как дизайнеры, мы используем визуальный язык для общения с нашими пользователями. Шрифты, цвета, иконки и формы существенно влияют на то, как пользователи воспринимают продукт. Потратьте время и ресурсы, чтобы действительно понять голос и индивидуальность вашего бренда, и помните, что каждый маленький штрих имеет значение!
14. CRED
CRED — один из последних хитов индийского рынка. Это приложение вознаграждает зарегистрированных пользователей за оплату счетов по кредитным картам. Да, многие пытались сделать то же самое, но только CRED удалось довести аудиторию до безумия благодаря своему нестандартному и остроумному языку дизайна.
✨ Ключевая особенность
Эстетика имеет значение. Некоторые тренды просто захватывают мир дизайна, один из них — неоморфизм (обновленная версия скевоморфизма). Индийский рынок перенасыщен однотипными продуктами, и, воспользовавшись этим в своих интересах, создатели CRED смогли выделиться из толпы и создать шумиху. Это приложение отличается минималистичным, аккуратным, интуитивно понятным дизайном.
Чему мы можем поучиться у CRED, как дизайнеры, так это смелости экспериментировать. Недавно они полностью изменили весь дизайн (подробнее читайте здесь). Потратьте 20 минут в день, чтобы быть в курсе последних тенденций, и когда придет время (или появится подходящий продукт), используйте свой язык дизайна, чтобы выделиться на фоне конкурентов.
15. Clue
Clue — это приложение для отслеживания менструального цикла, которое, опираясь на научные данные, помогает женщинам контролировать свое здоровье. Это один из самых популярных (хотя и не первый) продуктов такого рода, которым пользуются женщины во всем мире. Clue использует простые, но описательные иконки для отображения более 30 параметров отслеживания и позволяет пользователям настраивать их по своему усмотрению.
✨ Ключевая особенность
Эмоциональная связь. Несмотря на то, что дело идет о таком деликатном вопросе, как отслеживание цикла, Clue эффективно выстраивает эмоциональную связь со своими пользователями. Создатели приложения отказались от рекламы и придерживаются строгой политики запрета продажи данных, что успокаивает женщин и помогает им чувствовать себя в безопасности.
Более того, приложение использует большой набор данных для изучения женского здоровья. Так Clue делает мир лучше и помогает людям чувствовать себя частью чего-то большего.
Эмоции имеют значение. Мы фокусируемся на удовлетворении потребностей пользователя, но не менее важно сосредоточиться на его эмоциональных реакциях. Эмоциональный дизайн поднимает опыт взаимодействия на новый уровень. Каждое решение, которое вы принимаете в процессе проектирования, способно вызывать у людей те или иные чувства. Понимание эмоциональной ценности вашего продукта — ключ к хорошему дизайну.
Черпайте вдохновение повсюду
Мы можем находить вдохновение повсюду, главное — захотеть. Быть открытым для всех источников вдохновения — то, к чему нужно приучить свой разум. В следующий раз, когда вы получите очередное уведомление или воспользуетесь очередным продуктом, сделайте паузу и попытайтесь понять, какую ценность представляют для пользователя те или иные дизайн-решения.
Вокруг нас миллионы цифровых продуктов, каждый из которых имеет свой уникальный язык дизайна и опыт, плохой или хороший. Приложения и сайты, упомянутые в этой статье, — лишь вершина айсберга. Вы можете вдохновляться ими, когда приступите к работе над своим следующим проектом.
