серёгина. лаборатория веб-дизайна

серёгина. лаборатория веб-дизайна

@julssereginachanel
Изображение канала: серёгина. лаборатория веб-дизайна
3 162 подписчика
18 постов
Посты
Продолжаем баловаться в Claude: делаем интерактивную 3D на сайте☺️
В видео я рассказала пошагово цепочку действий – посмотрите для начала его!📹 Благодаря моей инструкции Claude сможет быстрее сообразить как сделать такую 3D 🔠 (это не отдельно загруженная 3D-модель, все эти буквы описаны прямо в коде, соответственно, вы сможете поменять их на свои) → 1. Инструкцию нужно складывать в ту же папку, где у вас лежат все файлы по сайту (в данном проекте шрифты + те файлы, что вы будете делать по инструкции)/либо прикреплять её к чату с ссылкой на макет и другие материалы (но я советую работать из папки) 2. Также важно повторять все те действия, что описаны в ней – так как там пошагово сказано как и что делать не только с точки зрения дизайна, но и как подготовить материалы ⚠️Я постаралась сделать эту инструкцию еще легче и понятнее, чем предыдущую – никакие дополнительные материалы/файлы, кроме макета в Figma + шрифтов, вам не понадобятся (все остальные файлы вы делаете сами по инструкции) Ссылка на инструкцию🔗 *Выше я делала инструкцию как скачать/зайти/установить Claude #полезное #клод
Какие документы для работы должны быть у дизайнера?📃
Сегодня делюсь супер полезными материалами с вами! Какие докунты должны быть у дизайнера под рукой для полноценной работы? Рассмотрим на примере создания сайта: 📎 Договор на создание продукта — фиксирует условия разработки сайта: сроки, стоимость, обязанности сторон и результат работы. 📎 Приложение — дополняет договор деталями: ТЗ, этапами, стоимостью или списком услуг. 📎 Дополнительное соглашение — вносит изменения в уже подписанный договор, например по срокам, правкам или объёму работ. 📎 Согласование этапов проекта — подтверждает, что заказчик принял конкретный этап и можно двигаться дальше. 📎 Акт выполненных работ — документ, который подтверждает, что работа выполнена и принята заказчиком. 📎 Договор на сопровождение продукта — регулирует поддержку сайта после запуска: обновления, исправления и обслуживание. 📎 Соглашение о расторжении договора — официально прекращает действие договора и фиксирует условия завершения сотрудничества. А я сегодня делюсь с вами шаблоном договора на создание сайта + приложение к нему 🔗Ссылка на документы (документы лежат в Notion, так что, возможно, вам понадобится VPN) #полезное
Делаем такой сайт в Claude!🍓
В видео я рассказала пошагово цепочку действий – посмотрите для начала его!📹 Благодаря моей инструкции Claude сможет быстрее сообразить как сделать скролл по видео + пространственную галерею → 1. Инструкции нужно складывать в ту же папку, где у вас лежат все файлы по сайту (шрифты, фото, видео и т.д)/либо прикреплять её к чату с ссылкой на макет и другие материалы (шрифты, фото, видео и т.д). 2. Также важно повторять все те действия, что описаны в ней – так как там пошагово сказано как и что делать не только с точки зрения дизайна, но и как подготовить материалы Ссылка на инструкцию🔗 *Выше я делала инструкцию как скачать/зайти/установить Claude #полезное #клод
Инструкция по работе с Claude и Claude Code 🥹
Сегодня я написала для вас целую инструкцию по настройке среды для дальнейшей работы с Claude❗️ Я очень часто в роликах и историях говорю: не получится сделать сайт нажав лишь одну кнопочку в строке запросов у Claude какой бы у вас подробный промпт не был! Так что сегодня как раз про все, что вы должны знать для начала работы → так что выделите себе 2-3 часа свободного времени, чтобы во всем разобраться, это не так просто☺️ 🔗Ссылка на инструкцию (статья лежит в Notion, так что, возможно, вам понадобится VPN) Возможно, вы сейчас увидите инструкцию и испугаетесь… Или скажете «так я вообще ничего не понимаю в разработке»🥲 На самом деле, самый муторный этап это «вкатиться» в это все и понять что к чему, дальше – легче. Вам не нужно писать код для создания сайтов, не нужно разбираться в разработке – этот процесс не про это!😳 Как я уже говорила – я не представляю профессию дизайнера будущего без этого навыка, он очень оптимизирует и ускоряет твою работу. Согласитесь, собрать за день 1 презентацию и целых 10 таких же – это большая разница?✅ В общем, приятного чтения, если что будет непонятно – спрашивайте. И, конечно, буду рада вашим реакциям✨ #полезное #клод
Концепт сайта по фигуркам из Pop Mart🍓
Собрала также в связке Figma MCP + Claude Code. На днях выложу инструкцию по тому, как я делала этот сайт + еще какой-нибудь хочу концепт сделать и разобрать его тут) А фанаты Наночки тут?👉 #кейсы #клод
Что умеет Claude (Design / Code) на практике🤖
мой опыт и опыт других дизайнеров/разработчиков 📎 Генерировать UI-концепты и макеты по промпту загружая их напрямую в браузер или в саму Figma 📎 Справляется с созданием адаптивов Хорошо продумывает адаптив, даже если задать ограничения и сценарии 📎 Генерировать дизайн-системы Может собрать дизайн-систему и описать правила (однако полноценные системы требует доработки) 📎 Верстать интерфейсы Подходит для лендингов, MVP и даже сложных интерфейсов, но почти всегда требует ручной доработки и ревью, хорошо обучается на загруженных библиотеках и твоих спецификациях 📎 Делать интерактивные прототипы Может собирать прототипы в браузере/Figma 📎 Помогать с деплоем Может объяснить и сгенерировать шаги для хостинга, домена и настройки проекта 📎 Интеграция с бэкендом и админками Может предложить архитектуру, API-структуру, варианты CMS (пока не тестила работу на бэке, на ютубе видеоа много уроков) 📎 Проводить исследования Это не замена полноценным UX-исследованиям с пользователями, однако с данными на основе реальных пользователей тоже отлично справится → просто чтобы вы понимали на какой функционал можете рассчитывать, а я пока готовлю большую инструкцию установке Claude правильно со всеми необходимыми библиотеками и приложениями😇 #полезное #клод
Я, честно, долго игнорировала весь шум вокруг Claude🍜
Из разряда: «нейросети вас заменят», «сайт за одну кнопку» – ну да, конечно =) Но потом я зашла, разобралась и… немного в шоке За последние дни я плотно копалась в нем с точки зрения дизайна и вайбкодинга — и скажу так: это не про «сегодня заменит всех», это про то, как сильно изменится рынок уже завтра⬆️ Мои небольшие выводы к сегодняшнему дню: 🌱дизайн-процессы уже приходится пересобирать в своей команде 🌱многие компании начинают требовать это как навык 🌱часть задач реально ускоряется в разы → но без понимания, как это работает, будет просто мусор на выходе И да, проблема инфополя в том, что все пытаются «запихнуть скрин → получить сайт»🤡 Так это не работает (пока) Зато если разобраться — открываются очень сильные возможности! Поэтому в моем канале начинается серия постов про Claude, буду разбирать: — как им реально пользоваться — как встроить в работу — как делать дизайн/сайты/сервисы — и где там подводные камни (под хештегом #клод) Оставайтесь, будет много практики и инструкций, с вас как обычно реакции! 🤍 #полезное #клод
Выбор ниши/сферы для первых проектов в портфолио дизайнера👉
— кажется простой темой, но именно здесь большинство делает ошибку… Часто дизайнеры берут «что попроще» или «что просто нравится», а потом удивляются, почему их не берут в студии или не приходят ожидаемые ими клиенты на фрилансе. Хотя по факту первые проекты — это не просто кейсы, а то, как ты изначально себя позиционируешь: от выбранной ниши/сферы зависит, где твой опыт будет релевантен при трудоустройстве или каких клиентов тебе легче будет закрыть🧠 Я собрала для вас небольшую инструкцию с базовыми принципами и ответом на вопрос: как выбрать нишу под найм или фриланс? 🔗Ссылка на инструкцию (статья лежит в Notion, так что, возможно, вам понадобится VPN) Сохраняйте её к себе и ставьте реакции, если было полезно❤️ #полезное
Весна и осень – самое активное время для поиска вакансий, стажировок в дизайне😇
(оно и логично) Но вот на что стоит обращать внимание, чтобы ваше новое место работы не превратилось в п*здец! А такого на рынке очень много – неадекватная команда, требования, я уже не говорю про скам, что встречается на каждом шагу…❤️ 1️⃣Лучше искать студии/агентства в рейтингах компаний, что предоставляют дизайн-услуги Это не значит, что везде от вас будут требовать такой же высокий уровень, нет! Они также открывают вакансии джунов/стажировки и т.д. Да и мест в этом рейтинге порой больше сотни. Зато риск наткнуться на мошенников, либо некомпетентную команду – минимальный. (Я уже делала пост с такими рейтингами, так что можете ознакомиться тут 🥹) 2️⃣Банально изучать само «тело» вакансии и не стесняться спрашивать о ней на собеседовании Тут все просто – я думаю, что вы часто слышали как из дизайнеров делают и сммщика, и разработчика, но так быть не должно. Да, текущий рынок выставляет все больше требований к кандидату (исследования, нейросети), но это не должно выходить за какие-то рамки или вызывать у вас сомнения уже на старте Лучший вопрос на собеседовании от вас «расскажите какой у вас дизайн-процесс и роль дизайнера в нем?» 3️⃣Пробейте компанию в интернете Любые отзывы, упоминания, информация из открытых источников – лишним не будет. А если получится найти текущих или прошлых сотрудников, то вообще замечательно! 4️⃣Если вас зовут на сторонние биржи/сервисы под разными предлогами Бегите!!! При этом всем ты пробиваешь эту «биржу» и « сервис», а ему 3 дня отроду, ни одного отзыва и упоминания в интернете. Это полнейший скам, товарищи 5️⃣Тестовое задание размером с целое приложение от ноунейм компании Мне это стоит вообще как-то комментировать?.. А можно ли откликаться летом и зимой❓ Принято считать, что лучше откликаться весной-осенью (тогда и предложений больше). Но летом/зимой также и меньше дизайнеров откликается, поэтому соотношение вакансия-отклики +/- одно и то же✨ (по крайней мере, у меня есть кейсы студентов, что устраивались на работу и в такое время года) #мысли
Моя мини-рецензия к популярной дизайнерской литературе📚
Книги из видео: 1. «Дизайн привычных вещей» — Дональд Норман 2. «Искусство формы» — Иоханнес Иттен 3. «Искусство цвета» — Иоханнес Иттен 4. «Ководство» — Артемий Лебедев 5. «UX/UI для создания идеального продукта» — Марина Сташенко Для комфортного просмотра можете ускорить видео! Делаем 2 часть?👉 #полезное
В продолжении вчерашнего поста…
На обучении мы тщательно отслеживаем, какие ниши выбирают наши ребята для своих проектов. Всё зависит от их дальнейших планов, текущего опыта и целесообразности выбора (тут очень много тонкостей!) 👉 А еще, некоторые из студентов уже работают с реальными клиентами: создают проекты на заказ или занимаются редизайном для потенциального сотрудничества дальше в рамках своего первого учебного проекта. Я об этом не рассказываю, но это с нами уже как 3 потока!🎈 → здесь мы помогаем им в коммуникации (это помимо уроков и инструкций, что прилагаются к этому процессу), ведь на старте процесс общения с клиентом очень сложен и непонятен, и, в целом, такая фишка имеет много нюансов, что необходимо сопровождать. Некоторые работы я частично или полностью выкладывала и тут: 💃 школа танцев 🚛 логистическая компания в Испании 🎤 музыкальная группа Кватро 🤸‍♂️ школа акробатики 💻 IT-платформа 📷 продакшен для маркетплейсов 🤳 аксессуары для гаджетов 💸 инвест-платформа 🔥 – если бы вам был бы интересен контент по выбору ниши для своих проектов в портфолио; я бы рассказала как не обжечься с этим выбором :) #обучение
Изображение поста
Мой любимый стереотип о фрилансе — «стабильный доход». Его не существует! Ура!
Но смотря, что вкладывают в эти слова авторы…🥲 1️⃣Даже если система есть и клиенты идут потоком — это не гарантия одинаковых цифр. Заявки приходят регулярно, но кто сказал, что чек будет одинаковым? 50к, 200к, а третий проект вообще затянется. 2️⃣Доход зависит и от тебя. Когда я болела, мне было не до работы (и я прилично просела в доходе). Даже с командой мой «офф» — это остановка. Бывает, я сама отпускаю сроки. Клиент задерживает материалы — я не давлю. Работа затянется — и это мой выбор, хотя я могла бы на базе договора «додавить». 3️⃣Плюс сезонность. Какой малый бизнес/средний бизнес без неё? Где вы видели, чтобы цифры каждый месяц идеально сходились? Я не против фриланса (я сама тут, если что), но это не «стабильные 300к/мес во сне»💀 На деле бывают резкие спады, а бывают месяцы в 2 раза больше обычного: это работает в обе стороны↔️ Фриланс — это тот же маленький бизнес, а в бизнесе доход зависит буквально от любого дуновения, и это нормально🥹 #мысли
Изображение поста
Я вернулась творить снова!☺️
После Нового Года разрешила себе отдохнуть от блога аж 3 недели – чтобы устаканился план на этот год, новый рабочий график, да и я сама была готова. В конце того года все силы ушли на набор 6 потока, на то, чтобы доработать с клиентами последние деньки и, конечно, потому что в блоге давала много всего экспертного по дизайну. Мы и бесплатник провели и кучу всего полезного я делала почти ежедневно! Уже со следующей недели буду радоваться вас дизайнерскими плюшками и материалами как обычно💓 (моя фотка, чтобы не забыли как я выгляжу просто)
Изображение поста
Изображение поста
24 ЧАСА ДО ЗАКРЫТИЯ ПРЕДЗАПИСИ!👍
Sold out до открытия продаж в блоге и на сайте🎉 (99% мест уже заняты, плюс несколько человек думают с бронью) По этой причине продаж на сайте и в блоге не будет, так как мы выполнили план по набору🗓 🔗ПОДРОБНОСТИ ПО ОБУЧЕНИЮ 🔗ССЫЛКА НА АНКЕТУ ПРЕДЗАПИСИ Стартуем уже в этом году! А всем остальным – до новых встреч на следующей наборе💘
Изображение поста
Вставка анимации на Behance и Dprofile 😲
– про важность анимаций и то как их делать я рассказывала на канале время от времени, но сегодня про финальный этап… Я не представляю кейс в вебе или UX/UI без анимаций хотя бы твоей навигации, интерактива в продукте и т.д. Это если не усложнять все креативной анимацией, которая лишней именно в упаковке – не бывает. Потому что заказчики в итоге выберут то, что им визуально откликается, а при трудоустройстве ваше портфолио, конечно, будет смотреть выигрышнее💻 Я написала для вас статью с небольшими шпаргалками и готовыми кодами для вставки ваших анимаций в формате видео или GIF на платформы (например, вот моя упакованная работа как с GIF, так и с видео)! 🔗Ссылка на инструкцию (статья лежит в Notion, так что, возможно, вам понадобится VPN) Сохраняйте её к себе и ставьте реакции, если было полезно❤️ #полезное
Изображение поста
Что вы не знали про web lab.😍
// 2 часть На обучении у нас работают не только спикеры, но и менторы, что сопровождают студентов на протяжении 4 месяцев. Они помогают раскрыть потенциал, поддерживают в сложные моменты и направляют на верный путь в мире дизайна!😽 В нашей команде 3 ментора и 1 куратор чата, каждый из них — практикующий дизайнер (и все они уже работали на предыдущих потоках)💙 Давайте знакомиться?⬇️ 🔗 ССЫЛКА НА АНКЕТУ ПРЕДЗАПИСИ (пока действуют специальные условия) 🔗 ССЫЛКА НА МОЙ САЙТ (все подробности про обучение)
Изображение поста
Что вы не знали про web lab.😍
За обучением стоит работа команды профессионалов. Поэтому сегодня про спикеров – чьи уроки я сама смотрю с диким интересом! 💚 ✨Александра Макарова — @sasha.mnekrasivo AI-креатор и ex. креативный директор в why.cgi; работала с SKIMS, Sephora, Louis Vuitton, Carolina Herrera; ныне фрилансер, ведет свой блог — ведёт почти весь блок по нейросетям (Midjourney, Krea, GPT и т.д.) ✨Максим Сухоруков — @unrevl.design Моушен-дизайнер уже больше 7 лет и ex. художник компьютерной графики телеканала Россия-1; работал с СИБУР, CHICKO, Keenetic, РНКБ, Сбер, Пятерочка, Газпром, Билайн; ныне на фрилансе, ведет свой блог — рассказывает про анимации в After Effects (анимации для проекта, сайта, мокапов и т.д.) ✨Станислав Келейников — @stsklnkv CEO маркетингового агентства NAF; 22 года в бизнесе; работал с Газпромбанк, Skoda, BMW, Nivea, Volkswagen — рассказывает про аутсорсинг дизайнеров (я сама работаю в его агентстве на аутсорсе) + работает с моими студентами попроектно ✨ Варвара Маришина — @varenik.designer Мультидизайнер и ex. графический дизайнер в tpg.rest; ныне на фрилансе, ведет свой блог – ведёт уроки по Recraft и Pinterest (проект для городского конкурса Рязани она полностью сделала в Recraft и привлекает клиентов из своего Pinterest) 🚩также у нас есть спикеры с профильным опытом по: — Photoshop и Illustrator — вёрстке на Tilda, Taplink, Вконтакте — юридическим вопросам (все документы и договоры готовит наш юрист Саша) — другим узконаправленным вопросам (биржи, сервисы, клиенты и т.д.) *мы не собираемся останавливаться на этом и активно ищем спикеров по Spline, Webflow📌 🔗 ССЫЛКА НА АНКЕТУ ПРЕДЗАПИСИ (пока действуют специальные условия) 🔗 ССЫЛКА НА МОЙ САЙТ (все подробности про обучение)
Изображение поста
Фишки обучения, что сами по себе окупают его😎
Мы выстроили систему, где продумали каждый шаг ученика до результата: 1️⃣ Практика с проверкой Почти каждый урок — с заданием и обратной связью от менторов или лично от меня 2️⃣ Поддержка на каждом шаге Регулярные созвоны, разборы, фидбэк — вы будете не одни 3️⃣ Платформа с умной навигацией 300+ часов контента, но вы не тонете в материалах, а смотрите только необходимое, разный уровень подготовки – разные уроки 4️⃣ Передаём реальных клиентов 10-15 проектов за поток уходят лучшим ученикам – отдаем проекты за активность и релевантный опыт 5️⃣ 50% времени занимаемся клиентами и продажами Разбираем собеседования, портфолио, резюме, коммуникации, продажи, возражения, способы поиска клиентов и т.д. 6️⃣ Всё о дизайне и даже больше Юр. упаковка и налоги, делегирование, нейросети, работа с разработчиками, смежные программы (Ae, Ps, Ai), а если чего-то не найдете – оперативно дополняем 7️⃣ Лицензия Минобразования По итогу получаете официальный сертификат, налоговый вычет, а также имеете возможность оплаты мат.капиталом 8️⃣ Notion-библиотека Шаблоны, скрипты, таблицы — всё собрано в одном месте. И постоянно обновляется постоянно 9️⃣ Комьюнити и общие чаты Общий чат работает всегда – мы на связи с 1 потока, где помогаю не только я, а мои студенты или, правильнее сказать, «коллеги» Эта система заменит несколько месяцев поисков и разных курсов — это ваши инвестиции с понятной точкой возврата в виде результатов 💡 Узнать подробнее об обучении и присоединиться к нам ↓ 🔗 ССЫЛКА НА АНКЕТУ ПРЕДЗАПИСИ (пока действуют специальные условия) 🔗 ССЫЛКА НА МОЙ САЙТ (все подробности про обучение)
Изображение поста
Статья по генерации своих персонажей/вселенной в Recraft!🌝
я нечаянно удалила пост с ней, так что это перезалив… К прошлому бесплатнику писала статью чисто по Recraft, где рассказывала как делать точно таких же персонажей (с картинки) или даже целую вселенную. Нейросеть Recraft предназначена немного для других задач, но зато в ней это можно сделать бесплатно, и у ребят получались здоровские проекты (можно найти их так #бесплатник)☺️ 🔗 ссылка на статью в Notion (если не открывается, то попробуйте включить VPN + лучше читайте с компьютера, более удобный формат и компактное форматирование) #полезное
Изображение поста