iPhone 16e
Nothing Phone 3a
Оживление фото LumaAI
Велосипед Mercedes
Робота научили делать сальто
Grok vs ChatGPT vs Claude
Генерация видео от Google

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

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

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

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

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

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

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

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