Gurov+

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

Состав программы (часть 2) Архитектура. Работа с пространством (AD) - Контрформа — пассивная, активная, орнаментальная. - Формат как неоднородное пространство (Фаворский) - Три типа пространственного построения — глубокое, рельефное, плоское — и запрет на спор плоскости и глубины в одной работе. (Булатов) - Значение места и направления: зонам назначаются смыслы, направление означает переход, возврат, углубление. - Детализация как способ увеличения композиционно устойчивых позиций на формате. - Зачем вообще нужна вёрстка и как она экономит Время и Внимание пользователя. - Схема и сетка: как схема рождает композицию и фиксируется сеткой (Вилли Кунц и др.) - Сетка как правило, по которому элементы получают место. - Типология и классификация сеток: позиционные, иерархические, алгоритмические. - Девять законов адаптивности, проверка страницы на адаптивность. Здесь появляется вайбкодинг: сетку быстрее проверить кодом, чем на глаз. Зачем? Дизайнер перестаёт расставлять элементы на глаз: он назначает места и объясняет каждое. Взаимодействие как работа с движением и временем. Дизайн взаимодействия (XD) Интерактивный дизайн в большей степени конструктивен чем композиционен, поэтому в отличие от печатного проектируется от движения и взаимодействия с ним. - Два времени: время читателя — сколько нужно, чтобы работу понять; и время изменения — когда объект меняет состояние. - Интерфейс как представление, которое остаётся у человека, когда он закрыл глаза. - Три типа интерфейсов (А. Купер) - Идиоматический интерфейс: как принцип решения задачи вместо метафоры и языка — учится один раз и переносится на любой материал. - Навигационные схемы, архитектурные модели, бесшовные переходы. - Атомарный словарь взаимодействий (Дэн Саффер): триггер, правило, обратная связь, циклы, режимы. - Матрица взаимодействий: как навигация и восприятие сходятся в одном месте. - Кинетика: движение как носитель чувственной информации — длительность, скорость, ритм, темп. - Алгоритмические сетки: дизайн как алгоритм сборки в браузере. Зачем? Дизайнер отвечает за то, что происходит между экранами: модель взаимодействия он описывает словами и потому может передать её разработчику или собрать сам. Практика двухслойная. 1. Короткое упражнение прямо на встрече, 15–20 минут, пока тема свежая. И домашнее задание на своём материале между встречами. 2. Сквозной проект. В начале каждый берёт свой материал — проект, портфолио, коммерческую задачу — и ведёт его через все три направления: лист, потом живая страница, потом работающий макет с моделью взаимодействия. Показ в конце каждого направления. Важно! Фиксированной даты окончания программы нет. Программа модульная, порядок и глубина подстраиваются под запрос группы. Вход и выход – свободный. Из чего сделано, где стоит, как себя ведёт? Три вопроса к любой работе — и три направления, чтобы научиться на них отвечать. Старт 1 сентября. По всем вопросам пишите в личные сообщения, Алла: @Alla_V_Nastas

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

Уже 1 сентября стартует третий набор в рабочие группы «Основа». И первый, в котором ИИ и вайбкодинг встроены в программу на правах несущей конструкции. Что важно сказать. Программа задумывалась не как курс, который имеет начало и конец. Поверьте мне, дизайн — это океан, в него можно войти, но никогда нельзя себе присвоить. Поэтому обучение идёт в большей степени как программа тренировок, которая развивает и прокачивает разные стороны дизайн-мастерства. Стиль и стилеобразование. Сегодня вопрос стиля и оригинальности по понятным причинам становится всё более актуальным. ИИ с каждым днём всё лучше реализует приемлемый дизайн, но работает внутри медианы. Это дизайн, который можно назвать средним по больнице. Поэтому выдавать приемлемый уровень дизайна в продуктовом стиле — значит быть недальновидным. Вопрос оригинальности и стиля в новом наборе будет одним из самых актуальных. Формообразование. Вопрос формообразования — это вопрос того, как мы строим то или иное решение, по какому пути идём, с чего начинаем и чем заканчиваем. Это вопрос метода в целом, а не инструментов, приёмов или референсов. Как правило, ко мне в рабочие группы приходят дизайнеры, которые уже разочаровались в простых или поверхностных объяснениях по типу «это хорошо, это плохо». Поэтому их главный вопрос формулируется иначе: почему это хорошо и почему это плохо. Это вопрос о самой сути процесса дизайн-проектирования, где ждать простых рекомендаций просто наивно. Развитие ИИ, как мне кажется, и тут качественно меняет ситуацию и переводит акцент с цены вашей работы на её ценность, которая не может быть нигде, кроме вас самих. Я уже писал о том, что появление ИИ уже приводит к тому, что количество дизайнеров уменьшается, а требования к ним растут. Рынок дизайн-услуг давно уже перегрет и перенасыщен — появление ИИ активирует процесс жёсткой конкуренции, которую осилят далеко не все. Но в перспективе это приведёт к новому балансу цены и предложения в нашу пользу. Всё это вопрос кадров. Дизайн требует более серьёзного и глубокого отношения к профессии в целом. Дизайн-мышление. Данный термин я использую в широком смысле: как должно измениться мышление дизайнера и каким оно должно быть, чтобы он стал профессионалом своего дела. Быть профессионалом означает: • Добиваться устойчивых результатов даже на минималках. Даже тогда, когда нет сил и вдохновения. • Мыслить широко: активное внедрение ИИ расширяет области нашего применения, и на границы этих областей ещё нужно выйти и их осознать. • Стоять над ИИ: использовать ИИ как инструмент усиления и ускорения, а не быть инструментом ИИ. • И последнее — перейти от креативности к творчеству. Вайбкодинг я сознательно не выделяю в отдельное направление. Не потому, что недооцениваю его, а потому, что глубоко убеждён в том, что вайбкод — это новый инструмент, изучение которого должно совмещаться с дизайн-проектированием на практике, вне зависимости от уровня применения: от эффекта и приёма до архитектуры и взаимодействия. Поэтому вайбкодинг как инструмент сшивает все три направления — архитектуру, взаимодействие, графику — и становится основой для практики в целом. Теперь коротко о том, как это проходит. Групповой формат, от шести до десяти человек. Теория 30% и практика 70% под моим руководством и контролем. Две встречи в неделю, каждая онлайн и с записью: пропустили — пересматриваете. Время выбирает сама группа, обычно 19:00 или 20:00 по Москве. Встречи двух типов. Лекции и воркшопы: излагаю тему, отвечаю на уточняющие вопросы и сразу переходим к практическому закреплению. ИИ здесь — индивидуальный инструмент, а вайбкодинг — новый способ проектировать дизайн напрямую, без делегирования разработки. Идея проверяется за минуту, и этим вайбкодинг ускоряет обучение. Консультации: каждая вторая встреча целиком про ваши работы — домашние задания, концепты для портфолио, коммерческие проекты, эксперименты, фриланс. Моя задача — помочь развитию, уберечь от типичных ошибок, подсказать направление работы. Старт 1 сентября. По всем вопросам пишите в личные сообщения, Алла: @Alla_V_Nastas

https://telegra.ph/Prostranstvo-kak-nevidimyj-instrument-dizajna-08-12 Третий текст серии — про пространство, которое как мне кажется до сих пор является одним из самых недооценённых инструментов дизайнера, и напрасно, поскольку именно работа с пространством сегодня — то, чем дизайнер конкурирует с нейронкой. Ведь у ИИ нет глаз: он считает объекты и их функции. В пустоте он видит отсутствие данных, тогда как дизайнер видит пространство возможностей. Внутри: японские гравюры, приехавшие в Европу упаковочной бумагой; неслучившийся спор Рудера с Фаворским о о листе как плоскости и листе как пространстве; демон Максвелла чем он похож на дизайнера; градиент значимости на пятиколонной сетке Kurppa Hosk; лес без направлений; бенто-стена, в которую нельзя войти; и «оставленная белизна» мастеров Ма Юаня и Ся Гуя. Такой вот дизайн на ужин сегодня. Серия продолжается. Предыдущие тексты: про сетки и про вайб-кодинг

https://osnova-workshop.vercel.app В качестве приглашения в менторские группы, собрал небольшой текстовый лонгрид с описанием. Получилось и приглашение и пример вайбкодинга. На сайте вам доступен инструмент кастомизации страницы. Так что если вы настроите интересный вариант композиции - пришлите в комменты – я добавлю в оригинал!

Мы тут с Мишей подготовили небольшой отчет по процессу вайбкодинга, который может помочь ускорить ваш процесс работы. Можно сказать что все сводиться к трем вещам: 1. Собирать макет как стенд а потом накладывать макет из Фигмы 2. Используйте параметрическую панель 3. Учитесь дизайн мышлению. Гарантия хорошего вайб кодинга – это прежде всего способность задумать и обьяснить макет в деталях. А это уже в менторских группах - осталось 6 мест. По вопросам участия в менторских @alla_v_nastas https://telegra.ph/Algoritmicheskij-longrid-sborka-posledovatelnostyu-promtov-07-30

Мой процесс сложился сам собой — из удобства, сравнить не с чем. Я не отдаю макет на вайб-кодинг. Сначала собираю в браузере тестовый стенд и проектирую на нём механику сайта — из формальных элементов: прямоугольники, рыбный текст. Типографика и цвет не важны — важно, как макет работает: архитектура, конструкция, механизм и его элементы: связи, размер, скорость, манера движения, ритм, темп. Готовый макет из Figma ложится на стенд потом — вопросов у нейронки не появляется. Чаще вайб-кодинг устроен иначе: дизайнер сразу кормит нейронку макетом. Это не самый эффективный способ, объясню. Макет — большой массив данных, но как всё это должно работать, нейронка узнаёт уже после: дизайнер отчитывается ей за поведение элементов, как разработчику. В понимании — дыры: где нейронка не понимает макет, там галлюцинирует. Отсюда ошибки и удлинение вайб-кодинга на порядок — потом их вылавливать. Если же идти от стенда — от механизма, архитектуры, конструкции — и только потом отдавать макет, процесс ускоряется.

Выложил новый стенд. Главное, что хочу сказать про него: движение само по себе алгоритмично. И это не потрогаешь на макете, когда работаешь исключительно с Figma. О своем подходе к вайб кодингу я расскажу в следующем сообщении👉 Этот макет я собрал за четыре часа. Три с половиной из них ушли на адаптивность и анимацию. Полчаса — просто на то, чтобы перенести макет в браузер. Хотя, вру: никакого макета здесь не было. Дизайн полностью построен в диалоговом окне Claude Code. https://mdl-gr2.vercel.app

Признаюсь, тяжело постить сюда абсолютно все идеи и размышления, ибо у меня есть внутренний фильтр, который тормозит выкладывать любые raw-идеи. Кажется, что в чём-то я не на 100% уверен. А если не уверен и не проверил научно, на опыте — то нечего и делиться, ведь я же профи. Сегодня сказал одно, а завтра уже поменял мнение. Но по факту это неверно. Думаю, что людям будет всё же интересно видеть даже сырые мысли. Хотел написать про панк, а напишу про искажение реальности: Они искажают реальность. Пишут, что «арт-директора», а по факту — джуны, даже в Фигме не разбирающиеся. Пишут, что они «креативные директора», а они просто фоткают себя для инсты. Пишут, что они «панки дизайна», а они — продуктовые скуфы, ни сделавшие ничего дизраптного или панкового. Мы уже давно застряли в симулякрах (по Бодрийяру). И это второй слой симулякров — «извращение реальности», когда симулякр искажает или «шаржирует» оригинал. Следующий слой будет — «скрытие отсутствия реальности», когда симулякр утверждает, что он отражает реальность, хотя оригинала уже нет. Вседозволенность.

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

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

Бета Interfold 0.8 — галерея для папки и всех подпапок: картинки, GIF и видео в одной сетке. Идея из FFFFinder Антона Реппонена. Это не финальная версия — всё ещё может поменяться. Что умеет: • сетка 4–12 колонок, светлая / тёмная тема • просмотр с зумом, GIF и видео • поиск по имени, сортировка (папки / имя / дата / тип / random) • импорт: буфер или публичная ссылка (Instagram, X, Threads, Pinterest, Tumblr, Telegram) • эффекты в Viewer: Image Dithering и Halftone Dots Требования: macOS 14+. Сборка unsigned: открой приложение → Done → Системные настройки → Конфиденциальность и безопасность → Всё равно открыть. Скачать Ссылка на Github

Пока готовлю следующие статьи и стенды — буду отвечать на вопросы в канале. Пишите не стесняйтесь!