РОБИМО ТРЕНДОВИЙ АНІМОВАНИЙ ДИЗАЙН В FIGMA ( mesh градієнт, компоненти, скролінг…)
Рет қаралды 28,050
Күн бұрынЯк задизайнити класний сайт з трендовою меш градієнт анімацією у Figma? Як зробити горизонтальне прокручування? А вертикальне? А скріншот усієї сторінки сайту? А як там компоненти? А Auto Layout?
Вітаю, ти на каналі «Ліза про дизайн»!♡
У цьому відеоуроці ми разом задизайнимо крутезний сайт для бренду косметики „Florence by Mills” .
Навчимося робити scrolling, скріншот цілого сайту, ефектну анімацію….
Поради для початківців , пояснення технічних моментів (сітки,frame, відступи,групи…) і багато багато натхнення!
Приємного перегляду!
Вперед досягати успіху !
З любов‘ю,
Ліза
Я на Patreon - / lizkhl
круті конспекти, актуальні відео-уроки та персональний колл зі мною,щоб допомогти тобі вирости, як UX/UI дизайнер!
Наше дизайн community у ТГ каналі - t.me/liza_pro_design
ДИЗАЙНИМО РАЗОМ ( УРОКИ В FIGMA )
- • ДИЗАЙНИМО РАЗОМ ( УРОК...
P.s. Постав вподобайку і підпишися !
SOCIAL
✩ insta (@LIZKHL) : lizkhl?igshid=q...
✩ startup : vrpartments.com
✩ скачати нашу аплікацію: linktr.ee/vrpartments
✩ особистий канал : / lizakhlopkova
✩Telegram канал : t.me/liza_pro_design
FAQ
✩ Скільки років? 23
✩ Хто я? co-founder стартапу VRpartments, де я Chief Product Officer,
а також Product Designer в Торонто
✩ Де живу ? Краків, Польща
#uxui #uxuiдизайн #figma
00:00 - Привіт!
00:30 - Що ми будемо робити?
00:35 - Хто я ?
01:01 - Поради початківцям
02:30 - Сітки
02:56 - Скріншот цілого сайту GoFullPage
03:49 - Frame в Figma
04:15 - Кольори
04:36 -AutoLayout і тексти
05:33 - Відступи
05:50 - Посилання в описі !
06:25 - Лого для сайту
07:00 - Дадамо «магії» в сайт
08:15 - Підпишись!
08:47 - Тексти - h1, body copy
09:35 - Call to action
10:51 - Додаємо логотип в групу
11:09 - Про мій процес роботи
11:38 - Вивчайте стиль бренду
12:22 - AutoLayout і кнопки
12:42 - Текст, кнопки, відступи і AutoLayout
13:22 - Сайти - це не складно
13:45 - Створюємо секції
15:24 - Додаємо зображення в секції
15:58 - Чому варто дизайнити на білому фоні
16:42 - Підрівнюємо відступи
16:59 - Секція з продуктом і ціною
18:38 - Горизонтальне прокручування (horizontal scrolling)
20:21 - Дизайнимо останню секцію
25:05 - Футер (footer)
26:38 - Робимо крутезну mesh gradient анімацію в Figma
29:14 - Підсумки
29:58 - Дякую за перегляд!
@unifer2567 Жыл бұрын
Дякую за те що ти робиш, це надихає 🤗
@lizaprodesign Жыл бұрын
ДЯЯЯКУУУЮЮЮ ❤️
@nikavink2194 Жыл бұрын
Це просто неймовірно! Я дуже рада, що знайшла цей канал( той єдиний випадок, коли кажу «дякую» алгоритмам ютубу) Дякую за твою працю і за такий доступний та НЕЙМОВІРНИЙ контент! Це вогонь! 🔥
@lizaprodesign Жыл бұрын
МЕНІ ТАК ПРИЄЄЄМНОООО! ДЯЯЯЯКУУЮЮЮ ❤️
@user-ui3zo9wf6t Жыл бұрын
Було б дуже класно як би ти зробила прям все все по порядку, якими кнопками користуватися , шо де як робити. Просто більшість ( так як і я) прям з повного 0 починають , і ти намагаєшся зробити це швидко і не зрозуміло куди шо нажимати 🥹❤️ Відео буде довге, але дуже корисне!
@lizaprodesign Жыл бұрын
Дякую, зрозуміла ❤️
@Snatxy Жыл бұрын
Дуже рада українському контенту 🥰
@riverinyourarea Жыл бұрын
Дякую за урок та натхнення 🥰✨ Кольори чудові, вже якийсь час хотіли використати схожу гамму, це відео стало закликом до дії👌
@lizaprodesign Жыл бұрын
Дякую за підтримку ❤️ Насправді це і надихнуло, я зайшла на їх сайт, а там такі кольори 😍😍😍😍😍😍😍😍 і все, мене понесло. Хотілось чогось «доброго» хаха
@annaua4395 Жыл бұрын
Велика дяка за те що робите саме для початківців! 🙏 важко починати! Ти дуже допомогаешь! Дякую!
@mariiashyian2246 Жыл бұрын
Привіт. Дякую за відео! Такі гарні кольори, підіймають настрій🙂 Знаю, що тут багато початківців, тому їм буде дуже корисно таке відео, але хотіла б запропонувати ідею зробити дизайн не лендінгу. Може онбордінг з анімацією, наприклад, або сайт-портфоліо. Знаю, що на це потрібно витратити більше часу, щоб придумати все. Але просто як ідея) в будь-якому разі дякую за регулярні корисні відео для дизайнерів! Це дійсно надихає ♥️
@lizaprodesign Жыл бұрын
Привііііт! Дякую дуже, так так - ідея клас. Роблю більше лендосів, бо це якщо так подумати один з найскладніших, та найпопулярних видів сайту, особливо якщо тестове. Плюс можна багато що показати 🙂 Але ідея клас, щось придумаю ❤ Обіймаааю
@nataliyakazyuk3055 Жыл бұрын
Ви неймовірна! Дякую за крутий контент ❤ дуже щаслива, що знайшла вас 🤗
@user-cj5ft9dg9z Жыл бұрын
Легко, доступно та головне - запам'ятовується! Дякую)
@anastasiasokolvak3412 Жыл бұрын
Привіт! Дякую за такий чудовий відео-урок, це просто вау 😍
@2yunona Жыл бұрын
Таке надихаюче відео, що я аж оформила подібно свій перший кейс! Дякую! 😘
@tonynolovebaby Жыл бұрын
Як завжди, дуже гарне відео, Лізочка, дякую тобі та бажаю усього найкращого 💜
@lizaprodesign Жыл бұрын
Дякую, Вам також ❤️
@nadiakh2799 11 ай бұрын
❤💛💙просто неймовірно! Дякую за цікавий і корисний відео-урок, ну прям дуже...💜 як раз в тему, вивчаю анімацію у фігмі.😎 Просто і доступно.💜
@user-sonic1106 Жыл бұрын
Супер! Видно, що ти справжній майстер своєї справи. Хочу теж так вміти)) Дякую!
@IllusionDreamy Жыл бұрын
Було б круто, якщо б Ви зняли відео про те як правильно виконувати та презентувати тестові завдання 🙏
@innaradchuk6367 Жыл бұрын
круто вийшло! хочу вже дійти до того рівня, аби за 30 хв генерувати і кріейтити дизайн)) до речі цікаво було б подивитись відео огляд плагінів, які найчастіше юзаєш)
@inna13aleks Жыл бұрын
Дякую за швидкий та зрозумілий т'юторіал)
@user-nv9wc2pe6x Жыл бұрын
Дуже круто, надихаюче. Продовжуйте! )))
@margaritapazhitnykh8038 Жыл бұрын
Дзякуй за файнае і карыснае відэа, вельмі прыемна глядзець і ўвесь час пазнаваць нешта новае!)
@liza_zeleniuk Жыл бұрын
Ваш спосіб створення mesh gradient виглядає набагато швидшим і практичнішим, ніж той, який використовую я. Дякую, що поділились. Також ніколи ще не користувалась шрифтом Avenir. Спробую.
@lizaprodesign Жыл бұрын
Дуже рада! Обіймаю ❤️
@user-hd6np7hr5p 5 ай бұрын
Ліза,золотко,дякую!!!!шукала щость на кшталт цього!!!💖💖💖💖💖💖💖💖💖💖💖💖💖💖
@anetkaf2558 Жыл бұрын
Запишите пожалуйста видео о UX, очень хочется понять порядок работы. Спасибо за ваш труд.
@cartel3580 Жыл бұрын
Можно еще уроков про дизайн 💋так тебя люблю 💋
@Nata2832 Жыл бұрын
Дуже крутий урок, як завжди! дякую
@lizaprodesign Жыл бұрын
Дякую за підтримку ❤️
@2011vengertaras Жыл бұрын
Лиза, круто). Молодчага
@nadiakhrapchun7072 Жыл бұрын
Привіт, булоб класно побачити як ти робиш дизайн застосунку. Особливо ux
@tenjfive Жыл бұрын
Дякую за відео, вже зробила дизайн 🫶🫶🫶
@lizaprodesign Жыл бұрын
ОООО! Це рівень ❤️
@olhaholonko9579 Жыл бұрын
Дуже круто, дякую!❤
@lizaprodesign Жыл бұрын
Дякую за підтримку ❤️
@pinkytelya Жыл бұрын
Дякую за відео, але в мене два запитання.. Чому там де блок new arrivals справа дуже близько до границі? ще цікаво чому ви робите ширину сторінки 1440px, а не 1920. Та хотілось би узнати - ця анімація лише для демонстрації, чи це практично для frontend? дякую
@prettylittleliar9701 Жыл бұрын
Дуже дякую 💘 Мені здається, такий градієнт можна використовувати в багатьох тематиках, просто потрібно гратися з динамікою анімації та кольорами. Обожнюю твої уроки 💥
@lizaprodesign Жыл бұрын
Дяяякую за підтримку ❤️ Тааак, це навіть і ціль цього відео, показати саме його і надихнути на градієнт
@friendApril Жыл бұрын
Почерпнула для себе пастельні відтінки, з ними потрібно спробувати погратись, надзвичайно естетично виглядає) а також фон зі smart animation, обов'язково реалізую подібне в наступному дизайні. Спасибі тобі❤
@lizaprodesign Жыл бұрын
Дяяяякуууююю ❤️ Дуж рада!
@yanaivchak9448 Жыл бұрын
Ліза, підкажіть будь ласка як таку анімацю передавати для програмістів, на верстку? Дякую
@dariakruts5845 Жыл бұрын
знаєш, ти дуже легко доносиш інформацію новачкам (це я), рідко помічала щось награне в процесі твоєї роботи мені подобається атмосфера твоїх відеоуроків 🥰 і як пишуть нижче в коментарях - ти таки надихаєш на поступове, ненапряжне створення початкових легеньких сайтів, щоб одного дня впевнитись в тому, що можу вже надалі робити щось дійсно уніклальне для кожного, і пишатись своїми роботами і собою. ДЯКУЮ!💫
@lizaprodesign Жыл бұрын
ОБІЙМАЮ І ДУЖЕ ДЯКУЮ ❤️
@user-ui3zo9wf6t Жыл бұрын
Дякую!
@lizaprodesign Жыл бұрын
Дякую за підтримку 😍
@lina_litl Жыл бұрын
Дуже цікаво. Дякую за відео
@lizaprodesign Жыл бұрын
Дякую за підтримку ❤️
@DariaChan Жыл бұрын
Дякую велике Такий якісний україномовний контент - то ван лав
@lizaprodesign Жыл бұрын
Дякую за підтримку ❤️
@user-zl7sf6os5m Ай бұрын
Дякую за відео, супер контент! Є два питання.1 так і не зрозуміла навіщо нижній прямокутник під анімацією? 2. чому може анімація притормажувати після кожного повороту, наче трішки завмирати на секунду, а не рухатись плавно?
@yun_zey966 Жыл бұрын
Привет) а для чего нужно ставить маску на эти три цвета?
@user-go9oh9ye1x Жыл бұрын
Підкажіть будь-ласка як ви переміщуєте відстань по одному пікселю? Що ви нажимаєте🙏
@alpha_17x Жыл бұрын
Як завжди, класне відео
@lizaprodesign Жыл бұрын
Дуже дякую! Обіймаю 😍
@user-pz6vg9wp1q Жыл бұрын
Юху! Я зробила і в мене вийшло! ❤дякую тобі велике! )) 🤗
@lizaprodesign Жыл бұрын
ДУУУУУЖЕ РАДА ❤
@ilyapanishchev5206 Жыл бұрын
Половину слов к сожалению не понимаю но для пирвого разу попробую сказати дюже дякую за сие гарные видео (сильно не ругайтесь)
@user-mj4zc8qd5t Жыл бұрын
Обожнюю твої відео🥰🥰
@lizaprodesign Жыл бұрын
Дякую дуже ❤️
@user-jx8zn6wl9j Жыл бұрын
Дуже гарно, Ліза! Цікаво було б побачити ваші інші роботи)) Підкажіть, як вас знайти на Біханс?
@lizaprodesign Жыл бұрын
Дуже дякую! 😍 У мене нема біханса)
@user-cc2nl6zk6w Жыл бұрын
Анімація вогонь!) Коли ти вчила автолеяуту - помітила що ти зробила tidy up перед тим як додати його - та це зайвий крок. Можна без нього жати на додавання автолеяуту =)
@lizaprodesign Жыл бұрын
Дякую ❤️
@user-km7rc3be3r Жыл бұрын
дуже цікаво😍
@lizaprodesign Жыл бұрын
Дяяякую ❤️
@NastyaSk-tu8zv Жыл бұрын
Скажіть будь ласка як подивитися відступи не на apple
@veronikabarankevych9926 Жыл бұрын
Якк красиивоооо вийшло 😍😍😍 !!!
@lizaprodesign Жыл бұрын
Обіймаю ❤
@alya_0_1 Жыл бұрын
Добрий день, я тільки починаю цьому навчатися і тому мабуть мої питання банальні, ахаха. А де ви вирізаєте фотографії від фону? Фотошоп наче платний. Чи є щось безкоштовне? Можливо плагіни якісь? Дякую за відповідь 💗
@kanevska2760 Жыл бұрын
Привіт! Сподіваюсь ще потрібно. Плагін Remove BG -видаляє задній фот фотографії ^^
@lizaprodesign Жыл бұрын
❤А на Patreon - www.patreon.com/lizkhl 📹 Мій lifestyle канал - kzfaq.info 📱tg канал - t.me/liza_pro_design
@olegivnaolegovna6472 Жыл бұрын
почала дивитися і вже вподобайки за українську! Молодець!
@lizaprodesign Жыл бұрын
Дяяякуууююю ❤️
@LilaStarzZzZ Жыл бұрын
а хіба посилання у меню зверху і текст на call to action не мають бути темнішими? є ж правило-на темному фоні світлий текст і навпаки
@lizaprodesign Жыл бұрын
Так, текст на CTA повинен бути темнішим, але в мене на екрані це виглядало темніше в оригіналі і не звернула увагу в процесі. Але завжди про це говорю у відео, тому вирішила через одну неуважність цілий відос не перезнімати
@ShelanMJ Жыл бұрын
я вчусь 3д, але Ваш матеріал також цікавий, дякую
@lizaprodesign Жыл бұрын
Ох 3д 😍
@olehpavlenko3638 Жыл бұрын
Цікаве відео, дякую. Сьогодні в мене від вашої сторіс світ перевернувся😆 Я то раніше думав, що це ваша доця, якось і одну ніч думав як у вас може бути така велика дочка, а сьогодні оказалось це ваша сестричка 🤣🤣
@lizaprodesign Жыл бұрын
Дяяякую! Мама Мія, у нас різниця 10 років аххах 😂😂😂😂
@olehpavlenko3638 Жыл бұрын
@@lizaprodesign Бувають різні ж ситуації. Наприклад в моєї однокласниці дочка пішла в перший клас, але там була запланована дитина, тому все окей. Я за вас на 2 рочки тільки старший) Все ж таки ніхто не застрахований від "факапів"🤷🙂
@user-dz4vp9vn9d Жыл бұрын
де ви берете іконки?
@user-yt1eh4gy3y Жыл бұрын
Ліза, те неймовірна молодець, дуже круте відео (чекай на новий дизайн від мене😅). Відео неймовірно цікаве❤❤❤❤ ти дуже надихаєш❤
@evgeniyperekhod9278 Жыл бұрын
Not bad, I wonder if the color of the menu and white paragraph text on light background will pass the Google minimum contrast requirements
@lizaprodesign Жыл бұрын
Yeah, it won't
@evgeniyperekhod9278 Жыл бұрын
@@lizaprodesign I would use dark font colors or different backgrounds
@anastasiiagunko7370 Жыл бұрын
Слежу за вашим каналом, очень нравится подача контента и то что делитесь своим опытом) Но я как лид-дизайнер, который постоянно делает ревью подобных макетов, не могу пройти мимо😅 Первое что очень бросается в глаза - плохой контраст выбранных пастельных оттенков для бекграунда и белого текста на нем. Сделайте тест на accessibility через плагин в фигме - эти цвета не пройдут. Не хватает баланса в отступах между элементами - в хиро секции текст и кнопка сильно прибиты друг к другу (+ такие длинные тайтлы в одну строчку тяжело читаются), во втором блоке отступы между карточками большие, а в следующем очень маленькие. Также в футере лейаут не очень гармонично выстроен. Обычно СТА элементы по типу подписки располагают справа, а линки сайта слева. Либо же можно было как-то выделить Stay Up To Date секцию, добавив подложку. Иконки соцсетей очень тяжелые получились - визуально они почти как инпуты, а линки сайта выглядят в сравнении очень мелко. Спасибо что показали возможности режима прототипа - многие дизы на это забивают❤🔥
@lizaprodesign Жыл бұрын
Дякую за Ваш коментар, але на цю тему можна сперечатись дуже довго. Тому не можу погодитись з Вашим коментарем, адже дизайн це штука така. На кожного ліда є лід зі своєю думкою, досвідом та баченням і це прекрасно 😍 Більше того, іконки соц сітей - це просто скрін з їх сайта, в відео я показую як вставляти секції які вже існують у клієнта швидко. Насправді багато що там з їх сайта (як тейтли в одну строку і тд. ) , бо фокус на іншому в цьому відео А там, як ви розумієте, свій лід 🙂
@anastasiiagunko7370 Жыл бұрын
@@lizaprodesign Так, дизайн в цілому звісно штука суб'єктивна. Але це не зовсім той випадок, адже ігнорується один із базових принципів в дизайні сайтів/інтерфейсів - принцип accessibility, який можна визначити об'єктивно за допомогою відповідних тулів. Про іконки та фокус в відео - ок, справедливо😉
@lizaprodesign Жыл бұрын
@@anastasiiagunko7370 погоджуюсь тільки з кольором CTA, але і це дві секунди змінити 🙂 , тому мабуть не углублялась в цей момент на зйомці. Адже це перший варіант без правок. Але не хвилюйтесь, я завжди кажу у відео, що таке СТА і яким кольором і з Якоб ціллю його роблять, так що мої підписники знають про це ❤️
@ira_miira Жыл бұрын
на потреоні оплата знімається завжди 1го числа незважаючи якого числа підписався?
@lizaprodesign Жыл бұрын
Привіт, так, така система у Патреона через те, що достаєш доступ до усього, що було за місяці одразу
@user-hs2bc4pq3h 4 ай бұрын
Я чи можливо цей дизайн вивести в html код ?
@user-dz4vp9vn9d Жыл бұрын
як доєднатись до курсу?
@VolPhickchannel Жыл бұрын
Гарне відео, як на мене в дизайні трішки проблема з контрастністю, деяким користувачам буде не комфортно)
@lizaprodesign Жыл бұрын
Та да, на кнопці так, помітила вже після зйомки. Знімаю за 40 хвилин увесь сайт і себе з вступами, і це перший драфт, ще не навчилась прям усе усе робити ідеально, саму це бісить 😞 Але не хвилюйтесь я завжди кажу про це, особливо про CTA а так кольори усі з офіційного сайту тільки
@forgetmenot2590 Жыл бұрын
Чому не відкривається посилання на патреон?😢
@itshirts Жыл бұрын
З аксесабіліті є проблємки)
@Design_video_web Жыл бұрын
Як подивитись відстані від елементів? Напривлад я хочу щоб всі елементи були 50 пікселів один від одного Було б класно як би Ви зняли коротеньке відео про це. Просто на відео видно як Ви це робите, але не зрозуміло як?
@justdiamond3437 Жыл бұрын
Привіт, нажимаєш на елемент від якого хочеш глянути відстань, наводиш курсором на той елемент до якого хочеш побачити відстань, та зажимаєш альт ( ну я так принаймні дивлюсь)
@LilaStarzZzZ Жыл бұрын
всетаки sold out трохи скруглила)
@lizaprodesign Жыл бұрын
Ахахах точно) значить перегляд уважний! Дякую 😄😄😄
@birthdaycake1841 Жыл бұрын
я не розумію, як можна мешити градієнти і переробляти колір кнопки з включеною сіткою, це анріл😂 я і в спокійному стані сітку роблю зразу сірою, шоб по очам не било, а ви прям cyborg🫣🦾
@lizaprodesign Жыл бұрын
Скажу чесно, найскладніше це знімати процес і розповідати.І світло ще в очі від лампи 😂 От коли це буду нормально робити, тоді буду кіборгом точно ахахах
@perfect_evil7961 Жыл бұрын
Дизайн аля шаблон 2000-х с envato =D
@FdoRovMiro Жыл бұрын
Варіант ДО був кращим)
@antonhrechynskyi3052 Жыл бұрын
лол, це дизайн якогось джуна, ви ж тільк псуєте наглядовість для тих хто вчится і потім вже люди роблять галімі реальні проекти які опускають український дизайн
@lizaprodesign Жыл бұрын
Дякую за коментар, завдяки Вам це відео подивляться більше людей 😍
@tonito4779 10 ай бұрын
Норм подруга, но не в мойом вкусє
Oscar's Funny World
Рет қаралды 138 МЛН
ЛІЗА ПРО ДИЗАЙН
Рет қаралды 15 М.
ЛІЗА ПРО ДИЗАЙН
Рет қаралды 7 М.
ЛІЗА ПРО ДИЗАЙН
Рет қаралды 10 М.
WAYUP & Андрій Гаврилов
Рет қаралды 2 МЛН