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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. «Модульные системы в графическом дизайне. Пособие для графических дизайнеров, типографов и оформителей выставок» Йозефа Мюллер-Брокманна. Это самое понятное пособие по использованию модулей и сеток в графическом дизайне;
2. «Новая типографика. Руководство для современного дизайнера» Яна Чихольда — одна из лучших книг про типографику (не про буквы). Если найдешь, купите сразу шестое издание (оно лучше);
   
3. «Ководство» Артемия Лебедева — заметки о дизайне и о интерфейсах, некое саммари про дизайн и все, что с ним связано, а также про интернет и то, как он начинался;
   
4. «Сожги свое портфолио! То, чему не учат в дизайнерских школах» Майкла Джанда — здесь есть всё: начиная от принципов работы в команде и заканчивая 111-ю советами, как не превратить свою дизайнерскую карьеру в сущий ад;
   
5. «Баухаус» Фрэнка Уитфорда — один из лучших обзоров истории и достижений Баухауса — школы архитектуры и дизайна, приемы которой до сих пор используют художники со всего мира;
   
6. «Джони Айв. Легендарный дизайнер Apple» Линдер Кани — о том, как на свет появились культовые продукты компании Apple. Книга вдохновила меня, поэтому я периодически ее перечитываю и надеюсь, что на тебя она тоже окажет влияние.
   

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

1. «Логотип и фирменный стиль. Руководство дизайнера» Дэвида Эйри;
2. «Графический дизайн. Visual Grammar» Кристиана ЛеБорга;
   
3. «Искусство цвета» Иоханнеса Иттена;
   
4. «О языке композиции» Юрия Гордона;
   
5. «Школа дизайна: Шрифт. Практическое руководство для студентов и дизайнеров» Ричарда Пулина;
   
6. «Дизайн и цвет. Практикум. Реальное руководство по использованию цвета в графическом дизайне» Шона Адамса и Терри Ли Стоун.
   

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

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

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

• Curated Design — найти вдохновение и развивать свою насмотренность;
• Дизайн-снайпер — канал о развитии творческого человека.

  Визуальная культура и дизайн под прицелом смысла. Субъективный взгляд;

• Цифровые экосистемы — канал Heads and Hands про цифровые экосистемы и супераппы. Рассказывают, как они создаются и трансформируются;
• UX Horn — регулярная подборка лучших постов про UX-исследования и смежных областей;
• UI/UX Designer — один из крупнейших каналов с полезной инфой в мире дизайна;
  
• Dynamic Perspectives — Kostya Gorsky — канал Кости Горского, со-основателя hirehire, экс-дизайн-руководителя в Интеркоме и Яндексе;
• Вёрстка презентаций — канал Саши Бизикова о вёрстке презентаций и всего, что связано с их оформлением;
• Ui Web Design — канал с классными работами по веб-дизайну для вдохновения;
• uxuiтельные истории Богдана Гончаренко — авторский канал про дизайн продуктов;
• Сломай и сделай нормально — канал CEO digital-агентства Nimax;
• Про удобство (Михаил Греков) — про продуктоводство, UX, работу с b2b-продуктом, кейсы из жизни и пользование Озон;
• Wannabe like Rozov — в канале Миша Розов пишет про дизайн, управление командами, про рост дизайнеров и возможные препятствия;
• Что вы мне рекламируете? — авторский канал про диджитал и маркетинг;
• Главред Максим Ильяхов — заметки о тексте, редактуре и рекламе.

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 — подойдет для новичков. Плюсы онлайн-редактора: он простой и понятный, к тому же в нем есть готовые шаблоны, которые помогут быстро собрать то, что тебе необходимо.

• Для работы с 3D советую обратить внимание на два варианта: Blender и Cinema 4D. Не скажу, что программы простые, но когда мы говорим о 3D, понятно, что уровень скиллов растет. Кстати, по работе с Blender есть классный курс от Mad Rabbit, иронично, что он так и называется «Самый лучший курс по Blender 3D». Но все-таки «самый сок» в плане полезности образовательного контента — официальная документация.
• Кстати, чуть не забыл про Spline — современный инструмент с простым и понятным интерфейсом. Если изначально работа с 3D пугает, то начать точно стоит со Spline. Редактор интегрирован в браузер, можно делать анимацию объектов, а еще — выгружать код. Большой плюс — возможность совместной работы над проектами, а-ля google-доки. Звучит круто, да?
  

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

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

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

• наглядно показать карту сайта;
• создавать схемы страниц;
  
• добавлять описание блоков контента;
  
• работать совместно с командой.
  

• Coda / Notion — для заметок и планирования. Любая работа любит системность и упорядоченность, поэтому многие используют такие платформы, как Trello, который, увы, уходит из России. Чтобы было легко, просто и с современным дизайном, используй Coda и Notion. Знаю ребят, которые на базе этих платформ делали целые фреймворки, так что смело можешь юзать;
• Loom — полезная штука, чтобы делать запись скринкаста со своими пояснениями. Например, когда презентуешь работу заказчику или даешь пояснения разработчику, можешь до рабочих зумов сделать скринкаст, чтобы после вы уже более детально разбирали конкретные вопросы, а всю основную информацию — под запись. Это значительно экономит время, а иногда просто дает новые возможности для саморефлексии (если стараешься работать над развитием коммуникативных навыков, например). В общем, классный софт.
  

Если у тебя уже есть опыт в графическом дизайне, осваивать 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) или оставить комментарий под статьей.