Как стать UIUX-дизайнером бесплатно без регистрации и sms
Этот лонгрид вертелся у меня в голове довольно давно, но появилась возможность написать его когда лежал в ковидарии.
Допустим, вы подумываете — а не попробовать ли себя дизайне? Но водопад материалов, который обрушивается на вас пугает и отталкивает. Вы не знаете за что хвататься в первую очередь. И прежде всего хотите понять ваше ли это вообще, прежде чем выложить свои кровные за какой-нибудь курс. А то и вовсе понять насколько можно разобраться самому.
Прежде всего, не пытайтесь освоить все за одну неделю и тем более за один день. Научиться самому реально, но не надейтесь сделать все и сразу. Старайтесь не распыляться на весь поток дизайнерского контента, его очень много, мусора в нем еще больше, действуйте по плану. Иначе можно себя демотивировать, а то вовсе и отлететь кукухой.
И да, здесь речь идет о специальности дизайнера интерфейсов, он же проектировщик интерфейсов, он же продукт-дизайнер, UIUX-дизайнер и, с большой натяжкой, веб-дизайнер. Для графдизайнера нужен другой роадмпэп (может напишу позже).
В этом же перечислено что нужно знать и где это читать, смотреть.
В тексте встречаются статьи на английском, если с этим сложности, то используйте переводчик или можете попробовать найти эту информацию в переводе.
Перед тем как начать
Пара рекомендаций:
1. Делайте записи
Любое обучение связано с записыванием, поэтому делайте записи. Заведите себе чистое пространство (физическое и информационное), начните чистый лист и действуйте.
Это могут быть записи, в которых вы пишете, что поняли или хотите запомнить. Каждая запись должна быть результатом деятельности вашей головы, а не копипаста. Вы что-то поняли и записали.
Ни в коем случае не спамьте себя записями вроде «просмотреть урок» или «прочесть статью». Не сваливайте на себя тонны видео из ютуба, вы потом не подниметесь под этим грузом.
Если вы действительно планируете что-то посмотреть позже, то напишите, что конкретно вас заинтересовало, зачем вам это нужно и сразу поставьте в календарь. Протухшая куча ссылок с «полезным» не работает.
Важно записывать не только ответы, но и вопросы.
Как делать заметки? Существует множество систем ведения заметок и это отдельная тема даже не статьи. В двух словах могу только сказать, что пользуюсь системой цеттелькастен, которую веду в Обсидиане. По цеттелю есть хорошая книга Зонке Аренса «Как делать полезные заметки». Обзор книги можно прочесть на сайте энтузиаста Федорова. Естественно, вы можете пользоваться своими привычными инструментами: Notion, блокнотом итп
2. Тренируйте насмотренность
Для начала заведите себе мудборд. Мудборд — это такое место, куда вы складываете все, что вам понравилось по определенной теме, задаче, настроению, цвету, запаху и любому другому принципу, который вы выявите. Если что-то привлекло ваш взгляд, показалось интересным, красивым, забавным — кладите. Коллекционируйте и раскладывайте по полочкам хорошие решения.
Можно сделать это в Пинтересте (у него есть плагин к браузеру), Savee, DesignSpiration или других решениях. (Я для этого эксперементирую с Обсидианом). Туда вы будете закидывать все, что вам понравится.
В ведении мудбордов обязательное условие то же — писать что конкретно понравилось и почему. Запретите себе бездумно набивать доски неосмысленным спамом. Если что-то привлекло ваше внимание и вы кладете это себе в карман, то возьмите на себя труд объяснить почему. Учитесь формулировать дизайнерские наблюдения, хотя бы своим языком и для себя (в пинтересте можно делать секретные доски только для себя).
Кроме того, старайтесь не репостить только пинтерест в пинтерест. Наблюдайте за всем что происходит вокруг. Это должна быть ваша личная библиотека интересных решений, хороших идей и просто красивых вещей, а не коллекция популярных окаменелостей Пинтереста.
Что дает?
- Во-первых, вы формируете свои новые нейронные связи. Просто репост ничего не сформирует, не тратье на это время.
- Во-вторых, вы выявляете принципы. Иногда свои принципы.
- В-третьих, вы не слушаете кого-то кто вам рассказывает что такое хорошо, а что плохо — а учитесь понимать, что созвучно лично вам.
- В-четвертых, когда у вас будет задача, вы вдруг вспомните, что у вас были идеи на этот счет. Применять когда-то отложенные идеи для новых задач — в принципе плохая практика, но как точка отсчета вполне.
«Как?» и «Что?»
Два главных вопроса дизайнера во время работы — «Как это сделать?» и «Что делать?». Первый больше про UI и им больше задаются начинающие дизайнеры. Второй самый важный и представляет собой суть работы. Но начинать изучение дизайна лучше с «Как».
Базовая фигма
Во-первых, нужно освоить фигму или другой аналогичный графредактор. Хотя, нет — фигму. Это, в принципе, не сложно. На базовом уровне его сможет освоить любая макака. Для продвинутых макак есть бесплатные курсы. (Платные, разумеется, тоже есть, но они не соответствуют духу и букве этой статьи). Я лично курсы курсы не проходил, простите, так как пересел на фигму со скетча. Но суть в том, что информации по ней много, да и вообще этот текст не про редактор.
Гид по Фигме для начинающих от Тильды. Если вы еще не начинали, можете начать с него, если не страшитесь буков.
Курс по Фигме на ютубе от «Науки дизайна»
Мини-курс на ютубе «Фигма для новичков» от школы VideoSmile
Пожалуй, лучше проходить не отдельные уроки, а последовательно изложенный курс.
При этом я не вижу смысла вызубривать весь интерфейс сразу и до глубин. Но для начала нужно познакомиться с элементарными понятиями и действиями: Где лежат ваши файлы, как дать к ним доступ другим людям. Как копировать, перемещаться, удалять. Как выбрать шрифт, как изменить его размер. В общем, базовые манипуляции, которые можно ухватить за час-два. С более сложными вещами вы познакомитесь в ходе решения практических задач. Ведь применяя инструмент к решению конкретной задачи, запоминаешь его лучше, чем просто чтение о нем, просмотр видео или прослуш радио.
UI — Как?
Когда вы слегка познакомились с интерфейсом фигмы, что он вас уже не пугает, то начинайте копировать сайты и приложения, которые вам нравятся по дизайну, эстетике и функционалу.
Начать лучше с сайтов. Не стесняйтесь и не нойте. Это лучшее упражнение, которое только можно придумать, через которое прошли многие и многие. Делаете скриншот, кладете в фигму, уменьшаете прозрачность — и вперед!
Если вы не знаете, что вам нравится и не знаете над чем работать, обратитесь к ментору, дизайнеру, которому вы доверяете, или сообществу RuDesigner (группа закрытая, ссылка работать все время не будет). Найдите себе знакомого верстальщика / фронтендера, тоже полезно.
Если не хотите ничего ни у кого спрашивать и работать полностью автономно, то пробуйте отрисовывать интерфейсы сайта своего банка. Сначала морду, позже будете работать над внутренностями. Сайты банков достаточно сложные, над ними обычно работают более менее опытные ребята и на них можно отследить все типичные задачи с которыми сталкиваются дизайнеры интерфейсов. Домашняя страница, Переводы, Аналитика, Кредитная история, Страница платежа, итп. Шаг за шагом воспроизводя реальный интерфейс, вы научитесь его проектировать.
Только будьте осторожны, если будете показывать свою работу, не забывайте менять чувствительные данные. Пусть Александр Сергеевич Пушкин или Константин Константинопольский неплохо зарабатают в этом году.
Что дает отрисовка?
- Вы освоитесь с инструментом, практикой непосредственной работы
- Чем больше вы скопируете хороших работ, тем быстрее научитесь рисовать на том же уровне
- У вас будет вырабатываться чувство масштаба, которое напрочь отсутствует в работах у начинающих, когда они не знают как сделать элементы соразмерными
- Копируя чужые работы, вы начнете выявлять и понимать закономерности и задумываться почему сделано так, а не иначе
(Если будете показывать свою отрисовку, не забывайте говорить, что это не ваш дизайн, а вы тренируетесь и прикладывайте оригинал).
Сетка
Итак, вы отрисовали первую страницу сайта. Теперь —
Изучите:
- Модульная сетка сайта (Несмотря на сео-нейминг, дает представление не только о сетках на сайтах)
- Сетки в графическом дизайне (Полистайте картинки)
- Responsive grids and how to actually use them. (Здесь более подробно о том, как работает сетка в вебе. Есть в переводе, но текст немножко по-дебильному написан , банальный «межколонник» переводят как «желоба»)
- Ознакомьтесь с Responsive layout grid в Материале (Как видит тему сетки гугл)
- Урок от Руслана Шарипова (Что такое, как применяется в фигме)
Задание:
Покажите сетку на своем дизайне с помощью инструмента сетки или направляющих и покажите знакомому верстальщику или сообществу. Задайте вопрос «Как вы думаете, соответствует ли эта сетка дизайну?» и получите обратную связь
Ответьте на контрольные вопросы:
— Зачем нужна сетка?
— Какое наиболее распространенное количество колонок?
— Должно ли меняться количество колонок в зависимости от размера экрана и если «да», то при каких значениях?
— Можно ли вашу страницу описать другой, более простой сеткой с меньшим количеством колонок?
Для уменьньких:
Если хотите углубиться в теорию и историю вопроса, то вас ждет замечательная книга «Модульные системы в графическом дизайне» Мюллера-Брокманна. Рекомендую, прекрасно изданная недорогая книга. Для широты понимания, но не в первую очередь: по теории сетки и композиции есть еще пара хороших книг Кимберли Элам: «Принцип сетки» и «Геометрия дизайна»
Отступы
- Прочтите статью про отступы.
- Отрисуйте следующий экран.
- Ответьте на контрольные вопросы:
— Какое количество отступов (сколько разных) вы насчитали в своем макете?
— Можно ли это количество уменьшить без ущерба для дизайна? (Чтобы дизайн не стал хуже: непонятнее, нелогичнее, неэстетичнее).
— Может быть, где-то, наоборот, чего-то не хватает?
Задание:
Выявить все отступы и расстояния в отрисовываемом дизайне, собрать их в список. Можете раскрасить их в цветные квадратики. У вас должно получиться, что-то вроде этого.
Типографика
Прочтите статьи:
- Гайд по основам типографики: чем различаются шрифты и как выбрать нужный
- Как правильно выбрать шрифт для диджитал
- Посмотрите как с типографикой советует работать Гугл — Understanding typography
- Видео Руслана Шарипова
- Как правильно выбирать бесплатный шрифт»
- Основные понятия типографики и принципы верстки
И для умненьких пара текстов опубликованных на сайте фигмы:
Задание:
- Теперь отрисуйте новую страницу, используя плагин Font Ninja или подобный. Обращайте внимание на соответствие шрифтам. Если в оригинале вашего дизайна шрифт платный, попробуйте найти бесплатный аналог.
- Создайте шрифтовые стили на основе вашего интерфейса (обращайте внимание на интерлиньяж (межстрочное) и трекинг (межбуквенное, цвет и другие атрибуты), расположите их в иерархии от большего к меньшему, проименуйте).
Контрольные вопросы:
Сколько шрифтов используется на сайте, который вы отрисовали?
Составьте список используемых шрифтов.
Сколько начертаний?
Сколько гарнитур?
Можно ли уменьшить количество шрифтов и не сделать хуже?
Выявите закономерность, какие шрифты используются в заголовках (акцидентные), какие для основного текста (наборные)? Или может быть везде один и тот же?
Какие у них параметры: размер, цвет, трекинг, интерлиньяж?
Какой процент составляет интерлиньяж по отношению к кеглю?
Сколько символов в самой длинной строке?
Покажите результат сообществу и, пожалуйста — возьмите с полки пирожок. Типографика позволяет делать понятно и красиво без дополнительных средств — только буковками. Поэтому изучать ее интересно и полезно с самого начала.
Для уменьньких:
- Если вы хотите углубиться в типографику, то можете начать с «Введения»
Хорошие книги для начала:
- «О Шрифте» Эрика Шпикерманна — отлично иллюстрированная книга одного лучших типографов современности, может разбудить интерес к теме
- «Типографика» Феличи — базовые необходимые технические знания
- Часто еще советуют Чихольда, но я начинать с него не рекомендую. Язык педанта, пересыпанный полиграфическими практиками и терминологией первой половины прошлого, может отбить всякую охоту у нового человека
Цвет
В этом гайде цвету будет уделено мало места.
Типичная теория цвета выглядит как-то так — «Главное о цветовых схемах: базовые правила работы с цветом в дизайне сайтов»
Не менее полезно почитать альтернативное мнение Color in UI Design: A (Practical) Framework или ее перевод «Цвет в интерфейсе: Прикладные основы».
Как всегда хорошее видео у Шарипова.
После этого в качестве задания:
найдите все цвета в своем дизайне и заведите их в стили фигмы.
Иконки
Изучите
- Гайды дизайн систем для создания иконок в Материале и HIG
- Прочтите статью о том, как проектировать иконки в фигме
- Как рисует иконки Вконтактик
Задание
- Отрисуйте несколько иконок и соберите их водин сет
- Пробуйте выявить сетку
- Нарисуйте свою новую иконку в стиле существующих, обращайте внимание на массу, толщину линии, ее характер: окончание, радиусы, на пластику формы и разумеется на сетку
Автолейаут
Если вы до сих пор не успели, то срочно изучите тему. Например:
- В Figma Auto Layout Playground
и / или у Бычкова:
и / или у Виктора Теплова:
итп
Задание:
- Теперь, отрисуйте новый экран (или хотя бы кусок интерфейса), используя «алики», вместе со всеми выше перечисленными условиями: сеткой, шрифтовыми и цветовыми стилями.
Компоненты и организмы
Итак, вы познакомились с автолейаутом, теперь самое время разобраться с атомарным дизайном. Изучите:
- Хрестоматийный текст Atomic design (перевод Атомарный веб-дизайн)
- Дизайн-системы | Атомарный дизайн простыми словами
Полюбопытствуйте как работает с компонентами Вконтактик:
Задания:
- Вынесите из своего дизайна список компонентов (соберите простенький UI-kit из нескольких элементов)
- Покажите результат ментору или сообществу
Варианты
- Статья — Как делать варианты элементов интерфейса в Figma
- И плейграунд — Figma Variants Playground
Задание
- Соберите на вариантах группу кнопок и/или полей ввода в своем дизайне
Принципы
Дизайн, как ни странно, не сводится к операциям в фигме. Существуют принципы дизайна, которыми, да, реально руководствуются в продуктовой разработке.
Про принципы системно можно послушать у Шарипова в его курсе про UI — Дизайн это дизайн.
- Единства
- Близости: Шарипов и/или Лебедев
- Иерархии
- Закон Фиттса в изложении Эдуарда Файзуллина
С остальными познакомитесь в ходе дизайн-процесса.
Задание:
Откройте новый принцип дизайна и поразите им мир
Дизайн-мышление
Важной составляющей дизайнера является дизайн-мышление. Параллельно работе с фигмой я бы рекомендовал читать дизайнерскую литературу.
Лучше всего если во время чтения у вас будут появляться идеи, чесаться руки и вы тут же будете хотеть это где-то применить. Это значит, вы на правильном пути.
Итак, вы курите принципы дизайна, смотрите Шарипова, а в фоне вечерком за чаем или в транспорте читаете дизайнерские книжки, которые учат дизайн-мышлению. «Дизайн привычных вещей», «Представление информации» Эдварда Тафти, «Пиши, сокращай» Ильяхова, «Ководство» Лебедева итп. Пусть вас не пугает количество, в какой-то момент вы начнете понимать, что они все об одном.
Книги
- Дональд Норман «Дизайн привычных вещей» — книга помогает начать смотреть на мир по дизайнерским углом. Ставит голову на место. Это не специфическая профессиональная литература, научпоп для широкого круга читателей. Картинку не ставлю, все и так в курсе, как она выглядит.
- Виннели «Канон» — дизайнер-классик 20 века довольно сжато рассказывает о том, как делать хороший дизайн. Есть на русском.
- Edward Tufte — автор серии книг, которая посвящена вопросам представления информации. Не переведена легально на русский, но есть один нелегальный перевод от дизайнера Сурганова.
- «Пиши, сокращай» Ильяхова. (Как это ни странно, дизайнеры тоже работают с текстом, поэтому им тоже нужно читать оранжевую книжку)
- «Модульные системы в графическом дизайне» Мюллера-Брокманна уже ранее упоминаемые.
Ок, вы задолбались, то есть, почувствовали, что с копированием сайтов у вас не возникает сложностей.
Если вы повторили упражнение недостаточное количество раз, то у вас будут проблемы с чувством масштаба, отступами и типографикой, скорстью работы, эстетикой и другим. Могут быть сложности во время первых дизайнов. Если хотите сразу делать сразу круто и быстро, не стесняйтесь продолжать перерисовывать хорошие решения. Если вам мало теории, а книг читать не хотите, можете заглянуть в План обучения младшего дизайнера.
Но если ваш внутренний, а может реальный ментор или участники дизайн-сообщества считают, что этого достаточно, то в этом месте можете себя поздравить — вы освоили базовый инструментарий дизайнера.
Вы знаете — как.
UX — Что?
Теперь ваш главный вопрос — что?
Можно сказать, что писатель научился писать буквы, теперь надо научиться складывать их в смысл. Вы должны будете задавать себе вопросы о бизнесе и о людях, добывать на них ответы. В этом и есть главная работа дизайнера, если он не фигма-макака. Глубоко с UX чаще работают ребята уже с опытом. Довольно неэффективно углубляться в теорию, не применяя ее в реальной практике продукта. Тем не менее, кое-что послушать и почитать в общем полезно.
Системно тема UX-дизайна изложена в книге Алана Купера со товарищи — «Интерфейс». Вы можете рассматривать ее в качестве учебника, он содержит всю информацию о подходах к современному проектированию интерфейсов. Есть большая хорошая глава про исследования: качественные, количественные, зачем нужны. Как правильно проектировать. В общем, книжка при вдумчивом чтении заменит несколько курсов на тему.
Если не любите книги, а любите ютубик, то UX-тема есть на ютубе Руслана Шарипова в курсе по основам UX-дизайна.
На этом, пожалуй, все.
Успехов!
