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

Понятный самоучитель, который поможет сэкономить деньги, время и энергию дизайнерам интерфейсов. Материал лучше всего подойдет начинающим и джунам. Суммарно всё будет стоить тысяч 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 — будущее цифровых рабочих пространств. Лендос пока в мвп, но за продукт уже платят. Интересно пишу про дизайн и коммуникацию в канале

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

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

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

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

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

Где ты учился/училась дизайну?
На курсах
С ментором
Самостоятельно
Комбинировал(а)
172
24 комментария

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

1
Ответить

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

6
Ответить

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

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

Ответить

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

15
Ответить

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

2
Ответить