Найти в Дзене

UX/UI дизайн. Самые полезные ссылки для изучения/вдохновения/работы

Здесь собраны ссылки на ресурсы для изучения и работы UX/UI дизайнером. Успешного изучения и работы! (официальный сайт) - доступный бесплатно онлайн сервис. (официальный сайт) - платное приложение, требует загрузки. (официальный сайт) - платное приложение для прототипирования, уступает Protopie по возможностям, но помогает быстро собирать прототипы с простыми дизайнами. (официальный сайт) - платный онлайн сервис (доска), который дизайнеры используют для проведения мозговых штурмов, дизайн-спринтов, составления карт поведения. (официальный сайт) - онлайн сервис для создания/использования и интеграции motion-графики на веб-сайты; хороший инструмент, подходящий для многих проектов. (официальный сайт) - онлайн сервис для быстрого создания motion-графики для дизайнов; удобная интеграция с Figma. (с официального сайта) - платное приложение, требует загрузки (с официального сайта) - платное приложение, требует загрузки от компании Google Если этих сервисов недостаточно, то рекомендую пос
Оглавление

Здесь собраны ссылки на ресурсы для изучения и работы UX/UI дизайнером. Успешного изучения и работы!

💻 Основной софт

Figma

(официальный сайт) - доступный бесплатно онлайн сервис.

  • "Бесплатный подробный курс по Фигме" от Алексея Бычкова на YouTube
  • Полезные плагины: Iconify (огромная библиотека иконок), Icons8 Background Remover (удаление фона на изображениях), Image Tracer (конвертация растровых изображений в вектор), HTML To Design (для быстрого импортирования html страниц в Figma со всеми слоями), Arc (закругление текста), Shape Move (позволяет быстро и легко создавать анимацию из обычных элементов, экспорт платный), Tint Frame (создание полупрозрачных заглушек, полезно для отрисовки попавов),
  • Есть китайский аналог, набирающий обороты - PIXSO

Protopie

(официальный сайт) - платное приложение, требует загрузки.

  • Лучший софт для создания кликабельных прототипов (и очень дорогой! при использовании вне рамок обучения)

InVision

(официальный сайт) - платное приложение для прототипирования, уступает Protopie по возможностям, но помогает быстро собирать прототипы с простыми дизайнами.

Miro

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

Lottiefiles

(официальный сайт) - онлайн сервис для создания/использования и интеграции motion-графики на веб-сайты; хороший инструмент, подходящий для многих проектов.

Jitter

(официальный сайт) - онлайн сервис для быстрого создания motion-графики для дизайнов; удобная интеграция с Figma.

Adobe Illustrator

(с официального сайта) - платное приложение, требует загрузки

💻 Дополнительный софт:

Adobe Photoshop

(с официального сайта) - платное приложение, требует загрузки

🟥 Лучшие каналы на YouTube для изучения UX/UI

На английском

  • Malewicz - канал дизайнера с одноименной фамилией, известен в широких кругах дизайн-сообщества, как сильный UI дизайнер.
  • Figma - официальный канал Figma, все обновления/нововведения программы в виде роликов с инструкцией.
  • DesignCourse - на канале много видео-материала по UX/UI-дизайну и фронент-разработке.
  • Minh Pham - один из лучших персональных каналов про UX/UI на YouTube.
  • Mizko - автор следит за трендами в UX/UI сфере и делиться полезными фишками по Figma и процессу работы дизайнером.
  • Flux Academy - один из самых больших актуальных каналов, посвященный UX/UI дизайну, туториалам по Figma.

На русском

  • "Канал Алексея Бычкова" - канал фриланс-дизайнера Алексея Бычкова, где он делится обновлениями в Figma и в дизайн-сообществе, делает разборы UX/UI проектов и вообще весь канал посвящен UX/UI.
  • "Disarto" - канал о продуктовом дизайне и визуальной коммуникации, есть полезные видео по анализу и аналитике UX, а также имеется рубрика с разборами UX/UI проектов.

📑 Сайты с полезными статьями/материалами

На английском

  • UX Planet - место, где дизайнеры пишут и публикуют свои статьи на абсолютно разные темы; возможно потребуется vpn.
  • UXPin - множество статей разбитых на отдельные подкатегории UX/UI дизайна.
  • Laws of UX - коллекция самых известных практик и правил, используемых при разработке дизайнов интерфейсов.
  • UX Library - сборник полезных ресурсов по категориям: UX research, UX process, UI design, UX writing.
  • UX Archive - сборник скринов экранов приложений.
  • Checklist Design - списки чек-листов для проверки завершенности дизайнов/элементов.
  • UX Design Institute - статьи от создателей онлайн-института по UX-дизайну.
  • Medium/UX - последний в этом списке, но по не значимости, а из-за доступности (только с VPN).

На русском

📙 Самые важные Гайдлайны

WCAG

Гайды Apple

Гайды Material Design

от компании Google

🖼️ Где брать изображения

Сайты

  • Freepik (форматы: изображения, иконки и фото в PSD/SVG/PNG/JPEG; видео; 3D объекты)
  • Unsplash (форматы: фото в JPG)
  • Pexels (форматы: фото/видео в JPEG/MOV)
  • Shutterstock (форматы: все в PSD/SVG/PNG + MP3 + MOV + все форматы для 3D на turbosquid)
  • Adobe Stock (форматы: все в PSD, SVG, PNG) // очень дорого, но зато есть оригинальные изображения; бесплатные элементы также присутствуют, но они "дешево выглядят" и их мало
  • Envato Elements (форматы: все) // относительно недорого и очень много материалов по подписке

Плагины Figma

  • Unsplash (прямой импорт изображений со стока Unsplash сразу в Figma)
  • Illustrations (библиотека бесплатных иллюстраций)
  • User Profile (генератор аватарок)
  • Pexels (прямой импорт изображений со стока Pexels сразу в Figma)
  • Freepik (прямой импорт изображений со стока Freepik сразу в Figma)
  • Iconify (огромная библиотека иконок)
  • Brandfetch (импорт ресурсов всех брендов напрямую в Figma)

🔠 Где искать шрифты

  1. Google Fonts - наверно, самый известный ресурс со шрифтами среди дизайнеров, в наличии широкий выбор шрифтов, которые легко использовать и интегрировать и в дизайн-проект и на сайты.
  2. Font Squirrel - тут представлен большой выбор высококачественных шрифтов, которые можно бесплатно использовать в коммерческих целях.
  3. FontSpace - если предыдущих сайтов не хватило, то можно воспользоваться этим.
  4. Fontesk - ещё один сайт, если предыдущие чем-то не понравились.

🪄 Ещё полезные сервисы

Для процесса

  • UIGradients - сайт с большим количеством заготовленных красивых градиентов.
  • Text.ru - сервис для подсчета символов в строке (поможет соблюдать баланс в размере 70+- символов в строке для обеспечения удобочитаемости текста на веб-страницах).
  • Coolors - генератор гармоничных цветовых схем.
  • UI-Patterns - сайт с коллекцией паттернов и примеров проектирования пользовательского интерфейса с объяснениями.

Для поиска вдохновения

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

📚 Какие книги почитать (доступные на русском)

Must have UX/UI книги:

  • "Hooked: на крючке" (на livelib) - это книга о создании привычек у пользователей и о том, как это может быть использовано для увеличения продаж и привлечения клиентов. Автор Нир Эяль представляет четыре простых, но эффективных шага, которые можно использовать для создания привычек: триггер, действие, переменное вознаграждение и инвестиция.
  • "Inspired. Все, что нужно знать продакт-менеджеру" (на livelib) - в этой книге Марти Кейги рассказывает о том, как создавать продукты, которые будут любить ваши пользователи, а также о том, как организовать работу команды на достижение общей цели. Книга включает в себя множество примеров и практических советов по управлению продуктом на всех этапах его жизненного цикла: от идеи до выпуска на рынок и дальнейшего сопровождения.
  • "100 главных принципов дизайна" (на livelib) - это книга автора Сьюзан Уэйншенк, в которой она описывает ключевые принципы дизайна, необходимые для создания эффективных и красивых дизайнов. Книга содержит множество примеров и иллюстраций, которые помогают читателям лучше понимать, как применять эти принципы в своей работе.
  • "Законы UX-дизайна. Понимание психологии пользователя - ключ к успеху" (на livelib) - в этой книге Джона Яблонского описаны законы Якоба, Фиттса, Хика, Миллера, Постела, Теслера и эффект фон Ресторффа. Рассмотрено правило «на пике и в конце», связанное с особенностью выработки суждений и эффект восприятия эстетически приятного дизайна как наиболее удобного в использовании.
  • "Не заставляйте меня думать" (на livelib) - это книга, написанная Стивом Кругом, в которой он описывает принципы удобного интерфейса для веб-страниц. Круг объясняет, что хороший дизайн должен быть интуитивно понятным и не требовать дополнительных усилий со стороны пользователя.
  • "Спринт: Как разработать и протестировать новый продукт всего за пять дней" (на livelib) - в этой книге Джейк Кнапп описывает процесс "спринта", который представляет собой пятидневную методологию, при помощи которой можно создавать и тестировать новые продукты. В книге описаны шаги, которые нужно выполнить в каждый день спринта, начиная от понимания целей и задач продукта до создания прототипа продукта и тестирования его с реальными пользователями.
  • "Дизайн - это работа" (на livelib) - благодаря этой книге Майка Монтейро вы можете научиться: искусству предоставления услуг, ценить свою работу и получать за это вознаграждение. Потому что дизайн – это работа.

В дополнение:

  • "Основы стиля в типографике" (на livelib) - в этой книге Роберта Брингхёрста можно найти ответы на следующие вопросы "Что такое хорошая типографика? Каковы критерии ее качества? Как добиться лучших результатов в оформлении текста?"
  • "Дизайн привычных вещей" (на livelib) - это книга, написанная американским дизайнером Доном Норманом. В книге обсуждаются проблемы, с которыми сталкиваются люди в повседневной жизни, когда они взаимодействуют с различными предметами, включая электронику, бытовую технику и компьютеры. Норман предлагает ряд рекомендаций для дизайнеров, которые помогут им создавать более удобные и понятные вещи для пользователей. Книга стала настоящей классикой в области дизайна и часто используется в учебных заведениях и компаниях, занимающихся дизайном.
  • "Искусство цвета" (на livelib) - это известный труд яркого и талантливого преподавателя и художника Иоганнеса Иттена. В книге автор рассматривает цветовую теорию и принципы цветового восприятия, а также дает множество практических рекомендаций и упражнений, которые помогают читателю лучше понять и использовать цвет в искусстве и дизайне. Книга является обязательным чтением для всех, кто интересуется цветом и его ролью в творческом процессе.
  • "О шрифте" (на livelib) - это книга Эрика Шпикерманна, посвященная шрифтам и типографике. В книге он рассказывает о том, как шрифты влияют на нас, как они были созданы и как они используются в нашей повседневной жизни. Он также обсуждает различные типы шрифтов и их особенности, а также дает советы по выбору шрифтов для различных проектов.
  • "Рисовый штурм" (на livelib) - это сборник техник и методов, которые помогают стимулировать творческое мышление и генерировать новые идеи (например, аналогическое мышление, преодоление стереотипов, создание ассоциаций, использование метафор и другие). Автор книги, Майкл Михалко, является экспертом в области творческого мышления и развития креативности.

🎬 Что посмотреть

Кино/Сериалы

Видео на YouTube