Почему SVG из Figma — это не всегда «вектор»🤔

Ошибка, которую я периодически вижу: начинающий дизайнер берет обычную PNG-картинку (логотип или иконку), выбирает в Figma экспорт в SVG и думает, что произошло чудо, и изображение стало четким и легким.

НО, чуда не случилось🙅‍♂

Если вы просто меняете расширение файла, растровое изображение (пиксели) просто «заворачивается» в оболочку SVG.

Оно не станет весить меньше, не станет четче при масштабировании, и вы не сможете поменять ему цвет в один клик. При приближении вы всё равно увидите те же «лесенки» из пикселей.

Часто такой «псевдо-вектор» весит даже больше оригинала.


🔍 Как проверить: вектор перед вами или имитация?
В слоях: Настоящий вектор состоит из «Vector», Растровое изображение это слой «Image».

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

🤔 Что делать, если на руках только PNG, а нужен вектор?
Есть два быстрых способа:

1⃣ Встроенный Vectorizer в Figma
Если вам повезло и вам раздали встроенную нейронку бесплатно, достаточно нажать одну кнопку.

2⃣ Нейросеть ReCraft (дает 30 бесплатных токенов ежедневно)

Загружаем PNG.
Нажимаем кнопку «Vectorize».

Тратим 1-2 токена и получаем на выходе чистый SVG.

❗Эти способы идеально работают только с плоскими изображениями (иконки, простые логотипы). Обемные градиентные изображения или фото превратить в качественный вектор не получится 🤷‍♀

Дизайн лендинга продает, а дизайн кабинета нет? 🤔

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

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

А давайте возьмем и рассмотрим КЛУБ ПО ПОДПИСКЕ 🧩

Где клуб это не просто чат с участниками и пара эфиров в месяц. А клуб, в котором есть большая база материалов, да еще и на разные темы, плюс записи эфиров прошлых месяцев.

Усложним задачу:
● Подписка начинается не с начала календарного месяца, а тогда, когда пользователь оплатил ее.
● Есть разные тарифы, от которых зависит доступ к материалам.
● В клубе есть регулярные активности, за которые ученики получают бонусные баллы или рубли.

И вот в такой клуб вступает новый пользователь. Он вошел, посмотрел на эту свалку и ПОТЕРЯЛСЯ 🤪 И если ему не помочь, какая вероятность, что он продлит участие? Думаю, не высокая, если, конечно, основная ценность для него была не в чате.

Так вот дизайн клуба очень может помочь человеку сориентироваться в происходящем 😉

Если, конечно, это продуманный дизайн с пониманием логики.

Хороший дизайнер сначала вникнет в структуру.

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

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

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

Получается, что дизайн лендинга продает «вход» в продукт. А дизайн кабинета продает желание в нем ОСТАТЬСЯ. В клубной модели порядок внутри это важная часть, которая имеет значительное влияние на продажи.

А вы сами часто терялись в клубах? Или для вас клуб это в первую очередь чат участников? 👇

А какие есть продающие "фишечки" в дизайнах кабинетов? Не знаю, насколько это именно фишечки. Мне кажется, это база, но, к сожалению, далеко не все это используют.

Так вот, что мы можем делать помимо рекламных баннеров с продажей дополнительных продуктов, которые обычно размещают в кабинете:

☺️ Продавать продление доступа или обратной связи
Главное показать, сколько дней доступа осталось, и за несколько дней до окончания вывести кнопку продления.

☺️ Предлагать апгрейд тарифа
Если у вас разное наполнение для тарифов, не скрывайте от базового тарифа то, что ему недоступно. Покажите все самое классное и дайте возможность сделать апгрейд. И предлагайте доплатить разницу не где-то там на продающем лендинге, а прямо тут, где показываем наполнение.
Эффект FOMO (синдром упущенной выгоды) никто не отменял. Как там с 1го марта надо писать такие слова?😅 Если это не рекламный пост пофиг? или лучше перестраховаться?

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

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

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

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

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

Ошибочку поправила и теперь сижу думаю 🤔
🟢Сделать рассылку по тем, кто заходил в этот урок, и дать скачать обновленный код блока?
🟢Или щедро выдать его всем подписчикам тут?

Но что-то я сегодня жадная и не хочу отдавать его просто так 🙈😅

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

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

Да, вот такая я меркантильная сегодня 😈

💐💐💐
Девочки, с праздником вас мои прекрасные!

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

Обнимаю! 🤗

Никогда не выравнивайте тексты в вебе по ширине.
У меня все‼️‼️‼️

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

В вебе же мы никогда не угадаем, какая ширина экрана будет у пользователя. В результате на смартфонах мы видим 2-3 слова на строку и огромные дыры между ними.

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

Поэтому используйте выравнивание по левому краю и не мучайте своих читателей💜💛🤎

Мне кажется, это прям база и это уже знают все, но нет, встречаю такое периодически. Например, вот этот скрин из рассылки.
Только мне на такое везет?

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

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

Поэтому искать исполнителей на создание лендов будут и дальше. Да, многие ищут подешевле, особенно если это тестирование гипотез.

Что мы можем сделать в таком случае? Снижать цену на услуги? Да, НО НЕТ‼️

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

Как это работает:

🔻Берем ТЗ заказчика.

🔹Берем шаблонные заготовки, или полностью шаблон лендинга.

🔻Прикидываем, какие блоки мы можем взять под тексты из ТЗ.

🔹Подбираем цвета и изображения под конкретный проект.

🔻И потом быстро все собираем на геткурсе по готовым шаблонам.

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

Таким образом, мы делаем работу быстрее и дешевле, а клиент не уходит взакат потому что дорого😉

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

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

У меня они есть, и у учеников моего курса такой набор заготовок тоже набирается не плохой такой Да, скоро запуск нового потока, и положено вас начинать прогревать😄

А как у вас сейчас с заказами? Все ок или клиентов стало меньше?

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

Ладно, будем считать, что все ок ❤️

А я пошла писать для вас новый пост😉

Сегодня с коллегой завели речь про «умные» названия элементов интерфейса на сайтах. Обратили внимание на названия вариаций свернутого меню. Судя по ним, дизайнеры очень любят поесть! 🤣

Из всего разнообразия, что вы видите на скрине, в реальных проектах чаще всего встречаются четыре «основных блюда». Остальное это скорее экзотика, и знать их стоит ну разве что для того, чтобы где-то выпендриться по случаю😅

Итак, самые частые:

🍔 Hamburger menu / Бургер
Три горизонтальные полоски, в которых спрятана основная навигация. Это база для мобильных устройств: экономит место и выглядит привычно.

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

🍢 Kebab menu / Кебаб
По нажатию открывается выпадающее меню с дополнительными действиями или настройками. Его используют, когда нужно вызвать опции для конкретного элемента.

Где живет: очень популярно в Android-интерфейсах.

🧆 Meatballs menu / Фрикадельки
Три горизонтальные точки, лежащие рядышком. Функционально это брат-близнец кебаба, разница только в ориентации точек.

Выбор между ними часто зависит от платформы:
🟡Android чаще использует кебаб.
🟡iOS чаще использует meatballs.

🍱 Bento menu / Бенто-меню
Сетка из маленьких квадратов (3х3). Похоже на японский ланч-бокс с отделениями. Это иконка для переключения между приложениями или сервисами.

Где живет: самый яркий пример: «девять точек» в Google, где спрятаны Почта, Диск и Календарь. Или там CandyBox?😱😅

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

А вам на реальных сайтах попадалось что-то интересное из остального списка?

Маленький кусочек одного из разборов на моем курсе. Сколько красоты в рамках разработки одного лендинга😍

Я когда разбираю работы девочек, просто кайфую!
Очень-очень люблю разбирать дизайн❤️

Сегодня в конце одного из разборов сказала фразу, что все отлично, мне все очень-очень нравится, только маленькие правочки...
Выключаю запись, смотрю, а видео на час! 🙈🤣🤣🤣

Ну правда очень нравится, и правда правочки небольшие😅

PS: Кто оставлял заявку в предзапись на 4-й поток курса, проверьте почту и бота в Телеграм. Предложение с ценами предзаписи я вам уже отправила😉

Я сегодня весь день сижу без интернета. Вай-фай не работает совсем😭

А мобильный настолько слабый, что его не раздать. Только на мессенджеры и хватает.

Даже фигму не открыть😒

Но вообще то я пришла не поныть, а пригласить вас на
2х дневный интенсив «Анатомия тарифов на GetCourse»

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

Мы разберем этот блок «по косточкам» с точки зрения дизайна и верстки.

Программа интенсива:

📌 День 1: Дизайн и логика

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

📌 День 2. Верстка

Сверстаем блок тарифов в прямом эфире на GetCourse.

ИНТЕНСИВ МОЖНО КУПИТЬ В ЗАПИСИ ЗА 1190 РУБ.

Что вы получите:
🟢Продленный доступ к записям интенсива на 1 месяц.
🟢Макет материалов первого дня эфира в Figma.
🟢Готовые коды верстки этого блока со второго эфира в твое личное пользование.

Записи эфиров и коды блока можно купить по ссылке⤵️
https://belousova-anna.ru/tariffs-anatomy

Готовлюсь к эфиру 24 марта: хожу по реальным лендингам и по макетам в портфолио дизайнеров. Скриню для вас примеры блоков тарифов для разбора. 📸

Заметила одну штуку: в портфолио часто встречаются красивые таблицы со сравнением тарифов. Галочки, прочерки, всё наглядно... А вот на реальных лендах такое почти не встретишь. 🧐

Почему? Удобно же!

Да, НО только на десктопе. 💻

А на мобильных устройствах такая таблица просто не входит в ширину экрана 🤷‍♀️ Чтобы увидеть все условия, человеку приходится скроллить вправо.

А это не основной паттерн поведения пользователя на лендинге. Пользователь привык активно скроллить ВНИЗ. Он просто может проскочить блок тарифов, не увидев все варианты.

⚠️ Нельзя прятать критически важную информацию в слайдер!

А Тарифы это ключевой блок.
Значит, всё основное, что мы хотим донести в тарифах до клиента, должно оставаться в открытом виде и читаться при обычном скролле вниз.

Что еще стоит учитывать при проектировании блока тарифы — расскажу на эфире 24 марта 😉

Купить записи интенсива можно по ссылке ниже: 👇

Купить записи и коды

Почему на курсе «Формула лендинга» не получится сделать плохо?

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

У меня на курсе тарифы только с моей личной обратной связью.

А это значит:

✅ Подробный видеоразбор каждой домашки. Я открываю ваш макет в Figma или верстку на GetCourse и записываю видео. Показываю где и как можно улучшить ваш дизайн или как поправить CSS^ чтобы всё заработало идеально.

✅ А еще вы можете смотреть разборы работ других учеников. Это мощнейший инструмент: вы учитесь не только на своих ошибках, но и видите чужие ошибки, и учитесь на них.

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

🟢Полный курс: 52 000 39 000 руб.

🟢Дизайн или Верстка: 32 000 27 000 руб.

Хотите научиться делать лендинги круто под моим присмотром? Присоединяйтесь😉

👉 [ЗАНЯТЬ МЕСТО И ПОСМОТРЕТЬ ПРОГРАММУ]