Ещё про личные панели в проектах — и как их собирать.
Вот какие у меня, например, уже были:
• Сетка — чтобы быстро сверять отступы и колонки поверх живого сайта.
• Панель состояний — чтобы не проходить весь флоу вручную, а сразу переключаться между состояниями сайта и отдельных элементов.
• Панель анимаций — easing, длительности, scale, replay. Крутишь параметры и сразу видишь, как это ощущается.
Как делать: сначала понять, что хочешь настраивать. Потом попросить собрать под это UI — из элементов сайта, из shadcn/ui и других библиотек или нарисовать самому в Figma. Можно приложить скрины или сайты с референсами.
С первого раза нейронка редко выдаёт идеальный результат. Это всегда итерации. Главное — чётко понимать, какой результат вы хотите получить.
Вот какие у меня, например, уже были:
• Сетка — чтобы быстро сверять отступы и колонки поверх живого сайта.
• Панель состояний — чтобы не проходить весь флоу вручную, а сразу переключаться между состояниями сайта и отдельных элементов.
• Панель анимаций — easing, длительности, scale, replay. Крутишь параметры и сразу видишь, как это ощущается.
Как делать: сначала понять, что хочешь настраивать. Потом попросить собрать под это UI — из элементов сайта, из shadcn/ui и других библиотек или нарисовать самому в Figma. Можно приложить скрины или сайты с референсами.
С первого раза нейронка редко выдаёт идеальный результат. Это всегда итерации. Главное — чётко понимать, какой результат вы хотите получить.
❤3
Forwarded from основы веб дизайна
This media is not supported in your browser
VIEW IN TELEGRAM
#insprrrrr
https://bellkiosk.website/blog/reasons-to-website.html
прик. стать админом причины примерно теже
https://bellkiosk.website/blog/reasons-to-website.html
прик. стать админом причины примерно теже
👍2❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Сетки и направляющие нужны не только в Figma.
В Magazine Index я собираю макет на колонках и направляющих — и ту же логику переношу на сайт. Сетка становится общим языком: видно, откуда блок и на сколько колонок он тянется. На сайте это уже реальная раскладка, а не «примерно по центру».
С агентом лучше говорить так же, как с человеком, которому объясняешь макет: колонки, направляющие, отступы — а не «чуть вправо». Тогда у него есть точные ориентиры, и результат ближе к замыслу.
https://magazindex.com
В Magazine Index я собираю макет на колонках и направляющих — и ту же логику переношу на сайт. Сетка становится общим языком: видно, откуда блок и на сколько колонок он тянется. На сайте это уже реальная раскладка, а не «примерно по центру».
С агентом лучше говорить так же, как с человеком, которому объясняешь макет: колонки, направляющие, отступы — а не «чуть вправо». Тогда у него есть точные ориентиры, и результат ближе к замыслу.
https://magazindex.com
❤4🙏3
This media is not supported in your browser
VIEW IN TELEGRAM
Увидел в инсте простую анимацию и захотел быстро сделать галерею на её основе. Собрал за несколько промптов. Figma использовал только чтобы поправить панель настроек. Доделать анимации, вставить текст — и сайт готов.
Сейчас простые страницы можно делать за пару вечеров.
https://experimental-steel.vercel.app/exp-glr-1
Сейчас простые страницы можно делать за пару вечеров.
https://experimental-steel.vercel.app/exp-glr-1
❤3
Forwarded from Gurov+ (Сергей)
Media is too big
VIEW IN TELEGRAM
Выложил новый стенд. Главное, что хочу сказать про него: движение само по себе алгоритмично. И это не потрогаешь на макете, когда работаешь исключительно с Figma.
О своем подходе к вайб кодингу я расскажу в следующем сообщении👉
Этот макет я собрал за четыре часа. Три с половиной из них ушли на адаптивность и анимацию. Полчаса — просто на то, чтобы перенести макет в браузер.
Хотя, вру: никакого макета здесь не было. Дизайн полностью построен в диалоговом окне Claude Code.
https://mdl-gr2.vercel.app
О своем подходе к вайб кодингу я расскажу в следующем сообщении👉
Этот макет я собрал за четыре часа. Три с половиной из них ушли на адаптивность и анимацию. Полчаса — просто на то, чтобы перенести макет в браузер.
Хотя, вру: никакого макета здесь не было. Дизайн полностью построен в диалоговом окне Claude Code.
https://mdl-gr2.vercel.app
❤2
Сайт Acid Crunch попал на Awwwards. У кого есть возможность проголосовать — очень поможете:
https://www.awwwards.com/sites/acid-crunch
https://www.awwwards.com/sites/acid-crunch
Awwwards
Acid Crunch
Acid Crunch is an immersive neuro-artist portfolio: a continuous media reel with zoom, dual menu, modal project info, and pinned labels that form a new...
❤6❤🔥1👍1
Немного выпал из постинга из-за небольшого отдыха и восстановления для менталочки. Не забывайте трогать траву время от времени)
Плавно возвращаюсь в рабочий ритм:
Плавно возвращаюсь в рабочий ритм:
❤3
This media is not supported in your browser
VIEW IN TELEGRAM
И на сладкое: небольшой тизер учебного стенда по сеткам, где можно будет протестировать каждый вид и посмотреть как он работает в динамичном формате.
❤4
This media is not supported in your browser
VIEW IN TELEGRAM
А так сейчас сижу настраиваю анимации для сайта, который мы делаем с Алиной(@alinferno)
Заодно проверяю новую часть панели для анимаций.
Заодно проверяю новую часть панели для анимаций.
❤5
Смотрю много новых людей подписалось. Всем спасибо! Может есть какие-то вопросы или предложения?
Чем я пользуюсь каждый день. Попросите агента поставить.
portless — когда открыто несколько проектов сразу. У каждого своё имя в браузере, они не мешают друг другу.
Skills Эмиля Ковальского — когда доводите мелкое движение: появление, уход, кнопка. Вместе с ними его словарь анимаций — как назвать жест, чтобы агент понял с первого раза, а не «сделай плавнее».
shadcn/ui — когда нужен быстрый интерфейс: формы, списки, служебные экраны. Если хотите быстро собрать свою панель* или какой-то служебный интерфейс. Даже нейронка с плохим вкусом с этой библиотекой рисует прилично.
Lenis — когда нужен плавный скролл. Даже колёсиком мыши сайт едет приятно.
* моя панель пока еще в процессе работы, но через какое-то время выложу.
portless — когда открыто несколько проектов сразу. У каждого своё имя в браузере, они не мешают друг другу.
Skills Эмиля Ковальского — когда доводите мелкое движение: появление, уход, кнопка. Вместе с ними его словарь анимаций — как назвать жест, чтобы агент понял с первого раза, а не «сделай плавнее».
shadcn/ui — когда нужен быстрый интерфейс: формы, списки, служебные экраны. Если хотите быстро собрать свою панель* или какой-то служебный интерфейс. Даже нейронка с плохим вкусом с этой библиотекой рисует прилично.
Lenis — когда нужен плавный скролл. Даже колёсиком мыши сайт едет приятно.
* моя панель пока еще в процессе работы, но через какое-то время выложу.
❤9