Designing an Epic 🐲 Dragon-Themed UI 😱😱 🔴 LIVE 🔴 Day 7 of 100 Days of UI
Unleash the power of creativity as we dive into Day 7 of the 100 Days of UI challenge with an Epic Dragon-Themed UI Design! 🐉✨ This session is packed with mythical inspiration and cutting-edge design techniques, perfect for bringing fantasy to life through user interfaces.
💥💥 Assets & Launch your own portfolio masterclass here: / discord 💥💥
Here’s what you’ll explore:
👤 Shadows in UI Design
🔴 Radial Gradients in UI Design
🐲 Mythical UI Concepts: Watch as we create a visually striking dragon-themed UI that’s both engaging and immersive.
💪🏻 Figma in Action: Learn advanced Figma techniques to design intricate and dynamic visual elements inspired by the world of dragons.
🔮 UI/UX Best Practices: Discover how to blend creativity with functionality, ensuring that your designs are as user-friendly as they are stunning.
🙋🏻 Live Interaction: Share your ideas, ask questions, and get instant feedback as we design together in real time.
Why watch? 🐉
📚 Expand Your Skills: Perfect for designers looking to infuse their work with bold, imaginative concepts.
😎 Creative Collaboration: Join a community of passionate designers and collaborate on exciting new ideas.
💡 Get Inspired: See how we transform mythical ideas into modern UI design, giving you fresh inspiration for your own projects.
Don’t miss out —join us live and let’s create something epic! 🚀🔥
🕐 TIMESTAMPS:
Intro - 00:00-00:56
Some Cool News 🔮 - 00:56-2:00
Fangirling over the details🤤 - 2:00-2:50
Demo - 02:50-03:07
Find your Assets and freebies here - 03:07-03:53
Download Figma - 03:53-04:32
Create new design file - 04:32-04:48
Create a new frame - 04:48-05:18
Adding a Radial Gradient for the background - 05:18-06:44
Adding images (from discord link in comments) - 06:44-08:02
Question: Where do I get my images? - 08:02-09:29
Question: Code your own portfolio UI Masterclass - 09:29-10:06
Adjust the radial gradient colors - 10:06-10:57
Position the main Image - 10:57:11:21
Creating the title and naming the dragon - 11:21-12:15
Using Font Family Fisterra - 12:15-12:24
Searching for fonts from Adobe Fonts - 12:24-12:36
Difference b/w the 2 types of Fisterra Fonts (Fora & Morte) - 12:36-13:10
Styling the title - 13:10-13:41
Question: How to add a custom font in Figma using Adobe Fonts ? - 13:41-14:57
Adding a description - 14:57-15:05
Using the Lorem Ipsum plugin in Figma - 15:05-15:37
Styling the description - 15:37-16:08
Styling the text (some more) - 16:08-16:22
Making Shadows - 16:22-17:27
Adding a Dragon carousel navigation - 17:27-17:53
Styling the Dragon carousel - 17:53-18:52
Duplicating the first frame - 18:52-18:57
Customizing the images for frame 2 - 18:57-20:21
Creating the shadow for the golden dragon - 20:21-20:37
Creating a custom blur style for all shadow - 20:37-20:57
Reposition the new shadow - 20:57-21:12
Changing the background colors of the radial gradient - 21:12-22:52
Duplicating the second frame - 22:52-23:08
Customizing the images for frame 3 - 23:08-23:50
Designing the shadow for the purple dragon - 23:21-25:05
Changing the background colors of the radial gradient - 25:05-25:39
Customizing the text in frames 2 & 3 - 25:39-29:29
Question: Is the Lorem Ipsum plugin in Figma free or paid? - 29:29-29:51
Alternatives to the Lorem Ipsum plugin - 29:51-30:16
Prototyping - 30:16-31:40
Presenting - 31:40-32:12
Fixing the shadow-animation glitch - 32:13-34:14
Making the dragon image carousel usable - 34:14-34:49
Final Prototype - 34:49-35:34
Sharing the final prototype - 35-34:36:20
Discord + how to get any assets you want - 36:20-37:04
Updates on the Launch your portfolio masterclass - 37:04-38:50
Outro - 39:50-39:12
Don't forget to share what you've made across social media with the #100DaysofUIwithVeera
Follow Me Around 🌐 :
Discord: / discord
#100DaysofUIwithVeera: • 100 Days of UI with Veera
Instagram: / veera.srivastava
X: https://x.com/VeeraSrivastava
Facebook: / veerasriv
Github: https://github.com/VeeraSrivastava
Website: https://devfasttt.com
#uidesigner #designer #uxdesigner #uidesigners #uxdesigner #uiuxdesigner #100daysofui #uxdesign #uiux #100dayschallenge #figma #webdesign #appdesign #gamedesign #100DaysofUIwithVeera #webdesign #webdev
