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

По поводу рекламы и сотрудничества: @design_manager_bot
Заявление № 4896031048
Download Telegram
Топ-9 плагинов Figma для работы с графикой и изображениями

1. Удаление фона изображения — ‘Remove BG
В идеале, чтобы удалить фон любого изображения, вам придется отредактировать изображение в Photoshop. Альтернативный метод, который я использовал ранее– это выбрать в Figma изображение и использовать опцию «multiply» в меню «Layer», чтобы фон исчез, но это не всегда эффективно. Remove BG – это потрясающий плагин, который удалит фон любого изображения в один клик, и все это не покидая Figma.

2. Преобразование изображений в векторные —’Image Tracer
Вы, наверное, переносите свои изображения в Illustrator, чтобы трассировать их, не так ли? Но теперь вы можете больше так не делать. С Image Tracer вы можете конвертировать простые черно-белые растровые изображения в векторные. Это необычайно полезно, когда у вас есть изображение, которое вы хотите преобразовать в иконку. Когда вы запустите плагин, то заметите, что на панели есть опции, которые помогут отредактировать плавность кривой и оптимизацию.

3. Создание изометрических фигур — ‘Easometric
Easometric, как следует из названия, преобразует ваши слои в изометрические фигуры. Он позволяет экономить время, иначе вам придется вручную настроить в Illustrator изометрическую визуализацию перспективы. Панель инструментов интуитивно понятна, и вы можете в один клик выбрать нужную перспективу.

SkewDat и Mockup – пара плагинов, которые также помогут вам исказить слои.

4. Создание 3D-фигур — ‘Oblique
Oblique – отличный плагин, который помогает создавать проекции, тени, добавлять глубину и экструдировать слои. И все это непосредственно в Figma. Его панель управления проста и помогает установить угол проецирования, расстояние и выбрать цвета для контуров и заливок.

Roto – еще один плагин, который поможет создать экструзии с перспективой, а на панели есть предварительный просмотр в реальном времени.

5. Создание анимации — ‘Motion
Motion довольно просто использовать, если вы знакомы с такими инструментами анимации, как Principle или After Effects. В нем есть временная шкала свойств объекта, которые вы можете индивидуально контролировать и экспортировать в виде GIF, фреймов, спрайтов или CSS.

Figmotion – это еще один плагин, который поможет создать анимацию, а также позволит экспортировать ее в CSS или JSON, что отлично подходит для передачи проекта разработчикам.
6. Создание эффектов движения —’BeatFlyer Lite
С BeatFlyer Lite вы можете добавлять крутые эффекты к слоям Figma. Бесплатная версия имеет множество эффектов, таких как масштабирование, вибрация, свечение, размытие при масштабировании, маскирование и десятки других эффектов. Интерфейс простой, слева перечислены все доступные эффекты, и вы можете индивидуально управлять свойствами анимации эффектов, нажав на иконку настроек. Главный экран позволяет управлять скоростью и временем, а также предоставляет параметры экспорта.

7. Конвертирование дизайнов в видео — ‘SUPA — Figma to Video
Supa – Figma to Video – замечательный плагин для добавления простых переходов к слоям на артборде, и преобразования дизайнов в анимированные видео. Плагин простой в использовании, и вы можете выбирать предустановки анимации, применяемые к проекту, который в дальнейшем можно преобразовать в видео.

8. Воспроизведение и экспорт GIF — ‘GIF
По умолчанию, даже если ваши GIF-файлы или анимированные объекты выглядят статично на экране редактора, Figma поддерживает GIF-файлы в режиме прототипа. Но плагин GIF от Rogie может воспроизводить ваши GIF-файлы в режиме редактора, а также помогает экспортировать анимированные фреймы в виде GIF-файлов непосредственно из Figma.

9. Создание макета девайса — ‘Clay Mockups 3D
Плагин Clay Mockups 3D может стать альтернативой этому процессу. Это лучший плагин для создания аккуратных макетов устройств, и вы можете настроить модель устройства, цвет и угол камеры, и все это не покидая Figma. Он экономит уйму времени, и я очень люблю этот плагин.


Источник
Google шрифты: 5 малоизвестных вариантов

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

№ 1: Barlow Barlow – один из классных вариантов, на который вам стоит обратить внимание при выборе шрифта для приложения, сайта и т. д.

№ 2: Encode Sans Encode sans – еще один отличный, но малоизвестный шрифт. Можно использовать для любых проектов бесплатно.

№ 3: Cabin Cabin – красивый шрифт, который также почему-то менее популярен среди дизайнеров, хоть и не хуже других от Google. Лично мне очень нравится использовать его в своих приложениях.

№ 4: Sarabun Sarabun – тоже отличный Google шрифт, который оказался менее известным. По-моему, он прекрасно подойдет для высокопроизводительных приложений и сайтов.

№ 5: Prompt Prompt – последний на сегодня замечательный шрифт. Мне он нравится своей насыщенностью. Люблю использовать его для заголовков на сайтах и в приложениях.

Источник
Советы по проектированию идеальной панели навигации

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

Читать статью: https://ux.pub/editorial/soviety-po-proiektirovaniiu-idiealnoi-panieli-navighatsii-1od0
Современный UX-дизайн убивает творчество

Чтобы улучшить пользовательский опыт, нужно идти на риск.

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

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

Читать статью: https://ux.pub/editorial/sovriemiennyi-ux-dizain-ubivaiet-tvorchiestvo-4g1o
Что такое интуитивный дизайн и почему это выдумка

«Интуитивный дизайн» – это одно из тех часто используемых словосочетаний, которые мы, как дизайнеры, неоднократно слышим в требованиях от наших клиентов. В этой статье исследуется, что на самом деле значит интуитивный дизайн, почему в нем нет смысла, как мы можем лучше подходить к дизайнерским решениям и как может выглядеть будущее интерфейсов. Она предназначена для UX/UI-дизайнеров и всех, кто заинтересован в более подробном изучении этих концепций.

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

Читать статбю: https://design-glory.com/?p=6419
Что такое юзабилити-тестирование и как провести его правильно

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

Иногда возникают возражения по поводу использования фразы “пользовательское тестирование”, так как кажется, что исследователи тестируют пользователей. Но это в корне неверно: мы никогда не тестируем пользователей – только интерфейс. Этот термин о том, что тестирование проводится совместно с пользователями – это важный аспект эмпирических исследований.

Содержание:

Что такое юзабилити-тестирование
В чем ценность юзабилити-тестирования
Что требуется для проведения юзабилити-тестирования
Типы юзабилити-тестирования
Дополнительные ресурсы NNGroup
Вывод и рекомендации

Читать статью: https://ux-journal.ru/chto-takoe-yuzabiliti-testirovanie-i-kak-provesti-ego-pravilno.html
Учимся создавать значки уведомлений: несколько коротких, но действенных советов

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

№ 1 Делайте значки привлекательными за счет ярких цветов «Shop» (слева) использует основной цвет приложения, а приложение «Grab» (справа) использует красный

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

№ 2 Используйте числа и текст, чтобы информировать пользователя «Lyft» (слева) информирует текстом, тогда как «Medium» (справа) использует как значки числа

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

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

Источник: https://design-glory.com/?p=10325
Терминологический хаос. Прошлое/Настоящее/Будущее 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