Говорят, самое сложное в любом деле — начать. Не врут! Если точно знаешь, как действовать, можно быстро и эффектно залететь в новую профессию. Перед тобой очень подробный и профессиональный гайд — в открытом доступе я таких ещё не встречал.
Рассказываю, с чего начать карьеру начинающему UX/UI-дизайнеру: даю полезные ресурсы, разбираю неочевидные факапы, советую, где поучиться и как искать первые заказы.
В первой части — крутые книги, нужные тг-каналы и самые важные инструменты для работы.
Супергайд. Часть I:
Почему я решил написать этот гайд? Чтобы без лишней воды и лирики рассказать о своем пути в UX/UI-дизайне и помочь начинающим специалистам значительно сократить и упростить этот карьерный челлендж. Меня часто спрашивают, с чего начать, что почитать и что посмотреть — этим гайдом я хочу закрыть все базовые вопросы и помочь найти работу своей мечты тем, кто реально этого хочет и готов идти к цели и конкретным результатам.
Я Игорь, CEO и главный по дизайну в AffArts. Чтобы прийти к этой позиции мне потребовалось более 7 лет, в течение которых я рандомно изучал все, что попадалось под руку — статьи по первым google-ссылкам, требования крупных компаний, чужие диджитал-проекты, проходил онлайн-курсы и вкладывал все больше и больше как денег, так и времени в свое обучение. Если бы 7 лет назад мне на глаза попался этот гайд, все было бы намного проще — за пару лет я бы стал сеньор-дизайнером, и чтобы открыть собственную дизайн-студию мне понадобилось бы значительно меньше времени.
Эта статья будет полезна джунам и тем, кто хочет попробовать, а может и прокачать свои скиллы в дизайне, но не знает, с чего начать, теряясь среди бесконечных курсов типа: «Как за 2 недели стать UX/UI-дизайнером и зарабатывать по 100 000 ₽ в день». Лови план, по которому я бы учился сам. Погнали!
С чего начать, или как познакомиться с дизайном без боли и страданий (ну почти)
Читай книжки. Кто бы что ни говорил, книги — это база. Увы, большинство людей находит время только на подкасты об успешном успехе по дороге на нелюбимую работу или на вечерний просмотр Reels в соцсетях, а неопытные джуны зачастую склонны и вовсе пропускать весь ознакомительный этап. Считай меня стариком, но я убежден: если ты действительно хочешь разобраться в чем-то, нужно читать книги. Теперь о главном.
«Интерфейс. Основы проектирования взаимодействия» Алана Купера
Библия для дизайнера. Что внутри? Во-первых, подробно описаны принципы и шаблоны проектирования взаимодействия, во-вторых, после прочтения ты действительно станешь лучше понимать интерфейсы и модели поведения пользователей, в том числе и то, как провести полное качественное исследование, если это будет нужно (ну вдруг). Парадокс, что книга про интерфейсы не содержит картинок. Вообще. Но гарантирую, после прочтения наступит просветление и катарсис.
«У нашей книги простая предпосылка: если мы проектируем и констатируем продукт таким образом, чтобы использующие его люди достигали своих целей, эти люди будут продуктивны, довольны и счастливы — и тогда они с радостью заплатят за наш продукт и посоветуют его другим. Если при этом мы сможем окупить свои затраты, наш бизнес станет успешным».
«Книга про буквы от Аа до Яя» Юрия Гордона
Эта книга про буквы (спасибо, кэп). В основном, кириллические. Здесь профессиональный шрифтовик рассуждает о том, что такое кернинг, трекинг и почему русские знаки не столь красивы, как их латинские родственники. Автор много внимания уделяет логотипам и элементам типографики, поэтому все, что ты прочитаешь, можно будет применить на практике.
«В современных шрифтах засечки связаны с инструментом письма исключительно традицией — читательской и эстетической. Это означает, что автор шрифта может придать засечкам любую форму, но без раздражения будут приняты только те, которые сумели прикинуться чем-то более-менее привычным».
«Дизайн привычных вещей» Дональда Нормана
Интернет (и не только он) должен быть удобным и интуитивно понятным. Прочитай, пожалуйста, Нормана, чтобы, как он сам пишет, «вернуть контроль над вещами» и исправить предметы, которые не так удобны, как хотелось бы. Это альма-матер для UX/UI-дизайнера с базовыми принципами дизайна, так что рекомендую не пропускать.
«У меня есть проблемы с открыванием дверей, и это стало настолько широко известно, что двери, которые трудно открыть, часто называют «двери Нормана». Как может такая простая вещь, как дверь, вызывать столько сложностей? Возможно, дверь отодвигается в сторону. Если так, то в какую?»
«Дизайн-мышление: канвасы и упражнения. Полный набор инструментов» Леврик Михаэль, Лейфер Ларри, Линк Патрик
Из книжки ты узнаешь, что такое дизайн-мышление и как оно работает, из чего развиваются успешные инновации и как адаптировать конкретные инструменты под определенную ситуацию. Можно сказать, это путеводитель в мир UX/UI-дизайна. Используй с умом.
«Отправной точкой всех размышлений являются люди и их потребности, возможности, опыт и знания. Люди знают, что такое удовольствие (достижения) и разочарование (боль), и у них есть задачи, которые нужно выполнить»
Дополнительно можно почитать:
- «Модульные системы в графическом дизайне. Пособие для графических дизайнеров, типографов и оформителей выставок» Йозефа Мюллер-Брокманна. Это самое понятное пособие по использованию модулей и сеток в графическом дизайне;
- «Новая типографика. Руководство для современного дизайнера» Яна Чихольда — одна из лучших книг про типографику (не про буквы). Если найдешь, купите сразу шестое издание (оно лучше);
- «Ководство» Артемия Лебедева — заметки о дизайне и о интерфейсах, некое саммари про дизайн и все, что с ним связано, а также про интернет и то, как он начинался;
- «Сожги свое портфолио! То, чему не учат в дизайнерских школах» Майкла Джанда — здесь есть всё: начиная от принципов работы в команде и заканчивая 111-ю советами, как не превратить свою дизайнерскую карьеру в сущий ад;
- «Баухаус» Фрэнка Уитфорда — один из лучших обзоров истории и достижений Баухауса — школы архитектуры и дизайна, приемы которой до сих пор используют художники со всего мира;
- «Джони Айв. Легендарный дизайнер Apple» Линдер Кани — о том, как на свет появились культовые продукты компании Apple. Книга вдохновила меня, поэтому я периодически ее перечитываю и надеюсь, что на тебя она тоже окажет влияние.
Также не лишним будут:
- «Логотип и фирменный стиль. Руководство дизайнера» Дэвида Эйри;
- «Графический дизайн. Visual Grammar» Кристиана ЛеБорга;
- «Искусство цвета» Иоханнеса Иттена;
- «О языке композиции» Юрия Гордона;
- «Школа дизайна: Шрифт. Практическое руководство для студентов и дизайнеров» Ричарда Пулина;
- «Дизайн и цвет. Практикум. Реальное руководство по использованию цвета в графическом дизайне» Шона Адамса и Терри Ли Стоун.
Telegram-каналы, на которые стоит подписаться
Сегодня буквально все — от айтишников и до бьюти-блогеров — перешли в Telegram. Почему? Все просто: это удобно. Любому специалисту важно быть в теме и следить за тем, что происходит в отрасли и «что сейчас в тренде». Выбери топ-5 или топ-10 тг-каналов, которые будут тебе идейно близки, и подпишись на них.
Совсем не обязательно (скорее, даже вредно) следить за всем-всем-всем, подписывайся по принципу «меньше, но качественнее». Это поможет сформировать так называемую comfort zone, из которой можно черпать полезную информацию и вдохновение на проекты.
Начнем с самопиара — в своем тг я рассказываю про внутреннюю кухню AffArts, развитие команды с нуля, наши факапы и лучшие кейсы, а еще даю немного лайвов из жизни. Буду рад, если ты найдешь там что-то полезное для развития себя и своих навыков.
Каналы, которые можно почитать и вдохновиться:
- 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 — в канале Миша Розов пишет про дизайн, управление командами, про рост дизайнеров и возможные препятствия;
- Что вы мне рекламируете? — авторский канал про диджитал и маркетинг;
- Главред Максим Ильяхов — заметки о тексте, редактуре и рекламе.
Софт для UX/UI: какими инструментами пользоваться?
Figma — основной инструмент, который ты будешь регулярно использовать. В ней можно делать все, начиная от создания элементов для визуала сайта или смартфона и заканчивая мудбордами и иллюстрациями или, например, работой над стильными презентациями. Figma используют все: дизайнеры, разработчики, маркетологи и любые другие визуальщики.
Почему так? Во-первых, это реально очень удобная и интуитивно понятная платформа, которая значительно упрощает работу команды, во-вторых, в ней можно работать совместно, в-третьих, она постоянно обновляется, с каждым разом появляется крутой функционал, а это бест оф зе бест, как ты понимаешь.
С чего начать знакомство с Figma?
YouTube. Не нужно платить за дорогие курсы, попробуй воспользоваться тем, что уже опубликовано и лежит в открытом доступе. Сегодня выложено огромное количество (и ежедневно это число растет) базовых уроков по работе с графическими программами, многие из которых реально отличные, потому что простым языком говорят о сложном. Используй это!
Сразу дам совет: избегай кликбейтных заголовков типа «Figma с нуля за 1 час». За 1 час ты научишься более-менее ориентироваться между панелями или, банально, привыкнешь к интерфейсу и расположению базовых элементов. Но на все хорошее и качественное нужно время.
Кстати, официальный YouTube-канал Figma регулярно публикует отличные видеогайды длительностью 10-15 минут, объясняя, как работают инструменты платформы. Да, видео на английском, но, во-первых, всегда можно включить субтитры, во-вторых, все действия демонстрируются на экране, так что разобраться вполне реально.
Самый полезный, но неочевидный источник — официальная документация. Если ты умеешь быстро вычленять суть из большого объема информации, то за неделю сможешь уверенно освоить базу и даже собрать что-то с Auto Layout и компонентами.
Вообще, специально для новичков «Фигма» периодически публикует готовые шаблоны, например, этот. Тебе остается только интегрировать его на свою доску, заменить текстовые блоки на более актуальные лично для тебя и попробовать поиграться (так, ну тут главное не переусердствовать) с цветовой палитрой.
Сразу забудь про Sketch, Adobe XD и другие аналоги. Просто забудь и все. Люди, которые до сих пор ими пользуются, либо не разбираются, либо используют их по привычке. Чтобы делать качественный продукт, не нужно владеть всеми возможными графическими редакторами, главное — научиться свободно использовать лучшие из них. Твоя задача — стать мастером Figma. Что делать, чтобы этого добиться — читай далее.
Что еще нужно будет изучить?
Photoshop и Illustrator — комфортная база любого визуальщика. Необязательно использовать эти программы каждый день (да и незачем), но я совру, если скажу, что они не могут быть полезны в той или иной ситуации. Например, используй Photoshop, чтобы как минимум вставлять экраны в красивые мокапы или чтобы работать с растровыми изображениями (если для твоих задач это будет нужно). Конечно же, Photoshop обзавелся AI — в умелых руках экономит кучу времени. Упор на него делать не стоит, но знать полезно.
Если говорим про вектор и иллюстрации — Illustrator. Он устроен немного сложнее, чем Photoshop, но так как базовые функции аналогичны всем графическим программам, многое ты поймешь на интуитивном уровне, а остальное — добьешь через видеоуроки и практику.
Все дизайнеры, особенно начинающие, сразу хотят анимировать все свои проекты. В целом, согласен, что так может быть интереснее, но не забывай, что каждое решение должно быть оправдано. Если хочешь анимировать свой дизайн, используй After Effects, Lottie или Jitter. Если первый относится, скорее, к полноценной профессиональной программе, то последний — Jitter — подойдет для новичков. Плюсы онлайн-редактора: он простой и понятный, к тому же в нем есть готовые шаблоны, которые помогут быстро собрать то, что тебе необходимо.
Что делать, если хочешь научиться делать 3D-графику?
- Для работы с 3D советую обратить внимание на два варианта: Blender и Cinema 4D. Не скажу, что программы простые, но когда мы говорим о 3D, понятно, что уровень скиллов растет. Кстати, по работе с Blender есть классный курс от Mad Rabbit, иронично, что он так и называется «Самый лучший курс по Blender 3D». Но все-таки «самый сок» в плане полезности образовательного контента — официальная документация.
- Кстати, чуть не забыл про Spline — современный инструмент с простым и понятным интерфейсом. Если изначально работа с 3D пугает, то начать точно стоит со Spline. Редактор интегрирован в браузер, можно делать анимацию объектов, а еще — выгружать код. Большой плюс — возможность совместной работы над проектами, а-ля google-доки. Звучит круто, да?
Что, если нужно сделать схемы, планы, структуру сайта или User Flow?
Используй FigJam — новый вайтборд от Figma, который сразу интегрирован в платформу Figma, что удобно, потому что твой проект — от первоначальной идеи до окончательного прототипа — может храниться в одном месте. Разобраться в приложении легко, ты сделаешь это буквально за 15-20 минут методом тыка. Изначально FigJam задумывался как единый «центр взаимодействия», поэтому он собран так, чтобы можно было реализовать разные задачи под разные цели: от командного брейншторма до итоговой сборки или фреймворка.
Miro чуть сложнее, чем FigJam, но суть такая же. Можно работать в команде, создавать любые схемы, графики, диаграммы и сетки, а еще есть коннект с большим количеством приложений, так что переносить и использовать данные удобно. По моим наблюдениям, Miro больше популярен не у дизайнеров, а у всех, кто связан с организацией работы в команде, например, менеджеров или продакт-директоров.
Для работы со структурой сайтов не видел ничего удобнее, чем Octopus. Используй, чтобы:
- наглядно показать карту сайта;
- создавать схемы страниц;
- добавлять описание блоков контента;
- работать совместно с командой.
Дополнительно для организации working tasks будут полезны:
- Coda / Notion — для заметок и планирования. Любая работа любит системность и упорядоченность, поэтому многие используют такие платформы, как Trello, который, увы, уходит из России. Чтобы было легко, просто и с современным дизайном, используй Coda и Notion. Знаю ребят, которые на базе этих платформ делали целые фреймворки, так что смело можешь юзать;
- Loom — полезная штука, чтобы делать запись скринкаста со своими пояснениями. Например, когда презентуешь работу заказчику или даешь пояснения разработчику, можешь до рабочих зумов сделать скринкаст, чтобы после вы уже более детально разбирали конкретные вопросы, а всю основную информацию — под запись. Это значительно экономит время, а иногда просто дает новые возможности для саморефлексии (если стараешься работать над развитием коммуникативных навыков, например). В общем, классный софт.
Так, теперь зафиксируем:
1. Учим Figma. Это наш hard skill, поэтому не жульничаем, а реально стремимся стать свободными пользователями и научиться интуитивно работать с инструментом. Постоянно изучаем новую информацию и следим за обновлениями, пробуем работать как с готовыми шаблонами, так и собираем проект с нуля, используем дополнительные расширения и возможности, а за информацией — к официальной документации;
2. Параллельно учим основы Photoshop / Illustrator. Если твоя основная цель — стать мастером Figma, то в этих программах просто важно ориентироваться и уметь использовать для базовых задач;
3. Если мечтаешь делать анимацию, то по желанию можно изучить базу — After Effects, Lottie или Jitter. И повторюсь, что я бы начал с последнего, он проще и понятнее, так что сэкономите и время, и нервы;
4. Для работы с 3D — Blender, Cinema4D или Spline. Если одновременно изучать все вышеперечисленные программы, то есть неплохой шанс сойти с ума, так что лучше расставить приоритеты и построить систему обучения, а после более-менее свободной работы с растром и вектором, перейти к анимации и 3D;
5. Чтобы не учиться «в стол» и не забывать то, что успел изучить, важно правильно структурировать, фиксировать и планировать. Для этого идеально подойдет такой софт, как Coda или Notion. В крайнем случае, если тебе ближе аналоговые носители, юзай обычный блокнот (но перед этим 10 раз подумай, сможешь ли перечитать конспект и элементарно понять свой почерк);
6. Возвращаемся к пункту 1 и все повторяем.
Если у тебя уже есть опыт в графическом дизайне, осваивать UX/UI будет проще. Пока ты джуниор, научись базово пользоваться пакетом Adobe и Figma, а еще хотя бы немного почитай про 3D и motion-дизайн, чтобы «быть в теме». После, когда станешь мидлом и сможешь реализовывать собственные небольшие проекты, работай над тем, чтобы стать более уверенным пользователем этих программ, и постепенно изучай новые.
Всегда структурируй информацию, чтобы не терять те знания и навыки, которые приобрел на начальных этапах. Чтобы стать сеньором, ты должен в совершенстве владеть Figma, Photoshop и Illustrator, а еще не бояться работать с проектами, связанными с 3D и интерактивной инфографикой. Работай над hard и soft skills, изучай опыт коллег и не бойся совершать ошибки — иначе застрянешь и не сможешь двигаться вперед.
Важно понимать, что владение инструментами не сделает из тебя дизайнера, который умеет делать дизайн. Дизайн создают не программы, дизайн создают люди. Но чтобы чувствовать себя свободно и быть профессионалом, нужно уметь использовать все, что работает на реализацию твоих идей.
Поздравляю, первая часть материала освоена!
Уже завтра в продолжении супергайда тебя ждет разбор UX/UI: только стоящие курсы и лайфхаки по составлению CV, общению с HR и поиску работы. И, конечно, разговор о soft skills.
Обо всем, что происходит в мире UX/UI в целом и в AffArts в частности, пишу здесь — канал молодого CEO и Дизайн-дира
Подписывайся, чтобы быть в теме и стать частью нетворкинга. Также буду рад, если поделишься своим опытом карьеры в UX/UI: можно не стесняться писать в личку в телеге (@ifrolovskiy) или оставить комментарий под статьей.
