Дизайн: путеводитель от А до Я

Введение

Знакомство с нами

Привет! Добро пожаловать в начало, отсюда мы начнем наше увлекательное путешествие в мир дизайна. Мы с ребятами очень постарались максимально понятно и удобно донести до вас информацию, чтобы вы смогли после прочтения с умным лицом реально что-то сделать и сделать это обоснованно. Это путеводитель от А до Я, где все разделено по этапам и каждую секцию объясняет человек с большим опытом, поэтому приготовьтесь впитывать альфу, которой еще никто не делился

Но сначала давайте знакомиться с нашей бандой

Elliot Samuel - мой братишка из-за океана, американский web3 дизайнер, который имеет просто невероятный опыт. Если вы видели оформление таких ребят как nursex, Emperor Osmo и бренд web3 платформ Script Network, Atlas Protocol - вы видели его работы и знаете, кто он такой.

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

W1Indrunner - мой братишка, который знает мир продуктового дизайна изнутри. Он прошел все: от маленьких компаний до работы с крупными компаниями, среди которых Сбербанк

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

И я. Являюсь разработчиком и дизайнером, поэтому точно знаю, что такое "красиво", "удобно" и "работает" в дизайне и готовых интерфейсах. Я проведу вас за ручку через всю статью, где в начале мы с вами заложим БАЗУ, а после я буду давать небольшие комментарии в конце каждой секции

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

О чем эта статья

Эта статья о дизайне, но не в том представлении, которое могло сформироваться у вас. Здесь не будет "как сделать красивый баннер для твиттера" или "топ 10 фишек дизайнера, которые сделают вас лучше остальных". НЕТ!

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

Почему дизайн — это имба

Если вы еще не поняли всей крутости дизайна, то я вам поясню. Приложения, которыми вы, наверное, пользуетесь каждый день - Telegram, Phantom, X, Rabbit, Instagram и остальные - это все продуманный дизайн. Каждая функция, каждая кнопочка, каждый пиксель - все это дизайн, который после воплотили в жизнь с помощью кода. И этими приложениями пользуются миллионы людей ежедневно. Почти все, чем вы пользуетесь или все, на что вы смотрите - это дизайн. Понимаете потенциал? И вы сможете создавать то, чем будут пользоваться миллионы или на что будут смотреть миллионы. И, соответственно, вам это тоже будет приносить миллионы 😏

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

Для кого эта статья

И весь материал, который вы здесь прочитаете, подходит ДЛЯ ВСЕХ:

Для новичков: проведем тебя за ручку через все дебри
Для уже среднячков: систематизируешь знания, закроешь пробелы и найдешь новые точки для роста
Для уже прошаренных перцев: инсайты из разных сфер и подборка ресурсов в конце (некоторые из которых стоят по $350+) точно окупят твое время

Так что присаживайтесь поудобнее, мы начинаем

Фундамент

Что такое дизайн на самом деле

С чего начинается дизайн? С красивой картинки? Может выбора шрифта? Нет, дизайн начинается с самого главного вопроса. Какую задачу мы решаем?

Дизайн - это инструмент. Инструмент для чего? Для решения задач. Задач, которые поставлены бизнесом/человеком и так далее

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

А можно сделать простой, лаконичный, но безумно удобный стул, который идеально вписывается в интерьер и служит годами. Вот это - хороший дизайн, и он решает определенную задачу и создан для кого-то

Так что хороший дизайн - это ВСЕГДА решение задачи:

Задача бизнеса - нам нужно, чтобы пользователи чаще нажимали кнопку "купить" (положительный исход)
Задача пользователя - мне нужно быстро и без нервов заказать похавать и попить для посиделок с друганами
Твоя задача как дизайнера - решить обе задачи и сделать так, чтобы все были довольны - повысить конверсию и максимально упростить пользовательский опыт

Как только вы начнете смотреть на любую кнопку, сайт, приложение или в целом любой дизайн через призму "какую задачу это решает?", мир ПЕРЕВЕРНЕТСЯ

Так что в процессе дизайна нашим главным инструментом будет единственный вопрос. Зачем? Зачем я поставил это здесь? Зачем я увеличил акцент здесь? Зачем именно такая иерархия у этой карточки?

Но погодите... пошли какие-то непонятные определения... давайте-ка с ними плотненько разберемся

Ключевые понятия

*Все определения представлены в упрощенном виде, без академической точности, чтобы каждый смог разобраться

UX (user experience, пользовательский опыт) - совокупность впечатлений и чувств, которые испытывает человек при взаимодействии с продуктом, системой или услугой

На примере: насколько логично устроен сайт? Легко ли найти нужную информацию? Не бесят ли всплывающие окна? UX-дизайнер - это архитектор всего этого пути

UI (user interface, пользовательский интерфейс) - это пользовательский интерфейс, совокупность всех визуальных и интерактивных элементов, через которые человек взаимодействует с цифровым продуктом (сайтом, приложением)

На примере: интерфейс - это визуал. Внешний вид, то есть палитра, шрифты, композиция и так далее. Но в чем отличие от UX? UI - это про внешний вид. А UX - это про как работает продукт, насколько он удобен, какой опыт пользователь получает. Сайт может быть красивым, но неудобным. То есть сайт не решает задачу. То есть сайт не очень полезен... Но оба направления очень тесно связаны, поэтому UI и UX в одном предложении вы будете слышать часто

Иерархия, акценты и группы

А вот здесь уже повнимательнее!

Акцент — это показатель того, насколько сильно выделяется какой-либо элемент. Чем он заметнее, тем больше шансов, что на него обратят внимание в первую очередь

Пример акцента на двух кубиках

Например, здесь изначально фокус идет на кубик 1, а уже после мы замечаем кубик 2. Это и есть сила акцента. Дело в том, что здесь кубик 1 больше и имеет более контрастный от фона цвет. А кубик 2 отличается от фона тем, что он немного светлее и все. А еще он меньше, чем кубик 1

То есть акцент в основном задается через размер и цвет. Здесь мы этим воспользовались, поэтому и получилось так, что сначала мы посмотрели на кубик 1, а уже после - на кубик 2. Причем размер по силе больше, чем цвет

Основные способы задания акцента. Но это не все способы! А еще основные способы меняются от контекста дизайна! Будьте осторожны!

То есть с помощью акцента мы можем задавать порядок, в котором пользователь посмотрит... а это уже

Иерархия — определение, что на экране главное, что второстепенное, а что - третьестепенное. Иерархия возможна благодаря акценту

Пример иерархии. Здесь мы проходим взглядом от 1 до 3

Так, внимательно смотрим. Сначала у нас большущий заголовок, на который СРАЗУ обращаешь внимание. Дальше мы видим цену, которая чуть поменьше. И в самом конце видим кнопку "Купить". Цифры слева - это порядок, в котором мы посмотрели на эту карточку. Сначала заголовок, потом цена, потом кнопка. Это и есть иерархия

Группа — это характеристика блока, которая определяет силу связи между элементами. Тут лучше всего на примере

Пример группы. Здесь у нас две карточки, то есть две группы

Вот вы видите карточки. Сколько их? Ответьте на этот вопрос, я подожду...

Их 2, да ведь? А как вы поняли, что карточек здесь две? Я вот вижу, что заголовки есть, вот кнопки, если все это сложить, то будет уже больше 2. Вот вы как-то поняли ведь, что карточки 2, да?

А все просто. Одна карточка - это блок, который объединяет в себе элементы. То есть это группа. Как мы поняли, что он объединяет в себе элементы? Мы прекрасно видим, что, во-первых, все элементы выделены вместе цветом, а во-вторых, отступ от остальных элементов или групп достаточно большой. То есть внутри группы у нас есть связь благодаря расстоянию и благодаря тому, что мы все общие к группе элементы выделили цветом

Звучит, наверное, тяжеловато, но вы уже все это время понимали, что это группы. Просто теперь я вам теоретически пояснил, ваша цель теперь - осознать...

А теперь заключительное определение, давайте поднажмем еще немножко!!!

Единообразие системы — это свойство системы сохранять целостность и предсказуемость во всех своих проявлениях. То есть элементы с одним назначением и функционалом будут выглядеть и функционировать одинаково

Так, давайте опять на примере

Вновь на примере групп рассматриваем пример единообразия

Те же самые карточки, что и выше. Что мы о них можем сказать? Во-первых, мы сначала обращаем внимание на заголовок, потом на цену, потом на кнопку "купить". Это иерархия, которая возможна благодаря акценту

Далее мы понимаем, что эти две карточки - это отдельные группы, которые содержат в себе элементы. Отлично, это мы тоже понимаем

А знаете что еще? Они одинаковые. То есть да, у них могут быть разные цвета кнопки, разной длины заголовки, но функционал конечный один - купить что-то. То есть нас переведет на какую-нибудь страницу, где мы сможем что-то купить. Мы это понимаем просто посмотрев. В этом и кроется прелесть единообразия, ведь мы сохраняем целостность и предсказуемость системы

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

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

Все ссылки в конце статьи. Советую вам читать не все уроки сразу, а по мере непонимания - так вы точно усвоите материал

Принципы хорошего визуала на пальцах

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

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

Цветам - у брендов/авторов/персонажей есть свои цвета, которые имеют большой вес и психологию за собой. Поэтому верно подобранный цвет - это уже почти победа
Формам - через формы мы оперируем настроением. Если просто, то скругленные формы не будут использоваться для компании, которая изготавливает лучшие вина в Италии. Там мы увидим заостренные края и премиальные шрифты с засечками. Но вот в NFT-коллекции с милыми дракончиками мы можем увидеть скругленные формы, ведь они являются менее "острыми" и более современными. А вот для динамики и остроты происходящего отлично подходят острые формы и "неаккуратность стиля"
Типографике (шрифты). Невероятно важный пункт. Даже если с цветами и формами у вас все хорошо, то вы можете полностью провалиться на шрифтах

Визуальный пример трех пунктов

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

Графический дизайн

Давайте с вами на примере двух моих баннеров посмотрим на пример графического дизайна и я вам расскажу, как я действовал во время работы

dominatos full profile rebranding

Любой дизайн начинается с постановки задачи. В данном случае это просьба моего братишки dominatos переделать его профиль и сделать его с персонажем, которого он прислал. Особых пожеланий не было, поэтому нужно было к чему-то прикрепиться, чтобы выполнить задачу верно. Если мы посмотрим на персонажа (Астольфо), то сразу поймем, что он миленький uWu 〜ahh. И вот от этой миленькой тематики я и отталкивался в дизайне

И после полного понимания задачи уже идет подбор цветов, форм, поиск/рисование подходящих персонажей или генерация изображений через gemini (если надо) и так далее. Как только ты четко понимаешь задачу и вы с заказчиком друг друга поняли на 100% - все становится предельно просто. Нужно думать только о том, как с помощью визуала выполнить задачу и донести до любого человека, который зашел на профиль, какой стиль у автора, какие его основные сферы и так далее (от задачи к задаче зависит)

Здесь я выбрал скругленные формы, подобрал цвета с розовым оттенком, взял "выпуклый мягкий шрифт" и подчеркнул тонкую натуру персонажа и его смущенный и миленький характер с помощью тонкой японской стилистики (сакура и арт в японском стиле)

gyomei smkzz full profile rebranding

Задача была поставлена и персонаж выбран. Вообще я невероятно люблю художников и людей, которые рисуют. Потому что они действительно познали умение передавать эмоции через свои работы. И мы обязательно должны это использовать и продолжать. Поэтому работу художника, который нарисовал этого персонажа, я просто не мог испортить!!

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

Так что шрифт "ручной, с динамикой", чтобы подчеркнуть "сдержанность" персонажа в большинстве моментов (в аниме этот персонаж сдержанный), а с помощью "динамики" шрифта дать некоторый размах, ведь в конце аниме он показывал настоящую мощь. С помощью ручной отрисовки кандзи (его имя нарисовал) я еще больше подчеркнул его сдержанность и добавил японской тематики. "growth insights" также подчеркивает динамику (как и след кисти). Ну и все остальные атрибуты также подчеркивают то, что я хотел и создают общую атмосферу

Вот и весь секрет! Да, звучит, возможно, сложно, но это дело практики

Важное примечание

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

UI/UX дизайн

В случае графического дизайна нам по факту важно передать через визуал образы и идеи (зависит от задачи). Там тоже есть правила и там они также важны, как и в UI/UX дизайне. Но здесь мы опираемся на сухие факты по большей части - различные тестирования, конверсию, целевую аудиторию и так далее.

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

Symbiotic hub. Design + frontend

ССЫЛОЧКА

Во-первых, большое спасибо всем ребятам из этернии за помощь. Сделали с ними очень крутой продукт. Я был дизайнером и разработчиком, поэтому расскажу вам все изнутри

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

Что главное в новостном сайте? Новости. Поэтому я сделал так, чтобы кроме новостей на сайте не было ничего отвлекающего

Интерфейс Symbiotic Hub

Здесь каждая новость имеет много пространства и большие отступы между друг другом, поэтому благодаря этому одна карточка с новостью воспринимается как одна карточка с новостью. То есть мы использовали группы для того, чтобы сформировать из заголовка, подзаголовка, картинки и тега (справа сверху у картинки) единую сущность - карточку (группу)

Пример карточек на сайте

Посмотрите на эти две новости. Они подобны. Кроме картинки, текста заголовка и текста тега в них ничего не поменялось. Это и есть единообразие. Каждая карточка на сайте - это группа. Каждая группа - это несколько элементов. Все элементы расставлены не просто так - использовалась иерархия и акценты выставлены на том, что важно. Картинка и заголовок выделены, остальное имеет меньший акцент

Расположение элементов одинаковое, поведение при наведении одинаковое, при клике всегда переводит на новость. Это дает предсказуемость. И это дает пользователю понимание того, что каждая карточка - это новость, которая поведет на текст новости. И мы применили группы, иерархию, акценты и единообразие для карточки. Вот так вот просто, да

Единообразие проще и полезнее. Дизайн-системы лучше, чем рандомно наделанные кнопочки. Такое и программировать проще (один компонент, который мы переиспользуем, а не 10 разных), и использовать проще. Так что одни плюсы

В целом, чуууть-чуть подробнее о UI/UX дизайне будет в "Среднем уровне". Ну и в моем телеграм канале вы сможете найти чуть более подробное объяснение всем определениям... так что заходите, да

Как научиться видеть: ищем референсы, развиваем вкус и насмотренность

ВНИМАНИЕ! Эту главу будет рассказывать мой братишка W1ndrunner. Внимательно слушайте его, ведь он расскажет секретную альфу, которой нигде нет... а еще даст очень крутые ресурсы. Дальше он появится уже в секции со средним уровнем и полностью расскажет про него, а пока читаем про важнейший навык - видеть...

Передаю слово

Давайте сразу договоримся: развитие "вкуса" и "насмотренности" - это не волшебство и не пассивное листание красивых картинок. Это увлекательный, но вполне системный процесс анализа и распаковки чужих решений. Наша главная цель - не просто собрать коллекцию того, что "нравится", а построить настоящую библиотеку работающих решений и, что самое важное, понять, почему они работают

Где искать: в чем разница между вдохновением и референсами

Критически важно научиться разделять источники на две категории. Это поможет вам экономить время и брать правильные вещи из правильных мест.

Платформы для вдохновения (Dribbble, Behance, Pinterest)

Что это: по сути, это галереи концептов, ярких шотов и отдельных UI-элементов. Они созданы, чтобы впечатлять и демонстрировать визуальное мастерство. Зачастую они могут быть несколько оторваны от реальных бизнес-задач и ограничений. Это "дизайн в вакууме"

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

Платформы Dribbble, Behance, Pinterest

Платформы с рабочими референсами (Mobbin, Pttrns, Awwwards, Land-book)

Что это: а вот это уже "тяжелая артиллерия". Это библиотеки скриншотов реально существующих, работающих и успешных цифровых продуктов. Pttrns - сокровищница для мобильных приложений, Awwwards и Land-book - для сайтов. Mobbin - это сокровищница для всего

Как их использовать: считайте это своим основным рабочим инструментом. Здесь мы изучаем не чьи-то фантазии, а решения, проверенные на миллионах пользователей. Нас интересуют полные пользовательские сценарии (user flows): от регистрации и онбординга до оформления заказа и настроек профиля

Платформы Mobbin, Pttrns, Awwwards, Landbook

Как развивать вкус: от пассивного просмотра к активному анализу

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

Создайте свою библиотеку решений (Swipe File)

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

Задача: какую проблему пользователя или бизнеса решает этот экран/компонент?
Структура: как здесь организована информация? Какая визуальная иерархия (что главное, что второстепенное)? Почему именно так
Композиция и сетка: какая сеточная система угадывается? Какие принципы отступов (правило внешнего и внутреннего, 8-пиксельная сетка) здесь, скорее всего, применены?
Компоненты: какие переиспользуемые элементы вы видите (кнопки, поля ввода, карточки)? Можете представить, какие у них есть состояния (покой, наведение, нажатие, ошибка)?

Такой простой ритуал превращает пассивное "сохранение картиночек" в активное обучение

Практикуйте декомпозицию

Выберите один экран из успешного приложения (например, экран товара в Amazon)
Поставьте себе интересную задачу: воссоздать его в Figma с нуля. Важно - не "пипеткой" копировать цвета и размеры, а постараться подобрать стили и отступы самостоятельно, как бы на глаз, но опираясь на систему
В процессе вы естественным образом начнете анализировать каждый элемент: какой здесь кегль, какая высота строки, какие радиусы скругления, как сделаны тени, какие отступы. Это, пожалуй, лучший способ на практике прочувствовать, как создается чистый и системный интерфейс

Фокусируйтесь на системном мышлении, а не на "вкусе"

Вкус - это субъективная категория, на которую нельзя опереться в дискуссии с менеджером или разработчиком

Системное мышление - это ваш профессиональный аргумент. Это понимание объективных принципов: почему конкретное решение работает лучше другого с точки зрения психологии пользователя, бизнес-метрик и технических ограничений

Поэтому, когда вы смотрите на референс, главный вопрос не "нравится ли мне это?", а "эффективно ли это?". Решает ли этот дизайн задачу? Делает ли он это быстро и понятно для пользователя? Управляет ли он его вниманием? Предсказуем ли он?

В конце концов, насмотренность - это не какой-то врожденный талант, а результат вдумчивой и дисциплинированной работы по анализу и систематизации чужого (и своего) опыта

Итог

На связи вновь пананасик. Ну что, как вам глава? Возможно, она показалась немного сложной, но если вы что-то не поняли - это нормально, ведь все-таки материал уже немного затрагивает средний уровень, поэтому все хорошо. Но скажу сразу, что советы выше - очень важны, поэтому старайтесь практиковаться с самого начала. Так вы сможете сэкономить КУЧУ времени и избежать тонну ошибок. А еще думать своей головой будете, а это тот навык, которого в индустрии нет у многих людей)0))

Следующая секция - начальный уровень!

Beginner Level

Всех приветствую в секции "Начальный уровень". Она будет освещена моим братишкой Elliot Samuel полностью на английском. Ее полный перевод идет сразу же после английской версии, так что можете пролистать туда, если не знаете английский

Передаю слово

Introduction

Starting out your journey as a designer can be really overwhelming, believe me, but with the right tools, skills, and mindset, you can carve out a path to success. As a UI/UX and graphic designer who’s worked on a variety of projects for individuals like Nursex, Emperor Osmo and web3 platforms like Script Network, Atlas Protocol etc. I’ve learned that starting small, building intentionally, and avoiding common mistakes are key to growing not just as a designer but a better one.

Enough talk, here’s how to kick things off.

The Essential Toolkits

To create professional designs, you need tools that are readily accessible and versatile. Start with these:

Figma. This tool is absolutely my go-to for collaborative prototyping and UI/UX design. It’s free for beginners, cloud-based, and perfect for creating everything from website and mobile mockups to social media visuals.
Adobe Illustrator/Photoshop. These are industry standards for crafting custom graphics, logos, or infographics. For example, a logo I did for Kollabr was built in Illustrator for its crisp vector quality. Start with free trials or student discounts to practice. Using the hacked version of this tool is not advisable.
Canva (Optional). This tool is great for quick social media assets or thread covers, especially if you’re designing for individual accounts. Based on my experience, I'll say this tool is beginner-friendly but less flexible than Figma for complex projects.

Main Tools for the Beginner Level

Getting a Skill That Sticks

Design skills come from doing, not just watching tutorials alone. Here’s how to build a foundation for yourself:

Design for Yourself. Create fake projects, like a website for a fictional brand, a web3 wallet interface, or a social media post. I started by redesigning mobile UI for the fun of it, which helped me develop my minimalist style over time. Experiment with typefaces, colors, and layouts to find your voice.
Design for Free (Strategically). Offer to create free visuals for friends or projects. Early in my career, I made free thread covers, banners etc. for small accounts, which ultimately, built my confidence and portfolio in the process. These small gigs teach you real client communication, feedback, and could potentially lead to you getting retained to continue making designs while being compensated.
Build a Portfolio. A portfolio is a really important aspect of your career journey as a designer. It shows you’re serious, even as a beginner. It’s pretty simple, showcase 3-4 projects, even personal ones, on Behance, Dribbble or even a Figma link to share easily. Include a mix of designs like a social media cover, brand design, or a web3 dashboard.

Mistakes That Will Sink You

Avoid these pitfalls to stay on track:

Copying Without Understanding. Don’t just mimic designs you see on platforms like Behance, Dribbble etc. Instead, study their composition such as the spacing, color theory, hierarchy, to create your own original work. Study why a design works, break down layouts from other designers to learn, then create your own spin.
Ignoring Your Portfolio. A weak or empty portfolio kills opportunities. Even if you’re new, include personal projects or free work. You could also include well-crafted case studies explaining your process (e.g., “I chose this palette for my mobile UI dashboard to grab attention”). It shows you think strategically and makes you stand out.
Avoiding Discussions. Design isn’t just about creating, it’s also about thinking. Don’t just blindly agree to every of your client changes, rather, discuss and justify your choices. Thoughtful discussions fuel growth and build respect.

Начальный уровень (перевод)

Вступление

Начинать свой путь в дизайне может быть очень непросто, поверьте мне, но с правильными инструментами, навыками и мышлением вы сможете проложить себе дорогу к успеху. Как UI/UX и графический дизайнер, работавший над самыми разными проектами для таких клиентов, как Nursex, Emperor Osmo, и web3-платформ вроде Script Network, Atlas Protocol и т.д., я понял, что начинать с малого, развиваться осознанно и избегать распространенных ошибок - ключ к тому, чтобы расти не просто как дизайнер, но и становиться лучше.

В общем, меньше слов - больше дела.

Необходимый набор инструментов

Чтобы создавать профессиональный дизайн, вам нужны доступные и универсальные инструменты. Начните с этих:

Figma. Это мой абсолютный фаворит для совместной разработки прототипов и UI/UX-дизайна. Он бесплатный для новичков, облачный и идеально подходит для создания всего: от макетов сайтов и мобильных приложений до визуалов для соцсетей.
Adobe Illustrator/Photoshop. Это индустриальные стандарты для создания кастомной графики, логотипов и инфографики. Например, логотип, который я делал для Kollabr, был создан в Illustrator ради его четкого векторного качества. Начните с бесплатных пробных версий или студенческих скидок, чтобы попрактиковаться. Использовать взломанные версии этих программ не советую.
Canva (Опционально). Этот инструмент отлично подходит для быстрых материалов для соцсетей или обложек для тредов, особенно если вы делаете дизайн для личных аккаунтов. По своему опыту скажу, что этот инструмент дружелюбен к новичкам, но менее гибок для сложных проектов, чем Figma.

Основные инструменты для начального уровня

Получаем скилл, который не потерять

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

Делайте дизайн для себя. Создавайте фейковые проекты, например, сайт для вымышленного бренда, интерфейс web3-кошелька или пост для соцсетей. Я начинал с редизайна мобильных интерфейсов просто ради интереса, и со временем это помогло мне выработать свой минималистичный стиль. Экспериментируйте со шрифтами, цветами и версткой, чтобы найти свой голос.
Делайте дизайн бесплатно (но с умом). Предлагайте создать бесплатные визуалы для друзей или проектов. В начале своей карьеры я делал бесплатные обложки для тредов, баннеры и т.п. для небольших аккаунтов, что в итоге укрепило мою уверенность и пополнило портфолио. Такие небольшие заказы учат вас реальному общению с клиентами, работе с фидбэком и потенциально могут привести к тому, что вас наймут для дальнейшей работы уже за вознаграждение.
Создайте портфолио. Портфолио - это действительно важный аспект вашего карьерного пути как дизайнера. Оно показывает, что вы настроены серьезно, даже будучи новичком. Все довольно просто: покажите 3-4 проекта, даже личных, на Behance, Dribbble или просто поделитесь ссылкой на Figma. Включите в него разные виды дизайна, например, обложку для соцсетей, фирменный стиль или дэшборд для web3-проекта.

Ошибки, которые вас утопят

Избегайте этих ловушек, чтобы не сбиться с пути:

Копирование без понимания. Не надо просто подражать дизайнам, которые вы видите на платформах вроде Behance, Dribbble и т.д. Вместо этого анализируйте их композицию (отступы, теорию цвета, иерархию), чтобы создать свою собственную оригинальную работу. Изучайте, почему тот или иной дизайн работает, разбирайте чужие макеты, чтобы научиться, а затем привносите что-то свое.
Игнорирование портфолио. Слабое или пустое портфолио убивает все возможности. Даже если вы новичок, включите в него личные проекты или бесплатные работы. Вы также можете добавить хорошо проработанные кейсы, объясняющие ваш процесс (например: «Я выбрал эту палитру для дэшборда мобильного UI, чтобы привлечь внимание»). Это показывает, что вы мыслите стратегически, и выделяет вас на фоне других.
Избегание обсуждений. Дизайн - это не только создание, но и мышление. Не нужно слепо соглашаться на все правки клиента, лучше обсуждайте и обосновывайте свои решения. Продуманные дискуссии способствуют росту и вызывают уважение.

Вывод

В целом, Elliot выдал очень важную и неизбежную базу по поводу пути новичка. Но если вы будете думать собственной головой и запомните то, что говорил Elliot, то ваш путь в дизайне станет не только проще, но и веселее. Конечно, так в начале будет тяжелее, ведь вы будете реально думать и рассматривать работы, но зато вы почти сразу будете делать свой дизайн и постепенно оттачивать свой голос в дизайне, а не просто копировать чужие работы и чужой стиль.

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

Средний уровень

На связи вновь пананасик и я приветствую вас в секции "Средний уровень". Тут уже все посерьезнее, но все принципы, о которых говорил Elliot в начальном уровне и W1ndrunner в главе о референсах вам очень сильно помогут. Секция будет освещена моим братишкой W1ndrunner

Хочу сразу сказать, что он местами жестко говорит об ответственности продуктового дизайнера, но говорит по факту. Запомните, что это не страшно, а наоборот - очень круто. Ведь это возможность своими решениями напрямую влиять на успех бизнеса и делать жизнь пользователей лучше. Это не сложно и не тяжело. Это - очень ценно

Поэтому читайте НЕ СПЕША и вдумчиво, ведь на среднем уровне очень много важной информации

Передаю слово

Руководство для начинающих

Статья основана на монологе Lead Product Designer с пятилетним опытом работы и предназначена для тех, кто хочет войти в профессию без иллюзий.

Введение

Давайте сразу определимся с ключевым принципом, который лежит в основе современного продуктового дизайна. Вопреки распространенному мнению, дизайн - это не рисование красивых картинок. Это инженерная дисциплина, нацеленная на решение бизнес-проблем через пользовательский опыт.

Это архитектура, а не декорирование. Такой подход - не просто теория, а практическая основа, на которой строятся успешные продукты.

Именно поэтому наш разговор пойдет не о поиске вдохновения или субъективном «мне нравится», а о системах, метриках, психологии и той ответственности, которую несет дизайнер за конечный результат. Дизайнер - не художник. Он проектировщик, чья работа напрямую влияет на прибыль компании и жизнь пользователей. Плохой дизайн стоит компаниям миллионов, хороший - приносит миллионы. Это та ответственность, с которой начинается этот профессиональный путь.

Ваше личное творческое пространство

Итак, вы решили попробовать себя в дизайне. Отлично! Первый шаг на этом пути - не поиск заказов или дорогих курсов, а создание чего-то для себя, для души и для практики. Мы называем это личным творческим пространством. Представьте, что это ваша личная мастерская, где вы можете спокойно творить и учиться. Это основа, которая придаст вам уверенности в будущем.

Зачем это нужно?

Чтобы руки привыкли, а голова была свободна. Вспомните, как музыкант разучивает гаммы, чтобы потом играть сложные мелодии, не думая о каждой ноте. Так же и в дизайне: чем увереннее вы владеете инструментами, тем больше у вас остается сил на самое интересное - решение задач. Когда базовые действия доведены до автоматизма, ваш мозг полностью свободен для креатива.

Чтобы дать себе право на ошибку. Работая для себя, вы создаете безопасное пространство, свою "песочницу" для экспериментов. В начале пути у всех получается неидеально, и это абсолютно нормально. Более того, это важная часть обучения. В реальном проекте цена ошибки может быть высокой, а в вашей личной мастерской любая ошибка - это просто ценный урок. Поэтому смело пробуйте, смотрите на свои первые работы, отмечайте, что можно улучшить, и пробуйте снова.

Чтобы развить "хороший вкус" и насмотренность. Глава про референсы все описывает

Небольшая история из жизни. Мой путь в дизайне начался почти случайно. Я делал рекламные креативы, почти ничего не зная о правилах. Получалось, честно говоря, плохо. Все изменилось, когда из-за болезни и жесткого дедлайна мне пришлось за одну ночь сделать то, на что обычно уходило гораздо больше времени. Именно в этой стрессовой ситуации произошел прорыв. Но я не советую вам ждать подобных моментов. Гораздо лучше создать для себя комфортный и регулярный ритм практики самостоятельно.

Два пути

С самого начала важно понимать ключевое различие направлений:

Графический дизайн. Основная задача - создание визуальной коммуникации. Баннеры, айдентика, иллюстрации. Цель - привлечь внимание, донести сообщение, вызвать эмоцию и рассказать историю бренда. Здесь больше пространства для художественных приемов, но и здесь система важна: работа с композицией, цветом и типографикой подчиняется строгим правилам для достижения конкретной цели бизнеса.

UI/UX и Product Design. Ваша задача - спроектировать систему взаимодействия пользователя с продуктом. Здесь вы уже работаете с метриками (конверсия, удержание), аналитикой (поведенческие паттерны), психологией (когнитивные искажения) и бизнес-целями (увеличение LTV). Творчество здесь важно, но обычно проявляется в том, чтобы найти самое элегантное и эффективное решение в рамках ограничений: гайдлайнов платформы, стиля бренда, технических возможностей и бизнес-требований. Эти рамки не сковывают, а облегчают жизнь и отсекают лишний шум, заставляя искать оптимальный, а не просто красивый путь. Ваша работа итеративна: вы выдвигаете гипотезу, создаете дизайн, тестируете его (например, через A/B тесты), анализируете данные и начинаете цикл заново.

Инструменты и принципы

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

Минимальный набор инструментов

Figma. Это отраслевой стандарт. Другие программы на начальном этапе не нужны. Figma создана для совместной работы и проектирования интерфейсов, что отражает суть современной продуктовой разработки
Auto Layout. Очень важная функция в фигме. Это система адаптивного позиционирования элементов, которая учит вас мыслить так же, как мыслит разработчик и браузер - блоками, отступами и правилами поведения. Без нее ваши макеты - статичные и хрупкие картинки, которые будут ломаться от любого масштабирования и которые невозможно будет передать разработчикам
Компоненты (Components). Система переиспользуемых элементов, ваш "единый источник правды". Обеспечивает консистентность интерфейса, убирает возможность случайно наплодить в продукте десятки вариаций одной и той же кнопки и в десятки раз ускоряет работу. Любое изменение в главном компоненте мгновенно применяется везде, где он используется

Базовый набор на среднем уровне

Игнорирование Auto Layout и компонентов сделает вашу жизнь в сотни раз сложнее. Макет, сделанный без них - это груз. Разработчик не сможет его эффективно использовать. В лучшем случае он потратит втрое больше времени, пытаясь "угадать" вашу логику, в худшем ...

Ключевые принципы, которые важнее инструментов

Правило внешнего и внутреннего (закон близости). Элементы, связанные по смыслу, должны располагаться ближе друг к другу, чем к несвязанным элементам. Расстояние внутри блока (например, между заголовком и текстом карточки) всегда меньше, чем расстояние снаружи до следующей такой же карточки. Это основа визуальной иерархии, которая позволяет пользователю мгновенно считывать структуру информации без необходимости вчитываться.
Восьмипиксельная сетка. Все отступы и размеры элементов должны быть кратны 8 (иногда 4). Это не вкусовщина, а техническая необходимость. Большинство современных экранов имеют разрешение, кратное 8, и использование этой сетки обеспечивает четкость рендеринга элементов. Сетка создает визуальный ритм, предсказуемость и порядок. Ваш дизайн выглядит опрятно и профессионально.
Воздух (негативное пространство). Пустота - это не незаполненное место, а активный элемент дизайна. Как пауза в музыке создает напряжение, так и воздух в интерфейсе управляет вниманием, разделяет смысловые блоки и снижает когнитивную нагрузку на пользователя. Не пытайтесь "заполнить каждый пиксель". То, что вы не разместили на экране, так же важно, как и то, что разместили.
Пользователь не всегда прав. Критически важно различать то, что пользователь говорит, и то, что ему на самом деле нужно. Пользователь не является экспертом в дизайне. Ваша задача - выслушать его проблему, но решение предложить, основываясь на своем опыте, данных и знании психологии. Слепое следование пожеланиям превращает дизайнера в оператора мыши. Как говорил Генри Форд: "Если бы я спросил людей, чего они хотят, они бы попросили более быструю лошадь". Ваша задача - изобрести "автомобиль", поняв глубинную потребность ("перемещаться из точки А в точку Б быстрее"), а не просто улучшить "лошадь".

Как доказать свою ценность

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

Структура эффективного кейса

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

Проблема:

Сформулируйте бизнес-цель и пользовательскую боль, подкрепив их данными (пусть даже вымышленными для пет-проекта). Не "сделать редизайн приложения", а "повысить конверсию в покупку на 20%, так как текущий показатель отказов на этапе оформления заказа составляет 70% из-за сложного и многошагового процесса". Если это личный проект, выдумайте убедительную и измеримую проблему.

Процесс и ваша роль:

Опишите шаги, которые вы предприняли: анализ конкурентов, составление карты пути пользователя (CJM), пользовательские сценарии, построение информационной архитектуры, создание вайрфреймов, прототипирование, тестирование. Покажите артефакты: схемы, наброски, результаты опросов. Это доказывает, что ваш финальный дизайн не случаен, а является результатом системной работы. Четко обозначьте свою зону ответственности, особенно если работали в команде.

Решение:

Представьте финальные макеты, но не просто как картинки. Аннотируйте их. Объясните, почему вы приняли те или иные решения, и как они решают изначально поставленную проблему. "Я изменил цвет кнопки" - не подойдет. "Я использовал контрастный синий цвет для основной CTA-кнопки, чтобы повысить ее заметность и отделить от второстепенных действий, что соответствует устоявшимся паттернам взаимодействий" - отлично, подойдет.

Результат:

Это самая важная часть. Вы должны оперировать метриками. Для личного проекта вы можете их обоснованно спрогнозировать: "По результатам коридорного тестирования на 5 пользователях, среднее время выполнения задачи сократилось с 90 до 45 секунд. Прогнозируемый рост конверсии ключевого сценария - 15%".

Работодателю нужен измеримый результат. Покажите, что вы мыслите категориями бизнеса, а не только эстетики.

Ошибки, которые вас утопят v2

Приоритет эстетики над функцией: вы часами двигаете пиксели, но игнорируете пользовательский сценарий. Продукт может быть красивым, но если он не решает задачу, он не несет пользы и убыточен для бизнеса. Последствие: продукт проваливается, бизнес теряет деньги, вы теряете репутацию.
Проектирование в вакууме: вы не показываете свою работу никому до "идеального" результата. Это прямой путь к провалу, потому что на поздних этапах стоимость внесения изменений возрастает экспоненциально. Последствие: потраченные впустую часы разработки, необходимость дорогостоящей переделки, потеря доверия команды.
Неумение аргументировать решения: вы не можете объяснить, почему кнопка находится здесь, а не в другом месте, и ссылаетесь на "вкус" или "интуицию". Каждое ваше решение должно быть осознанным и защищаемым с точки зрения психологии, бизнес-логики и гайдлайнов. Последствие: ваши решения будут отменены любым человеком с более громким голосом (менеджером, клиентом), и вы превратитесь в исполнителя чужих идей.
Игнорирование гайдлайнов: вы пытаетесь изобрести велосипед там, где уже существуют устоявшиеся и протестированные миллионами пользователей паттерны (например, нативные гайдлайны iOS Human Interface Guidelines и Android Material Design). Изучите их, чтобы понимать, почему они такие, какие есть, и нарушайте правила осознанно, а не по незнанию. Последствие: приложение ощущается чужеродным на устройстве пользователя, вызывая отторжение и трудности в использовании.
Боязнь "пустого холста": вы ждете вдохновения вместо того, чтобы начать с анализа, структуры и данных. Профессиональный дизайн - это 95% ремесла, дисциплины и системного подхода, и только 5% творчества в общепринятом смысле. Последствие: прокрастинация, сорванные сроки и неспособность решать сложные, нетривиальные задачи.

Глубокое погружение в метрики

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

Conversion Rate

Conversion Rate (коэффициент конверсии): процент пользователей, выполнивших целевое действие (покупка, регистрация, подписка).

Как влияет дизайн: упрощение пути пользователя (сокращение шагов в воронке), понятные и заметные призывы к действию (CTA), устранение отвлекающих элементов, повышение доверия (отзывы, знаки безопасности).

Кейс: E-commerce платформа сократила процесс оформления заказа с 5 до 3 шагов и сделала кнопку «Оплатить» самой контрастной на экране. Результат: Conversion Rate вырос на 18%.

Retention Rate

Retention Rate (коэффициент удержания): процент пользователей, которые возвращаются в продукт через определенное время.

Как влияет дизайн: качественный онбординг (первое знакомство с продуктом), система вознаграждений и геймификация, персонализация контента, создание полезных привычек (например, через push-уведомления).

Кейс: мобильное приложение для изучения языков ввело ежедневные цели и систему "стриков" (непрерывных дней занятий). Результат: retention Rate на 7-й день вырос на 30%.

Time on Task

Time on Task (время на выполнение задачи): среднее время, которое пользователь тратит на выполнение конкретной задачи (например, поиск товара).

Как влияет дизайн: логичная информационная архитектура, эффективная навигация и поиск, предсказуемость интерфейса, минимизация количества кликов и полей для ввода.

Кейс: корпоративный портал переработал структуру меню и добавил интеллектуальный поиск с подсказками. Результат: среднее время на поиск нужного документа сократилось с 90 до 35 секунд.

LTV

LTV (Lifetime Value / Пожизненная ценность клиента): общий доход, который компания получает от одного клиента за все время его взаимодействия с продуктом.

Как влияет дизайн: LTV - это комплексная метрика, на которую влияют все вышеперечисленные. Хороший дизайн повышает удержание, стимулирует повторные покупки и переход на более дорогие тарифы (upsell), что напрямую растит LTV.

Кейс: SaaS-сервис улучшил интерфейс раздела с дополнительными функциями, сделав их ценность более очевидной. Результат: процент пользователей, перешедших на премиум-тариф, увеличился на 12%, что повысило средний LTV.

Психология в дизайне

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

Когнитивные искажения:

Эффект якоря (Anchoring Effect): первое полученное число сильно влияет на последующие оценки. В e-commerce это зачеркнутая «старая» цена рядом с новой, которая делает скидку более привлекательной, даже если изначальная цена была завышена.
Боязнь потери (Loss Aversion): люди сильнее переживают потери, чем радуются эквивалентным приобретениям. Этим пользуются таймеры ("Акция закончится через..."), уведомления ("Осталось всего 3 товара на складе") и формулировки ("Не упустите шанс" вместо "Получите скидку").

Поведенческие паттерны и законы:

Закон Фиттса (Fitts's Law): время, необходимое для достижения цели, зависит от расстояния до нее и ее размера. Из этого следует, что важные интерактивные элементы (кнопки CTA, иконки вкладок) должны быть достаточно большими и располагаться в легкодоступных зонах экрана (например, внизу для мобильных устройств).
Закон Хика (Hick's Law): чем больше вариантов выбора, тем больше времени требуется на принятие решения. Поэтому хорошая навигация - это не та, где показаны все возможные ссылки, а та, где пользователю предлагается минимальное количество релевантных вариантов на каждом шаге. Перегруженные меню и дэшборды парализуют пользователя.

Гайд по созданию кейса для портфолио

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

Выбор и анализ проекта.

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

Формулирование гипотез.

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

Процесс редизайна.

Продемонстрируйте свой рабочий процесс. Не нужно делать все возможные исследования.

Достаточно показать:

CJM (Карта пути пользователя): Схематично изобразите текущий и предлагаемый путь пользователя для выполнения ключевой задачи.

Вайрфреймы: низкодетализированные наброски структуры новых экранов, показывающие вашу работу над логикой, а не над визуалом.

Финальный UI: представьте несколько ключевых экранов "до" и "после", сопровождая их аннотациями, объясняющими ваши решения.

Презентация и "результаты".

Так как у вас нет реальных данных, смоделируйте их. Проведите коридорное тестирование вашего прототипа на 3-5 друзьях, замеряя время выполнения задачи. На основе этих данных и ваших гипотез сформулируйте правдоподобные результаты: "В результате редизайна, основанного на гипотезах, удалось сократить среднее время оформления заказа с 2 минут до 45 секунд (по данным юзабилити-тестирования), что прогнозируемо приведет к росту конверсии на 15-20%".

Коммуникация с разработчиками

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

Подготовка макетов к передаче:

Системность: ваш макет должен быть построен на компонентах с вариантами (variants) и Auto Layout. Это позволяет разработчику понять логику адаптивности.
Именование: называйте слои и компоненты логично и последовательно (например, button-primary-default, input-field-error). Это напрямую транслируется в названия компонентов в коде.
Все состояния: продумайте и отрисуйте все состояния элементов: default, hover, pressed, disabled, error. Не заставляйте разработчика додумывать это за вас.
Отстаивание решений: ваш главный аргумент - не "потому что так красиво", а "потому что это решает проблему пользователя и соответствует бизнес-цели". Ссылайтесь на данные исследований, гайдлайны, психологические принципы. Говорите с командой на языке пользы, а не вкуса.
Поиск компромисса: будьте готовы к тому, что не все ваши идеи реализуемы в рамках текущих сроков или бюджета. Услышав "это сделать сложно/долго", не упирайтесь, а задайте вопрос: "Какое альтернативное решение мы можем найти, чтобы достичь той же цели для пользователя?" Хороший дизайнер гибок и умеет находить работающие компромиссы, а не воевать за каждый пиксель.

Дизайнер — это инженер

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

Вывод

В целом, вы могли заметить, что некоторые тейки W1ndrunner совпадают с тейками Elliot. То есть даже на начальном уровне, при правильном подходе, который описал Elliot, вы уже будете почти полностью готовы к среднему уровню. И в конце полностью согласен с W1ndrunner, ведь дизайнер - это не про рисовальщика картинок, это про настоящего инженера!

Интересный факт: как W1Indrunner и сказал, все эти трюки с "осталось 3 штуки" или "до конца ..." - это та же психология, нацеленная на то, чтобы вы поторопились и купили. И в большинстве случаев это неправда, вас просто хотят поторопить. Теперь живите с этим!!

Кстати, будьте очень осторожны с придумыванием каких-то проблем или метрик. На собеседовании могут за это зацепиться. И если вы просто скажете, что "придумал", то it's over... так что под все лучше иметь обоснование. Пусть даже придуманное, но зато обоснование (но вот проблемы лучше реальные искать. Можете в конце концов отзывы на app store или play market анализировать)

В общем, подходим к финальному уровню

Финальный уровень

Ну что, я приветствую вас на "финальном уровне". Эту главу буду освещать я, здесь будет уже последнее из того, что вам потребуется на пути дизайнера. Но сразу хочу сказать, что профессия дизайнера хороша тем, что учишься ты постоянно и нет такого понятия как "финал". Так что давайте с вами окунемся в фейковый финал

Максимальный набор инструментов

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

Gemini. Лучшая нейронка на данный момент. Вырезать невероятно сложный фон, дорисовать какую-то часть за 10 секунд, изменить стиль, сгенерировать что-то в похожем стиле - она может все. Просто отличный инструмент, который я на постоянке использую и в дизайне, и в проге. Так еще и за полгода 1800 рублей (берите семейную подписку). Ну не сказка ли?
Spline. Буквально Figma, но для 3д и в браузере с возможностью коллаборации. Многие топовые дизайнеры используют ее. Но если мощность пк позволяет и хотите большего, то Blender, конечно же, ваш выбор
Framer. Можно назвать это улучшенной Figma, но именно для интерфейсов и сайтов с отличной нейронкой внутри. Много ребят выигрывали конкурсы на различных биржах с конкурсами и работами благодаря этой нейронке (спокойно выносили по $3к+)

Все инструменты, которые были упомянуты до этого + Gemini, Spline, Framer

Личный бренд и как о себе заявить

В целом, заявить о себе просто. Сразу скажу, что НЕ СТОИТ ходить по всем крипто-конференциям и раздавать свою карточку с контактами как листовки. Достаточно просто придерживаться простейших действий:

Быть адекватным человеком и поддерживать людей

Все. Этого реально достаточно. Достаточно не быть вонючкой, который всех оскорбляет, и люди к вам потянутся

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

В одно время я нашел работу фронтенд разработчиком в хорошей компании благодаря тому, что помог своему другу с пет-проектом - сделал дизайн и написал фронт. И он после порекомендовал меня своему работодателю. Все просто

Этот канал набрал 200 подписчиков за пару месяцев благодаря тому, что я делал многим своим товарищам и знакомым дизайн бесплатно. Или в целом консультировал и помогал. И они рекомендовали меня (спасибо!), репостили к себе и в целом мы с ними в хороших отношениях и помогаем друг другу. Конечно, я еще пощу полезный/интересный контент и обладаю харизмой, ахах, но все же благодаря помощи моих товарищей канал вырос быстрее

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

Нетворк как главный буст

Благодаря тому, что я сделал полный ребрендинг smkzz мне написало больше 40 человек о том, что они хотят сделать себе оформление. Просто вдумайтесь в это число. Конечно, это не только результат одной работы. Это результат всего моего профиля и моего канала, всех моих работ, но в любом случае!

А Богдан написал мне сам, ведь он увидел работу, которую я сделал dominatos (возможно, ему еще и рассказали обо мне). А со всеми ними я был знаком до этого. Да и в целом многое повлияло, может даже игра с джаспером в дедлок вообще стала главной точкой отсчета

Так что ребят, ну реально, давайте на чистоту. "Нетворк" это не сухое использование людей и их возможностей. Это реальные знакомства и реальные товарищи. Вы буквально общаетесь как адекватный человек (ну шизни тоже можно чуток), работаете, развиваетесь, познаете новое, не отказываетесь от возможностей, боритесь со страхами, идете вперед и все у вас обязательно будет хорошо. Никаких секретов нет

К слову, фиты в этой статье и есть тот самый нетворк. Я также познакомился с ребятами, также обсуждал с ними многое, также мы становились ближе и вот в один день я предложил им написать статью. И сейчас вы это все видите. В этом и есть сила нетворка

Куда дальше?

Ну что, вот мы с вами и пришли к вопросу. А куда дальше? И я предлагаю вам развиваться в роли разработчика

Вообще я пришел в дизайн из фронтенд-разработки. В целом, там я создавал дизайн интерфейсов, но не в фигме. Я сразу кодил их и воплощал в жизнь. Оттуда я почерпнул много различных примеров хороших интерфейсов, сам во всем это разобрался и научился видеть не просто "красивое", но и "полезное", и "удобное". Поэтому там у меня уже сформировалось видение того, что любой интерфейс должен быть удобным, чистым и приятно используемым. И в дизайне мне это невероятно помогло

А теперь представьте, что вы со знаниями дизайна захотите пойти во фронтенд-разработку. Вы уже будете на голову выше, чем если бы пошли просто во фронтенд. Ведь вы будете знать акценты, auto-layouts в фигме (а здесь это grid или flexbox), группы, единообразие (а здесь это переиспользуемые компоненты) и так далее. То есть вы буквально будете кодить то, что знаете. Но это только про визуал, конечно, ведь вам нужно будет продумывать и архитектуру приложений, и код писать... ну много придется делать. Но вам будет проще

Но это не все. Просто представьте, что вы умеете дизайнить и кодить то, что надизайнили. Вы сможете делать то, что было у вас в голове. Возможно, монетизировать это и помогать своими продуктами людям. Вы один сможете облегчить жизнь миллионам... представили? Так можете воплотить это в жизнь. Или можете перейти в бекенд-разработку и делать то, чем также пользуются миллионы. Возможности безграничны

Недавно я сделал сайт, где я совместил фронтенд, бекенд, дизайн, а также работу в блендере, создав место, где можно сделать свою собственную карточку в 3д и кастомизировать ее как хочется. Теперь понимаете, что возможности РЕАЛЬНО безграничны и вы можете реализовать абсолютно все?

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

Итог

Все секции в этой главе для того, чтобы вы поняли, что дизайн не имеет "финала" или какого-то конца. Вы всегда учитесь и всегда развиваетесь. Но если вы понимаете, что хотите чего-то еще или научиться чему-то новому - у вас полный простор. Дизайн мне очень помог в Blender, ведь я уже видел композицию. А после я и в целом использовал (и использую) дизайн вместе с Blender, создавая работы, которые люди ставят на аватарки в профили <3. Погружение в бэкенд разработку очень помогло с еще более глубоким пониманием фронтенд разработки и так далее

Короче, все связано и переплетено, море нитей но... в общем, изучение нового это не только про освоение какого-то до этого незнакомого навыка. Это еще и про углубление знаний в других сферах, а это очень и очень полезно. Так что не бойтесь и смело изучайте!

А следующая секция - пример полного пути в дизайне

Пример полного пути UX/UI и продуктового дизайнера

Итак, я понимаю, что в начале иногда бывает не за что зацепиться, даже если информации много, поэтому представляю вам ПОЛНЫЙ ПУТЬ от нуля до крутого перца. Это буквальный путеводитель - идете по нему и все будет с вами хорошо. Давайте разбирать по пунктам.

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

Начальный уровень

Ничего не знаешь и только прочитал эту статью?

Открывай фигму и изучай ее интерфейс

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

Что-то простое и то, что кажется тебе по силам. Например, карточку товаров в вайлдберрис. Просто попробуй воссоздавать. Но будь внимателен! На этом этапе ты еще не используешь auto layout и многого не знаешь, поэтому потрать на него не очень много времени (до момента, пока ты не освоишься в фигме и не сделаешь 5-10 тестовых дизайнов простых, чтобы просто закрепить материал).

Дальше советую не читать, пока не выполнишь этот фрагмент (но кто такую машину остановит...)

Просто делать - не очень продуктивно

Да, это весело и клево, но есть очень много проблем в таком подходе - он неточный. Ты просто попиксельно что-то подбираешь, а это не хорошо. Поэтому внимательно читаем начало "Средний уровень" и узнаем про Auto layout, а также узнаем про компоненты и про variants, ЭТО ОЧЕНЬ ВАЖНО!!!

После этого ВЕЗДЕ используем это, приводя наши дизайны в порядок и продумывая то, как лучше всего использовать этот auto layout и остальные функции. Может сетку сделать, может просто расположить в строку, может расположить в строку с переносом? А с компонентами как? Стоит ли выносить это в компонент, какие состояния нужны? И так далее

Я очень советую вам зайти на этом этапе зайти в ресурсы в конце статьи и потыкать Untitled UI. Это невероятно полезная библиотека компонентов в Figma, где вы можете посмотреть на хорошую структуру компонентов и как они используются. Там все очень четенько и приятно расписано, поэтому можете погрузиться с головой

Как бы суть этого этапа заключается в том, что мы внимательно смотрим на какой-нибудь референс, который мы хотим повторить, внимательно его изучаем. Смотрим на "Начальный уровень" и читаем "Средний уровень", чтобы понять, что нужно декомпозировать, а не просто копировать. И используем по максимуму auto layout, компоненты и variants

Здесь очень важно выработать понимание того, как все использовать. Поэтому я советую вам открыть реально существующие продукты и пытаться воссоздать их дизайны. Шаг за шагом, аккуратно и в своем темпе. Например, можете попробовать воссоздать интерфейс Spotify или Яндекс музыки. Ну или саундклауда))) gsoundcloud))0))) извините...

Самое главное - находим реальный продукт, который нам нравится/которым мы пользуемся. Пытаемся воссоздать его, используя все наши знания. На этом этапе вы еще не совсем будете понимать, что хорошо, а что плохо. Как анализировать правильно и почему дизайнер сделал что-то именно так. Поэтому сосредоточьтесь на том, чтобы наработать руку

И вот подобным образом мы пытаемся воссоздавать и набираемся опыта. Если вы возьмете какой-нибудь Spotify, то так шаг за шагом сможете задизайнить все приложение, а после внимательно на Mobbin (например) посмотреть пользовательский флоу. От регистрации до прохождения всех сценариев

Таким образом вы сможете посмотреть на логику приложения и почему все именно так. Да, возможно вы не поймете, почему некоторые сценарии устроены таким-то образом, почему акценты тут, там и тому подобное, но это и не нужно в самом начале. Главное, что у вас по факту будут все макеты дизайнов, которые вы сделали САМИ, использовав все, что требуется, поэтому сможете потыкать, потрогать, облизать - в общем, все сможете, а это важно. Потыкаться - это отличная практика

ОБЯЗАТЕЛЬНО советую вам прочитать мой урок про цвета. Таким образом вы сможете избавиться от рандомного подбора цветов и придете к эффективному и осмысленному подходу, который упростит жизнь в десятки раз (все в конце статьи)

Средний уровень

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

Далее полностью читаем средний уровень в этой статье. Прям полностью и разбираемся постепенно в каждом определении. Userflow, cjm, jtbd, коридорки, юзабилити (тесты) и метрики - все это мы должны понимать, во всем этом должны разобраться. Необязательно за раз все это разобрать, достаточно постепенно и в своем темпе все познавать, ведь это теория, которая очень просто забудется, если вы ее не будете использовать

Весь ваш предыдущий опыт вам очень сильно поможет в этом. Определений будет больше по факту, поэтому смотрите все! Если вы еще с чем-то не разобрались по части функционала фигмы, то ОБЯЗАТЕЛЬНО разбираемся, потому что это приведет дизайн из состояния смерти в нищете в прекрасное состояние покоя в богатстве

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

Эта кнопка зеленого цвета для того, чтобы повысить ее акцент. Значит, она важнее, чем кнопка, которая вообще без цвета. А вот эта карточка исполнителя, а вот еще. То есть это группы, интересно...

И это прелестно. Это то, что нужно. Значит, вы уже постепенно начинаете понимать и ваше подсознание тихонечко включается в работу (а может оно уже на полную работает). Продолжайте развивать эти мысли и ваше мышление, поглощайте много информации, читайте хороших авторов и их разборы, смотрите на уже работающие приложения и пытайтесь все это ОСОЗНАТЬ. Помните, что мозг очень хорош в паттернах, поэтому чем больше вы скормите ему инфы - тем проще будет подсознанию забрать на себя больше работы и тем проще вам будет работать (и тем эффективнее)

После продолжайте итерациями: смотрю на продукт -> пытаюсь воссоздать -> анализирую -> продолжаю -> анализирую ...

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

И вот после прохождения этого этапа раз за разом, у вас скопится много работ, которые вы воссоздали и проанализировали. И у вас должно было появиться понимание того, что что-то можно сделать лучше - ради этого-то мы работали

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

Кому-то дизайн сайта потребуется, кому-то дизайн профиля и так далее. Просто делаете то, что можете и обживаетесь важным опытом. Тут вы по факту начинаете не просто анализировать чужие работы, а уже собственные. Выстраивайте логику сами, анализируете сами, проводите тестирования сами, оформляете все в красивые и проработанные кейсы сами. И начинается самое интересное

Финальный уровень

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

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

В целом, советую вам сначала поработать в каком-то проекте, чтобы понять всю внутреннюю кухню и получить еще больше опыта от ребят поопытнее. Это очень важно, ведь хоть я и написал здесь "финал", но ваш уровень не превышает уровень джуна

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

Пример полного пути графического дизайнера

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

Сначала осваиваемся с инструментами и базой, потом немножечко копируем, потом анализируем и думаем, а после плотненько используем весь функционал и продолжаем делать то же самое, что и делали (много думаем, анализируем и делаем + перенимаем опыт. И уже не копируем!!!) и наполняем портфолио

Тот же путь, но есть нюанс…

Для начала внесем ясность. Графический дизайн - это не про "рисование", это про передачу информации через визуальные образы

То есть отличие в том, что UI/UX решает проблему взаимодействия с продуктом, а вот графический дизайн решает проблему коммуникации (с помощью форм, типографики, цветов и так далее)

НО! Если в UI/UX мы конкретные инженеры, то здесь мы уже личности тонкой душевной организации и развиваем визуальную экспрессию! поправил монокль

Поэтому давайте адаптируем этот путь под графику

Начальный уровень

База у нас та же. Figma, Photoshop, Adobe Illustrator, но приоритеты теперь немнооожечко другие

В UI/UX нас ждет смерть в нищете, если мы не используем Auto layout, components и variants (чтобы все было четенько)

Здесь же нас ждет смерть в нищете, если мы не используем Pen tool, кисти, работу с масками, наложениями и типографикой. Здесь мы частенько нарушаем какие-то принципы и ломаем сетку

Здесь вы можете вместо карточки wildberries повторить какой-нибудь постер к фильму или музыкальную обложку. Задача та же - повторить, но вот там логика, а здесь - эмоция

Средний + финальный уровни

Когда дизайнер воссоздает Spotify или саундклауд))00) извините x2... то он смотрит на общую логику и как пользователь переходит от экрана к экрану

Когда графический дизайнер воссоздает плакат Nike, то он изучает визуальную иерархию и метафоры

Здесь мы отвечаем на вопросы "почему тут воздух?", "почему шрифт такой жирный?", "почему такая иерархия?" и так далее

Так что вместо воссоздания Spotify мы заходим на Behance, Dribbble, Pinterest, собираем коллаж и пытаемся практиковаться (только теперь заходите не в интерфейсы, а в Branding и Typography). Рисовать плакаты, обложки альбомов, создавать постеры, баннеры и пробовать-пробовать-пробовать. Знаете, что отличает работы крутого дизайнера от работ новичка? Пропасть в виде огромного количества часов, потраченных на практику. Так что не ленимся и практикуемся. Можете даже мои баннеры покопировать...

Кстати, отличной практикой будет изучать рекламные баннеры вашего города. Если вы живете в большом городе и у вас есть метро, то изучайте баннеры и там, потому что в поездах, в основном, очень заметен графический дизайн, печать и как вообще все устроено. Тоже очень поможет в изучении

По теории у нас вообще другая плоскость. Никаких user flow, CJM, a/b тестирований

Типографика

У нас тут типографика - не просто "читабельно", а "характерно". Как шрифт меняет настроение фразы?

Вот сравните

Миленький шрифтик ураа

HELP HELP HELP HELP WAKE UP RUN WAKE UP RUN

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

Цвета

И по цветам тут тоже плотненько надо знать все, ведь если у UI/UX дизайнера RGB уже почти не используется и это прошлый век, все перешли на OKLCH и HSL, то вот тут за незнание разницы между RGB и CMYK (печать), полагается штраф в виде пожизненного пребывания в низшей касте дизайнеров (их не берут на работу и они вечно проходят платные курсы)

Композиция

Золотое сечение, правило третей, динамика и статика. Ну и по базе дальше

Итог

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

Все, что было расписано выше (про портфолио, личный бренд, нетворк, поиск работы и так далее), полностью применимо и здесь. Законы рынка одинаковы:

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

Поэтому используйте всю базу из этой главы и всю статью. И тогда у вас получится полная карта развития от нуля до прошаренного перца (как я и обещал в начале статьи)

Дерзайте и будьте смелее!

Итог

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

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

Важнейшие советы

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

Фильтруйте то, что потребляете

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

В лучшем случае подобный контент просто немного засорит вам голову. В худшем - сильно ограничит вас как дизайнера и навяжет вам рамки. Поэтому всегда будьте очень осторожны, ищите основной массив информации у крутых дизайнеров в твиттере/телеграме и в иных случаях - на ютубе (НО ОЧЕНЬ ОСТОРОЖНО, там опаснее всего). Если смотрите в другом источнике - будьте еще более внимательны

Иначе станете дизайнером, который знает про миллион видов сеток, засажен в несколько платных курсов и сидит в картонной коробке и с шапочкой из фольги на голове

Подсознание и его ключевая роль

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

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

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

Вылезайте из своей коморки

Экспериментируйте и творите, не становитесь рабом одного стиля. Старайтесь хотя бы иногда выходить за рамки и делать что-то новое

Ну... на этом точно все. Все мои слова благодарности и наставления в эпилоге!

Эпилог

Спасибо всем, кто дочитал до этого момента. Мы с ребятами очень старались над тем, чтобы вложить наш опыт в статью и донести все до вас, поэтому лучшей поддержкой наших стараний будет хорошенькая поддержка этой статьи

Делитесь ею с друзьями и в своих каналах, рассказывайте товарищам, раздавайте листовки на улицах с этой статьей, выставляйте объявления с этой статьей... в общем, вы знаете, что делать. Не забудьте подписаться на парней, они очень помогли мне и закрыли целые секции, поэтому они будут рады, если вы их поддержите. Кстати, они открыты к сотрудничеству и выполняют заказы, поэтому можете им писать!

И напоследок - самое важное

Начинать что-то новое, особенно в дизайне - это всегда прыжок в неизвестность. В начале будет тяжело. Возможно, будет синдром самозванца или тот самый "внутренний перфекционист", который постоянно говорит "вот тут кривовато", "твой дизайн банален", "это хуже, чем у других". Так вот, без угрызений совести, можете СМЕЛО ему накидать лещей и идти с гордо расправленной грудью вперед

Идеального момента не наступит никогда. Творчество - это не про стерильный, идеальный результат. Это про живой, дышащий процесс. Про смелость выпустить свою идею в мир, даже если она пока несовершенна. Да, будут моменты, когда захочется все бросить. Будут проекты, за которые потом, возможно, станет ОЧЕНЬ неловко. Но именно благодаря таким моментам вы растете

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

И помните.

успех неизбежен

Полезные ресурсы

Список моих уроков по дизайну:

Участвовали в статье (крутые ребята):

Elliot Samuel - невероятно скилловый и приятный дизайнер, нравится его чистый и ухоженный стиль в работах, все очень продумано
W1Indrunner - очень прошаренный в продуктовом дизайне, его работы четкие и глубоко проанализированные, что мне очень нравится

Некоторые дизайнеры, которых я читаю:

Designer Elo - американский дизайнер, нравятся его редизайны. Подходит продуманно к работе и хорошо изучает материал
Dan - еще один американский дизайнер, очень приятный моушн дизайн и опрятные работы, ну просто глаз радуется
Natalia - тоже отличный дизайнер, чистейшие и продуманные работы

Мое вдохновение и просто крутые ребята:

shiva - просто обожаю этого парня. Наш слон, 3д артист, очень крутые работы, которые хочется пересматривать вновь и вновь. Еще очень добрый и вайбовый сам по себе... пока тг у него нет, поэтому можете написать ему в лс о том, чтобы он наконец-то его завел
loganmcr - графический дизайнер + 3д артист, наш слоняра. Невероятные работы, над каждой очень запаривается (и это видно). Тоже очень добри и вайбови. Также у него есть тг, подпишитесь обязательно. Еще очень помог с некоторой работой, ее вы увидите потом. Прекрасный человек!
sunder - гений, филантроп, миллиардер. Лучшие 3д анимации, что я видел. Все очень чисто и очень продуманно, каждая его работа - это прекрасно. И он тоже прекрасен
vitchi - прекрасная художница из веб 2 мира, очень нравится стиль
заиндевевшая ෴𐂂𐀪 - еще одна прекрасная художница/архитектор, невероятно нравятся ее работы и северный уютный стиль в них. Делала очень красивый арт для Mnogoznaal. Мне невероятно близка подобная атмосфера, поэтому листаю с радостью ее канал. А вот еще один ее канал

ОЧЕНЬ ПОЛЕЗНЫЕ РЕСУРСЫ И КНИГА ЗА $350+

Tailwind colors - подобранные хорошими дизайнерами цвета, экономит кучу времени. А после прочтения моего урока про цвета вы будете еще и логику понимать
Untitled ui - ЛУЧШАЯ библиотека компонентов в Figma, благодаря которой вы на реальном примере полностью разберетесь со всем: от Auto layout, variants и компонентов до хорошей структуры проекта. Все очень четенько
Figma Community - многие не знают, но у Figma есть коммьюнити, где выкладывают просто миллион материалов, ресурсов, мокапов, плагинов и гайдов. Очень советую, ОЧЕНЬ
Figma youtube - канал фигмы на ютубе, абсолютный мастхев. Там много туториалов по функционалу, так что сможете найти очень много полезного для себя
Книга по дизайну за $350 - отличная книга. Большинство примеров очень плотно связано с разработкой, а это как раз то, что вам нужно, ведь ваши первые потребители - это разработчики (если вы будете развиваться дальше и перейдете в продуктовый дизайн, то так и будет). Но не советую всецело опираться только на нее, она прекрасна как дополнение, но не как основной ресурс
svgrepo - одна из лучших библиотек иконочек. А еще там все разделено по разным библиотекам, поэтому если вы и будете брать иконочки, то одного стиля, а это очень важно!!!
roadmap.sh - хороший сайт с роадмапами для разработчиков. Очень много направлений, все очень четенько и очень понятненько (если вы пойдете по пути фронтенд разработчика, то советую рассматривать стек React, а после Nextjs ИЛИ Vue.js, а после Nuxt.js. Это самые популярные направления с хорошей поддержкой коммьюнити)

пананасик крипта, 2025. Сделано с любовью <3