Здесь собраны ссылки на ресурсы для изучения и работы UX/UI дизайнером. Успешного изучения и работы!
💻 Основной софт
Figma
(официальный сайт) - доступный бесплатно онлайн сервис.
- Полезные плагины: Iconify (огромная библиотека иконок), Icons8 Background Remover (удаление фона на изображениях), Image Tracer (конвертация растровых изображений в вектор), HTML To Design (для быстрого импортирования html страниц в Figma со всеми слоями), Arc (закругление текста), Shape Move (позволяет быстро и легко создавать анимацию из обычных элементов, экспорт платный), Tint Frame (создание полупрозрачных заглушек, полезно для отрисовки попавов),
- Есть китайский аналог, набирающий обороты - PIXSO
Protopie
(официальный сайт) - платное приложение, требует загрузки.
- Лучший софт для создания кликабельных прототипов (и очень дорогой! при использовании вне рамок обучения)
- Плейлист с туториалами на YouTube
InVision
(официальный сайт) - платное приложение для прототипирования, уступает Protopie по возможностям, но помогает быстро собирать прототипы с простыми дизайнами.
Miro
(официальный сайт) - платный онлайн сервис (доска), который дизайнеры используют для проведения мозговых штурмов, дизайн-спринтов, составления карт поведения.
Lottiefiles
(официальный сайт) - онлайн сервис для создания/использования и интеграции motion-графики на веб-сайты; хороший инструмент, подходящий для многих проектов.
Jitter
(официальный сайт) - онлайн сервис для быстрого создания motion-графики для дизайнов; удобная интеграция с Figma.
Adobe Illustrator
(с официального сайта) - платное приложение, требует загрузки
- Экспресс-курс изучения программы от VideoSmile; И дополнительные бесплатные материалы для изучения программы от VideoSmile
💻 Дополнительный софт:
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.
- Checklist Design - списки чек-листов для проверки завершенности дизайнов/элементов.
На русском
- UpRock / статьи
- Яндекс.Практикум / дизайн
- Medium UX / только с VPN
📙 Самые важные Гайдлайны
WCAG
- Web Content Accissibility Guidlines - руководства по доступности веб-контента. Представляет из себя набор рекомендаций для создания и проверки доступности интерфейса для пользователей с инвалидностью.
- "Что такое WCAG и для чего его используют?" от Web-стандарты
Гайды Apple
Гайды Material Design
от компании Google
🖼️ Где брать изображения
Сайты
- Adobe Stock (форматы: все в PSD, SVG, PNG) // очень дорого, но зато есть оригинальные изображения; бесплатные элементы также присутствуют, но они "дешево выглядят" и их мало
Плагины Figma
- Unsplash (прямой импорт изображений со стока Unsplash сразу в Figma)
- Illustrations (библиотека бесплатных иллюстраций)
- User Profile (генератор аватарок)
- Pexels (прямой импорт изображений со стока Pexels сразу в Figma)
- Freepik (прямой импорт изображений со стока Freepik сразу в Figma)
- Brandfetch (импорт ресурсов всех брендов напрямую в Figma)
🔠 Где искать шрифты
- Google Fonts - наверно, самый известный ресурс со шрифтами среди дизайнеров, в наличии широкий выбор шрифтов, которые легко использовать и интегрировать и в дизайн-проект и на сайты.
- Font Squirrel - тут представлен большой выбор высококачественных шрифтов, которые можно бесплатно использовать в коммерческих целях.
- FontSpace - если предыдущих сайтов не хватило, то можно воспользоваться этим.
- 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) - это сборник техник и методов, которые помогают стимулировать творческое мышление и генерировать новые идеи (например, аналогическое мышление, преодоление стереотипов, создание ассоциаций, использование метафор и другие). Автор книги, Майкл Михалко, является экспертом в области творческого мышления и развития креативности.