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

Также стоит помнить, что мы не всегда отталкиваемся от чёткого плана, но и действуем в угоду человеческого фактора. И это нормально 💜

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

Часть 2

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

1. Определить достижимые цели

2. Сформировать личный план по развитию

3. Продумать этапы

Структурируем данные, чтобы нам было проще с ними работать

🌟 Определим достижимые цели

Из ответов на вопросы это:

— Научиться в дизайн простых интерфейсов за ~4 месяца
— Начать зарабатывать через 4 месяца

Дополнительные вводные:

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

💎 Главный навык для старта 💎

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

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

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

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

🌟 Сформируем личный план развития

1. Учимся 4 месяца

Мы поняли, что этого достаточно для начального этапа с таким сроком

2. Выбираем самообразование

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

3. Через 4 месяца ищем подработку

Работу в компании вряд ли мы найдём + нас интересует именно доп. заработок. А вот зайти на какую‑нибудь фриланс биржу можно. Там не всегда важен опыт,. Главное себя продать.

Часть 3

🌟Этап 1. Изучаем инструмент Figma

Для этого идём, например, на Behance. Скриншотим работы и пытаемся отрисовать 1в1. Пока что погружаться в теорию нет смысла. Берём только сайты и их адаптивы. Для изучения iOS HIG и Android MUI нам времени не хватит. Поэтому повторки Android и iOS экранов не рисуем.

Гуглить мы всё ещё не разучились. Ищем ответы на вопросы в браузере, youtube и др.

🌟Этап 2. Нам нужен осознанный дизайн

Как только мы поняли, что уже довольно быстренько можем отрисовать 1в1 по примеру, идём за теорией. Для успешного закрытия задачек нужно понимать, что мы делаем, каким образом и для чего.

1. Изучаем все стандартные интерфейсные web-элементы и принципы отрисовки web-интерфейса, его адаптивность

Закрепляем на практике

2. Изучаем типографику, вёрстку, композицию, визуальную иерархию, цвет

Всё, что изучили в теории, сразу применяем на практике. Для это лучше уже попробовать отрисовать свой макет по выдуманной задаче. Так вам будет что исправлять)

🌟Этап 3. Учимся структурировать работу

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

Поиск и формирование первичных данных:

— Брифинг
— Изучение предметной области
— Поиск конкурентов
— Подбор эвристик

Определение фактических данных:

— Эвристический анализ
— Анализ конкурентов
— Пользовательские истории
— Схема информационной архитектуры

Дизайн:

— Пользовательские пути
— Макеты низкой детализации
— Макеты высокой детализации

Передача дизайна в разработку:

— Подготовка макетов
— Нейминг
— UI-kit, компоненты

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

🌟Этап 4 Формирование портфолио

Здесь, я уверен, вы сможете найти всю информацию сами :)

💎 И ещё раз: теория ➔ практика. Всегда. 💎

Также старайтесь не придумывать велосипед. Почти всё о чем вы подумали, уже кто‑то сделал до вас)

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

📂 UX/UI Дизайн роадмап

Сам пользуюсь и всем советую . Его можно взять за основу для дальнейшего развития. Но только после всего описанного выше. Этот роадмап предоставит вам дальнейшие вызовы и правильный курс развития.

📂 Рекомендуемая литература:

1. Типографика и вёрстка. Артём Горбунов.
2. Теория цвета. Иоханнес Иттен.
3. Пиши, сокращай. Максим Ильяхов.
4. Сожги своё портфолио. Майкл Джанда.
5. Новая типографика. Ян Чихольд
6. Дизайн привычных вещей. Дональд Норман.
7. Психбольница в руках пациентов. Алан Купер.

Это моя первая статья на Пикабу. Буду благодарен за обратную связь в комментариях и поддержке реакциями ❤

То есть, если понравился чужой сайт, можно сделать скриншот любой страницы и загрузить в сервис, и он взамен выдаст HTML/Tailwind/JS код. Есть сервис, действующий примерно по такому же принципу.

Кстати, про другие проверенные инструменты для бизнеса и учебы в моем телеграм канале

Почему примерно?

Copycoder

Потому что в Copycoder так же перетаскивается скрин сайта, а еще можно и дизайн Figma, или макетов Ul, только на выходе сервис выдает не код, а готовый текстовый промпт, которыей можно использовать в AI-инструментах разработки, таких как Cursor, Bolt и v0 - это надо учитывать.

CopyCoder предлагает бесплатный план с 5 промптами в месяц и платный план за $15 в месяц с 25 промптами

Не отправляй ссылку на исходник Figma с доступом Can view до полной оплаты!

Первый способ

Берешь свой макет и сохраняешь его как png и вставляешь в новый документ через плагин Insert Big Image

Второй способ

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

Основной и самый важный плюс последнего способа:

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

Больше полезностей для дизайнеров в моем телеграм канале

В частности:

• Сделали новый интерфейс

• Встроили ИИ-ассистента, который помогает делать прототипы, адаптивные макеты, генерировать картинки, иконки, удалять фон, писать и переводить тексты, массово переименовывать слои и многое другое

• Добавили редактор презентаций Figma Slides

• Улучшили режим для разработчиков Dev Mode

• Сделали авто-лейауты более интуитивными

• Добавили редактируемые наборы интерфейсных элементов Apple iOS, Google Material Design 3 и Simple Design System от Figma прямо на панель Assets

• Теперь в FigJam вместо одного большого холста есть страницы

• Rain Drop Effect — добавляет любому изображению настраиваемый эффект дождя

• Curve Text — размещает текст по периметру любых векторных объектов

• Ruri Lines — стилизует изображения под объёмный линейный паттерн