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

По поводу рекламы и сотрудничества: @design_manager_bot
Заявление № 4896031048
Download Telegram
Принципы 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» в поле высоты строки или удалите любое число и нажмите ввод, после чего оно автоматически отрегулируется! Пример

Источник
​​1. Space Grotesk
Этот пропорциональный шрифт без засечек, основанный на семействе Space Mono от Colophon Foundry. Его создал Флорианом Карстеном в 2018 году. Space Grotesk хорошо сочетается с расширенными, дисплейными, гротескными и моноширинными шрифтами. Лично мне нравится, как он смотрится в паре с расширенными шрифтами, такими как Krona OneSpace Grotesk, я обязательно буду использовать тебя в своих проектах

2. Syne
Когда я искала альтернативный шрифт для своего проекта, я наткнулась на Syne. Он стал для меня настоящим открытием! Его создал Лукас Дескруа с помощью Армана Мохтаджи. У него есть пять разных стилей, и я не уверена, какой из них лучше. Extrabold – это фантастика :) Syne Mono указан как отдельный шрифт, но мне он не нравится из-за своего странного стиля (как будто вы обвели какое-то изображение). Тем не менее, использование семейства Syne может доставлять массу удовольствия, и вам определено стоит его попробовать.

3. Krona One – это полурасширенный шрифт без засечек, созданный Ивонной Шюттлер. Благодаря его индивидуальности и удобочитаемости я в основном использую его для заголовков, но он также хорошо подходит и для текстов меньшего размера. К сожалению, Krona One доступен только в обычном стиле, поэтому я надеюсь, что появится еще как минимум один.

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

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

6. Archivo Black
Archivo Black – гротескное семейство шрифтов без засечек от Omnibus-Type. Самый интригующий аспект заключается в том, что Archivo включает normalblack и narrow стили, так что вы можете наслаждаться ими всеми. Archivo Black хорошо работает с заголовками, для чего я его в основном и использую.

7. Lexend – это набор из семи семейств шрифтов, которые, как было эмпирически показано, значительно улучшают навыки чтения. Вы можете выбрать Lexend Deca, Zetta, Exa, Mega, Giga, Tera или Peta. Так много хороших вариантов! The Lexend Exa – мой фаворит, потому что он имеет красивые глифы и хорошо сочетается с другими шрифтами Lexend. Посетите этот веб-сайт для получения более подробной информации.

8. Fahkwang – это высококонтрастное семейство тайских и латинских шрифтов с засечками, созданное Кадсоном Демаком. Он был вдохновлен заголовками старых тайских газет. Мне он кажется элегантным и утонченным. Шрифт представлен в 12 различных стилях, что позволяет вам проявить творческий подход. А еще я бы хотела отметить, что цифры выглядят великолепно, и мне очень нравится звездочка (астерикс) *.
9. Inter

Автор изображения: Maja Bjeletic —Inter
Inter – это прекрасное семейство вариативных шрифтов с девятью стилями, которое было тщательно спроектировано для компьютерных экранов. Я использую его уже некоторое время, и он оправдывает ожидания – макет, созданный с помощью Inter, очень чистый и легко читаемый, как и задумал его создатель Расмус Андерссон. Прочтите пост Расмуса Андерссона на Medium.
Есть кириллица.
10. IBM Plex Sans

Автор изображения: Maja Bjeletic — IBM Plex Sans + Mono
IBM Plex – международное семейство шрифтов, спроектированное Майком Аббинком из IBM BX&D, в сотрудничестве с Bold Monday. Это семейство шрифтов предлагает четыре шрифта – Sans, SerifMono и Sans Condensed. Мне больше всего нравится IBM Plex Sans, и он отлично смотрится для заголовков, особенно в сочетании с Mono.
Есть кириллица.

Источник
Сможет ли хороший UX «вытянуть» плохой UI

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

Вот несколько примеров того, когда плохой UI работает, а когда нет.

1. CNN У CNN плохой дизайн пользовательского интерфейса. У популярного в США новостного портала чистый, простой, похожий на газету пользовательский интерфейс, что позволяет пользователю сосредоточиться на важных событиях дня. Но этот опыт ухудшается из-за функции автоматического воспроизведения рекламы и видео в новостях. Представьте себе, что вы читаете историю о международном конфликте и вдруг начинаете слышать рекламу какого-то продукта. Вам сильно захочется проскроллить всю страницу, чтобы найти и остановить видео?

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

3. Amazon занимается розничной онлайн-торговлей с начала 90-х годов. То, что когда-то было маленьким книжным интернет-магазинчиком, теперь превратилось в одного из мировых техно-гигантов. Однако, их пользовательский интерфейс оставляет желать лучшего. Грубо говоря, некоторые дизайнеры могут даже отнести этот UI в категорию «плохих». На сайте Amazon используется карусель, которая, как известно, стала яблоком раздора в сообществе UX-дизайнеров. Пользователи часто эти карусели пропускают, даже если на них размещены самые лучшие предложения в городе. Но у Amazon изображения в этих каруселях не меняются! И обычно на главной странице находятся 3-4 таких карусели к ряду. Небольшие корректировки в UI могут стоить Amazon миллионы долларов, и есть вероятность того, что они не увеличат прибыль или улучшат удобство использования. Иногда о таком интерфейсе говорят: «Работает – не трогай».

4. Drudge Report
Посетив пару десятков новостных сайтов вы поймете, что Drudge Report по сути ничем от них не отличается. Вы видите жирные заголовки, вы видите картинки, но этот веб-интерфейс выводит минимализм на совершенно новый уровень. Сайт существует с 1996 года и до сих пор в его коде можно найти древнейший HTML. Но сам портал Drudge Report делает ударение на том, что их сайт это не про дизайн – он не про яркие кнопки и/или красивые картинки, и не про (казалось бы) адаптивный дизайн! И даже несмотря на кажущийся ленивый и плохой UI, сайт по-прежнему остается чрезвычайно популярным. Что делает дизайн пользовательского интерфейса Drudge Report таким особенным, так это свобода выбора среди того, что можно почитать. Весь текст, ссылки и заголовки отформатированы одинаково, поэтому ни один из постов не выделяется среди других. Это означает, что пользователь может свободно просматривать веб-сайт в удобное для него время и самостоятельно принимать решение, что ему читать.

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

Источник
Как проводить UI-тестирование мобильных и верстки + сравнение инструментов автоматизации

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

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

Содержание:

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

Читать статью: https://ux-journal.ru/kak-provodit-ui-testirovanie-sravnenie-instrumentov.html
​​Пропорциональные шрифты (Uniwidth) в дизайне, подборка с 15 лучших шрифтов

Recursive от Arrow Type
www.recursive.design
Recursive – это вариативный шрифт, созданный для «максимальной универсальности, контроля и производительности». Recursive доступен в пропорциональной и моно версии, и обе можно дополнительно контролировать по четырем осям: Weight, Casual, Slant и Cursive.

PT Root UI от Paratype
www.paratype.com/fonts/pt/pt-root-ui
PT Root UI – это современный, серьезный шрифт без засечек, который бывает четырех типов (Light, Regular, Medium, Bold).

Golos UI от Paratype
www.paratype.com/fonts/pt/golos-ui
Шрифт Golos UI, также от Paratype, имеет три веса (Regular, Medium, Bold), а также доступен как вариативный шрифт. Golos UI в целом похож на PT Root UI, но имеет немного суженные пропорции. Он обладает широкой языковой поддержкой, включая расширенную латиницу и кириллицу

Grandstander от Etcetera Type Company
www.etceteratype.co/grandstander
Grandstander – это игривый вариативный шрифт без засечек, вдохновленный детскими книгами, который «понравится людям всех возрастов».

Angus от Black Foundry
black-foundry.com/fonts/angus
Angus – это современный шрифт без засечек с закругленными концами, который имеет четко выраженный моноширинный вид.

Halvar и Halvar Stencil Complete от TypeMates
www.typemates.com/fonts/halvar-and-stencil-complete
Halvar – это массивная система шрифтов, насчитывающая в общей сложности 162 стиля.

Источник: TypeMates
Service Gothic от HEX
hex.xyz/Service_Gothic
Service Gothic – это незавершенный вариативный шрифт, в настоящее время доступный только в верхнем регистре. Service Gothic включает 6 статических весов от Thin до Bold.

Urby и Urby Soft от TypeMates
www.typemates.com/fonts/urby
Urby Collection призван «объединить поразительный характер с технической функциональностью». Urby и его закругленный аналог Urby Soft выпускаются в пяти вариантах веса (от Thin до Black).

Geóso от Finaltype
finaltype.de/de/projekte/geoso
Geóso – это гуманистический шрифт без засечек с геометрическим оттенком. Этот шрифт доступен в девяти весах (от Thin до Heavy) с соответствующим курсивом и является универсальным для каждого стиля.

FF Kaytek family от FontFont
www.fontshop.com/superfamilies/ff-kaytek
FF Kaytek – это «свежий взгляд на канцелярские гарнитуры 90-х». Это обширное суперсемейство, состоящее из четырех стилей: Slab, Sans, Headline и Rounded. FF Kaytek Slab и Sans имеют шесть весов (от Thin до Black) плюс соответствующий курсив, в то время, как FF Kaytek Headline и Rounded имеют по семь весов (от Thin до ExtraBlack/Black).

Bahnschrift от Saja Typeworks
docs.microsoft.com/en-us/typography/font-list/bahnschrift
Bahnschrift – это оцифрованная версия шрифта DIN, известного по немецким дорожным знакам. Bahnschrift был первым вариативным шрифтом Microsoft, имеющим две оси: Weight и Width.

FF Scala family от FontFont
scalafont.com
Семейство FF Scala – это классика печати. Спроектированный в 1991 году Мартином Майором, шрифт FF Scala с засечками в старом стиле был позже расширен версией без засечек, FF Scala Sans, основанной на общем скелете. Оба семейства имеют два веса (Regular и Bold) с соответствующим курсивом и двумя сокращенными стилями.

www.205.tf/look/minerale
Minérale – это вариативный шрифт с необычными основами, грани которых пересекаются. Minérale «довольно сдержанный в своих самых тонких версиях, [но] становится более декоративным в более тяжелых версиях».

Climate Crisis Font от Helsinki Sanomat
kampanjat.hs.fi/climatefont/index.html
Шрифт Climate Crisis Font – удивительный вариативный шрифт, который пытается пролить свет на изменения климата.

Handjet от Rosetta Type
www.rosettatype.com/Handjet
Handjet – экспериментальный трехкоординатный шрифт на основе сетки. Система шрифтов Handjet содержит 23 элементарных формы (например, квадраты, клевер и сердечки), размер которых можно изменять, создавая различный вес шрифта.

Источник
23 многообещающих инструмента для дизайнеров

 Charts.css. Это современный CSS фреймворк, который использует утилитарные классы CSS для преобразования HTML-элементов в диаграммы.

Haikei – это веб-приложение для создания разнообразных SVG-форм, фонов и паттернов. Все элементы можно экспортировать и продолжить работу с ними в другом инструменте.

Fluid Space Calculator помогает создавать пространственные системы и экспортировать CSS для дальнейшей реализации в проекте. Калькулятор позволяет создавать кастомные пары пространственных значений и коэффициенты.

Night Eye WordPress Plugin помогает без затруднений настроить опцию Dark mode на любом WordPress сайте. Этот полностью кастомизируемый и диспетчеризуемый инструмент предоставляет все функции, которые вам могут понадобиться.

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

Writex.io – это бесплатное приложение для проверки правописания. С помощью AI и других умных функций вы сможете писать более грамотно.

Taloflow. Это приложение помогает найти топовые инструменты разработки и сервисы облачной инфраструктуры.

Skribbl – это коллекция бесплатных скетчей в забавном и незамысловатом стиле. Количество черно-белых иллюстраций продолжает расти.

Mobile Chat Kit  – бесплатный стартовый набор для дизайна чатов мобильных приложений в Figma, Sketch и Adobe XD.

Flowchart.fun – позволяет вводить, создавать узлы и связывать элементы для ускорения разработки простых логических схем.

Shuffle предлагает множество UI библиотек для любых цифровых проектов. Более 1,500 предварительно собранных компонентов с профессиональным дизайном.

Cryptocurrency 3D Pack – это набор трехмерных разноцветных иконок, которые можно использовать для обозначения разных элементов системы криптовалют.

Stratum: UI Kit for Figma предлагает девять вариантов интерфейса экрана, которые сразу же можно использовать в дизайне.

Conic.css – это коллекция простых градиентов. После выбора градиента нужно на него нажать левой кнопкой мыши. Это действие скопирует код градиента, и вы сможете его вставить в CSS.

Artify Illustrations – плагин для Figma, дает доступ к более чем пяти тысячам SVG и PNG иллюстраций внутри приложения. Здесь встроена опция поиска изображений, все они в высоком разрешении, а библиотека содержит иллюстрации в разных стилях.

Athina – современный дисплейный шрифт с засечками. Он отличается невероятно изящными соединительными линиями. Бесплатно доступна только демоверсия, но вы можете оплатить целое семейство шрифтов.

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

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

Inter – это простая и функциональная шрифтовая семья, в которой есть любые начертания, от Extra Light до Extra Bold. Именно эти «экстра» характеристики делают шрифт интересным и практичным.

Nothing Clean – выразительный шрифт в гранж-стилистике. Это полностью заглавный шрифт с альтернативными вариантами для некоторых букв.

Playout – веселый шрифт в рисованном стиле с интересными глифами и альтернативными буквами. Наверное, самым привлекательным в демо-наборе является значок лапки.

Rockford Sans – еще один геометрический шрифт с едва заметно закругленными углами. Он имеет восемь вариантов насыщенности и курсив. Благодаря большой высоте символов нижнего регистра и округлым элементам, он разборчивый и комфортный.

SpaceType – это оригинальный и экстравагантный шрифт, который доступен в обычном и растянутом начертании.

Источник
Проблема дизайна – это сами дизайнеры

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

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

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

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

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

Вот почему в дизайне не может быть процедурной догмы. Конечно, всегда будет существовать пуповинная связь между процессом и ремеслом. Так, есть способы делать вещи, связанные с неопровержимыми истинами о природе, материалах, времени и других аспектах Вселенной. Но дизайн – это создание желаемого будущего состояния, а не просто создание желаемого объекта. И оказывается, что лучший способ добраться из точки (A) в точку (B) зависит от того, кто туда добирается. Туда доберется лишь хороший дизайнер.

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

Источник
Обзор 20+ программ для UX-дизайнера: какую выбрать и когда

ТОП программ для понимания задачи (эмпатия)

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

1. Zoom, Skype, Slack, Teams, Почта — инструменты для вытягивания данных о проекте

2. FigJam, Miro, xMind и UX-комплект — инструменты работы с фактами и выработки стратегии

3. Google-таблицы — инструмент для создания траектории и чек-листа движения по проекту

ТОП программ для UX-исследования и анализа (эмпатия)

Результат UX-исследования – инициатива (предложение) по трансформации продуктовой экосистемы. Каждый из инструментов помогает в детализации этой инициативы. Напомню, что познакомиться с картой, которая поможет быстрее находить точки для развития приложения, вы можете в обзоре методов исследований от NNGroup.

1. Google Docs, Notion — инструменты для создания журнала движения идей

2. Google Analytics 360, OWOX BI, Amplitude — системы аналитики для количественных исследований сегментов

3. Screen Recorder, Audio Recorder, Zoom/Skype — инструменты для интервью, наблюдений и других культурных/качественных исследований в сегментах

4. Python, Retentioneering-tools, Google Sheets — расширенный набор инструментов для обработки данных

5. Системы опросов, Google-опросы и uxfeedback – инструменты для сбора дополнительные информации о предпочтениях аудитории

6. Google Docs/Google Slides, Figma, Loom – инструменты для упаковки результатов и презентации результатов UX-аналитики/UX-исследований

ТОП программ для генерации идей и разработки структуры (фокусировка)

На этапе «Эмпатия» вы погрузились в достаточный объем данных (качественных и количественных) и готовы взяться за проектирование и моделирование.

1. xMind, MindMeister, Miro — программы для структурирования информации

2. Miro, Figma — программы для создания маршрута пользователя (CJM), информационной архитектуры (IA) и шагов достижения цели в продукте (User Flow)

3. BPMN — инструменты моделирования процессов и логики работы модели продуктовой экосистемы

ТОП инструментов для проектирования, создания дизайн-концепций и прототипов (прототипирование)

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

1. Figma — онлайн-сервис для проектирования и дизайна интерфейсов

2. InVision Studio — софт для проектирования и дизайна интерфейсов

ТОП программ для UI-дизайна и стилизации (прототипирование)

Приложения для проработки экранов приложения и библиотеки компонентов, комбо для создания иллюстраций и знаков, а также приложения для создания 3D и анимации.

1. Figma — приложение для создания многоэкранных систем

2. Photoshop — софт для создания коллажей, уникальных графических ходов и фотоэффектов

3. Procreate — iPad-приложение для шустрого создания клевых иллюстраций

4. InVision Studio или ProtoPie, Principle, After Effects — программы для проработки анимации

ТОП инструментов для тестирования на реальных пользователях и сбора обратной связи (тестирование)

1. InVision Studio — программа для прототипирования и сбора обратной связи

2. Notion, Google Docs, Google Sheets — софт для создания и структурирования заметок

3. Google Drive — облако для материалов по проекту

В подборке полезные инструменты, которые приходятся в UX-проектах. Figma – это must-have на всех этапах.
Натренировать дополнительные навыки UX-дизайна вы можете на платформе Breezzly. На Breezzly вас обеспечат серией проектов по дизайну на основе исследований, обучат системе работы и натренируют навыкам в целом комплексе инструментов (Figma, InVision Studio, Principle и другие) — все это поможет усилить ваше портфолио. Пробуйте!

Читать полную статью:
https://ux-journal.ru/obzor-luchshih-programm-dlya-ux-dizajnera.html
Лучшие альтернативы Adobe Photoshop в 2021 году

Лучшая альтернатива Photoshop в целом

Affinity Photo, как и Photoshop, разработана для профессионалов. За Affinity вы заплатите один раз (не подписка), и его можно использовать как на настольных компьютерах, так и на iPad.
Инструмент сможет полностью заменить Photoshop: работа с неограниченным количеством слоев, различные режимы наложения и поддержка смарт-объектов. Affinity также может обрабатывать большие изображения и файлы RAW. Большая библиотека кистей, поддержка планшетов и Apple Pencil делают Affinity привлекательным как для фотографов, так и для художников.

Лучшая альтернатива Photoshop для начинающих

Luminar 4. Программное обеспечение Skylum исторически предоставляло более упрощенный и визуально простой макет по сравнению с другим ПО. Это отличный старт для новичков: не нужно тратить слишком много времени на изучение сложных методов постобработки. Luminar 4 представляет собой некоторую кривую обучения, если пользователи хотят научиться использовать слои при редактировании и повысить свои навыки.
Некоторые инструменты Luminar используют системы на базе искусственного интеллекта – например, чрезвычайно мощные инструменты AI Sky Replacement и AI Augmented Sky. Многие считают, что они даже превосходят лучшие инструменты Adobe.

Лучшая альтернатива Photoshop для MacOS

Pixelmator Pro разработан для бесшовной интеграции с macOS и его приложением Photos, а теперь также поддерживает устройства Apple M1. Инструмент предлагает редактирование на основе слоев, базовые настройки с помощью ИИ, многоканальные кривые и поддержку фотографий в формате RAW.
Он также имеет инструмент восстановления, который удаляет ненужные объекты, инструмент магнитного выделения для точного выбора объекта и полностью настраиваемое рабочее пространство со встроенными предустановками для расположения инструментов и боковой панели.

Лучшая бесплатная альтернатива Photoshop для настольных ПК

GIMP часто попадает в подборки лучших бесплатных инструментов. GIMP предлагает редактирование на основе слоев с поддержкой файлов PSD, TIFF, PNG, EXR и RGBE, а его темный интерфейс напоминает интерфейс Photoshop. В нем есть настройки цвета, инструменты выбора объектов, мощные инструменты ретуширования.
Одним из основных недостатков программы является то, что она не обязательно прививает те же стандартные привычки, которые вы получите от таких программ, как Photoshop или даже Affinity Photo, поэтому переход с GIMP на любой из них в будущем может стать проблемой.

Лучшая бесплатная альтернатива Photoshop для смартфонов

Snapseed. Хотя мы рекомендуем Adobe Photoshop как лучший выбор для смартфонов, речь идет об альтернативах Adobe, и в этом отношении сложно превзойти Snapseed. Snapseed – это мобильное приложение от Google, которое за последние годы сильно прокачалось. Инструмент может открывать файлы как в формате JPEG, так и в формате RAW, но, к сожалению, пока не поддерживает редактирование на основе слоев.
При ручном редактировании пользователи могут выполнять базовые настройки изображения, изменять перспективу или размер холста, добавлять зернистость, детализацию, виньетку, текст и многое другое.

Лучшая бесплатная альтернатива Photoshop на основе браузера

Photopea по своему пользовательскому интерфейсу очень похож на Photoshop, и его лучше всего описать как урезанную веб-версию фотошопа. Хотя профессионалы обычно не полагаются на редактирование в браузере, Photopea – вариант для тех, кому нужен быстрый доступ к более глубокому редактированию в сравнении с большинством бесплатных веб-приложений.
Photopea совместима с файлами PSD Photoshop, а также с JPEG, PNG, DNG, GIF, SVG и PDF. Файлы хранятся локально и не загружаются на сервер, что многие сочтут преимуществом. При использовании с Chromebook фотографии можно сохранять прямо на личном Google Диске. Даже если пользователи отключаются от Интернета после открытия

Источник
​​Обычный веб-дизайнер создает шаблонные сайты с помощью конструкторов. Востребованный — знает, как сделать сайт с удобным пользовательским интерфейсом и запоминающимся дизайном. Зачем быть обычным, если можно стать востребованным?

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

Делать сайты с продуманным UX интерфейсом;
Анимировать интерфейсы в After Effects;
Добавлять 3D-графику с помощью Blender;
Разрабатывать интерактивные прототипы в Figma.

Куратор курса — Роман Храмов, сооснователь Cuberto — агентства года по версии Awwwards. Среди его клиентов — Яндекс, Билайн, McDonalds, Cisco, Raiffeisen. Под руководством Романа и других преподавателей — опытных практиков рынка — вы не только изучите основные инструменты веб-дизайна, но и пополните портфолио сильными работами. А в качестве дипломного проекта соберете сайт по брифу реального заказчика. 

Подробнее о программе курса: https://clc.am/MTHzrg
До 12 июля скидка 50% по промокоду PSD.
6 психологических законов для хорошего UX-дизайна

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

— Закон Якоба: выглядеть знакомо
— Закон Хика: упрощать выбор
— Закон Миллера: быть проще
— Гештальт-принципы: делайте умные группировки
— Эффект фон Ресторффа: выделяйте разумно
— Ментальные модели: не изобретайте велосипед

Читать статью: https://design-glory.com/7010/6-psihologicheskih-zakonov-dlya-horoshego-ux-dizajna
Пользовательский опыт при работе с UX

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

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

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

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

3. Практикуйте
Пользовательский опыт (UX) – это искусство планирования дизайна продукта таким образом, чтобы взаимодействие с готовым продуктом было как можно более позитивным. Дизайн пользовательского опыта затрагивает все моменты того, как продукт или услуга воспринимаются пользователями.

4. Сделайте опыт ценным
Опыт пользователя (UX) – это то, что человек думает об использовании системы. Пользовательский опыт субъективен по своей природе, потому что он связан с производительностью, чувствами и мыслями человека о системе. Пользовательский опыт динамичен, потому что он меняется со временем по мере изменения обстоятельств. Правильный UX-дизайн должен удовлетворить потребности и ожидания.

5. Человеческий фактор
Пользовательский опыт – это то, что человек чувствует себя при взаимодействии с системой. Система может быть веб-сайтом, веб-приложением или настольным программным обеспечением и в современном контексте обычно обозначается некоторой формой взаимодействия человека с компьютером или мобильным.

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

Как добиться отличного UX?
Успешный UX-дизайн достигается путем исследования и разработки рынка, чтобы действительно понять, что делает пользовательский опыт положительным. Благодаря разработке и стратегии, отличный дизайнер UX может начать создавать безупречный опыт для каждого пользователя.

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

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

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

Источник