вечерний вайбкодинг

https://osnova-workshop.vercel.app

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

Получилось и приглашение и пример вайбкодинга.
На сайте вам доступен инструмент кастомизации страницы.
Так что если вы настроите интересный вариант композиции - пришлите в комменты – я добавлю в оригинал!

Третий текст серии — про пространство, которое как мне кажется до сих пор является одним из самых недооценённых инструментов дизайнера, и напрасно, поскольку именно работа с пространством сегодня — то, чем дизайнер конкурирует с нейронкой. Ведь у ИИ нет глаз: он считает объекты и их функции. В пустоте он видит отсутствие данных, тогда как дизайнер видит пространство возможностей.

Внутри: японские гравюры, приехавшие в Европу упаковочной бумагой; неслучившийся спор Рудера с Фаворским о листе как плоскости и листе как пространстве; демон Максвелла и чем он похож на дизайнера; градиент значимости на пятиколонной сетке Kurppa Hosk; лес без направлений; бенто-стена, в которую нельзя войти; и «оставленная белизна» мастеров Ма Юаня и Ся Гуя. Такой вот дизайн на ужин сегодня.


Серия продолжается. Предыдущие тексты: про сетки и про вайб-кодинг

Уже 1 сентября стартует третий набор в рабочие группы «Основа». И первый, в котором ИИ и вайбкодинг встроены в программу на правах несущей конструкции.
Что важно сказать. Программа задумывалась не как курс, который имеет начало и конец. Поверьте мне, дизайн — это океан, в него можно войти, но никогда нельзя себе присвоить. Поэтому обучение идёт в большей степени как программа тренировок, которая развивает и прокачивает разные стороны дизайн-мастерства.

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

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

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

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

Теперь коротко о том, как это проходит. Групповой формат, от шести до десяти человек. Теория 30% и практика 70% под моим руководством и контролем. Две встречи в неделю, каждая онлайн и с записью: пропустили — пересматриваете. Время выбирает сама группа, обычно 19:00 или 20:00 по Москве.

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

Старт 1 сентября. По всем вопросам пишите в личные сообщения, Алла: @Alla_V_Nastas

Рабочие группы "ОСНОВА"
Состав программы (часть 1)

Обещал подробнее про состав. В первом посте — что программа развивает. Теперь — из чего она состоит.

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

Графика как работа с формой и обьектом (UI)
- В этой части мы познакомимся с двумя основными способами формообразования — геометрический и пластический.
- Атомы графики: точка, линия, плоскость.*
- Четыре атомарных эффекта: линейный, плоскостной, объёмный, пятно-сигнал.
- Конфликт как основа композиции и три его режима: контраст, нюанс, тождество.
- Ритм, доминанта и субдоминанта, масса и вес.
- Цвет как движение.
- Каталог простых конструкций — I-образная, крест, T-образная, Y-образная, L-образная — и операции над ними.
- Различение композиции и конструкции – суть геометрического формообразования (Международный стиль и производные)
- Конструкция как скелет и план движения, композиция — как целое.

*Одна оговорка. Атомы — язык разбора и декомпозиции, то есть способности понять как устроено то или иное решение. Тогда как проектирование идёт в обратную сторону, сверху вниз, от целого к частям. В этом сама суть и отличие Основного метода (от целого к атомам) от Классического базового (от атомов к целому), которое опирается на традицию Кандинского – Рудера.

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

Состав программы (часть 2)

Архитектура. Работа с пространством (AD)
- Контрформа — пассивная, активная, орнаментальная.
- Формат как неоднородное пространство (Фаворский)
- Три типа пространственного построения — глубокое, рельефное, плоское — и запрет на спор плоскости и глубины в одной работе. (Булатов)
- Значение места и направления: зонам назначаются смыслы, направление означает переход, возврат, углубление.
- Детализация как способ увеличения композиционно устойчивых позиций на формате.
- Зачем вообще нужна вёрстка и как она экономит Время и Внимание пользователя.
- Схема и сетка: как схема рождает композицию и фиксируется сеткой (Вилли Кунц и др.)
- Сетка как правило, по которому элементы получают место.
- Типология и классификация сеток: позиционные, иерархические, алгоритмические.
- Девять законов адаптивности, проверка страницы на адаптивность. Здесь появляется вайбкодинг: сетку быстрее проверить кодом, чем на глаз.

Зачем?
Дизайнер перестаёт расставлять элементы на глаз: он назначает места и объясняет каждое.

Взаимодействие как работа с движением и временем. Дизайн взаимодействия (XD)
Интерактивный дизайн в большей степени конструктивен чем композиционен, поэтому в отличие от печатного проектируется от движения и взаимодействия с ним.
- Два времени: время читателя — сколько нужно, чтобы работу понять; и время изменения — когда объект меняет состояние.
- Интерфейс как представление, которое остаётся у человека, когда он закрыл глаза.
- Три типа интерфейсов (А. Купер)
- Идиоматический интерфейс: как принцип решения задачи вместо метафоры и языка — учится один раз и переносится на любой материал.
- Навигационные схемы, архитектурные модели, бесшовные переходы.
- Атомарный словарь взаимодействий (Дэн Саффер): триггер, правило, обратная связь, циклы, режимы.
- Матрица взаимодействий: как навигация и восприятие сходятся в одном месте.
- Кинетика: движение как носитель чувственной информации — длительность, скорость, ритм, темп.
- Алгоритмические сетки: дизайн как алгоритм сборки в браузере.

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

Практика двухслойная.
1. Короткое упражнение прямо на встрече, 15–20 минут, пока тема свежая. И домашнее задание на своём материале между встречами.
2. Сквозной проект. В начале каждый берёт свой материал — проект, портфолио, коммерческую задачу — и ведёт его через все три направления: лист, потом живая страница, потом работающий макет с моделью взаимодействия. Показ в конце каждого направления.

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

Из чего сделано, где стоит, как себя ведёт?
Три вопроса к любой работе — и три направления, чтобы научиться на них отвечать.

Старт 1 сентября. По всем вопросам пишите в личные сообщения, Алла: @Alla_V_Nastas

Стиль — мечта новичка, опора профессионала и ограничение для мастера.

Сегодня поймал интересную мысль.

Зашёл за кофе и впервые за долгое время внимательно посмотрел, как работает бариста.

Весы стоят буквально везде.

Бариста взвешивает кофе. Контролирует выход эспрессо. Отмеряет молоко. Следит за временем.

И я вдруг вспомнил себя лет 15-20 назад.

Я работал барменом около десяти лет. А ещё раньше варил кофе. И тогда мы практически всё делали «на глаз»: сколько налить, сколько насыпать, когда остановиться. Хороший бармен или бариста просто чувствовал продукт.

И вот что меня зацепило.

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

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

Он ещё не чувствует кофе. Но он может довольно точно повторить рецепт.

А дальше возникает очень интересная аналогия с тем, чем я сейчас занимаюсь с ИИ.

ИИ делает примерно то же самое с интеллектуальной работой.

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

Сейчас мы начинаем превращать этот опыт в процесс, систему, инструкции, агентов, промпты и инструменты.

То есть мы не обязательно становимся профессионалами сильнее.

Мы делаем так, чтобы часть профессионализма можно было встроить непосредственно в процесс.

Как весы у бариста.

И мне кажется, это одна из самых важных вещей, которые сейчас происходят с ИИ.

Не «ИИ заменит профессионалов».

А:

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

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