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

По поводу рекламы и сотрудничества: @design_manager_bot
Заявление № 4896031048
Download Telegram
FigJam – интерактивные доски для дизайнеров от Figma

На конференции Config 2021, генеральный директор Figma Дилан Филд объявил о запуске FigJam, нового вайтборда Figma. Сейчас доступна бета-версия FigJam, но до конца 2021 года приложение будет бесплатным для всех пользователей. Ниже вице-президент Figma по продукту Юки Ямасита немного расскажет, почему мы решили создать FigJam.

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

FigJam – место, где зарождаются лучшие идеи продуктов
Вот почему мы создали FigJam, интерактивную доску для дизайнеров, чтобы они могли придумывать идеи и проводить мозговой штурм с расширенными командами. Думайте о ней, как об облегченной версии Figma, которую проще освоить и еще интереснее использовать. Она предназначена для определения проблем пользователей, поиска вдохновения и изучения идей.

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

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

Мы также хотели привнести в FigJam ту же теплоту и интуитивное управление, которые нравятся людям в Figma, независимо от того обдумываете ли вы идею или просто «тусуетесь». Смайлики, штампы и другие тщательно проработанные функции позволят вам полностью выразить себя.
Другими словами, в FigJam веселье встречается с функциональностью.
Это одна из причин, по которой команды Stripe, Netflix, Salesforce, Twitch и других компаний использовали FigJam в течение последних нескольких месяцев для мозгового штурма и формирования идей. Их отзывы, как хорошие, так и плохие, важны не только для нашей команды; они также подтвердили, что FigJam удовлетворяет глубокие потребности пользователей.

В 2022 году у FigJam будут как бесплатные, так и платные тарифные планы ($8 и $15 за редактора в месяц), но до конца 2021 года – любой пользователь сможет использовать FigJam совершенно бесплатно.

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

Источник https://ux.pub/figma-figjam/

Перевод статьи Introducing FigJam
UI и UX микро-советы

1. Сохраняйте последовательность элементов дизайна

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

2. Щедро используйте пустое пространство

Воздух. Негативное пространство.
Это тоже самое. Просто разные названия.
Мой совет. Неважно будете ли вы использовать его щедро или умеренно, но всегда используйте его с умом.
Добавление воздуха в дизайн – один из самых простых способов мгновенно улучшить его, позволяя вашей работе «дышать»” и выглядеть более изысканно.

3. Стиль первого абзаца текста

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

4. Проектируйте для удобства сканирования. Используйте короткие абзацы

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

5. Определите цветовую палитру и создайте единообразие в своем дизайне

Хотите создать более профессиональный интерфейс? 
Заранее определите цветовую палитру.

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

Работая с иконками и сеткой 8pt, вы обнаружите, что в большинстве хорошо продуманных наборов иконок они находятся внутри рамок, кратных 8 (например, 16×16, 24×24, 32×32 и т. д.)

Лишь иногда это правило нарушается.
Если нет, убедитесь, что любая иконка, добавленная в ваш дизайн, помещена в контейнер, который использует значение кратное сетке 8pt (например, 24×24). Это позволит последовательно разместить иконки в вашем дизайне.

Источник
Роль рефлексии в процессе проектирования

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

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

Содержание статьи:
— Электросчетчики и петли обратной связи
— Волшебный дашборд
— Предвидьте необходимость корректив
— Фидбек с задержкой
— Конец начинается с начала

Читать: https://ux.pub/rol-refleksii-v-protsesse-proektirovaniya/
UI-дизайн для мужчин и женщин – полное руководство

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

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

Читать статью: https://design-glory.com/6984/polnoe-rukovodstvo-po-ui-dizajnu-dlya-muzhchin-i-zhenshhin
Аудит интерфейса — как его проводить и почему это проектирование наоборот?

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

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

Читать статью: https://vc.ru/design/237333-audit-interfeysa-kak-ego-provodit-i-pochemu-eto-proektirovanie-naoborot
Принципы UX на примере эвристических постеров

Десять эвристических принципов для дизайна пользовательского интерфейса (Принципы UX), созданные Якобом Нильсеном и Рольфом Молихом 26 лет назад остаются актуальными и по сей день. NNG решили обновить представление об эвристике, добавив пояснения и примеры.

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

Читать статью: https://design-glory.com/6936/primenenie-princzipov-ux-primer-evristicheskih-posterov
Трехмерность в интерфейсах: скевоморфизм, плоский дизайн и неоморфизм

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

Читать статью: https://ux.pub/trehmernost-v-interfeysah-skevomorfizm-ploskiy-dizayn-i-neomorfizm/
У дизайнеров больше нет проблем! ⚡️

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

Проверенных работодателей, вакансии, которых нет на хэдхантере, ты найдёшь на крутом дизайн-канале @design_birzha. 

А бесплатные материалы, которые можно использовать, не волнуясь за лицензию, спокойно скачивай на @design_telega. 
Там ты найдёшь мокапы, шрифты, иконки, бесплатные стоки с фото, видео и прочие полезные ресурсы.

Очень советуем подписаться на @design_telega и @design_birzha и ничего не упускать 🙂
ТОП-10 UX/UI принципов дизайна мобильных приложений в 2021

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

Статистика из Fortune сообщает, что 75% скачанных приложений открываются только один раз. В этой статье мы подробно разберем причины, которые как раз следует проработать в первую очередь, чтобы приложение сыграло значимую роль в жизни клиентов.

Содержание:

В чем специфика UX-дизайна мобильных приложений и почему это важно
Принцип 1. Авторизация через соцсети
Принцип 2. Онбординг — это проводник до важных целей
Принцип 3. Приложение как помощник для поручений
Принцип 4. Навигация и поиск как компас и карта
Принцип 5. Поддержка стандартных жестов
Принцип 6. Двиньте контролы ближе к кончикам пальцев
Принцип 7. Сделайте офлайн режим полезным
Принцип 8. Быстрое как YouTube, Браузер и Почта
Принцип 9. Запоминайте предпочтения и недавние действия
Принцип 10. Обеспечьте бесшовный UX
Вывод и рекомендация

Читать статью: https://ux-journal.ru/ux-mobilnyh-prilozhenij-osnovnye-printsipy.html
5 главных вещей, на которые стоит обратить внимание при следующем трудоустройстве на должность продуктового дизайнера

Год назад я руководила командой дизайнеров небольшого стартапа в Израиле. Затем началась пандемия Covid-19, и я внезапно осталась без работы. Я мать четверых детей (пяти, если считать собаку), поэтому я как можно быстрее стремилась найти работу, и начала процесс найма в нескольких крупных компаниях.
Опытные продуктовые дизайнеры являются популярным товаром на современном рынке труда, поскольку они создают множество возможностей, но в то же время затрудняют отделение зерна от плевел. Среди дизайнеров, ищущих работу, распространены споры о том, стоит ли выбирать крупные технологические бренды, которые предлагают стабильность (но также могут ограничивать вас профессионально и творчески), или стоит рискнуть и сделать ставку на то, что, по вашему мнению, может стать следующей успешной компанией. Во втором случае вы можете получить экспоненциальный профессиональный рост, но также есть риск неожиданно остаться без работы. Мой опыт научил меня, что все намного сложнее.

Читать статью: https://ux.pub/5-glavnyh-veschey-na-kotorye-stoit-obratit-vnimanie-pri-sleduyuschem-trudoustroystve-na-dolzhnost-produktovogo-dizaynera/
5 самых важных принципов визуального дизайна для UX/UI-дизайнеров от NNGroup

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

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

Содержание:

Зачем нужны принципы визуального дизайна
Принцип 1. Масштаб
Принцип 2. Визуальная иерархия
Принцип 3. Баланс
Принцип 4. Принцип контраста
Принцип 5. Гештальт-принципы
Вывод и рекомендации

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

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

Читать статью: https://ux-journal.ru/5-samyh-vazhnyh-printsipov-vizualnogo-dizajna-dlya-ux-ui-dizajnerov.html
​​10 фишек в Figma, о которых вы не знали

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

1. Самое простое кольцо прогресса, которое вы когда-либо делали в своей жизни Может быть, вы понятия не имели об инструменте «Arc», но его пользу нельзя недооценивать. С его помощью можно создавать некоторые действительно простые и красивые кольца прогресса. Пример

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

3. Перетаскивайте объекты за пределы кадра, удерживая их внутри Удерживайте пробел при перетаскивании объекта за пределы рамки, чтобы он оставался внутри контейнера. Вы также можете отключить «clip contents» для кадра, содержащего объект, чтобы вы все еще могли видеть его, когда он находится вне контейнера. Вы можете нажать CMD (CTRL) + Y, чтобы отобразить контуры. Пример

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

5. Дублируйте последнее действие CMD + D, чтобы дублировать ваше предыдущее действие. CMD + D будет дублировать объекты, кадры и все остальное.
Пример

6. Предпросмотр цвета с помощью пипетки

Возможно это и весьма очевидный совет, но используйте пипетку (i), чтобы просмотреть разные цвета. Пример

7. Легкая вставка изображений в формы-заполнители Нажмите CMD+Shift+K, чтобы заменить заливку фигур или рамок множеством изображений. Пример

8. Фишки с пробелом

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

9. Content Reel + Unsplash Content Reel и Unsplash были двумя незаменимыми плагинами для экономии время. С Content Reel вы можете одним щелчком добавить в свой дизайн аватары, lorem ipsum, имена, адреса и многое другое. Unsplash — это бесплатная библиотека высококачественной графики. Пример

10. Межстрочный интервал за секунду

Если ваша высота строки выглядит шаткой и у вас нет для нее определенного значения, просто введите «auto» в поле высоты строки или удалите любое число и нажмите ввод, после чего оно автоматически отрегулируется! Пример

Источник