Как известно Figma позволяет хранить много макетов. Но когда сайт давно работает или наоборот, не срослось и сайта уже нет, макеты эти лежат мертвым грузом. Подумал начинающим веб дизайнерам или просто любопытным будет интересно посмотреть, как делать не нужно, как нужно и что выходит по итогу.
Что делать, если то самое классное изображение никак не удается найти, а у заказчика пока нет ресурса предоставить нужный контент? Что можно придумать для разделов каталога, когда есть только фото для продуктовых карточек, чтобы это выглядело красиво? Как при этом не забыть о метафорах и ассоциациях бренда и создать необходимое настроение на сайте? Да еще и чтобы заказчик все это согласовал без правок…
Задача
К нам обратился заказчик с задачей создать функциональный интернет-магазин на Тильде для бренда натуральной SPA-косметики «Цветы и море». На этапе дизайн-концепции мы развили мысль о море, песке и цветах до такой степени, что сгенерировали для своих задач 400+ изображений, выделив на это 30+ часов. Как у нас получалось и не получалось, что мы делали и как именно экспериментировали, рассказываем дальше.
И сначала мы расскажем об основных этапах разработки проекта, чтобы ввести вас в контекст. Ну и якорная ссылка для тех, кому нужно скорее читать наш опыт по работе с нейронкой.
Важно — мы не генерировали изображения для товаров, весь визуал в продуктовых карточках настоящий и предоставлен заказчиком.
Сбор информации по проекту: формируем общее видение с заказчиком перед стартом
Как и всегда, мы начали с максимально подробного брифа с заказчиком: задали много уточняющих вопросов, вынесли на обсуждение примеры реализации, обсудили целевую аудиторию и конкурентов, наметили структуру, предложили список сайтов, которые можно использовать в качестве референсов.
Какая стоит задача, что заказчик видит на финише?
Будет ли виденье заказчика работать для ЦА?
Что конкретно важно для целевой аудитории?
Как проект будет жить после релиза?
Что нужно учесть при разработке и о чем позаботиться заранее, чтобы сайту не нужны были доработки через неделю после запуска?
И многое другое
Только после того, как у нас есть четкое видение, мы начали работать над сайтом.
Проектирование — продумываем структуру страниц и закладываем необходимые решения в интерфейс сайта
Мы провели маркетинговое исследование, выявили целевую аудиторию, изучили конкурентов, предоставленных заказчиком. Вдобавок к этому проанализировали лидеров натуральной spa-косметики, составили список сильных и слабых решений.
Далее мы сделали карту сайта и определились со структурой страниц на основании проведенного исследования. Мы выделили преимущества, рассказали о бренде, описали условия для сотрудничества, показали бренды, с кем сотрудничает «Цветы и море». Сняли нагрузку с менеджеров, сделав список частых вопросов и ответов на них.
Сбор информации и подготовка к проектированию
Важно было обозначить наличие акций на главном экране, встроить их аккуратно. Решили использовать слайдер с автоплеем, формат которого напоминает интерфейс сторис. Также добавили строку с информацией о бесплатной доставке от определенной суммы.
Прототип будущего интернет-магазина
Еще мы вывели популярные товары бренда на главную страницу вторым блоком, чтобы посетителям сайта не нужно было тратить время и искать любимые позиции в каталоге, а находить сразу.
Мы реализовали возможность дополнительных продаж, предложив добавить в заказ шоколадки и открытки в карточке товара. В корзине добавили поле с возможностью подписать открытку, которое появляется только если в корзине есть эта самая открытка. Реализовали на Тильде такой функционал с помощью написанного скрипта нашим разработчиком.
Корзина в 2 этапа с необходимым функционалом
Проектирование прототипа далось нам без особых сложностей — полный мэтч с клиентом позволил оперативно сделать интерактивный прототип и перейти к поиску дизайн-концепции и отрисовки макета.
Перед тем как мы подробно начнем рассказывать о промт-инженерии для проекта, кратко введем читателя в контекст того, как мы мыслили в плане общего визуала и дизайн-решений.
Мы понимали, что дизайн должен передать эстетику легкости и осознанности, расслабления, отдыха и нежности. Для нашей ЦА важен комфорт и забота о себе, их восхищает бренд, готовы оставлять развернутые отзывы в эстетичных локациях. Бренду также важно передать крафтовость и натуральность, отсутствие массового производства и трепетное внимательное отношение к каждому продукту.
ЦА
Мы начали с названия бренда, подумали и собрали ассоциации, приступили к поиску визуальных решений, нашли приятные референсы, которые можно использовать для групп товаров. Подобрали цветовую гамму с учетом товаров, упаковки и фирменного логотипа, предложили шрифтовую пару, которая дополнительно создала необходимые ассоциации и настроение.
Поиск идеи и референсы
В какой-то момент мы уперлись в то, что контент заказчика оказался достаточно «шумным» для фоновых изображений, терялись тексты и важные акцентные элементы интерфейса. Контент подходил только для визуализации каталога товаров + была вероятность дублирования визуала из-за ограниченного количества изображений. Еще мы начали ломать голову над тем, как проиллюстрировать разделы каталога. Ну и в целом контент заказчика был заточен больше под соцсети — видео и фото были предоставлены нам в вертикальном формате.
Контент от заказчика
Мы пошли на фрипик, чтобы найти для себя решение, но уперлись в то, что все-таки делаем интернет-магазин и подобрать что-либо между собой более менее бьющееся по визуалу не представляется возможным. Больше к премиум-стокам не возвращались. Начали смотреть в сторону нейросетей.
Нейронки. Вступительное слово и поехали.
О чем пойдет статья дальше? Важно — это не мануал в привычном в виде с обзором каждой кнопки. Это статья о том, как в реальной коммерческой разработке можно смело экспериментировать и внедрять в работу различные Ai-инструменты и получать довольно качественный результат, параллельно решая распространенную проблему в дизайне – отсутствие визуального контента от заказчика.
Передаем слово нашему дизайнеру — Сергею, который поделится с вами всеми своими наработками в процессе генерации контента для «Цветы и море».
Почему выбрали Stable Diffusion, а не Midjourney
Прочитав несколько обзоров и сравнений генеративных нейросетей, предварительно решили, что нам больше подходит именно Stable Diffusion, так как он оказался достаточно гибким и функциональным для наших задач. Я бы его назвал настоящим комбайном, в котором ограничений практически нет, но чтобы научиться пользоваться всеми возможностями этого инструмента, придется очень сильно погрузиться в технические аспекты.
По Midjourney — думаю, все в него успели поиграться, многие работают на постоянной основе, но я не смог добиться стабильного результата. Полученные изображения были не такими реалистичными, как мы задумали, сделать пак изображений в одном стиле не получалось — при детальном рассмотрении контента нам что-нибудь да резало глаз.
Почему мы выбрали Stable Diffusion?
Редактирование созданных изображений — можно легко менять конкретные элементы на изображении с помощью функции Inpaiting, а с помощью outpaiting возможно наращивание фона в контексте изображения. Эта функция очень нам пригодилась для страниц разделов товаров, далее расскажу подробнее.
Распределение веса по конкретной характеристике в промте — за счет этого можно гибко настроить промт и получить наиболее точный результат.
Установка конкретных моделей, которые нужны тебе. У Stable Diffusion большое сообщество, в сети можно найти крупные каталоги с базой различных моделей и обученных дополнений Lora, которые устанавливаются поверх базовых моделей. Большинство из них находятся в свободном доступе.
Функция img2img — метод создания изображений на основе загруженного референса, благодаря чему появляется возможность сделать сет в одном стиле. Для нас важно, чтобы контент на сайте был в одной стилистике.
Наличие seed у генерируемого изображения. Что это и зачем? Seed — уникальный код или идентификатор изображения, который дает нам возможность вносить в запрос изменения точечно, сохраняя основную композицию, обстановку или объект на изображении. Далее расскажем как пользовались данной фичей.
Технические нюансы, установка, первые результаты.
Первая сложность, с которой столкнулись — сборок для систем на базе Mac практически нет и их не так просто найти, в основном сборки идут под Windows. Я нашел два подробных мануала для развертывания для Mac на github. Вот первый и второй, если делать все по инструкции, заработает без танцев с бубном. Если же что-то не получится, пишите в комментариях, постараюсь помочь.
Установив Stable Diffusion, нужно было установить модель, на основе которой буду генерировать контент. После небольшого ресерча решил поработать с моделью Deliberate_v5 от популярного разработчика моделей Христ. Добавлю, чтобы корректно работали функции outpainting и inpainting, дополнительно сразу скачайте модель с приставкой Deliberate_v5-inpainting. Установка модели довольно проста: просто копируем в папку models, где был установлен Stable Diffusion.
Покопавшись в мануалах и посмотрев несколько обучающих видео, начал пробовать составлять промты и с интересом смотреть что получается. На первых порах не использовали негативные промты.
Так выглядит интерфейс 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 и далее работать уже с ними. Прикрепляю первые результаты.
С каждым новым изображением я лучше понимал алгоритм и логику работы со 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. В моменте казалось, что вырисовывается что-то симпатичное, но под наши задачи, увы, не подходило.
Генерации на основе промта от Midjourney
Снова переработал промт, прописал более конкретные условия и добавил негативный промт
9 bath bombs, lying next to each other on a white surface, they are surrounded by small branches of dried flowers
9 бомбочек для ванны, лежащих рядом друг с другом на белой поверхности, их окружают маленькие веточки засушенных цветов.
Продолжал эксперименты с промтами и весом ключей и в какой-то момент получил результат, который нас устроил в качестве версии 1.0.
Версия 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 бомбочек для ванны, соли для ванны, лежат рядом друг с другом на бежевой поверхности, их окружают маленькие веточки засушенных цветов, ракурс фото сбоку, цвета бомбочек белый серый молочный)
Негативный промт, чтобы исключить цвета, которые нам не подходили по стилю:
На тот момент у нас уже был готов дизайн-макет, известна цветовая палитра, подобраны шрифты. Мы «примерили» полученное изображение и наконец поняли, что попали, результат нас устроил на 9 из 10. Нам захотелось улучшить результат, продолжили работать на качество и детали.
Как улучшить получившийся результат в Stable Diffusion?
Каждое изображение имеет свой уникальный идентификатор — seed. Я использовал seed данного изображения и стал менять промт. Что это дало? Результат теперь получался не рандомным, а очень схожим с оригиналом. Мы могли развивать данное изображение — менять не только промт, но и другие настройки.
Когда я увеличил разрешение изображения с 952х448 до 1560х771, произошел известный баг в Stable Diffusion — дублирование сущностей. И так как мы работали с бомбами для ванной, а не с человеческими головами или руками, нам это пошло только на пользу, увеличив количество элементов с 4-6 до 8-12. Кстати, в сети довольно много мануалов о том, как бороться с дублированием контента в Stable Diffusion при генерации.
Далее составил универсальный негативный промт, воспользовавшись рекомендациями в найденных мануалах на просторах интернета, который бы повлиял на уменьшение количество мутаций и деформаций.
Промежуточный результат
Финальный результат, который нас устроил
Докрутив предыдущий промт на основе прошлого seed, получил наш финальный результат, который отлично вписался на главном экране сайта.
Изображение для главного экрана
Режим 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
Далее нам оставалось в похожей стилистике создать контент для разделов каталога интернет-магазина. Действовал по уже выработанной схеме — использовал ключи прошлых промтов, которые описывают обстоятельства, добавлял необходимые ключи, использовал прошлые seed.
Вот такой интересный результат у нас получился:
Изображения для разделов каталога
Наращивание фона
Последнее, что оставалось — получить из формата 1:1 горизонтальные широкоформатные изображения для hero-секций страниц разделов. Функционал Stable Diffusion позволяет это сделать — нужно использовать outpainting (нейросеть может нарастить фон изображения в любую выбранную сторону исходя из контекста изображения) в режиме img2img. В сети и на ютубе много подробных мануалов, здесь не буду расписывать подробно.
Далее с помощью функции inpaint почистил изображения от артефактов. Оставалось сделать цветкор и дополнительно сделать апскейл.
Результат:
Главные секции страниц разделов
Что думаем насчет всего этого волшебства?
Нейросети могут помочь в решении определенных задач, стоящих перед дизайнерами. Считаем, что каждому в нашей профессии нужно попробовать-потрогать-пощупать и выбрать для себя инструмент, который будет полезен в работе. Использовать нейронки и изучать их функционал важно для развития и большей востребованности на рынке. Надеемся, что наш кейс окажется полезным, вдохновляющим и побуждающим к изучению, экспериментам и созданию крутого контента для рабочих и не очень задач. На текущий момент сайт в боевом режиме, работает и приносит прибыль своим заказчикам.
Суммарно на эксперимент с генерациями по этому проекту было потрачено 30+ часов, получено 400+ изображений, просмотрено и прочитано более 30 мануалов. Ссылка на фигму со всеми вариантами здесь.
Итоговый результат
Полученный дизайн презентовали заказчику, который был принят без правок. Нас поблагодарили за решение и то, как органично встроился сгенерированный контент в общую концепцию. Дизайн сверстали на Тильде в zero блоках, подключили каталог, настроили корзину, написали два скрипта для нестандартных решений, подключили сервис доставки и платежную систему, сделали технические настройки. На текущий момент сайт в боевом режиме, работает и приносит прибыль своим заказчикам.
Расскажите о своем опыте работы со Stable Diffusion и другими нейросетями — поделитесь в комментариях.
Взять с собой побольше вкусняшек, запасное колесо и знак аварийной остановки. А что сделать еще — посмотрите в нашем чек-листе. Бонусом — маршруты для отдыха, которые можно проехать даже в плохую погоду.
Galileo генерирует UI дизайн по запросу и картинке. Хорошая находка для UI-дизайнеров. После генерации вы сможете редактировать макет прямо на сайте или экспортировать в Figma. Бесплатно дают 200 кредитов это примерно 20 генераций
Dorik AI Website Builder — новая нейросеть, генерирующая сайты по вашему текстовому запросу. Подробнее в этом посте
Хотите быть в курсе полезных ии сервисов для работы, учебы и облегчения жизни? Подпишитесь на мой канал в Telegram НейроProfit, там я рассказываю о том, как зарабатывать с помощью нейросетей и использовать ии-сервисы для бизнеса 😉
На прошлой неделе был марафон разговоров с другом. Пока говорили, решил попробовать освоить одну анимашку в Figma, которая показалась интересной. Можно ещё докрутить/допилить, но уже что-то.
Figma — популярный инструмент для дизайна интерфейсов и веб-страниц, который позволяет быстро создавать качественные макеты и упрощает работу в команде. Он применяется в различных сферах, связанных с разработкой сайтов и приложений. Сфера веб-дизайна сейчас только набирает обороты, поэтому владение Figma всегда будет большим плюсом при составлении резюме.
Последнее обновление: 20 октября 2023 года.
Мы проанализировали множество курсов, которые обучают работать с Figma и выбрали только самые лучшие. Мы опирались на отзывы студентов и качество образовательных программ, чтобы вам не пришлось тратить много времени. Но если вы хотите только ознакомиться с платформой, то мы приготовили 5 бесплатных курсов, которые помогут разобраться с тонкостями Figma.
«Figma с нуля до PRO» от Skillbox — лучший курс с лайфхаками от профессиональных дизайнеров (промокод ГДЕКУРС — скидка 45% на курсы)
«Супер Figma» от VideoSmile — лучший курс с индивидуальным менторством и обилием обратной связи
«Figma с нуля» от Contented — лучший курс с поддержкой координатора и обратной связью от наставника
«Основы дизайна в Figma» от Яндекс Практикум — лучший курс, на котором вы будете учиться в сопровождении опытной команды
«Основы Figma» от Бруноям — лучший курс с теорией без академизма
«Основы Figma» от Логомашины — лучший курс, на котором за 2 недели вы уже сможете создать свой проект
***
Онлайн-курсы по Фигме
Здесь мы разберем все особенности онлайн-курсов по Figma, изучив их особенности и недостатки. Курсы подойдут как новичкам, так и дизайнерам, желающим улучшить свои навыки работы.
На этом курсе вас научат собирать MVP, mock-up и работать с инструментами: от кнопок на панели до анимации. На курсе представлена только самая важная информация, без воды. Доступ к материалам навсегда, чтобы в любой момент можно было вернуться к пройденному. В программу входят такие темы, как базовые действия в Figma, работа с кривыми, констрейнты и компоненты, а также работа с библиотеками.
Обучение проходит в формате просмотра видеоуроков и изучения темы, общения с ментором, практики и домашнего задания. В конце обучения вы выполняете и защищаете проект, который может дополнить ваше портфолио. А еще в конце вам выдадут сертификат.
Productstar — базовый курс по продуктовому дизайну в Figma
Стоимость: 39 000 ₽
Рассрочка: от 1 833 ₽/мес. на 24 месяца
Продолжительность: 2 месяца
Формат: видеоуроки + практика + работа с ментором + финальный проект
Домашние задания: с проверкой
Документ об окончании: сертификат
Особенности и преимущества школы:
Доступ к материалам курса навсегда.
Ментор помогает по всем вопросам.
Обилие практики на курсе.
Проект дополнит ваше портфолио.
Четкая теоретическая база.
Есть возможность оформить рассрочку.
Опытные преподаватели.
Недостатки школы:
В комментариях отмечают несвоевременную проверку домашнего задания.
🎁 По промокоду ГДЕКУРС доступна скидка 45% на курсы.
На курсе вас научат проектировать макеты и передавать их разработчикам, а также покажут, как экономить время на рутинных задачах. Вас ждут лайфхаки от профессиональных дизайнеров! Обучение длится всего 2 месяца. Вас научат профессионально работать в Figma, создавать компоненты и библиотеки стилей, а также добавлять интерактив в прототипы.
Обучение проходит на личной платформе школы в формате просмотра видеолекций и выполнения практических заданий с проверкой. По окончании обучения вы получите сертификат школы.
Skillbox — онлайн-курс по Фигме с нуля до PRO
Стоимость: по запросу
Рассрочка: 4 899 ₽/мес. на 6 месяцев
Продолжительность: 2 месяца
Формат: видеоуроки + практика
Домашние задания: с проверкой
Документ об окончании: сертификат
Особенности и преимущества школы:
Интерактивная платформа школы.
Обилие практики.
Сертификат от Skillbox.
Подробная обратная связь по практике и домашнему заданию.
Спикер курса — арт-директор веб-бюро Blue Ant.
Есть возможность проконсультироваться перед покупкой программы.
1 год английского в подарок.
Доступ к курсу навсегда.
Обучение проходит на практике.
Недостатки школы:
В комментариях отмечают несвоевременную проверку домашнего задания.
На курсе новичков обучают создавать сайты, сервисы и мобильные приложения. Вы научитесь делать анимации и сложные интерфейсы для любого проекта, а также составлять UI-kit, делать кликабельные прототипы и готовить адаптивные макеты. В доступе будет личный ментор, много обратной связи, а еще вы пополните портфолио готовыми проектами. Вам расскажут, как успешно начать карьеру в веб-дизайне.
Обучение построено на практике. Курс открывается постепенно, по мере сдачи домашнего задания. Вы будете регулярно получать обратную связь от авторов курса и наставника. По окончании обучения выдается сертификат.
VideoSmile — дизайн сайтов, сервисов и мобильных приложений в Фигме с нуля
Стоимость: 24 990 ₽
Рассрочка: 2 082 ₽/мес. на 12 месяцев
Продолжительность: в своем темпе
Формат: лекции + практические уроки + домашнее задание
Домашние задания: с проверкой
Документ об окончании: сертификат
Особенности и преимущества школы:
Помощь с трудоустройством выпускникам.
Индивидуальное менторство.
Создание проектов, которые пополнят портфолио.
Обратная связь от преподавателя.
Сертификат о прохождении курса.
Возможность оформить рассрочку.
Чат в Telegram с куратором и однокурсниками.
Гарантия возврата средств в течение 1 месяца с момента покупки.
Недостатки школы:
Отзывы указывают на недостаточную проработку практического материала.
Курс подходит для начинающих UI/UX дизайнеров, веб-дизайнеров и графических дизайнеров. За время прохождения обучения вы освоите интерфейс, основные инструменты: Shape tool, Drawing tools, создадите кликабельные прототипы, адаптируемые на различных устройствах, а также построите сплэш-экран с логотипом, карточками товаров и иконками.
Обучение проходит в формате видеоуроков и практических заданий, поддержки координатора и наставника. Также вы изучите работу в After Effects, Blender, ProtoPie и Tilda.
Contented — онлайн-курс по Фигме для начинающих дизайнеров
Из курса вы узнаете о различных направлениях дизайна и особенностях работы с ним, а само обучение будет проходить в сопровождении опытной команды. Вы познакомитесь с основами дизайна и на практике отработаете полученные навыки.
Обучение проходит в любое удобное время. Также вы получите консультацию на тему последующего развития карьеры. Вы создадите логотип, баннер, лендинг, а также интерактивный прототип приложения. Все материалы курса можно найти на интерактивной платформе с регулярным обновлением материалов.
Яндекс Практикум — базовый онлайн-курс по Фигме
Стоимость: от 1 500 ₽ за курс
Рассрочка: по запросу
Продолжительность: 4 недели
Формат: видеоуроки + практика + домашние задания
Домашние задания: с проверкой
Документ об окончании: диплом о профессиональной переподготовке
Особенности и преимущества школы:
Выполнение 4 проектов, которые пополнят портфолио.
Чат в Telegram.
Поддержка куратора и вебинары.
Интерактивная платформа, где собраны все материалы курса.
Обучение по удобному графику.
Консультация по развитию карьеры.
Недостатки школы:
В комментариях отмечается, что теория не проработана.
На этом курсе всего за 1 месяц вас научат создавать графические элементы, тексты, посты и прототипировать макеты. Обучение можно проходить в своем темпе. Все материалы собраны на интерактивной платформе школы. А еще вас ждет много практики на основе реальных кейсов.
Домашние задания состоят из 3 уровней сложности. Практические задания дополнят ваше портфолио. Наставник даст развернутый ответ по вашей практике в течение 24 часов. Личный наставник будет на связи и после обучения. Доступ к материалам курса остается навсегда.
Бруноям — онлайн-курс по основам работы в Figma
Стоимость: 17 900 ₽
Рассрочка: 1 491 ₽/мес. на 12 месяцев
Продолжительность: 1 месяц
Формат: видеоуроки + практика
Домашние задания: с проверкой
Документ об окончании: сертификат
Особенности и преимущества школы:
Доступ к материалам курса навсегда.
Личный наставник дает обратную связь по домашнему заданию в течение 24 часов.
Если курс вам не понравится, то в течение месяца после оплаты вам вернут всю сумму.
Есть возможность оформить рассрочку.
Обучение проходит на интерактивной платформе школы.
Во время обучения учеников готовят к прохождению собеседований и поиску работы.
Курс можно пройти в индивидуальном формате.
Недостатки школы:
Отзывы указывают на слабую проработанность теоретической части.
Вы научитесь создавать рекламные креативы, презентации, баннеры, планы проектов, макеты сайтов и многое другое. Обучение состоит из 7 шагов, где вы создадите свой проект, научитесь добавлять иконки, обрабатывать изображения, менять несколько элементов за 1 раз и готовить макет к верстке. Всего в курс входит 10 уроков и 1 экзамена. А еще вас ждет много практики.
Логомашина — практический базовый курс по дизайну в Фигме
Курс является прекрасным выбором для тех, кто стремится к развитию в области веб-дизайна и желает создавать качественные интернет-ресурсы. Курс идеален для новичков и всех, кто уже имеет опыт работы в digital.
Вам расскажут, кто такой веб-дизайнер, что такое посадочная страница, как искать иконки и интегрировать их в макет. На курсе разбираются темы сбора главного экрана лендинга, плагины, композиция и типографика и где искать заказчиков. Автор курса — ведущий веб-дизайнер студии ONE PAGE.
Interra — онлайн-курс по созданию сайтов в Фигме
Стоимость: 10 000 ₽
Рассрочка: отсутствует
Продолжительность: в своем темпе
Формат: видеолекции + практические задания
Домашние задания: с проверкой кураторами
Документ об окончании: сертификат
Особенности и преимущества школы:
В подарок предоставляется конспект лекций «План развития в профессии».
Доступ к материалам курса остается навсегда.
Курс хорошо структурирован.
Программу ведет опытный и ведущий веб-дизайнер студии ONE PAGE.
По окончании обучения выдается именной сертификат.
Недостатки школы:
В комментариях отмечается недостаток практических занятий.
Этот курс вы можете начать с бесплатного пробного урока. Программа подойдет новичкам, дизайнерам, SMM-специалистам и фрилансерам, желающим повысить оплату своей работы. В результате обучения вы овладеете базовыми возможностями Figma, сможете делать многостраничные макеты, а также овладеете принципами создания айдентики.
Обучение проходит в формате видеоуроков, практических занятий в виде тестирования или домашнего задания с обратной связью, а также защитой диплома. Заниматься возможно в любое удобное время.
Onskills — онлайн-курс по работе в Figma с получением сертификата
Курс для начинающих дизайнеров со стартом обучения сразу после оплаты. Продолжительность курса составляет 26 недель и состоит из 26 модулей. Вы изучите текстовые стили, Buttons, элементы интерфейса, Auto Layout, режимы прототипирования и многое другое.
Каждый месяц вам будут открываться новые материалы курса. Свою успеваемость вы можете контролировать при помощи тестов. А чтобы понять, подходит ли вам программа, школа предоставит пробный период на 1 неделю всего за 1 рубль.
WillSkill — курс по веб-дизайну в Figma
Стоимость: 25 990 ₽
Рассрочка: от 722 ₽/мес.
Продолжительность: 26 недель
Формат: видеоуроки + практика + тесты + домашние задания
Домашние задания: с проверкой
Документ об окончании: сертификат
Особенности и преимущества школы:
Обилие теоретического материала.
Много практики, которая позволит вам быстро понять основы веб-дизайна.
Обучаться возможно из любой точки мира.
Наличие промежуточного тестирования.
Доступ сразу после оплаты.
Подходит новичкам.
Сертификат школы после окончания обучения.
Недостатки школы:
В комментариях отмечают некорректное составление теоретической базы.
Практический курс по работе в Figma для новичков. Вам расскажут основы теории веб-дизайна и построят план развития в профессии. Вы изучите основы веб-дизайна, освоите принципы теории цвета и UI/UX дизайна на практике, а также научитесь создавать прототипирование и узнаете о способах заработка.
Студенты также изучат работу в Photoshop и Adobe Illustrator. Обучение состоит из обилия теории и практики, разбора кейсов на основе поставленного бюджета, а также из создания кликабельного макета для демонстрации заказчику. В конце программы выдается сертификат.
beONmax — онлайн-курс по основам веб-дизайна, UI и UX в Figma
Стоимость: по запросу
Рассрочка: по запросу
Продолжительность: около 18 часов
Формат: видеоуроки + практика
Домашние задания: с проверкой
Документ об окончании: сертификат
Особенности и преимущества школы:
Обилие теоретического материала — 85 видеоуроков.
Свою финальную работу вы выложите на Behance вместе с преподавателем.
На курсе вы изучите все возможности инструментов Figma, благодаря подробным видеоурокам в формате скринкастов. Каждый урок сопровождается комментариями эксперта, что поможет вам лучше понимать материал.
С самого начала обучения вы сможете начать практиковаться и создавать несколько проектов, которые будут отличным дополнением к вашему портфолио. По окончании курса вы сможете не только находить первых клиентов, но и брать заказы на разработку прототипов в Figma.
Pentaschool — онлайн-курс по дизайну интерфейсов в Figma
Стоимость: 19 000 ₽
Рассрочка: от 4 750 ₽ в месяц по рассрочке
Продолжительность: 3 месяца
Формат: видеоуроки + практика + домашние задания
Домашние задания: с проверкой
Документ об окончании: сертификат
Особенности и преимущества школы:
Обратная связь от преподавателей курса по практике и домашним заданиям.
Обилие практики.
Дополнительные материалы, которые дополняют лекционный курс.
Портфолио можно дополнить работами с курса (макет лендинга и мобильного приложения).
Можно оформить рассрочку.
Есть сертификат о прохождении курса.
Бессрочный доступ к материалам курса.
Доступ к библиотеке вебинаров на время курса и еще 90 дней после выпуска.
Недостатки школы:
В комментариях отмечают проблему с возвратом денежных средств.
Программа состоит из 9 блоков, из которых вы узнаете все о шейпах, векторных фигурах, перьях и сетях, цвете, основах адаптивного дизайна и многое другое! Обучение проходит на примерах из реальной практики. Курс можно пройти всего за 1 неделю, выполняя при этом домашние задания и просматривая теоретические видео не длиннее 30 минут. Обучаться можно в удобное для вас время.
praktika.school — курс по веб-дизайну в Фигме от шейпов до интерфейсов
Стоимость: подписка от 1 месяца за 990 ₽
Рассрочка: ежемесячная подписка
Продолжительность: в своем темпе
Формат: видеоуроки + практика
Домашние задания: с проверкой
Документ об окончании: отсутствует
Особенности и преимущества школы:
Вебинары и обратная связь от преподавателей.
По окончании курса получается готовое портфолио.
ТОлько актуальная информация.
Можно оформить годовую подписку со скидкой.
Короткие видео, не длиннее 30 минут.
Обучаться можно в удобное время.
Недостатки школы:
В комментариях отмечают нехватку информации в теоретической части.
Курс подойдет пользователям, которые уверенно владеют компьютером и знакомы с любой графической программой.
На курсе вы изучите основы Figma, научитесь создавать дизайн сайта для десктопа, использовать плагины, библиотеки. Поймете, как создавать интерактивные макеты с помощью дополнительных приложений. Узнаете, как выстраивать работу web-разработки и передавать свои проекты верстальщикам.
Специалист — основы работы в Figma для профессии UI/UX Designer
Стоимость: 21 550 ₽
Рассрочка: отсутствует
Продолжительность: 2 недели
Формат: видеоуроки + практика
Домашние задания: с проверкой
Документ об окончании в зависимости от программы: свидетельство выпускника, сертификат международного образца или удостоверение о повышение квалификации
Особенности и преимущества школы:
Преподаватели — эксперты-практики с реальным опытом.
Помощь в трудоустройстве.
Практика на основе реальных кейсов.
Качество курсов и экспертность преподавателей под постоянным контролем организаторов.
Помощь профессионального наставника в построении карьеры.
На курсе вы научитесь основам веб-дизайна, углубленно изучите Figma, освоите прототипирование, создадите лендинг и страницу интернет-магазина по ТЗ и многое другое. Обучение проходит в формате просмотра теоретических и практических видео. Для закрепления материала предусмотрено 11 тестов. Программа подойдет новичкам и тем, кто хочет освежить, дополнить свои знания. По окончании программы можно получить сертификат школы.
Stepik — практический курс по основам веб-дизайна, UI и UX в Фигме 2023
Если вы пока не уверены в приобретении полноценного курса или хотите изучить фигму для себя, то предлагаем вам подборку отличных бесплатных курсов.
Основы Figma от Нетологии (обучение в любое время, 3 видеолекции, 2 проекта в портфолио, без сертификата, доступ после регистрации)
Figma от Contented (курс по созданию сайта на Figma, лекции от эксперта, с практикой, без сертификата, доступ после регистрации)
Figma. Начальный уровень от GeekBrains (видеокурс из 5 занятий, общая продолжительность — 1 месяц, без сертификата, доступ после регистрации)
Figma: от установки до презентации проекта от Puzzlebrain (10 уроков и 7 практических занятий, вы получите дополнительные материалы от автора, без сертификата, доступ после регистрации)
Figma: работаем в браузере от Bang Bang Education (5 уроков, блок с подсказками и итоговый текст, доступ после регистрации)
***
Как мы подбирали школы и курсы для нашей статьи?
При подборе курсов по Figma для нашей статьи мы опирались на следующие параметры:
Рейтинг и отзывы пользователей. В первую очередь мы обращали внимание на рейтинг и отзывы пользователей. Это позволяло нам понять, насколько курс полезен и эффективен, а также узнать мнение людей, которые уже прошли этот курс.
Качество материалов. Также мы изучали содержание курсов и качество материалов. Важно было убедиться, что они соответствуют нашим требованиям и помогут читателям получить максимальную пользу.
Опыт преподавателей. Опыт преподавателей тоже был важным параметром. Мы изучали их квалификацию и опыт работы в области Figma, чтобы убедиться, что они могут дать полезные советы и помочь студентам развиваться в этой области.
Практические задания. Практические задания тоже были одним из параметров, на которые мы обращали внимание. Они помогают студентам лучше усвоить материал и применить его на практике.
Стоимость курса. Конечно же, мы учитывали стоимость курсов. Нам было важно выбрать наиболее доступные и выгодные варианты для вас.
***
Итоги
При подборе курса по работе в Figma стоит обратить внимание на рейтинг и отзывы пользователей, содержание курса и качество материалов, опыт преподавателей, наличие практических заданий и стоимость курса. Важно выбрать наиболее полезный и эффективный вариант, который поможет развиваться в области Figma. А мы предлагаем обратить внимание на следующие курсы:
Основы продуктового дизайна Figma от Productstar — курс, который предлагает освоить инструменты Figma и создать несколько проектов для портфолио;
Figma с нуля до PRO от Skillbox — курс, который предоставляет лучшие советы от профессиональных дизайнеров;
Супер Figm от VideoSmile — курс с индивидуальным менторством и множеством обратной связи.
Расскажите, какие курсы по Figma вы проходили или хотели бы пройти?
Реклама ООО «Тривиум», ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИП Лукьянова З.В., ООО «Скилфэктори», АНО ДПО «Образовательные технологии Яндекса», ООО «БРУНОЯМ», ООО «ЙОЛО», ИП ЕВЛУХИН А.А., ИП Глушков Семен Андреевич, OOO «ЦДО», ООО «Сила знания», ИП Булавин Д.А., МАДП «ПЕНТАСКУЛ», ИП Иванова Снежана Игоревна, ООО «Цифровые образовательные решения», ООО «Нетология», ООО «ГикБреинс», ООО «Пазл Групп»
Привет, дорогой читатель! Хочу поделиться своим опытом над одним проектом,название которого в заголовке) Было сложно?- да. Справилась ли я?-да. Как мне кажется)) Расскажу с чего всё началось:
Я учусь на курсах от "Логомашины" по специальности веб-дизайнер. Одним из домашних заданий было разработать лендинг на одну из различных тем. Я выбрала газировку фирмы "Shock Bubbles".
Моя работа началась с изучения брифа от этой компании. Требовалось сделать короткий, но "сочный" сайт. Главное, чтобы он привлёк молодёжь. Сама компания славиться необычными сочетаниями вкусов, что и выделяет их среди конкурентов и вызывает интерес у аудитории.
Первый этап: составление карты ассоциаций. Тут оказалось всё не так просто, как казалось бы. Каждый раз я думаю "пф, да сейчас всё минут за 10 распишем", а нет... Когда садишься за работу, то в твоей голове просто пустыня, где ты ищешь источник воды, в моём случае вдохновение. Написала я довольно не мало, но хотелось бы на этом не останавливаться, увы более в голову ничего не приходит.
Ассоциативный ряд
Чуть ниже вы сможете наблюдать за моей работой:
Больше всего меня зацепил шрифт штрихкодом, так как он выглядит необычно, как и желал заказчик. (Название шрифта: Libre Barcode 39 Text)
Спасибо тебе, дорогой читатель, что прошёл этот путь со мной, надеюсь, что тебе понравилась моя работа, а если нет, то ничего страшного) Желаю тебе всего самого тёплого и наилучшего, прощай! До скорых встреч!)