PSD | Дизайн-пространство
28.6K subscribers
7.32K photos
430 videos
2.79K links
Пишем просто, понятно и по делу обо всём околодизайнерском 🔥
Сайт: https://dsgners.ru

По поводу рекламы и сотрудничества: @design_manager_bot
Заявление № 4896031048
Download Telegram
Терминологический хаос. Прошлое/Настоящее/Будущее UX

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

Цель статьи — привести в единый “майндсет” специалистов, которые работают с пользовательским опытом в разных его вариациях. Хочется убрать путаницу в названиях и аббревиатурах, посмотреть на первоначальные ценности и роль UX. Помочь тем специалистам, которые, понимая ценность UX вступают в бессмысленные терминологические дискуссии с коллегами, понимающие под UX что-то своё.

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

Существует огромное количество аббревиатур, которые то и дело мелькают в разных статьях (от Сервис Дизайна (SD) и Customer Development (CustDev) до CustomerExperience (CX), и чем дольше я веду свой канал, тем очевиднее становятся расхождения между этими направлениями. Это не может не настораживать. Уже не говорю про то, что постоянно путают UX и UI дизайнерами, точно также, как и UX-исследователей с продуктовыми.
Не буду подробно останавливаться на описании названий и ролей — это большая и интересная тема, но не сегодня.

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

На написание её меня вдохновило выступление Якоба Нильсена на прошедшем World Usability Day (пользуясь случаем — большое спасибо организаторам).

Читать статью: https://habr.com/ru/post/528720/
Руководство по цвету в UX/UI дизайне. Как выбирать, смешивать и сочетать цвета

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

Читать статью: https://ux.pub/editorial/rukovodstvo-po-tsvietu-v-uxui-dizainie-kak-vybirat-smieshivat-i-sochietat-tsvieta-2b87
Узнаваемость или уникальность дизайна — что важнее? Разбираемся на примере логотипов для барбершопов

Дизайнеры Lemon media дали несколько советов, как сделать дизайн логотипов более уникальным, но без потери эффективности.

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

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

Читать статью: https://vc.ru/design/165955-uznavaemost-ili-unikalnost-dizayna-chto-vazhnee-razbiraemsya-na-primere-logotipov-dlya-barbershopov
Улучшая интерфейс: как связаны дизайн и успех продукта

Знаменитый древнеримский инженер и архитектор Витрувий говорил, что архитектура обязательно должна обладать тремя качествами: firmitas (прочность), utilitas (функциональность)venustas (красота). Это верно и для архитектуры пользовательского интерфейса: все мы хотим видеть интерфейс, который работает надежно, решает проблемы пользователей и эстетически привлекателен. О том, как мы решаем эту задачу в Acronis, читайте под катом.

Все мы стремимся к функциональности. И при проектировании продукции Acronis основным источником информации является общение с нашими пользователями. Это позволяет нам понять проблемы, с которыми они сталкиваются каждый день – особенно те, которые не решаются их текущими инструментами.
Такой подход важен, потому что мы работаем в сфере безопасности: плохой дизайн решений не только расстроил бы наших пользователей, но также мог бы увеличить угрозы безопасности. Если интерфейсы продуктов Acronis не будут интуитивно понятными и функциональными, наши пользователи не смогут надежно защищать и восстанавливать критически важные данные. Можно сказать, что в нашей работе цена ошибки действительно велика, и грамотный дизайн оказывается очень важен.

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

Читать: https://habr.com/ru/company/acronis/blog/527254/
10 советов по компонентам Figma

Советы и лучшие практики для работы с компонентами Figma

1. Сочетания клавиш для работы с компонентами
2. Поменять местами компоненты
3. Именование компонентов
4. Создавайте компоненты забавной формы
5. Используйте базовые компоненты
6. Меню быстрой вставки
7. Следуйте принципам атомарного дизайна
8. Используйте компоненты слота
9. Используйте несколько библиотек

Подробнее в статье: https://ux.pub/editorial/10-sovietov-po-komponientam-figma-3717
​​Что, если бы элементы графического интерфейса не были ограничены блоками?

Нестандартное мышление в дизайне графического интерфейса.

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

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

Читать статью: https://ux.pub/editorial/chto-iesli-by-eliemienty-ghrafichieskogho-intierfieisa-nie-byli-oghranichieny-blokami-1m9b
UX-дизайнеры воспринимают себя слишком серьезно

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

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

Читать: https://design-glory.com/?p=11315
50 примеров дизайн-систем для вдохновения

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

Подробнее об основах дизайн-систем (от NN Group) читайте ниже.

Какова общая структура дизайн-системы?
Обычно дизайн-системы делятся на шесть элементов:

Обзор: Здесь упоминаются обновления в виде журналов, принципы, лежащие в основе структуры дизайн-системы, и общие ценности.

Основы: Охватывают основные компоненты, такие как цвет, типографика, иконография, изображения, звук, движение и многое другое.

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

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

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

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

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

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

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

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

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

Авторитетные дизайн-системы
К ним относятся Material Design и Human Interface Guidelines. Во многих отношениях они определили внешний вид дизайн-систем, когда цифровые мобильные операционные системы впервые появились на смартфонах. Благодаря им дизайнеры узнали много полезных методов проектирования, и они до сих пор остаются золотым стандартом дизайн-систем.

Подробнее: https://ux.pub/editorial/50-primierov-dizain-sistiem-dlia-vdokhnovieniia-5h5
Чем продакт-дизайн отличается от UI/UX

Когда мы слышим такие термины, как UI/UX дизайн или продакт-дизайн, единственное, в чем мы точно уверены, – это в том, что речь идет о разработке чего-то для пользователя/покупателя. Того, что он видит и с чем взаимодействует, что бы мы ни предлагали. Тем не менее, эти два термина очень широки с точки зрения бизнеса.

Дизайн пользовательского интерфейса (UI)

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

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

Дизайн пользовательского опыта (UX)

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

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

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

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

Продакт-дизайн

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

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

Источник:  https://design-glory.com/?p=12700
Пять принципов хорошего UX

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

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

Для оформления полиса страхования ОСАГО необходимо подготовить водительское удостоверение и свидетельство о регистрации транспортного средства
Подготовьте водительские права и свидетельство о регистрации (СТС)

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

Сохранить изменения в документе перед закрытием? Сохранить / Не сохранять / Отмена.
Молча сохраняем результат

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

3. Следим за контекстом
Хороший сервис понимает, что у человека есть своя жизнь за пределами экрана. Он не разбудит в 2 часа ночи сообщением о скидках и не будет слепить перед сном (поэтому так популярны тёмные темы оформления). Если хорошим приложением пользуются на улице, то его интерфейс будет крупным и контрастным, чтобы считываться в движении на ярком солнце.

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

4. Формируем ожидания
Хороший сервис помогает человеку спланировать время и держит в курсе происходящего. Например, не очищает корзину молча, а предупреждает, что через 30 дней файлы удалятся.

Человек заполняет длинную заявку на кредит и жмёт «Отправить»:

Плохой сервис выдаёт всплывающее окно «Заявка отправлена». У клиента сразу вопросы: Что дальше? Кредит одобрен? Когда ждать решения?
Хороший сервис выдаёт страницу «Спасибо за вашу заявку. Наши специалисты позвонят вам в течение двух часов и сообщат решение». Рядом кнопка «Сообщить по почте».

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

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

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

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

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

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

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

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

Источник: https://design-glory.com/?p=11606
Руководство по UX-исследованиям для начинающих

Вы заинтересованы в том, чтобы узнать больше о UX-исследовании, даже если у вас нет опыта?

Эта статья станет исчерпывающим руководством, которое поможет вам ответить на семь распространенных вопросов о UX-исследованиях, которые задают новички.

Автор поделится идеями, которые узнал от Джейн Сури директора по дизайну в IDEO, UX-исследователя из Google, чтобы помочь ответить на любые возможные вопросы касательно того, кто такой UX-исследователь.

Читать: https://ux.pub/editorial/rukovodstvo-po-ux-issliedovaniiam-dlia-nachinaiushchikh-3png
7 волшебных «больше» для улучшения UX/UI

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

Прежде чем потратиться на дорогостоящее тестирование, посмотрите на свой сайт или приложение через призму 7-ми «больше». Этот метод поистине волшебен, так как выявляет скрытые причины.

Что значит «больше»? Представьте группу равнодушных гостей, вяло раскладывающих еду по тарелкам. Что случилось? Еда должна быть вкуснее? Хозяин более гостеприимным? Гости голоднее? Атмосфера более расслабляющей?

Иногда что-то не работает просто потому, что этого недостаточно. Гости не едят, потому что еда недосолена. Растение не растет, потому что ему мало света. Аккумулятор не работает, потому что разряжен. Протестировав свой продукт с помощью 7-ми «больше», вы сразу увидите, чего ему не хватает.

Читать: https://design-glory.com/?p=10496
Подборка интересных сайтов. SaaS продукты, лендинги стартапов и бонус

Очень простой лендинг saas продукта, но с некоторым количеством интересных деталей, которые освежают эту работу
→ juni.co

Лендинг уже взрослого стартапа с простым и понятным визуальным стилем.
→ moderntreasury.com

Стильная работа от ребят из Ragged Edge для компании Circa5000 – обязательно зацените полный кейс на сайте студии.
→ circa5000.com

Модный стиль в духе времени с интересными иллюстрациями.
→ ironcladapp.com

Когда вырасту, хочу делать такие сайты для продуктов: живые, простые, красивые, рассказывающие историю
→ superlist.com

Интересный визуальный стиль с проработкой деталей в стиле James McDonald.
→ meter.com

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

→ arigatobank.com

Лендинг Coherence просто великолепный, идеальный расставленные акценты
→ withcoherence.com

Лендинг (да и брендинг в целом) для сервиса Convo
→ convo.app

Kosmik – апп для визуальных заметок.
→ kosmik.app


Источник