Как сделать дизайн баннера как в фотошопе, только в Figma? Основы дизайна

2022 ж. 27 Шіл.
13 963 Рет қаралды

В июле в клубе (school.krona.studio/club-1000...) мы вплотную поработали с акциями и распродажами, и сегодня поделимся с вами небольшим кусочком пользы 😉
Акции - мощный инструмент продвижения и продаж, но, чтобы они работали, нужно соблюдать несколько простых правил:
➡️ Пользователь должен видеть все акции, которые ему доступны
➡️ Информация об акциях должна привлекать внимание, желательно использовать яркие необычные картинки
➡️ Информация об акциях должна легко считываться и быть понятной, желательно чтобы предложение было максимально простым
Например:
- два товара по цене одного
- подарок при покупке
Баннер - лучший способ информировать пользователя об акциях. Но баннеры существуют в разных контекстах:
➡️ Баннеры в рекламе
➡️ Баннеры на маркетплейсах
➡️ Баннеры на собственных сайтах
Конечно, могут быть и другие контексты, но эти встречаются чаще всего!
У баннера очень мало времени на то, чтобы привлечь внимание пользователя и сообщить ему информацию. Поэтому важно знать основные элементы баннера:
1. Суть акции: ее название, условие
2. Выгода: процент скидки, бонус, подарок и тд
3. Срочность: сколько по времени действует акция
4. Изображение, связанное с акцией: сам товар, довольный клиент или что-то другое
5. Призыв к действию - что нужно сделать, чтобы воспользоваться акцией
❗Контент на баннере зависит от контекста - иногда от некоторых элементов можно отказаться, например от срочности или призыва к действию
А в клубе было еще много информации про баннеры и акции, а также креативной практики! Мы:
- Поговорили про анатомию баннера, его элементы, влияние контекста сайта на содержание и вид баннера. Так, например, один и тот же баннер может быть контрастным или неконтрастным в зависимости от того, какие элементы интерфейса его окружают!
- Сделали креативный баннер... из баклажана! Нет, мы не шутим 😎
- Разобрались с разделом акций на сайтах: где он, как выглядит, зачем нужен. А еще - посмотрели реализацию акций на стандартных блоках Tilda
При вступлении в клуб вам открывается доступ ко всей базе материалов, включая все лекции про акции и баннеры 👍🏻 А мы уже готовим супер-насыщенную программу на август - темы лекций уже можно посмотреть на сайте клуба! Кстати, там же можно и вступить - теперь это можно сделать в любой момент, даже прямо сейчас!
Записаться в клуб ➡️ school.krona.studio/club-1000...
#дизайн #фотошоп #фигма #баннер

Пікірлер
  • Круто! Спасибо большое

    @olgakontsova8761@olgakontsova8761 Жыл бұрын
  • Спасибо! Полезное видео 👍

    @Denis-kf3kv@Denis-kf3kv Жыл бұрын
    • супер 🔥 применяйте)

      @KronaStudio@KronaStudio Жыл бұрын
  • Круто)😢🎉

    @dasdust8930@dasdust89308 ай бұрын
  • Спасибо Вам огромное

    @user-dd9nu8mi9j@user-dd9nu8mi9j Жыл бұрын
  • Красава!

    @garmonist104@garmonist1048 ай бұрын
  • Супер!

    @user-ui2zk5iv2n@user-ui2zk5iv2n11 ай бұрын
  • Получилось круто! Продолжайте

    @d1sterry7@d1sterry7 Жыл бұрын
    • Конечно будем) Спасибо за обратную связь! Надеемся, видео было для вас полезно ❤️

      @KronaStudio@KronaStudio Жыл бұрын
  • очень круто, спасибо

    @mairmoss@mairmoss Жыл бұрын
    • Очень рады) Получилось повторить? 😍

      @KronaStudio@KronaStudio Жыл бұрын
    • @@KronaStudio да) я попробовала и с другими баннерами, тоже круто вышло :)

      @mairmoss@mairmoss Жыл бұрын
  • Классно!

    @user-pj7vc6ef7l@user-pj7vc6ef7l Жыл бұрын
  • Всё гениальное просто .

    @user-cd1bf8qt1s@user-cd1bf8qt1s2 ай бұрын
    • так и есть😉

      @KronaStudio@KronaStudio2 ай бұрын
  • Удобство и Комфорт это как Список цен на товары и Прейскурант.

    @OlgaNeklesa@OlgaNeklesa10 ай бұрын
  • здравствуйте. Спасибо за видео, кое что для себя отметила по поводу текстов. Только не поняла где вы нашли картинку без фона ?

    @user-lq6qb8yt7x@user-lq6qb8yt7x Жыл бұрын
    • убрали фон ручками)

      @KronaStudio@KronaStudio Жыл бұрын
    • плагин такой есть в фигме icons8 background remover) на фото со сплошным фоном отлично работает

      @andreymaslov3256@andreymaslov3256 Жыл бұрын
    • А он бесплатный ?​@@andreymaslov3256

      @vitaliyfedorcov6197@vitaliyfedorcov61974 ай бұрын
  • Классно есть бесплатные уроки для дизайнеров

    @user-hp5js2yb2z@user-hp5js2yb2z5 ай бұрын
  • вау, работа казалось бы простая а такая крутая ))

    @lennyye1059@lennyye1059 Жыл бұрын
    • Это да,просто надо шарить на фигму и все😅

      @user-jx8zi7cg6b@user-jx8zi7cg6b Жыл бұрын
  • Здраствуйте, какой клавишей отображаются отступы оранжевыми линиями?

    @user-vb9gt2up9e@user-vb9gt2up9e10 күн бұрын
    • Привет) Что бы посмотреть расстояние нужно выбрать нужный объект и зажать Alt

      @KronaStudio@KronaStudio9 күн бұрын
  • Где найти такое изображение кроссовка?

    @duver2957@duver295711 ай бұрын
    • в интернете)

      @KronaStudio@KronaStudio9 ай бұрын
  • Вы уже более 7500 работ нарисовали. Вот это силище😃. Я только не понял, как кроссовок стал таким красным?

    @user-gy7qd1vl7b@user-gy7qd1vl7b Жыл бұрын
    • Не совсем) Хотя все может быть 😁 Кроссовку немного увеличили насыщенность в настройках изображения в фигме)

      @KronaStudio@KronaStudio Жыл бұрын
  • Вы это на фигме сделали ?

    @user-ok5sd1yq2p@user-ok5sd1yq2p Жыл бұрын
    • да, даже в названии специально указали, что это Figma 🔥

      @KronaStudio@KronaStudio Жыл бұрын
  • Оххх уж это слово паразит, СОЧНННННЫМ, СОЧНО, СОЧНОЕ!!!!

    @savarro1000@savarro1000 Жыл бұрын
    • Вкусно

      @user-oz5ze5ty1d@user-oz5ze5ty1d4 ай бұрын
  • Более правильно писать 30%, нежели -30%. И так понятно что это скидка. Мое мнение, не настаиваю

    @Rus_Taaam1223@Rus_Taaam12235 ай бұрын
    • Мишеться или минус или слово скидка, все давно уже придумали

      @user-oz5ze5ty1d@user-oz5ze5ty1d4 ай бұрын
    • @@user-oz5ze5ty1d не обязательно следовать слепо только за одним мнением, есть люди которые более компетентны в этом вопросе. И вот есть такое мнение что минус писать не нужно, можно просто написать например 30%

      @Rus_Taaam1223@Rus_Taaam12234 ай бұрын
KZhead