{"id":14292,"url":"\/distributions\/14292\/click?bit=1&hash=23aed192f809013ec1c0769a11eb00fbed4dd7038bbe5f8e3db447db2e792dcd","title":"\u0421 \u043d\u0430\u0447\u0430\u043b\u0430 \u0433\u043e\u0434\u0430 \u043a\u0430\u0440\u0442\u043e\u0439 \u00ab\u0425\u0430\u043b\u0432\u0430\u00bb \u043e\u043f\u043b\u0430\u0442\u0438\u043b\u0438 40 \u043c\u043b\u043d \u043f\u043e\u043a\u0443\u043f\u043e\u043a","buttonText":"","imageUuid":""}

Самоучитель по дизайну интерфейсов. Старт не за миллион деняк

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

Знакомство с дизайном

Дизайн — это проектирование. Азы стоит прочитать в Дизайне привычных вещей

С чего начинался веб. К прочтению книга персонажа весьма сомнительного, но хорошего маркетолога и дизайнера — Ководство

Тулы

Проектирование. Figma — лучший на данный момент инструмент для проектирования приложений и сайтов. Обновляется со скоростью света, усложняется с каждым годом. Много уроков на ютубе, но быстро устаревают. Лучший источник — официальная документация. Смотреть гайды лучше всего в момент выхода свежих обновлений. По всей документации с практикой можно пройтись за пару дней, всё наглядно. Макеты на группах и без автолейаутов — бан.
Забудь про существование Adobe XD, Lunacy, Pixso, Sketch и тд. Этим друзьям место в пансионате, а тебе надо замастерить фигму. Хотя некоторые компании в РФ переходят на Pixso, но это совсем другая история

Графика. Adobe Photoshop может относительно регулярно пригождаться для работы с растром, но упор на него делать не стоит. Опционально Adobe Illustrator для иллюстраций и Adobe After Effects для крутых анимаций и лотти. Только если есть желание

Генерация идей, флоу, брейнштормы. Проще всего в Miro/Figjam, разобраться методом тыка можно за 10 минут. Удобно коллаборировать с другими дизайнерами и коллегами со смежными профессиями

Уметь пользоваться тулами ≠ уметь делать дизайн

Где можно учиться

Не годовые курсы от гикбокс нетофэктори, пожалуйста. Есть достойные курсы от UXCEL без воды и духоты, часть ссылок в гайде оттуда. Стоят всего $60 в год, подробнее писал про них тут

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

Ментор. Всяких площадок с менторами полно, но проверки там никакой. Не раз видел мягко говоря непрофессиональных чуваков, у которых по 50+ проведенных занятий. Рекомендовал бы Duosapiens разве что. Можно просто писать в личку известным дизайнерам из крутых компаний и спрашивать

UI

Типографика. Читай Типографику и верстку, разберись с базовыми принципами. Можешь играть в BetterWebType

Лейаут. Разберись с композицией и цветом. Познакомься с Color Wheel. Читай Искусство цвета. Разберись с контрастом

Элементы интерфейса. Разберись как выглядят основные компоненты. Часть 1 и часть 2

Подбор референсов. Не картинки с дрибла и беханса, реальные проекты. Например, на Mobbin, Are.na и Awwwards. Анализируй и заимствуй решения. Элементы интерфейсов можно подглядывать тут и тут

UX

Основы UX. Закрепи себе во все браузеры статьи NN group — библию юиксера. Начать стоит с эвристик. Далее разберись с законами UX тут и тут

Интерфейс и работа с информацией. Читай Пользовательский интерфейс и Информационную архитектуру

Базовые UX-артефакты. Не надо тебе CJM на старте, нормально их делать умеют далеко не все даже с N лет опыта. Нужно уметь варфреймить, строить понятные юзер флоу и карты сайтов. Еще было бы неплохо иметь представление о Jobs To Be Done

Гайдлайны. Если собираешься работать над дизайном мобильных приложений, то обязательно разберись с Google material 2, Google material 3 и Human Interface Guidelines

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

Дарк паттерны. Знай их, но никогда не применяй. Если тебе с умным видом начнут говорить, что “ну иногда можно” — не слушай. Человек скорее всего лукавит или делает решения, на которых настаивают менеджеры и бизнес. Приносят ли они деньги? Да. Ненавидит ли их часть аудитории? Абсолютно

Тексты. Самая важная часть практически любого интерфейса — текст. Хороший дизайнер пишет неплохие понятные тексты. Не на уровне копирайтеров и UX-редакторов, конечно, но стремится к этому. Читай спорную Пиши, сокращай и Этой кнопке нужен текст

Бизнес и метрики

Делай задачи и приноси деньги. “Сделать красиво” — не задача дизайнера интерфейсов. Переделать шаги оформления заказа или сделать понятные фильтры в админке сотрудника — задачи дизайнера интерфейсов

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

Ты — инженер

HTML/CSS. Тебе, конечно, не нужно уметь верстать, но понимание быть должно. Всё вокруг (подвластно глазам) прямоугольные контейнеры и теги со своим поведением. Про HTML и про CSS для дизайнера. Самый простой способ осознать, как оно примерно работает — попробовать сверстать небольшой сайтик в вебфлоу или фреймере. Сначала может быть больно, но такая жизнь

Разраб твой, друг твой. Проверяй сайзинг элементов, контейнеры, все состояния, понятные названия. Всё, чтобы разработчик тратил меньше времени и когнитивных усилий на воплощение твоих квадратиков

Коммуникация

Научись выражать мысли. Устно и письменно. Не готов сказать, что для этого надо прочитать. Довольно базовый, но важный навык

Как общаться в работе. Как и в любой коммуникации важен эмоциональный интеллект и понимание своей роли в команде. Что вообще такое эти софт-скилы. Еще есть очень хорошая подборка из 48 статей, если хочешь подробно погрузиться в разные кейсы

Поиск работы

Где работать. Основные пути: аутсорс (студии, заказная разработка, etc.) или инхаус в продукте. В аутсорсах как правило больше задач и менее глубокое погружение в проекты. В продукте больше зарплата, лучше work life balance, глубже понимание проекта. Еще есть фриланс. Тема для дискуссии, но очень не советую долго сидеть на фрилансе или вообще с него начинать. Пара первых работ — ок, но лучше идти в компанию с опытными коллегами и учиться. В 2023 для начинающих не очень простое время. Подавайся на все возможные стажировки, конкурсы и начальные позиции. Это может занять месяцы, но у тебя получится. Не питай иллюзий после заголовков рекламы, что найдешь работу через месяц. Хотя и так бывает

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

CV. Твое резюме, прочитай подробный гайд

СL. Твой шаблон сопроводительного письма, прочитай подробный гайд

Отклики. Есть три пути:

  • Рефералки. Проси знакомых из компаний рекомендовать тебя на позиции. Не стесняйся писать рандомным людям из этих компаний с просьбой. Арт-дирам, лидам, менеджерам. Просто уважительно относись к их времени, не размусоливай вопросы и просьбы на 500 сообщений
  • Вертолет. На всех возможных площадках раскидывай своё CV на +- подходящие вакансии с минимальным изменением CL. Конверсия будет ниже, но расширится воронка
  • Таргет. Трать время на выбор и вычитку подходящих вакансий, пиши персонализированные CL

Где бесплатно задавать вопросы

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

Дизайн-чат. Любые вопросы и обсуждения дизайна. Можно кидать свои макеты на разумную критику

Чат про дизайн системы. Это на вырост, тут много крутых спецов по дскам

Что в итоге делать?

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

Автор

Роман Хмелев
Продуктовый дизайнер

Все упомянутые книги и материалы изучал сам. Давно слежу за дизайнерским эдтехом и запросами начинающих дизайнеров в чатах. Работал на фрилансе, в аутсорсе, в большом зелёном банке и стартапах. Сейчас делаю Orchestra — будущее цифровых рабочих пространств. Лендос пока в мвп, но за продукт уже платят. Интересно пишу про дизайн и коммуникацию в канале

В линкедине тоже добавляйтесь

Не претендую на истину в последней инстанции, но хочу чуть упростить жизнь дизайнерскому комьюнити. С дополнениями и критикой велком в комменты, может потом вторую версию запилим вместе ;)

Спасибо за помощь

Антону Захарову. Подпишись на вакансии и смотри рефы

Юле Васильевой. У нее интересный твитор (х)

Кириллу Косыреву. Можете пригласить его на работу, тут его портфолио

Где ты учился/училась дизайну?
На курсах
С ментором
Самостоятельно
Комбинировал(а)
Показать результаты
Переголосовать
Проголосовать
0
23 комментария
Написать комментарий...
Strokolskij Andrzej

Что касается коммуникаций и прочих софтов — https://lilyakhmetova.notion.site/lilyakhmetova/Soft-Skills-Guide-ad031c7f91a64b3693e40d9ba7748652

Ответить
Развернуть ветку
Роман Хмелев
Автор

Хорошее дополнение, спасибо!

Ответить
Развернуть ветку
Владислав Грузинский

По фактам и четко получилось. Куча опыта в небольшом посте без воды. А можно так все будут писать?)

Ответить
Развернуть ветку
Henke Thunder

Статья топ, жаль мне такая не попалась в начале пути.

очень не советую долго сидеть на фрилансе

можно спросить почему?

Ответить
Развернуть ветку
Роман Хмелев
Автор

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

Ответить
Развернуть ветку
Strokolskij Andrzej

таким людям нужно ставить памятники! спасибо

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Роман Хмелев
Автор

Статья же буквально про это 🤔

Ответить
Развернуть ветку
Aiwa

Кстати, где можно посмотреть ваши работы? Интересно очень

Ответить
Развернуть ветку
Igor Plyusch

Но ведь в конце статьи перед спасибами есть информация о том, где Рома работал и что делает сейчас.

Ответить
Развернуть ветку
Kirill Kosyrev

Очень полезная инфа, сохранил в закладки!

Ответить
Развернуть ветку
Bexultan Baktybayev

Как раз относительно недавно начал путь в UX/UI, очень интересно и спасибо за полезную инфу <3

Ответить
Развернуть ветку
Yu Li

Спасибо! в граф. дизайне, UI 8 лет, хочу углубиться в UX) зафолловила на линкдине)

Ответить
Развернуть ветку
Роман Хмелев
Автор

А чего не просто в коннекшнс..

Ответить
Развернуть ветку
Enable. Цифровая доступность

Рома, статья огонь! Спасибо, так много полезного и так четко структурировано. Можно добавить про цифровую доступность? Что важно на этапе проектирования это заложить.

Ответить
Развернуть ветку
Роман Хмелев
Автор

Спасибо! В следующей версии надо бы учесть, в статье только ссылку про контраст давал. Но мне кажется, что доступность не для старта, если честно

Ответить
Развернуть ветку
Enable. Цифровая доступность

Я бы наверно упомянула про то, как подписывать картинки, чтобы их прочел скринридер + про шрифты для разных информационных сервисов лучше выбирать очень хорошо читабельные и чтобы были четко различимые символы - цифра 1 отличалась от буквы L, ну к примеру. И наверно про заголовки и табиндекс ) И все )
Доступность вот в таком виде, как я описала - это просто правила хорошего дизайна, мне так кажется )

Ответить
Развернуть ветку
Надежда Антонова

Спасибо за такую полезную статью! Все по делу, емко и полезно, буду пользоваться

Ответить
Развернуть ветку
Николай Белкин

статья отличная ,все необходимое указали

Ответить
Развернуть ветку
Виктор Момаров

Не стоит тратить деньги!

Ответить
Развернуть ветку
Роман Хмелев
Автор

На что?)

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Илья Крестин

Спасибо, начал интересоваться темой благодаря другу, и тут эта статья, очень полезно, видно, что большой опыт!

Ответить
Развернуть ветку
Aiwa

Вы забыли еще важные пункты: напиздеть в CV о скиллах, перерисовать пару чужих кейсов и сразу просить миддловскую или сеньерскую зп.

Ответить
Развернуть ветку
ByStyle

Особенно за тесты хоть и на энглише, большое спасибо, полезно даже для бывалах, что то вспомнить а что то узнать!

Ответить
Развернуть ветку
20 комментариев
Раскрывать всегда