Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Я хочу получать рассылки с лучшими постами за неделю
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
Создавая аккаунт, я соглашаюсь с правилами Пикабу и даю согласие на обработку персональных данных.
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam
Пикабу Игры +1000 бесплатных онлайн игр  Что обсуждали люди в 2024 году? Самое время вспомнить — через виммельбух Пикабу «Спрятано в 2024»! Печенька облегчит поиск предметов.

Спрятано в 2024

Поиск предметов, Казуальные

Играть

Топ прошлой недели

  • AlexKud AlexKud 38 постов
  • Animalrescueed Animalrescueed 36 постов
  • Oskanov Oskanov 7 постов
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

Нажимая кнопку «Подписаться на рассылку», я соглашаюсь с Правилами Пикабу и даю согласие на обработку персональных данных.

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Помощь Кодекс Пикабу Команда Пикабу Моб. приложение
Правила соцсети О рекомендациях О компании
Промокоды Биг Гик Промокоды Lamoda Промокоды МВидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня
0 просмотренных постов скрыто
6
shevchenko.one
shevchenko.one
1 месяц назад
Графический и Веб-дизайн

Наглядно, что произойдёт, если ИИ впустить в Figma⁠⁠

Совсем недавно вышло совместное творение Cursor и Figma под названием Reweb 2.0

В канале пишу о применении и влиянии новых технологий на бизнес и повседневную жизнь: https://t.me/+NimdslpY9WU0MDYy

Показать полностью
[моё] Будущее Искусственный интеллект Digital Технологии Проект Дизайн Нейронные сети Figma Видео Без звука Короткие видео
3
1
denisn1xele
denisn1xele
4 месяца назад

16,5 дней на макет сайта - Кто он, этот ваш идеальный веб-дизайн?⁠⁠

🖐Привет, это Денис из NIXELE™! И сегодня вы узнаете

🔥Почему «красиво» — не значит «удобно», а также почему это можно опровергнуть...

📱Насколько в создании веб-дизайна не важен макет и почему на самом деле инструкцию придумали дебилы (или нет)?

🌭Из-за чего бутылка кетчупа это самый главный феил в дизайне, почему красивая картинка решает, а удобство и визуал – вообще не первое о чем стоит думать в веб-дизайне и наконец таки узнаем ответ на вопрос:

💯Кто он, этот ваш идеальный дизайн сайта?

Я решил начать с прогулки: свежий воздух и окружающая атмосфера натолкнули на одну интересную мысль когда я проходил мимо нового жилищного комплекса…

Смотрите, это логотип «Пятерочки» в одном из современных жк в Москве. Вроде бы обычная картина, но посмотрите внимательнее, можете открыть панораму и оглянуться вокруг🧐

16,5 дней на макет сайта - Кто он, этот ваш идеальный веб-дизайн? Дизайн, Веб-дизайн, Веб-разработка, Figma, Дизайнер, Web, Ui, Ux, Сайт, Креатив, Видео, Без звука, Короткие видео, Длиннопост

«Пятерочка» в одном из домов современного жк на юго-востоке Москвы

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

В вывеске этой «Пятерочки» есть очень важный смысл - она не выбивается из общего стиля жк, в котором находится. При этом не теряет своей узнаваемости. Это довольно простой, но емкий смысл, который мы сегодня попробуем на вкус⬇

📌Что же получается, «Пятерочка» осознает важность визуальной эстетики?

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

А это визуализация различия вывески на разном фоне(фасаде).

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

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

16,5 дней на макет сайта - Кто он, этот ваш идеальный веб-дизайн? Дизайн, Веб-дизайн, Веб-разработка, Figma, Дизайнер, Web, Ui, Ux, Сайт, Креатив, Видео, Без звука, Короткие видео, Длиннопост

Мой почти семнадцатидневный макет. Все равно его потом переделывал…

🔹Эстетика как никогда важна, она приоритетнее макета, НО ключевое — смог ли пользователь выполнить нужное ему действие. Разберемся подробнее.

🤷‍♂Создание макета сайта это действительно бесполезное занятие?

Я сразу побежал домой изучать взаимосвязь макета и эстетики в веб-дизайне и вот что нашел:

Японские эксперты Масааки Куросу и Каори Кашимура в дизайн-центре компании Hitachi попросили оценить 26 сайтов 292-ух студентов факультета дизайна и психологии. Pезультаты показали положительные результаты в сторону эстетики дизайна: визуально более стильные и красивые сайты выбирали чаще, даже когда навигация ставила в тупик.

16,5 дней на макет сайта - Кто он, этот ваш идеальный веб-дизайн? Дизайн, Веб-дизайн, Веб-разработка, Figma, Дизайнер, Web, Ui, Ux, Сайт, Креатив, Видео, Без звука, Короткие видео, Длиннопост

Это график кореляции удобства использования UX(левая шкала) и визуала дизайна сайта UI(нижняя)

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

Об Этом уже говорит работа Флориана Гейгля и Кристины Лерман под названием «Оценка влияния смещения кликов и вставки ссылок в Интернете на навигацию».

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

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

🧐Именно поэтому дизайн может бесить. Красивый, но совершенно непригодный для удобного использования интерфейс может раздражать.

🔹Нужна успешная комбинация - эстетическое впечатление + легко совершенное плановое действие(визуал UI + макет UX). Вместе они подталкивают пользователя на следующий шаг и приводят к целевому действию, а также мотивируют к повторному посещению сайта.

👟Простыми словами - кроссовки должны быть стильными и соответствовать трендам, но самое главное — они должны быть удобными!

Кажется, что каким бы дискофмортым ни был макет(UX), всегда будет важна эстетика(UI) - тяга человека к идеальному невероятно велика!

🔑От сложного к простому - что такое UI/UX дизайн. Аналогия.

Представьте: вы собираете конструктор «Лего-техник», то есть механизм, из подвижных деталей(UX) и обычных блоков, создающих визуальную часть(UI).

Поворотные механизмы в виде шестеренок, троса и колес консруктора(UX) дополняет стильное сочетание желтого и черного(UI)

В вашем распоряжении любые детальки лего, но использовать можно конечное их число - это 100%-ный объем. И для каждого человека в данном фиксированном объеме будет свое идеальное и уникальное сочетание практичности и визуальной эстетики «шестеренок» и «обычных блоков».

👉Кстати, буду намеренно «ужирнять» сокращения UI и UX, а также относящиеся к ним слова, чтобы вам было проще разбираться с аналогиями и понимать их значение

С заботой - NIXELE™

Происходит наращивание новых нейронных связей и мы пониманием, что важно правильно сочетать UI и UX составляющие дизайна.

🎏Визуал по-разному привлекает разные категории людей

Все не так однозначно, нельзя сделать «супер» и «мега» и для всех сразу «в одном флаконе».

16,5 дней на макет сайта - Кто он, этот ваш идеальный веб-дизайн? Дизайн, Веб-дизайн, Веб-разработка, Figma, Дизайнер, Web, Ui, Ux, Сайт, Креатив, Видео, Без звука, Короткие видео, Длиннопост

Дизайн-завод «Флакон» — креативное пространство в Москве, торгово-выставочный и офисный комплекс

Посмотрите, главное, что мы должны осознать из исследования Hitachi – это не то, что планирование элементов взаимодействия придумали дебилы и вообще, они тратят много времени на дизайн-макеты сайтов зря — нет! Эстетика может улучшить восприятие эргономичности даже если функциональность остается неизменной.

Воу! Эргономичность, - сложное слово, кажется мы можем обойтись и без него! Само слово означает приспособление предметов труда для комфортной и эффективной работы 

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

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

16,5 дней на макет сайта - Кто он, этот ваш идеальный веб-дизайн? Дизайн, Веб-дизайн, Веб-разработка, Figma, Дизайнер, Web, Ui, Ux, Сайт, Креатив, Видео, Без звука, Короткие видео, Длиннопост

Пример хорошего UI/UX дизайна(мое мнение)

🔹Ключевое на чем нужно сосредоточиться при разработке дизайна сайта – не UI и не UX составляющие, даже не их сочетание. Самое важное – понять что именно ожидает увидеть пользователь. Потому что от его потребностей и зависит правильное сочетание UI/UX.

«Если между ожиданиями клиентов от продуктов или услуг и их реальным дизайном существует большая разница, то мы вынуждены вступать в неравный бой, пытаясь заставить клиентов пересмотреть их устоявшиеся представления»
Из книги Джона Уэлена «Дизайн пользовательского опыта»

Тесты, тестирование, тестики🔥
— Знаете почему программирование и веб-дизайн одно и то же?
— Потому что это все IT? — спросите вы
— Да, скорее всего вы правы! — Но почему?

Potomu chto никогда не знаешь кто он, этот твой пользователь))

Поэтому необходимо знать погоду сайта, дизайн которого создаешь. А осадки на ней - это user flow. Смотите, так выглядит погодный циклон на сайте:

16,5 дней на макет сайта - Кто он, этот ваш идеальный веб-дизайн? Дизайн, Веб-дизайн, Веб-разработка, Figma, Дизайнер, Web, Ui, Ux, Сайт, Креатив, Видео, Без звука, Короткие видео, Длиннопост

Это тепловая карта сайта Guardian Unlimited

Подобная функция в «Яндекс метрике» называется «Вебвизор». Она помогает понять куда чаще нажимают пользователи и как работает визуальная часть сайта

Именно такую карту наша команда использовала при запуске тестовой версии сайта хоккейной лиги чемпионата кхл 3на3. На тепловой карте мы с командой отчетливо видели какие элементы привлекают пользователя и работают так, как и было задумано, а какие остаются без внимания и требуют UI/UX доработки.

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

📌Как повлияло на разработку веб-дизайна

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

16,5 дней на макет сайта - Кто он, этот ваш идеальный веб-дизайн? Дизайн, Веб-дизайн, Веб-разработка, Figma, Дизайнер, Web, Ui, Ux, Сайт, Креатив, Видео, Без звука, Короткие видео, Длиннопост

Моя гугл-форма для работы с клиентами

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

🔹Но работа над анализом аудитории это не только тестирование после создания дизайна, но и аналитика потребностей ца перед началом работы - фундамент и неотъемлемая часть создания любого продукта.

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

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

📌Как вы думаете, что вам может рассказать одна бутылка кетчупа?

Вроде бы ничего особенного, только если это не бутылка Heinz. Знакомтесь — мем, посвященный именно ей:

16,5 дней на макет сайта - Кто он, этот ваш идеальный веб-дизайн? Дизайн, Веб-дизайн, Веб-разработка, Figma, Дизайнер, Web, Ui, Ux, Сайт, Креатив, Видео, Без звука, Короткие видео, Длиннопост

Слева - UI интерпретация кетчупа, а справа - UX

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

Эталона идеального дизайна сайта не существует, но существует план, который может помочь.

⚡8 советов от NIXELE™ по созданию идельного дизайна сайта

  • Чаще соприкасайтесь с прекрасным но не утопайте в нем - выделите на подбор примеров только час, разбейте их по группам и оттолкнитесь от чего-то одного

  • Стройте здание, начиная с фундамента, но не израсходуйте весь материал — сравнивайте макет со схемой построения успешных сайтов, но не крутите один элемент сликом долго

  • Проверенные решения на то и провренные, они работают — изучайте теорию и психологию, используйте нейросети и выбирайте с умом то, на чем будет посторен UI/UX дизайн

  • Нет ничего страшного в том, чтобы спросить у девушки или мамы какие цветы она любит - общайтесь с целевой аудиторией напрямую, чтобы узнавать предпочтения и ожидания своих «любимчиков»

  • Будьте открытее к общению — опрашивайте не только ца, но и своих друзей и знакомых. Порой люди, совсем далекие от темы, могут натолкнуть на интересные мысли

  • Не бойтесь сносить здание под корень — не бойтесь начать все с начала, даже если работу полностью придется стереть

  • Ставьте широкие видовые окна — делайте дизайн «прозрачным» в первую очередь понятным и доступным, и только потом красивым

  • Любите себя — прощайте себе даже крупномасштабные косяки и умейте найти силы на то, чтобы вернуться к работе, даже когда много правок

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

🔹Визуал и практичность работают вместе, полагаясь на потребности пользователя. Знакомтесь: формула которую мы вывели

UI - визуал; UX - пользовательский опыт; TA - целевая аудитория; DS - дизайн

На самом деле - выбор за вами, и только вам решать каким будет ваш идеальный дизайн, но ключики к этому лежат через вашу чуткость, талант и усердный труд.

И кстати, без помощи тяжело потом что-либо искать по это статье. Поэтому для вас, ключевые тезисы я отметил вот так 🔹

С любовью и заботой - NIXELE™

🙌Спасибо за прочтение данной статьи, ваша активность помогает скорейшему выходу нового материала
👉Всегда рад обратной связи — не забывайте про чек-поинты в виде опросов выше и по ссылке) Увидимся в следующей статье😉

Показать полностью 8 4
Дизайн Веб-дизайн Веб-разработка Figma Дизайнер Web Ui Ux Сайт Креатив Видео Без звука Короткие видео Длиннопост
40
11
Neurosonya
Neurosonya
9 месяцев назад
Полезные нейросети
Серия Полезность

Копирование сайтов и приложений с помощью нейросетей⁠⁠

Помните я рассказывала про Screenshot to code, который без знания кода и навыков в дизайне , способен сделать сайт по одному лишь скриншоту?

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

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

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

Copycoder

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

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

Подпишитесь на НейроProfit и узнайте, как можно использовать нейросети для бизнеса, учебы и работы, не теряя свое время.

Показать полностью 1
[моё] Нейронные сети Сайт Код Искусственный интеллект Полезное Технологии Дизайн Figma Приложение Видео Без звука
2
4
AIshnytza
AIshnytza
1 год назад
Искусственный интеллект
Серия Нейросети

Как создать сайт по промпту?⁠⁠

В этом поможет бесплатная нейросеть, которая понимает русский язык – Relume.

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

Есть возможность выгрузки проекта в Adobe Illustrator и Figma

Источник телеграм канал ИИшница 🍳

Показать полностью
Искусственный интеллект Будущее Нейронные сети Сайт Веб-разработка Веб-дизайн Web Русский язык Бесплатно Макет Дизайн Figma Adobe Illustrator Видео Без звука Telegram (ссылка)
1
12
Komarovaeeee
Komarovaeeee
1 год назад
Stable Diffusion & Flux

Как мы c помощью нейросети Stable Diffusion, решили проблему с визуальным контентом заказчика для интернет-магазина⁠⁠

Что делать, если то самое классное изображение никак не удается найти, а у заказчика пока нет ресурса предоставить нужный контент? Что можно придумать для разделов каталога, когда есть только фото для продуктовых карточек, чтобы это выглядело красиво? Как при этом не забыть о метафорах и ассоциациях бренда и создать необходимое настроение на сайте? Да еще и чтобы заказчик все это согласовал без правок…

Задача

К нам обратился заказчик с задачей создать функциональный интернет-магазин на Тильде для бренда натуральной SPA-косметики «Цветы и море». На этапе дизайн-концепции мы развили мысль о море, песке и цветах до такой степени, что сгенерировали для своих задач 400+ изображений, выделив на это 30+ часов. Как у нас получалось и не получалось, что мы делали и как именно экспериментировали, рассказываем дальше.

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

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

Сбор информации по проекту: формируем общее видение с заказчиком перед стартом

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

  • Какая стоит задача, что заказчик видит на финише?

  • Будет ли виденье заказчика работать для ЦА?

  • Что конкретно важно для целевой аудитории?

  • Как проект будет жить после релиза?

  • Что нужно учесть при разработке и о чем позаботиться заранее, чтобы сайту не нужны были доработки через неделю после запуска?

  • И многое другое

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

Проектирование — продумываем структуру страниц и закладываем необходимые решения в интерфейс сайта

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

Далее мы сделали карту сайта и определились со структурой страниц на основании проведенного исследования. Мы выделили преимущества, рассказали о бренде, описали условия для сотрудничества, показали бренды, с кем сотрудничает «Цветы и море». Сняли нагрузку с менеджеров, сделав список частых вопросов и ответов на них.

Как мы c помощью нейросети Stable Diffusion, решили проблему с визуальным контентом заказчика для интернет-магазина Сайт, Маркетинг, Дизайнер, Дизайн, Нейронные сети, Stable Diffusion, Tilda, Figma, Веб-дизайн, Видео, Без звука, Длиннопост

Сбор информации и подготовка к проектированию

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

Как мы c помощью нейросети Stable Diffusion, решили проблему с визуальным контентом заказчика для интернет-магазина Сайт, Маркетинг, Дизайнер, Дизайн, Нейронные сети, Stable Diffusion, Tilda, Figma, Веб-дизайн, Видео, Без звука, Длиннопост

Прототип будущего интернет-магазина

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

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

Как мы c помощью нейросети Stable Diffusion, решили проблему с визуальным контентом заказчика для интернет-магазина Сайт, Маркетинг, Дизайнер, Дизайн, Нейронные сети, Stable Diffusion, Tilda, Figma, Веб-дизайн, Видео, Без звука, Длиннопост

Корзина в 2 этапа с необходимым функционалом

Проектирование прототипа далось нам без особых сложностей — полный мэтч с клиентом позволил оперативно сделать интерактивный прототип и перейти к поиску дизайн-концепции и отрисовки макета.

Как мы c помощью нейросети Stable Diffusion, решили проблему с визуальным контентом заказчика для интернет-магазина Сайт, Маркетинг, Дизайнер, Дизайн, Нейронные сети, Stable Diffusion, Tilda, Figma, Веб-дизайн, Видео, Без звука, Длиннопост

Детализированный интерактивный прототип

Дизайн: получили тестовую продукцию, отсматриваем визуал заказчика, штудируем премиум-стоки, тестируем нейронки.

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

Мы понимали, что дизайн должен передать эстетику легкости и осознанности, расслабления, отдыха и нежности. Для нашей ЦА важен комфорт и забота о себе, их восхищает бренд, готовы оставлять развернутые отзывы в эстетичных локациях. Бренду также важно передать крафтовость и натуральность, отсутствие массового производства и трепетное внимательное отношение к каждому продукту.

Как мы c помощью нейросети Stable Diffusion, решили проблему с визуальным контентом заказчика для интернет-магазина Сайт, Маркетинг, Дизайнер, Дизайн, Нейронные сети, Stable Diffusion, Tilda, Figma, Веб-дизайн, Видео, Без звука, Длиннопост

ЦА

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

Как мы c помощью нейросети Stable Diffusion, решили проблему с визуальным контентом заказчика для интернет-магазина Сайт, Маркетинг, Дизайнер, Дизайн, Нейронные сети, Stable Diffusion, Tilda, Figma, Веб-дизайн, Видео, Без звука, Длиннопост

Поиск идеи и референсы

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

Как мы c помощью нейросети Stable Diffusion, решили проблему с визуальным контентом заказчика для интернет-магазина Сайт, Маркетинг, Дизайнер, Дизайн, Нейронные сети, Stable Diffusion, Tilda, Figma, Веб-дизайн, Видео, Без звука, Длиннопост

Контент от заказчика

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

Нейронки. Вступительное слово и поехали.

О чем пойдет статья дальше? Важно — это не мануал в привычном в виде с обзором каждой кнопки. Это статья о том, как в реальной коммерческой разработке можно смело экспериментировать и внедрять в работу различные Ai-инструменты и получать довольно качественный результат, параллельно решая распространенную проблему в дизайне – отсутствие визуального контента от заказчика.

Передаем слово нашему дизайнеру — Сергею, который поделится с вами всеми своими наработками в процессе генерации контента для «Цветы и море».

Почему выбрали Stable Diffusion, а не Midjourney

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

По Midjourney — думаю, все в него успели поиграться, многие работают на постоянной основе, но я не смог добиться стабильного результата. Полученные изображения были не такими реалистичными, как мы задумали, сделать пак изображений в одном стиле не получалось — при детальном рассмотрении контента нам что-нибудь да резало глаз.

Почему мы выбрали Stable Diffusion?

  1. Редактирование созданных изображений — можно легко менять конкретные элементы на изображении с помощью функции Inpaiting, а с помощью outpaiting возможно наращивание фона в контексте изображения. Эта функция очень нам пригодилась для страниц разделов товаров, далее расскажу подробнее.

  2. Распределение веса по конкретной характеристике в промте — за счет этого можно гибко настроить промт и получить наиболее точный результат.

  3. Установка конкретных моделей, которые нужны тебе. У Stable Diffusion большое сообщество, в сети можно найти крупные каталоги с базой различных моделей и обученных дополнений Lora, которые устанавливаются поверх базовых моделей. Большинство из них находятся в свободном доступе.

  4. Функция img2img — метод создания изображений на основе загруженного референса, благодаря чему появляется возможность сделать сет в одном стиле. Для нас важно, чтобы контент на сайте был в одной стилистике.

  5. Наличие seed у генерируемого изображения. Что это и зачем? Seed — уникальный код или идентификатор изображения, который дает нам возможность вносить в запрос изменения точечно, сохраняя основную композицию, обстановку или объект на изображении. Далее расскажем как пользовались данной фичей.

Технические нюансы, установка, первые результаты.

Первая сложность, с которой столкнулись — сборок для систем на базе Mac практически нет и их не так просто найти, в основном сборки идут под Windows. Я нашел два подробных мануала для развертывания для Mac на github. Вот первый и второй, если делать все по инструкции, заработает без танцев с бубном. Если же что-то не получится, пишите в комментариях, постараюсь помочь.

Установив Stable Diffusion, нужно было установить модель, на основе которой буду генерировать контент. После небольшого ресерча решил поработать с моделью Deliberate_v5 от популярного разработчика моделей Христ. Добавлю, чтобы корректно работали функции outpainting и inpainting, дополнительно сразу скачайте модель с приставкой Deliberate_v5-inpainting. Установка модели довольно проста: просто копируем в папку models, где был установлен Stable Diffusion.

Как мы c помощью нейросети Stable Diffusion, решили проблему с визуальным контентом заказчика для интернет-магазина Сайт, Маркетинг, Дизайнер, Дизайн, Нейронные сети, Stable Diffusion, Tilda, Figma, Веб-дизайн, Видео, Без звука, Длиннопост

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

Как мы c помощью нейросети Stable Diffusion, решили проблему с визуальным контентом заказчика для интернет-магазина Сайт, Маркетинг, Дизайнер, Дизайн, Нейронные сети, Stable Diffusion, Tilda, Figma, Веб-дизайн, Видео, Без звука, Длиннопост

Так выглядит интерфейс Stable Diffusion

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

Приступил к составлению промтов из разряда «bath bomb or bath fizzie», «бомбочка для ванны или шипучка для ванны», дело двинулось. Далее стал задавать новые условия: белый/светлый фон, количество, тень и ее резкость, формат изображений, остановился на разрешении 1024х512. Также попробовал распределять вес ключей для более тонкой настройки — «bath bomb or bath fizzie, (A few pieces:1.5), white surface».

Добавлю, что при разрешении 1024х512 и методе txt2img генерация одного изображения занимала 45 секунд на процессоре m2 pro, при более высоких разрешениях доходило до 3-4 минут. В Stable Diffusion есть возможность выставить количество изображений для генерации пакетов изображений, что очень удобно. Выставляем 10 или 20 вариантов генераций, спустя 10-20 минут все готово. Остается выбрать понравившиеся результаты и seed и далее работать уже с ними. Прикрепляю первые результаты.

Как мы c помощью нейросети Stable Diffusion, решили проблему с визуальным контентом заказчика для интернет-магазина Сайт, Маркетинг, Дизайнер, Дизайн, Нейронные сети, Stable Diffusion, Tilda, Figma, Веб-дизайн, Видео, Без звука, Длиннопост
Как мы c помощью нейросети Stable Diffusion, решили проблему с визуальным контентом заказчика для интернет-магазина Сайт, Маркетинг, Дизайнер, Дизайн, Нейронные сети, Stable Diffusion, Tilda, Figma, Веб-дизайн, Видео, Без звука, Длиннопост

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

Расширял промты и добавлял новые условия: «сухоцветы лаванды», «основание из дерева», «мягкие тени», «идеально круглая форма». Потом с помощью Midjourney составил промт, загрузил референс и полученный промт попробовали использовать для Sd, но ничего не вышло — видимо, алгоритмы и промтинг у Stable Diffusion и Midjourney работают совершенно по- разному.

Пример промта, который нам выдал Midjourney:

a box with a bunch of flowers inside of it, pinterest contest winner, private press, reflective lavender ocean water, dried herbs, detailed product image, bath, on parchment, light bloom, branches wrapped, surface hives, blue sunshine, maternal, product label, bubble bath, safehavenhq, nest

А ниже то, что получилось с промтами от Midjourney. В моменте казалось, что вырисовывается что-то симпатичное, но под наши задачи, увы, не подходило.

Как мы c помощью нейросети Stable Diffusion, решили проблему с визуальным контентом заказчика для интернет-магазина Сайт, Маркетинг, Дизайнер, Дизайн, Нейронные сети, Stable Diffusion, Tilda, Figma, Веб-дизайн, Видео, Без звука, Длиннопост

Генерации на основе промта от Midjourney

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

9 bath bombs, lying next to each other on a white surface, they are surrounded by small branches of dried flowers

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

Как мы c помощью нейросети Stable Diffusion, решили проблему с визуальным контентом заказчика для интернет-магазина Сайт, Маркетинг, Дизайнер, Дизайн, Нейронные сети, Stable Diffusion, Tilda, Figma, Веб-дизайн, Видео, Без звука, Длиннопост

Продолжал эксперименты с промтами и весом ключей и в какой-то момент получил результат, который нас устроил в качестве версии 1.0.

Как мы c помощью нейросети Stable Diffusion, решили проблему с визуальным контентом заказчика для интернет-магазина Сайт, Маркетинг, Дизайнер, Дизайн, Нейронные сети, Stable Diffusion, Tilda, Figma, Веб-дизайн, Видео, Без звука, Длиннопост

Версия 1.0

Работал в режиме txt2img, промт:

9 bath bombs, bath salts, lying next to each other on a beige surface, they are surrounded by small branches of dried flowers, photo angle from the side, colors of bombs white gray milky

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

Негативный промт, чтобы исключить цвета, которые нам не подходили по стилю:

blue, pink

Заданные настройки в интерфейсе SD:

Steps: 20, Sampler: DPM++ 2M Karras, CFG scale: 7, Seed: 2474847976, Size: 955x452, Model hash: 636fe404e3, Model: Deliberate_v5, Version: v1.7.0

На тот момент у нас уже был готов дизайн-макет, известна цветовая палитра, подобраны шрифты. Мы «примерили» полученное изображение и наконец поняли, что попали, результат нас устроил на 9 из 10. Нам захотелось улучшить результат, продолжили работать на качество и детали.

Как улучшить получившийся результат в Stable Diffusion?

Каждое изображение имеет свой уникальный идентификатор — seed. Я использовал seed данного изображения и стал менять промт. Что это дало? Результат теперь получался не рандомным, а очень схожим с оригиналом. Мы могли развивать данное изображение — менять не только промт, но и другие настройки.

Когда я увеличил разрешение изображения с 952х448 до 1560х771, произошел известный баг в Stable Diffusion — дублирование сущностей. И так как мы работали с бомбами для ванной, а не с человеческими головами или руками, нам это пошло только на пользу, увеличив количество элементов с 4-6 до 8-12. Кстати, в сети довольно много мануалов о том, как бороться с дублированием контента в Stable Diffusion при генерации.

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

Промежуточный результат

Как мы c помощью нейросети Stable Diffusion, решили проблему с визуальным контентом заказчика для интернет-магазина Сайт, Маркетинг, Дизайнер, Дизайн, Нейронные сети, Stable Diffusion, Tilda, Figma, Веб-дизайн, Видео, Без звука, Длиннопост
Как мы c помощью нейросети Stable Diffusion, решили проблему с визуальным контентом заказчика для интернет-магазина Сайт, Маркетинг, Дизайнер, Дизайн, Нейронные сети, Stable Diffusion, Tilda, Figma, Веб-дизайн, Видео, Без звука, Длиннопост
Как мы c помощью нейросети Stable Diffusion, решили проблему с визуальным контентом заказчика для интернет-магазина Сайт, Маркетинг, Дизайнер, Дизайн, Нейронные сети, Stable Diffusion, Tilda, Figma, Веб-дизайн, Видео, Без звука, Длиннопост

Финальный результат, который нас устроил

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

Как мы c помощью нейросети Stable Diffusion, решили проблему с визуальным контентом заказчика для интернет-магазина Сайт, Маркетинг, Дизайнер, Дизайн, Нейронные сети, Stable Diffusion, Tilda, Figma, Веб-дизайн, Видео, Без звука, Длиннопост

Изображение для главного экрана

Как мы c помощью нейросети Stable Diffusion, решили проблему с визуальным контентом заказчика для интернет-магазина Сайт, Маркетинг, Дизайнер, Дизайн, Нейронные сети, Stable Diffusion, Tilda, Figma, Веб-дизайн, Видео, Без звука, Длиннопост

Режим txt2img, промт:

9 bath bombs, bath salts, lying next to each other on a beige surface, (they are surrounded by small branches of dried lavender:0.9), photo angle from the side, (photorealistic:1.5), detailed, 8k

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

blue, pink, ((((ugly)))), (((duplicate))), ((morbid)), ((mutilated)), [out of frame], extra fingers, mutated hands, ((poorly drawn hands)), ((poorly drawn face)), (((mutation))), (((deformed))), ((ugly)), blurry, ((bad anatomy)), (((bad proportions))), ((extra limbs)), cloned face, (((disfigured))), out of frame, ugly, extra limbs, (bad anatomy), gross proportions, (malformed limbs), ((missing arms)), ((missing legs)), (((extra arms))), (((extra legs))), mutated hands, (fused fingers), (too many fingers), (((long neck))), out of frame, duplicate, watermark, signature, text, ugly, morbid, mutated, deformed, blurry, bad anatomy, bad proportions, cloned face, disfigured, fused fingers, fused limbs, too many fingers, long neck

Заданные настройки в интерфейсе SD:

Sts: 20, Sampler: DPM++ 2M Karras, CFG scale: 7, Seed: 3624831220, Size: 1920x980, Model hash: 636fe404e3, Model: Deliberate_v5, Denoising strength: 0.6, Version: v1.7.0

Генерация контента для групп товаров

Далее нам оставалось в похожей стилистике создать контент для разделов каталога интернет-магазина. Действовал по уже выработанной схеме — использовал ключи прошлых промтов, которые описывают обстоятельства, добавлял необходимые ключи, использовал прошлые seed.

Вот такой интересный результат у нас получился:

Как мы c помощью нейросети Stable Diffusion, решили проблему с визуальным контентом заказчика для интернет-магазина Сайт, Маркетинг, Дизайнер, Дизайн, Нейронные сети, Stable Diffusion, Tilda, Figma, Веб-дизайн, Видео, Без звука, Длиннопост

Изображения для разделов каталога

Как мы c помощью нейросети Stable Diffusion, решили проблему с визуальным контентом заказчика для интернет-магазина Сайт, Маркетинг, Дизайнер, Дизайн, Нейронные сети, Stable Diffusion, Tilda, Figma, Веб-дизайн, Видео, Без звука, Длиннопост

Наращивание фона

Последнее, что оставалось — получить из формата 1:1 горизонтальные широкоформатные изображения для hero-секций страниц разделов. Функционал Stable Diffusion позволяет это сделать — нужно использовать outpainting (нейросеть может нарастить фон изображения в любую выбранную сторону исходя из контекста изображения) в режиме img2img. В сети и на ютубе много подробных мануалов, здесь не буду расписывать подробно.

Далее с помощью функции inpaint почистил изображения от артефактов. Оставалось сделать цветкор и дополнительно сделать апскейл.

Результат:

Как мы c помощью нейросети Stable Diffusion, решили проблему с визуальным контентом заказчика для интернет-магазина Сайт, Маркетинг, Дизайнер, Дизайн, Нейронные сети, Stable Diffusion, Tilda, Figma, Веб-дизайн, Видео, Без звука, Длиннопост

Главные секции страниц разделов

Как мы c помощью нейросети Stable Diffusion, решили проблему с визуальным контентом заказчика для интернет-магазина Сайт, Маркетинг, Дизайнер, Дизайн, Нейронные сети, Stable Diffusion, Tilda, Figma, Веб-дизайн, Видео, Без звука, Длиннопост

Что думаем насчет всего этого волшебства?

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

Суммарно на эксперимент с генерациями по этому проекту было потрачено 30+ часов, получено 400+ изображений, просмотрено и прочитано более 30 мануалов. Ссылка на фигму со всеми вариантами здесь.

Итоговый результат

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

Как мы c помощью нейросети Stable Diffusion, решили проблему с визуальным контентом заказчика для интернет-магазина Сайт, Маркетинг, Дизайнер, Дизайн, Нейронные сети, Stable Diffusion, Tilda, Figma, Веб-дизайн, Видео, Без звука, Длиннопост

Расскажите о своем опыте работы со Stable Diffusion и другими нейросетями — поделитесь в комментариях.

Показать полностью 24
[моё] Сайт Маркетинг Дизайнер Дизайн Нейронные сети Stable Diffusion Tilda Figma Веб-дизайн Видео Без звука Длиннопост
6
5
LampaIT
LampaIT
1 год назад

Плагин для Figma соберет из любого дизайна рабочий код⁠⁠

Инструмент выдает готовые приложения на HTML, CSS или React — печатать код вручную больше не нужно!

Результаты можно мгновенно экспортировать в среду разработки Replit, а там уже встроенный генератор кода допишет до идеала ваше приложение.

Попробовать можно здесь.

Proof: https://t.me/lampait/325 Original

Показать полностью
Figma Плагин Нейронные сети HTML CSS Разработка Веб-дизайн Приложение Видео Без звука Telegram (ссылка)
3
egr317K
egr317K
1 год назад
Серия Дизайн на букву Х

Анимашка 04.01.24⁠⁠

Лоадер анимировал я🤓

[моё] Figma Анимация Дизайнер Дизайн Видео Без звука Вертикальное видео
4
egr317K
egr317K
1 год назад
Серия Дизайн на букву Х

И снова 3 января⁠⁠

Осторожно, может задеть ваше чувство прекрасного!

[моё] Figma Анимация Дизайн Юмор Плохой юмор Видео Без звука
2
Посты не найдены
О нас
О Пикабу Контакты Реклама Сообщить об ошибке Сообщить о нарушении законодательства Отзывы и предложения Новости Пикабу Мобильное приложение RSS
Информация
Помощь Кодекс Пикабу Команда Пикабу Конфиденциальность Правила соцсети О рекомендациях О компании
Наши проекты
Блоги Работа Промокоды Игры Курсы
Партнёры
Промокоды Биг Гик Промокоды Lamoda Промокоды Мвидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии