РОБИМО ТРЕНДОВИЙ АНІМОВАНИЙ ДИЗАЙН В FIGMA ( mesh градієнт, компоненти, скролінг…)
HTML-код
- Опубликовано: 2 июн 2024
- Як задизайнити класний сайт з трендовою меш градієнт анімацією у 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 - Дякую за перегляд!
Дякую за те що ти робиш, це надихає 🤗
ДЯЯЯКУУУЮЮЮ ❤️
Це просто неймовірно! Я дуже рада, що знайшла цей канал( той єдиний випадок, коли кажу «дякую» алгоритмам ютубу)
Дякую за твою працю і за такий доступний та НЕЙМОВІРНИЙ контент! Це вогонь! 🔥
МЕНІ ТАК ПРИЄЄЄМНОООО! ДЯЯЯЯКУУЮЮЮ ❤️
Було б дуже класно як би ти зробила прям все все по порядку, якими кнопками користуватися , шо де як робити. Просто більшість ( так як і я) прям з повного 0 починають , і ти намагаєшся зробити це швидко і не зрозуміло куди шо нажимати 🥹❤️
Відео буде довге, але дуже корисне!
Дякую, зрозуміла ❤️
Дуже рада українському контенту 🥰
Дякую за урок та натхнення 🥰✨
Кольори чудові, вже якийсь час хотіли використати схожу гамму, це відео стало закликом до дії👌
Дякую за підтримку ❤️
Насправді це і надихнуло, я зайшла на їх сайт, а там такі кольори 😍😍😍😍😍😍😍😍 і все, мене понесло. Хотілось чогось «доброго» хаха
Велика дяка за те що робите саме для початківців! 🙏 важко починати! Ти дуже допомогаешь! Дякую!
Привіт. Дякую за відео! Такі гарні кольори, підіймають настрій🙂 Знаю, що тут багато початківців, тому їм буде дуже корисно таке відео, але хотіла б запропонувати ідею зробити дизайн не лендінгу. Може онбордінг з анімацією, наприклад, або сайт-портфоліо. Знаю, що на це потрібно витратити більше часу, щоб придумати все. Але просто як ідея) в будь-якому разі дякую за регулярні корисні відео для дизайнерів! Це дійсно надихає ♥️
Привііііт!
Дякую дуже, так так - ідея клас. Роблю більше лендосів, бо це якщо так подумати один з найскладніших, та найпопулярних видів сайту, особливо якщо тестове. Плюс можна багато що показати 🙂
Але ідея клас, щось придумаю ❤ Обіймаааю
Ви неймовірна! Дякую за крутий контент ❤ дуже щаслива, що знайшла вас 🤗
Легко, доступно та головне - запам'ятовується! Дякую)
Привіт! Дякую за такий чудовий відео-урок, це просто вау 😍
Таке надихаюче відео, що я аж оформила подібно свій перший кейс! Дякую! 😘
Як завжди, дуже гарне відео, Лізочка, дякую тобі та бажаю усього найкращого 💜
Дякую, Вам також ❤️
❤💛💙просто неймовірно! Дякую за цікавий і корисний відео-урок, ну прям дуже...💜 як раз в тему, вивчаю анімацію у фігмі.😎 Просто і доступно.💜
Супер! Видно, що ти справжній майстер своєї справи. Хочу теж так вміти)) Дякую!
Було б круто, якщо б Ви зняли відео про те як правильно виконувати та презентувати тестові завдання 🙏
круто вийшло! хочу вже дійти до того рівня, аби за 30 хв генерувати і кріейтити дизайн)) до речі цікаво було б подивитись відео огляд плагінів, які найчастіше юзаєш)
Дякую за швидкий та зрозумілий т'юторіал)
Дуже круто, надихаюче. Продовжуйте! )))
Дзякуй за файнае і карыснае відэа, вельмі прыемна глядзець і ўвесь час пазнаваць нешта новае!)
Ваш спосіб створення mesh gradient виглядає набагато швидшим і практичнішим, ніж той, який використовую я. Дякую, що поділились. Також ніколи ще не користувалась шрифтом Avenir. Спробую.
Дуже рада! Обіймаю ❤️
Ліза,золотко,дякую!!!!шукала щость на кшталт цього!!!💖💖💖💖💖💖💖💖💖💖💖💖💖💖
Запишите пожалуйста видео о UX, очень хочется понять порядок работы. Спасибо за ваш труд.
Можно еще уроков про дизайн
💋так тебя люблю 💋
Дуже крутий урок, як завжди! дякую
Дякую за підтримку ❤️
Лиза, круто). Молодчага
Привіт, булоб класно побачити як ти робиш дизайн застосунку. Особливо ux
Дякую за відео, вже зробила дизайн 🫶🫶🫶
ОООО! Це рівень ❤️
Дуже круто, дякую!❤
Дякую за підтримку ❤️
Дякую за відео, але в мене два запитання.. Чому там де блок new arrivals справа дуже близько до границі?
ще цікаво чому ви робите ширину сторінки 1440px, а не 1920. Та хотілось би узнати - ця анімація лише для демонстрації, чи це практично для frontend? дякую
Дуже дякую 💘
Мені здається, такий градієнт можна використовувати в багатьох тематиках, просто потрібно гратися з динамікою анімації та кольорами. Обожнюю твої уроки 💥
Дяяякую за підтримку ❤️ Тааак, це навіть і ціль цього відео, показати саме його і надихнути на градієнт
Почерпнула для себе пастельні відтінки, з ними потрібно спробувати погратись, надзвичайно естетично виглядає) а також фон зі smart animation, обов'язково реалізую подібне в наступному дизайні. Спасибі тобі❤
Дяяяякуууююю ❤️ Дуж рада!
Ліза, підкажіть будь ласка як таку анімацю передавати для програмістів, на верстку? Дякую
знаєш, ти дуже легко доносиш інформацію новачкам (це я), рідко помічала щось награне в процесі твоєї роботи
мені подобається атмосфера твоїх відеоуроків 🥰
і як пишуть нижче в коментарях - ти таки надихаєш на поступове, ненапряжне створення початкових легеньких сайтів, щоб одного дня впевнитись в тому, що можу вже надалі робити щось дійсно уніклальне для кожного, і пишатись своїми роботами і собою.
ДЯКУЮ!💫
ОБІЙМАЮ І ДУЖЕ ДЯКУЮ ❤️
Дякую!
Дякую за підтримку 😍
Дуже цікаво. Дякую за відео
Дякую за підтримку ❤️
Дякую велике
Такий якісний україномовний контент - то ван лав
Дякую за підтримку ❤️
Дякую за відео, супер контент! Є два питання.1 так і не зрозуміла навіщо нижній прямокутник під анімацією? 2. чому може анімація притормажувати після кожного повороту, наче трішки завмирати на секунду, а не рухатись плавно?
Привет) а для чего нужно ставить маску на эти три цвета?
Підкажіть будь-ласка як ви переміщуєте відстань по одному пікселю? Що ви нажимаєте🙏
Як завжди, класне відео
Дуже дякую! Обіймаю 😍
Юху! Я зробила і в мене вийшло! ❤дякую тобі велике! )) 🤗
ДУУУУУЖЕ РАДА ❤
Половину слов к сожалению не понимаю но для пирвого разу попробую сказати дюже дякую за сие гарные видео (сильно не ругайтесь)
Обожнюю твої відео🥰🥰
Дякую дуже ❤️
Дуже гарно, Ліза! Цікаво було б побачити ваші інші роботи)) Підкажіть, як вас знайти на Біханс?
Дуже дякую! 😍
У мене нема біханса)
Анімація вогонь!)
Коли ти вчила автолеяуту - помітила що ти зробила tidy up перед тим як додати його - та це зайвий крок. Можна без нього жати на додавання автолеяуту =)
Дякую ❤️
дуже цікаво😍
Дяяякую ❤️
Скажіть будь ласка як подивитися відступи не на apple
Якк красиивоооо вийшло 😍😍😍 !!!
Обіймаю ❤
Добрий день, я тільки починаю цьому навчатися і тому мабуть мої питання банальні, ахаха.
А де ви вирізаєте фотографії від фону? Фотошоп наче платний. Чи є щось безкоштовне? Можливо плагіни якісь? Дякую за відповідь 💗
Привіт! Сподіваюсь ще потрібно. Плагін Remove BG -видаляє задній фот фотографії ^^
❤А на Patreon - www.patreon.com/lizkhl
📹 Мій lifestyle канал - ruclips.net/user/LizaKhlopkova
📱tg канал - t.me/liza_pro_design
почала дивитися і вже вподобайки за українську! Молодець!
Дяяякуууююю ❤️
а хіба посилання у меню зверху і текст на call to action не мають бути темнішими? є ж правило-на темному фоні світлий текст і навпаки
Так, текст на CTA повинен бути темнішим, але в мене на екрані це виглядало темніше в оригіналі і не звернула увагу в процесі. Але завжди про це говорю у відео, тому вирішила через одну неуважність цілий відос не перезнімати
я вчусь 3д, але Ваш матеріал також цікавий, дякую
Ох 3д 😍
Цікаве відео, дякую. Сьогодні в мене від вашої сторіс світ перевернувся😆 Я то раніше думав, що це ваша доця, якось і одну ніч думав як у вас може бути така велика дочка, а сьогодні оказалось це ваша сестричка 🤣🤣
Дяяякую! Мама Мія, у нас різниця 10 років аххах 😂😂😂😂
@@lizaprodesign Бувають різні ж ситуації. Наприклад в моєї однокласниці дочка пішла в перший клас, але там була запланована дитина, тому все окей. Я за вас на 2 рочки тільки старший) Все ж таки ніхто не застрахований від "факапів"🤷🙂
де ви берете іконки?
Ліза, те неймовірна молодець, дуже круте відео (чекай на новий дизайн від мене😅). Відео неймовірно цікаве❤❤❤❤ ти дуже надихаєш❤
Not bad, I wonder if the color of the menu and white paragraph text on light background will pass the Google minimum contrast requirements
Yeah, it won't
@@lizaprodesign I would use dark font colors or different backgrounds
Слежу за вашим каналом, очень нравится подача контента и то что делитесь своим опытом) Но я как лид-дизайнер, который постоянно делает ревью подобных макетов, не могу пройти мимо😅 Первое что очень бросается в глаза - плохой контраст выбранных пастельных оттенков для бекграунда и белого текста на нем. Сделайте тест на accessibility через плагин в фигме - эти цвета не пройдут. Не хватает баланса в отступах между элементами - в хиро секции текст и кнопка сильно прибиты друг к другу (+ такие длинные тайтлы в одну строчку тяжело читаются), во втором блоке отступы между карточками большие, а в следующем очень маленькие. Также в футере лейаут не очень гармонично выстроен. Обычно СТА элементы по типу подписки располагают справа, а линки сайта слева. Либо же можно было как-то выделить Stay Up To Date секцию, добавив подложку. Иконки соцсетей очень тяжелые получились - визуально они почти как инпуты, а линки сайта выглядят в сравнении очень мелко.
Спасибо что показали возможности режима прототипа - многие дизы на это забивают❤🔥
Дякую за Ваш коментар, але на цю тему можна сперечатись дуже довго.
Тому не можу погодитись з Вашим коментарем, адже дизайн це штука така.
На кожного ліда є лід зі своєю думкою, досвідом та баченням і це прекрасно 😍
Більше того, іконки соц сітей - це просто скрін з їх сайта, в відео я показую як вставляти секції які вже існують у клієнта швидко.
Насправді багато що там з їх сайта (як тейтли в одну строку і тд. ) , бо фокус на іншому в цьому відео
А там, як ви розумієте, свій лід 🙂
@@lizaprodesign Так, дизайн в цілому звісно штука суб'єктивна. Але це не зовсім той випадок, адже ігнорується один із базових принципів в дизайні сайтів/інтерфейсів - принцип accessibility, який можна визначити об'єктивно за допомогою відповідних тулів.
Про іконки та фокус в відео - ок, справедливо😉
@@anastasiiagunko7370 погоджуюсь тільки з кольором CTA, але і це дві секунди змінити 🙂 ,
тому мабуть не углублялась в цей момент на зйомці.
Адже це перший варіант без правок.
Але не хвилюйтесь, я завжди кажу у відео, що таке СТА і яким кольором і з Якоб ціллю його роблять, так що мої підписники знають про це ❤️
на потреоні оплата знімається завжди 1го числа незважаючи якого числа підписався?
Привіт, так, така система у Патреона через те, що достаєш доступ до усього, що було за місяці одразу
Я чи можливо цей дизайн вивести в html код ?
як доєднатись до курсу?
Гарне відео, як на мене в дизайні трішки проблема з контрастністю, деяким користувачам буде не комфортно)
Та да, на кнопці так, помітила вже після зйомки. Знімаю за 40 хвилин увесь сайт і себе з вступами, і це перший драфт, ще не навчилась прям усе усе робити ідеально, саму це бісить 😞
Але не хвилюйтесь я завжди кажу про це, особливо про CTA
а так кольори усі з офіційного сайту тільки
Чому не відкривається посилання на патреон?😢
З аксесабіліті є проблємки)
Як подивитись відстані від елементів?
Напривлад я хочу щоб всі елементи були 50 пікселів один від одного
Було б класно як би Ви зняли коротеньке відео про це.
Просто на відео видно як Ви це робите, але не зрозуміло як?
Привіт, нажимаєш на елемент від якого хочеш глянути відстань, наводиш курсором на той елемент до якого хочеш побачити відстань, та зажимаєш альт ( ну я так принаймні дивлюсь)
всетаки sold out трохи скруглила)
Ахахах точно) значить перегляд уважний! Дякую 😄😄😄
я не розумію, як можна мешити градієнти і переробляти колір кнопки з включеною сіткою, це анріл😂 я і в спокійному стані сітку роблю зразу сірою, шоб по очам не било, а ви прям cyborg🫣🦾
Скажу чесно, найскладніше це знімати процес і розповідати.І світло ще в очі від лампи 😂 От коли це буду нормально робити, тоді буду кіборгом точно ахахах
Дизайн аля шаблон 2000-х с envato =D
Варіант ДО був кращим)
лол, це дизайн якогось джуна, ви ж тільк псуєте наглядовість для тих хто вчится і потім вже люди роблять галімі реальні проекти які опускають український дизайн
Дякую за коментар, завдяки Вам це відео подивляться більше людей 😍
Норм подруга, но не в мойом вкусє