Закладки дизайнера: детальное пособие для джунов (и не только) — в супергайде от CEO AffArts Игоря Фроловского. Часть I

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

Рассказываю, с чего начать карьеру начинающему UX/UI-дизайнеру: даю полезные ресурсы, разбираю неочевидные факапы, советую, где поучиться и как искать первые заказы.

В первой части — крутые книги, нужные тг-каналы и самые важные инструменты для работы.

Как познакомиться с дизайном без боли и страданий (ну почти)

Telegram-каналы, на которые стоит подписаться

Софт для UX/UI: какими инструментами пользоваться?

Почему я решил написать этот гайд? Чтобы без лишней воды и лирики рассказать о своем пути в UX/UI-дизайне и помочь начинающим специалистам значительно сократить и упростить этот карьерный челлендж. Меня часто спрашивают, с чего начать, что почитать и что посмотреть — этим гайдом я хочу закрыть все базовые вопросы и помочь найти работу своей мечты тем, кто реально этого хочет и готов идти к цели и конкретным результатам.

Эта статья будет полезна джунам и тем, кто хочет попробовать, а может и прокачать свои скиллы в дизайне, но не знает, с чего начать, теряясь среди бесконечных курсов типа: «Как за 2 недели стать UX/UI-дизайнером и зарабатывать по 100 000 ₽ в день». Лови план, по которому я бы учился сам. Погнали!

Читай книжки. Кто бы что ни говорил, книги — это база. Увы, большинство людей находит время только на подкасты об успешном успехе по дороге на нелюбимую работу или на вечерний просмотр Reels в соцсетях, а неопытные джуны зачастую склонны и вовсе пропускать весь ознакомительный этап. Считай меня стариком, но я убежден: если ты действительно хочешь разобраться в чем-то, нужно читать книги. Теперь о главном.

«Интерфейс. Основы проектирования взаимодействия» Алана Купера

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

«Книга про буквы от Аа до Яя» Юрия Гордона

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

«Дизайн привычных вещей» Дональда Нормана

Интернет (и не только он) должен быть удобным и интуитивно понятным. Прочитай, пожалуйста, Нормана, чтобы, как он сам пишет, «вернуть контроль над вещами» и исправить предметы, которые не так удобны, как хотелось бы. Это альма-матер для UX/UI-дизайнера с базовыми принципами дизайна, так что рекомендую не пропускать.

«Дизайн-мышление: канвасы и упражнения. Полный набор инструментов» Леврик Михаэль, Лейфер Ларри, Линк Патрик

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

Дополнительно можно почитать:

Также не лишним будут:

Сегодня буквально все — от айтишников и до бьюти-блогеров — перешли в Telegram. Почему? Все просто: это удобно. Любому специалисту важно быть в теме и следить за тем, что происходит в отрасли и «что сейчас в тренде». Выбери топ-5 или топ-10 тг-каналов, которые будут тебе идейно близки, и подпишись на них.

Совсем не обязательно (скорее, даже вредно) следить за всем-всем-всем, подписывайся по принципу «меньше, но качественнее». Это поможет сформировать так называемую comfort zone, из которой можно черпать полезную информацию и вдохновение на проекты.

Каналы, которые можно почитать и вдохновиться:

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

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

С чего начать знакомство с Figma?

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

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

Самый полезный, но неочевидный источник — официальная документация. Если ты умеешь быстро вычленять суть из большого объема информации, то за неделю сможешь уверенно освоить базу и даже собрать что-то с Auto Layout и компонентами.

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

Сразу забудь про Sketch, Adobe XD и другие аналоги. Просто забудь и все. Люди, которые до сих пор ими пользуются, либо не разбираются, либо используют их по привычке. Чтобы делать качественный продукт, не нужно владеть всеми возможными графическими редакторами, главное — научиться свободно использовать лучшие из них. Твоя задача — стать мастером Figma. Что делать, чтобы этого добиться — читай далее.

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

Если говорим про вектор и иллюстрации — Illustrator. Он устроен немного сложнее, чем Photoshop, но так как базовые функции аналогичны всем графическим программам, многое ты поймешь на интуитивном уровне, а остальное — добьешь через видеоуроки и практику.

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

Используй FigJam — новый вайтборд от Figma, который сразу интегрирован в платформу Figma, что удобно, потому что твой проект — от первоначальной идеи до окончательного прототипа — может храниться в одном месте. Разобраться в приложении легко, ты сделаешь это буквально за 15-20 минут методом тыка. Изначально FigJam задумывался как единый «центр взаимодействия», поэтому он собран так, чтобы можно было реализовать разные задачи под разные цели: от командного брейншторма до итоговой сборки или фреймворка.

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

Для работы со структурой сайтов не видел ничего удобнее, чем Octopus. Используй, чтобы:

Если у тебя уже есть опыт в графическом дизайне, осваивать UX/UI будет проще. Пока ты джуниор, научись базово пользоваться пакетом Adobe и Figma, а еще хотя бы немного почитай про 3D и motion-дизайн, чтобы «быть в теме». После, когда станешь мидлом и сможешь реализовывать собственные небольшие проекты, работай над тем, чтобы стать более уверенным пользователем этих программ, и постепенно изучай новые.

Всегда структурируй информацию, чтобы не терять те знания и навыки, которые приобрел на начальных этапах. Чтобы стать сеньором, ты должен в совершенстве владеть Figma, Photoshop и Illustrator, а еще не бояться работать с проектами, связанными с 3D и интерактивной инфографикой. Работай над hard и soft skills, изучай опыт коллег и не бойся совершать ошибки — иначе застрянешь и не сможешь двигаться вперед.

Поздравляю, первая часть материала освоена!

Уже завтра в продолжении супергайда тебя ждет разбор UX/UI: только стоящие курсы и лайфхаки по составлению CV, общению с HR и поиску работы. И, конечно, разговор о soft skills.

Обо всем, что происходит в мире UX/UI в целом и в AffArts в частности, пишу здесь —

Подписывайся, чтобы быть в теме и стать частью нетворкинга. Также буду рад, если поделишься своим опытом карьеры в UX/UI: можно не стесняться писать в личку в телеге (@ifrolovskiy) или оставить комментарий под статьей.